Доработка страницы плейлиста

- исправлена ширина левой колонки
- добавлен вывод доп. атрибутов плейлиста из #EXTM3U
- id плейлиста в заголовке страницы

src/views/details.twig

@@ -1,6 +1,6 @@
 {% extends "template.twig" %}
 
-{% block title %}{{ name }} - {{ config('app.title') }}{% endblock %}
+{% block title %}[{{ id }}] {{ name }} - {{ config('app.title') }}{% endblock %}
 
 {% block head %}
     <style>
@@ -13,7 +13,7 @@
 {% endblock %}
 
 {% block header %}
-    <h2>О плейлисте {{ name }}</h2>
+    <h2>О плейлисте: {{ name }}</h2>
     {% if (content.encoding.alert) %}
         <div class="alert alert-warning small" role="alert">
             Кодировка исходного плейлиста отличается от UTF-8.
@@ -37,12 +37,12 @@
 
 {% block content %}
     <div class="row">
-        <div class="col-md-6">
+        <div class="col-lg-7">
-            <table class="table table-dark table-hover small">
+            <table class="table table-dark table-hover small mb-lg-5">
                 <tbody>
                 <tr>
-                    <td class="w-25">ID</td>
+                    <th class="w-25" scope="row">ID</th>
-                    <td>
+                    <td class="text-break">
                         <code>{{ id }}</code>&nbsp;{% if status.possibleStatus == 'online' %}
                         <span class="badge small text-dark bg-success">online</span>
                     {% elseif status.possibleStatus == 'offline' %}
@@ -55,30 +55,44 @@
                     </td>
                 </tr>
                 <tr>
-                    <td>Описание</td>
+                    <th scope="row">Описание</th>
-                    <td><p>{{ desc }}</p></td>
+                    <td class="text-break"><p>{{ desc }}</p></td>
                 </tr>
                 <tr>
-                    <td><b>Ccылка для ТВ</b></td>
+                    <th scope="row">Ccылка для ТВ</th>
                     <td><b onclick="prompt('Скопируй адрес плейлиста', '{{ url }}')"
                            data-bs-toggle="tooltip"
                            data-bs-placement="top"
                            title="Нажми на ссылку, чтобы скопировать её в буфер обмена"
-                           class="font-monospace cursor-pointer">{{ url }}</b></td>
+                           class="font-monospace cursor-pointer text-break">{{ url }}</b></td>
                 </tr>
                 <tr>
-                    <td>M3U</td>
+                    <th scope="row">M3U</th>
-                    <td>{{ pls }}</td>
+                    <td class="text-break">{{ pls }}</td>
                 </tr>
                 <tr>
-                    <td>Источник</td>
+                    <th scope="row">Источник</th>
-                    <td>{{ src }}</td>
+                    <td class="text-break">{{ src }}</td>
                 </tr>
                 </tbody>
             </table>
+
+            {% if (content.attributes) %}
+            <h4>Дополнительные атрибуты</h4>
+            <table class="table table-dark table-hover small">
+                <tbody>
+                {% for attribute,value in content.attributes %}
+                    <tr>
+                        <th class="w-25" scope="row">{{ attribute }}</th>
+                        <td class="text-break">{{ value }}</td>
+                    </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+            {% endif %}
         </div>
 
-        <div class="col-md-6">
+        <div class="col-lg-5">
             <h4>Список каналов ({{ content.channelCount ?? 0 }})</h4>
             {% if (content.channelCount > 0) %}
             <div id="chlist">
@@ -106,7 +120,7 @@
                                         title="Логотип канала '{{ channel.name }}'"
                                     />
                                 </td>
-                                <td class="chname">{{ channel.name }}</td>
+                                <td class="chname text-break">{{ channel.name }}</td>
                             </tr>
                         {% endfor %}
                         </tbody>

src/views/faq.twig

@@ -16,6 +16,10 @@
                 видео/аудио потоков, программ телепередач, плейлистов и их поддержки. Этим занимаются администраторы
                 ресурсов, указанные как источник, и те, с чьих ресурсов ведётся трансляция.
             </p>
+            <p>
+                За содержимое плейлистов и их качество отвечают авторы плейлистов. На стороне сервиса управляются сами
+                плейлисты.
+            </p>
             <p class="mb-5">
                 Сервис "{{ config('app.title') }}" ({{ base_url() }}) предоставляет только информацию об активности
                 плейлистов, найденных в открытом доступе, и короткие ссылки на них для удобства использования в ПО.
@@ -24,8 +28,26 @@
             </p>
 
             <div class="accordion" id="faq-accordion">
-                <div class="accordion-item bg-dark">
+                <div class="accordion-item bg-dark text-light">
-                    <h2 class="accordion-header bg-dark" id="h-howtouse">
+                    <h2 class="accordion-header" id="h-purpose">
+                        <button class="accordion-button text-light bg-dark" type="button" data-bs-toggle="collapse" data-bs-target="#purpose" aria-expanded="false" aria-controls="purpose">
+                            Для чего нужен сервис?
+                        </button>
+                    </h2>
+                    <div id="purpose" class="accordion-collapse collapse" aria-labelledby="h-purpose" data-bs-parent="#faq-accordion">
+                        <div class="accordion-body">
+                            <p>Изначально сервис создавался "для себя", чтобы:</p>
+                            <ul>
+                                <li>сократить ссылки на сторонние плейлисты и их было проще вводить с пульта;</li>
+                                <li>собрать в одном месте наиболее годные плейлисты.</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                </div>
+
+                <div class="accordion-item bg-dark text-light">
+                    <h2 class="accordion-header" id="h-howtouse">
                         <button class="accordion-button text-light bg-dark" type="button" data-bs-toggle="collapse" data-bs-target="#howtouse" aria-expanded="false" aria-controls="howtouse">
                             Как пользоваться сервисом?
                         </button>
@@ -42,7 +64,8 @@
                         </p>
                     </div>
                 </div>
-                <div class="accordion-item bg-dark">
+
+                <div class="accordion-item bg-dark text-light">
                     <h2 class="accordion-header bg-dark" id="h-howtoconnect">
                         <button class="accordion-button text-light bg-dark" type="button" data-bs-toggle="collapse" data-bs-target="#howtoconnect" aria-expanded="false" aria-controls="howtoconnect">
                             Как подключить плейлист?
@@ -55,17 +78,35 @@
                         </p>
                     </div>
                 </div>
-                <div class="accordion-item bg-dark">
+
+                <div class="accordion-item bg-dark text-light">
                     <h2 class="accordion-header bg-dark" id="h-isitfree">
                         <button class="accordion-button text-light bg-dark" type="button" data-bs-toggle="collapse" data-bs-target="#isitfree" aria-expanded="false" aria-controls="isitfree">
                             Эти плейлисты и каналы в них -- бесплатны?
                         </button>
                     </h2>
                     <div id="isitfree" class="accordion-collapse collapse" aria-labelledby="h-isitfree" data-bs-parent="#faq-accordion">
-                        <p class="accordion-body">Возможно. По крайней мере, так утверждают источники. Но гарантий никаких никто не даёт.</p>
+                        <p class="accordion-body">
+                            Возможно. По крайней мере, так утверждают источники. Но гарантий никаких никто не даёт.
+                        </p>
                     </div>
                 </div>
-                <div class="accordion-item bg-dark">
+
+                <div class="accordion-item bg-dark text-light">
+                    <h2 class="accordion-header" id="h-logos">
+                        <button class="accordion-button text-light bg-dark" type="button" data-bs-toggle="collapse" data-bs-target="#logos" aria-expanded="false" aria-controls="logos">
+                            Откуда берутся логотипы каналов и программы передач?
+                        </button>
+                    </h2>
+                    <div id="logos" class="accordion-collapse collapse" aria-labelledby="h-logos" data-bs-parent="#faq-accordion">
+                        <p class="accordion-body">
+                            Всё это (не) указывается внутри плейлиста его авторами.
+                            Но в некоторых плеерах можно вручную указывать программу передач (см. ниже).
+                        </p>
+                    </div>
+                </div>
+
+                <div class="accordion-item bg-dark text-light">
                     <h2 class="accordion-header bg-dark" id="h-which">
                         <button class="accordion-button text-light bg-dark" type="button" data-bs-toggle="collapse" data-bs-target="#which" aria-expanded="false" aria-controls="which">
                             Какие плейлисты попадают сюда?
@@ -88,7 +129,8 @@
                         </div>
                     </div>
                 </div>
-                <div class="accordion-item bg-dark">
+
+                <div class="accordion-item bg-dark text-light">
                     <h2 class="accordion-header bg-dark" id="h-statuses">
                         <button class="accordion-button text-light bg-dark" type="button" data-bs-toggle="collapse" data-bs-target="#statuses" aria-expanded="false" aria-controls="statuses">
                             Что означают статусы плейлистов?
@@ -123,7 +165,8 @@
                         </div>
                     </div>
                 </div>
-                <div class="accordion-item bg-dark">
+
+                <div class="accordion-item bg-dark text-light">
                     <h2 class="accordion-header bg-dark" id="h-donttrust">
                         <button class="accordion-button text-light bg-dark" type="button" data-bs-toggle="collapse" data-bs-target="#donttrust" aria-expanded="false" aria-controls="donttrust">
                             Почему нельзя доверять результатам проверки?
@@ -145,7 +188,8 @@
                         </div>
                     </div>
                 </div>
-                <div class="accordion-item bg-dark">
+
+                <div class="accordion-item bg-dark text-light">
                     <h2 class="accordion-header bg-dark" id="h-guarantee">
                         <button class="accordion-button text-light bg-dark" type="button" data-bs-toggle="collapse" data-bs-target="#guarantee" aria-expanded="false" aria-controls="guarantee">
                             Какова гарантия, что я добавлю себе плейлист отсюда и он работать хоть сколько-нибудь долго?
@@ -163,7 +207,19 @@
                         </p>
                     </div>
                 </div>
-                <div class="accordion-item bg-dark">
+
+                <div class="accordion-item bg-dark text-light">
+                    <h2 class="accordion-header" id="h-panic">
+                        <button class="accordion-button text-warning bg-dark" type="button" data-bs-toggle="collapse" data-bs-target="#panic" aria-expanded="false" aria-controls="panic">
+                            У меня перестал работать/исчез любимый канал/плейлист! Нет лого канала/программы передач!
+                        </button>
+                    </h2>
+                    <div id="panic" class="accordion-collapse collapse" aria-labelledby="h-panic" data-bs-parent="#faq-accordion">
+                        <p class="accordion-body">Ну штош ¯\_(ツ)_/¯</p>
+                    </div>
+                </div>
+
+                <div class="accordion-item bg-dark text-light">
                     <h2 class="accordion-header bg-dark" id="h-epg">
                         <button class="accordion-button text-light bg-dark" type="button" data-bs-toggle="collapse" data-bs-target="#epg" aria-expanded="false" aria-controls="epg">
                             Где взять программу передач (EPG)?
@@ -179,10 +235,11 @@
                         </div>
                     </div>
                 </div>
-                <div class="accordion-item bg-dark">
+
+                <div class="accordion-item bg-dark text-light">
                     <h2 class="accordion-header bg-dark" id="h-howoftenlist">
                         <button class="accordion-button text-light bg-dark" type="button" data-bs-toggle="collapse" data-bs-target="#howoftenlist" aria-expanded="false" aria-controls="howoftenlist">
-                            Как часто обновляется этот список?
+                            Как часто обновляется список плейлистов?
                         </button>
                     </h2>
                     <div id="howoftenlist" class="accordion-collapse collapse" aria-labelledby="h-howoftenlist" data-bs-parent="#faq-accordion">
@@ -193,7 +250,8 @@
                         </p>
                     </div>
                 </div>
-                <div class="accordion-item bg-dark">
+
+                <div class="accordion-item bg-dark text-light">
                     <h2 class="accordion-header bg-dark" id="h-howoftench">
                         <button class="accordion-button text-light bg-dark" type="button" data-bs-toggle="collapse" data-bs-target="#howoftench" aria-expanded="false" aria-controls="howoftench">
                             Как часто обновляется содержимое плейлистов?
@@ -205,7 +263,8 @@
                         </p>
                     </div>
                 </div>
-                <div class="accordion-item bg-dark">
+
+                <div class="accordion-item bg-dark text-light">
                     <h2 class="accordion-header bg-dark" id="h-api">
                         <button class="accordion-button text-light bg-dark" type="button" data-bs-toggle="collapse" data-bs-target="#api" aria-expanded="false" aria-controls="api">
                             Есть ли API? Как им пользоваться?
@@ -217,7 +276,8 @@
                         </p>
                     </div>
                 </div>
-                <div class="accordion-item bg-dark">
+
+                <div class="accordion-item bg-dark text-light">
                     <h2 class="accordion-header bg-dark" id="h-howtoadd">
                         <button class="accordion-button text-light bg-dark" type="button" data-bs-toggle="collapse" data-bs-target="#howtoadd" aria-expanded="false" aria-controls="howtoadd">
                             Как пополнить этот список?
@@ -230,6 +290,7 @@
                         </p>
                     </div>
                 </div>
+
             </div>
         </div>
     </div>

src/views/template.twig

@@ -55,7 +55,7 @@
             </nav>
         </header>
 
-        <section class="container-fluid h-100 pt-lg-3 px-0 pb-0">
+        <section class="container h-100 pt-lg-3 px-0 pb-0">
             {% block header %}{% endblock %}
             {% block content %}{% endblock %}
         </section>