Оптимизация списка каналов и поиска + мелочи по текстовкам

app/Core/Bot.php

@@ -216,7 +216,7 @@ class Bot
             }
         }
 
-        $replyText[] = "🔗 *Ссылка для ТВ:* \(скопируй подходящую\)";
+        $replyText[] = "🔗 *Короткая ссылка:* \(скопируй подходящую\)";
         if (config('app.mirror_url')) {
             $replyText[] = '\- `' . mirror_url("$code") . '`';
             $replyText[] = '\- `' . mirror_url("$code.m3u") . '`';

app/Core/TwigExtention.php

@@ -10,6 +10,7 @@ declare(strict_types=1);
 namespace App\Core;
 
 use Twig\Extension\AbstractExtension;
+use Twig\TwigFilter;
 use Twig\TwigFunction;
 
 /**
@@ -33,6 +34,17 @@ class TwigExtention extends AbstractExtension
         ];
     }
 
+    /**
+     * @inheritDoc
+     * @noinspection PhpUnused
+     */
+    public function getFilters(): array
+    {
+        return [
+            new TwigFilter('values', [$this, 'arrayValues']),
+        ];
+    }
+
     /**
      * Возвращает значение из конфига
      *
@@ -88,4 +100,9 @@ class TwigExtention extends AbstractExtension
     {
         return $timestamp === null ? '' : date($format, (int)$timestamp);
     }
+
+    public function arrayValues($value, ...$args)
+    {
+        return is_array($value) ? array_values($value) : $value;
+    }
 }

views/details.twig

@@ -31,11 +31,6 @@
 
 {% block header %}
     <h2>О плейлисте: {{ playlist.name }}</h2>
-    {% if playlist.isOnline is same as (false) %}
-        <div class="alert alert-danger small" role="alert">
-            Ошибка плейлиста: {{ playlist.content }}
-        </div>
-    {% endif %}
 {% endblock %}
 
 {% block content %}
@@ -101,7 +96,7 @@
                             <td class="text-break"><p class="mb-0">{{ playlist.description }}</p></td>
                         </tr>
                         <tr>
-                            <th scope="row">Ccылка для ТВ</th>
+                            <th scope="row">Короткая ссылка</th>
                             <td>
                                 <span onclick="copyPlaylistUrl('{{ playlist.code }}')"
                                       class="cursor-pointer"
@@ -243,26 +238,11 @@
                     </p>
                     <p class="my-3">
                         Все права на торговые марки и графические изображения принадлежат их законным владельцам.
-                        Если вы являетесь правообладателем и считаете, что сведения на этой странице затрагивают ваши
+                        Если вы являетесь правообладателем и считаете, что сведения на этой странице затрагивают ваши права, вы можете направить конфиденциальное уведомление на адрес abuse@m3u.su.
-                        права, вот какие меры вы можете предпринять прямо сейчас:
+                    </p>
+                    <p class="my-3">
+                        Плейлисты, нарушающие законодательство, удаляются с сайта окончательно по факту обращения от правообладателя.
                     </p>
-                    <ul>
-                        <li>
-                            создать pull-request в открытом репозитории проекта с удалением данных о плейлисте из файла
-                            <a href="{{ config('app.repo_url') }}/playlists/src/branch/master/playlists.ini"
-                               target="_blank"
-                            >playlists.ini</a>, указав в комментарии к коммиту юридически значимую информацию;
-                        </li>
-                        <li>
-                            <a href="{{ config('app.repo_url') }}/playlists/issues/new" target="_blank">создать
-                            публичное обращение</a> в открытом репозитории проекта, указав юридически значимую
-                            информацию;
-                        </li>
-                        <li>
-                            направить конфиденциальное уведомление на адрес:
-                            <a href="mailto:abuse@m3u.su" target="_blank">abuse@m3u.su</a>.
-                        </li>
-                    </ul>
                 </div>
             </div>
         </div>
@@ -273,12 +253,10 @@
                 {% if (playlist.groups|length > 1) %}
                 <div class="row my-3">
                     <div class="col-12">
-                        {% if (playlist.channels|length >= 500) %}
+                        {% if (playlist.channels|length > 100) %}
-                            <div class="alert alert-warning small" role="alert" id="toomuchalert">
+                            <div class="alert alert-warning small" role="alert" id="chListLoading">
-                                <div class="spinner-border text-success spinner-border-sm" role="status">
+                                <div class="spinner-border text-success spinner-border-sm" role="status"></div>
-                                    <span class="visually-hidden">Загрузка...</span>
+                                Загрузка...
-                                </div>
-                                В плейлисте очень много каналов. На загрузку их списка и логотипов потребуется некоторое время.
                             </div>
                         {% endif %}
                         <div class="input-group">
@@ -386,175 +364,166 @@
                 <div class="chlist-table overflow-auto">
                     <table id="chlist" class="table table-dark table-hover small">
                         <tbody class="list">
-                        {% for channel in playlist.channels %}
-                        <tr class="chrow"
-                            data-id="{{ channel.id }}"
-                            data-group="{{ channel.groupId ?? 'all' }}"
-                            data-online="{{ channel.isOnline ? 1 : 0 }}"
-                            data-chtags="{{ channel.tags|join('|') }}"
-                            title="&#010;HTTP: {{ channel.status ?: '(неизвестно)' }}&#010;Error: {{ channel.error ?: '(нет)' }}"
-                        >
-                            <td class="chindex">{{ loop.index }}</td>
-
-                            <td class="chlogo text-center">
-                                {% if (channel.attributes['tvg-logo']) %}
-                                <img class="tvg-logo"
-                                     alt="Логотип канала '{{ channel.title }}'"
-                                     title="Логотип канала '{{ channel.title }}'"
-                                     src="{{ channel.attributes['tvg-logo'] }}"
-                                     onerror="setDefaultLogo(this)"
-                                />
-                                {% else %}
-                                <img class="tvg-logo"
-                                     alt="Нет логотипа для канала '{{ channel.title }}'"
-                                     title="Нет логотипа для канала '{{ channel.title }}'"
-                                     src="/no-tvg-logo.png"
-                                />
-                                {% endif %}
-                            </td>
-
-                            <td class="text-break">
-                                {% if channel.isOnline is same as (true) %}
-                                <ion-icon name="radio-button-on-outline"
-                                          class="cursor-help me-1 text-success"
-                                          title="Состояние: онлайн (возможно, работает прямо сейчас)"
-                                ></ion-icon>
-                                {% else %}
-                                <ion-icon name="radio-button-on-outline"
-                                          class="cursor-help me-1 text-danger"
-                                          title="Состояние: оффлайн (не работал в момент проверки или не удалось проверить)"
-                                ></ion-icon>
-                                {% endif %}
-
-                                {% if "adult" in channel.tags %}
-                                <span class="badge small bg-warning text-dark"
-                                      title="Канал для взрослых!"
-                                >18+</span>
-                                {% endif %}
-
-                                {% if channel.hasToken is same as (true) %}
-                                <span class="cursor-help badge small bg-info text-dark"
-                                      title="Может быть нестабилен"
-                                >
-                                    <ion-icon name="paw"></ion-icon>
-                                </span>
-                                {% endif %}
-
-                                <span class="chname">{{ channel.title }}</span>
-
-                                <div class="text-secondary small">
-                                    {% if (channel.attributes['tvg-id']) %}
-                                    <div title="Идентификатор канала для телепрограммы (tvg-id)" class="cursor-help">
-                                        <ion-icon name="star-outline" class="me-1"></ion-icon>&nbsp;{{ channel.attributes['tvg-id'] }}
-                                    </div>
-                                    {% endif %}
-
-                                    {% if (channel.contentType != null) %}
-                                    <div title="Тип контента (mime-type)" class="cursor-help">
-                                        <ion-icon name="eye-outline" class="me-1"></ion-icon>&nbsp;{{ channel.contentType }}
-                                    </div>
-                                    {% endif %}
-
-                                    {% if channel.tags|length > 0 %}
-                                    <ion-icon name="pricetag-outline"
-                                              class="cursor-help me-1"
-                                              title="Теги"
-                                    ></ion-icon>
-                                        {% for tag in channel.tags %}
-                                        <span class="chtag">#{{ tag }}</span>
-                                        {% endfor %}
-                                    {% endif %}
-                                </div>
-                            </td>
-                        </tr>
-                        {% endfor %}
                         </tbody>
                     </table>
                 </div>
+            {% elseif playlist.isOnline is same as (false) %}
+                <div class="alert alert-danger small" role="alert">
+                    Ошибка плейлиста: {{ playlist.content }}
+                </div>
+            {% elseif playlist.isOnline is same as (null) %}
+                <div class="alert alert-warning small" role="alert" id="chListLoading">
+                    Список каналов сейчас неизвестен: плейлист ещё не проверялся, либо данные о последней проверке потеряли актуальность.
+                    <br><br>
+                    Вернитесь на эту страницу позже. Каналы будут известны, когда плейлист будет в статусе online.
+                </div>
             {% endif %}
         </div>
     </div>
 {% endblock %}
 
 {% block footer %}
-<script src="/js/list.min.js"></script>
+    {% if playlist.isOnline is same as (true) %}
-<script>
+    <script src="/js/list.min.js"></script>
-    const options = {
+    <script>
-        valueNames: [
+        function getChannelTemplate(channel) {
-            'chname',
+            const httpCode = channel.status ?? '(неизвестно)'
-            {data: ['online', 'group', 'tag', 'chtags']}
+            const errText = !!channel.error
-        ],
+                ? channel.error.replace(/&/g, '&amp;')
-    };
+                    .replace(/</g, '&lt;')
+                    .replace(/>/g, '&gt;')
+                    .replace(/"/g, '&quot;')
+                    .replace(/'/g, '&#39;')
+                : '(нет)'
 
-    const list = new List('chlist', options)
+            const logoUrl = channel.attributes['tvg-logo'] ?? '/no-tvg-logo.png'
-    list.on('updated', (data) => document.getElementById('chcount').innerText = data.visibleItems.length)
+            const logoHint = !!channel.attributes['tvg-logo']
-    document.getElementById('search-field').addEventListener('keyup', (e) => list.search(e.target.value))
+                ? `Логотип канала '${channel.title}'`
+                : `Нет логотипа для канала '${channel.title}'`
 
-    document.addEventListener("DOMContentLoaded", () => {
+            const statusIconColor = channel.isOnline ? 'text-success' : 'text-danger'
-        const alert = document.getElementById("toomuchalert");
+            const statusIconHint = channel.isOnline
-        !!alert && alert.remove()
+                ? 'Состояние: онлайн (возможно, работает прямо сейчас)"'
-    });
+                : 'Состояние: оффлайн (не работал в момент проверки или ошибка проверки)"'
 
-    function savePlaylist() {
+            const adultIcon = channel.tags.indexOf('adult') !== -1
-        const link = document.createElement("a");
+                ? '<span class="badge small bg-warning text-dark" title="Канал для взрослых!">18+</span>'
-        const content = document.getElementById("m3u-raw").value
+                : ''
-        const file = new Blob([content], { type: 'text/plain' });
-        link.href = URL.createObjectURL(file);
-        link.download = "{{ playlist.code }}.m3u8";
-        link.click();
-        URL.revokeObjectURL(link.href);
-    }
 
-    function resetGroup() {
+            const pawIcon = channel.hasToken
-        document.getElementById('groupSelector').value = 'all'
+                ? '<span class="cursor-help badge small bg-info text-dark" title="Может быть нестабилен"><ion-icon name="paw"></ion-icon></span>'
-        updateFilter()
+                : ''
-    }
 
-    function resetSearch() {
+            const tvgId = !!channel.attributes['tvg-id']
-        list.search('')
+                ? `<div title="Идентификатор канала для телепрограммы (tvg-id)" class="cursor-help"><ion-icon name="star-outline" class="me-1"></ion-icon>&nbsp;${channel.attributes['tvg-id']}</div>`
-        document.getElementById('search-field').value = ''
+                : ``
-        document.getElementById('chfAll').checked = true
-        document.querySelectorAll('input[id*="btn-tag-"]:checked').forEach(tag => tag.checked = false)
-        updateFilter()
-    }
 
-    function updateFilter() {
+            const mimeType = !!channel.contentType
-        const groupHash = document.getElementById('groupSelector')?.value ?? 'all';
+                ? `<div title="Тип контента (mime-type)" class="cursor-help"><ion-icon name="eye-outline" class="me-1"></ion-icon>&nbsp;${channel.contentType}</div>`
-        const tagsElements = document.querySelectorAll('input[id*="btn-tag-"]:checked')
+                : ``
-        const tagsSelected = []
+
-        tagsElements.forEach(tag => tagsSelected.push(tag.attributes['data-tag'].value));
+            const tags = channel.tags.length > 0
-        const activeType = document.querySelector('input[name="chFilter"]:checked').id;
+                ? `<ion-icon name="pricetag-outline" class="cursor-help me-1" title="Теги"></ion-icon>&nbsp;`
-        switch (activeType) {
+                    + channel.tags.map((tag) => `<span class="chtag">#${tag}</span>`).join(' ')
-            case 'chfAll':
+                : ``
-                list.filter(item => {
+
-                    const chTags = item.values().chtags.split('|');
+            return `<tr class="chrow" title="&#010;HTTP: ${httpCode}&#010;Error: ${errText}">
-                    const isGroupValid = item.values().group === groupHash || groupHash === 'all';
+                <td class="chlogo text-center">
-                    const tagsIntersection = tagsSelected.filter(tagSelected => chTags.includes(tagSelected));
+                    <img class="tvg-logo" alt="${logoHint}" title="${logoHint}" src="${logoUrl}" onerror="setDefaultLogo(this)" />
-                    const hasValidTags = tagsIntersection.length > 0 || tagsSelected.length === 0;
+                </td>
-                    return isGroupValid && hasValidTags;
+                <td class="text-break">
-                })
+                    <ion-icon name="radio-button-on-outline" class="cursor-help me-1 ${statusIconColor}" title="${statusIconHint}"></ion-icon>
-                break
+                    ${adultIcon}
-            case 'chfOnline':
+                    ${pawIcon}
-                list.filter(item => {
+                    ${channel.title}
-                    const isOnline = item.values().online === '1'
+                    <div class="text-secondary small">
-                    const chTags = item.values().chtags.split('|');
+                        ${tvgId}
-                    const isGroupValid = item.values().group === groupHash || groupHash === 'all';
+                        ${mimeType}
-                    const tagsIntersection = tagsSelected.filter(tagSelected => chTags.includes(tagSelected));
+                        ${tags}
-                    const hasValidTags = tagsIntersection.length > 0 || tagsSelected.length === 0;
+                    </div>
-                    return isGroupValid && isOnline && hasValidTags
+                </td>
-                })
+            </tr>`
-                break
-            case 'chfOffline':
-                list.filter(item => {
-                    const isOffline = item.values().online === '0'
-                    const chTags = item.values().chtags.split('|');
-                    const isGroupValid = item.values().group === groupHash || groupHash === 'all';
-                    const tagsIntersection = tagsSelected.filter(tagSelected => chTags.includes(tagSelected));
-                    const hasValidTags = tagsIntersection.length > 0 || tagsSelected.length === 0;
-                    return isGroupValid && isOffline && hasValidTags
-                })
-                break
         }
-    }
+
-</script>
+        const options = {
+            searchColumns: ['title'],
+            item: (channel) => getChannelTemplate(channel),
+        };
+        const values = {{ playlist.channels|values|json_encode|raw }}
+
+        const list = new List('chlist', options, values)
+        list.on('updated', (data) => document.getElementById('chcount').innerText = data.visibleItems.length)
+        document.getElementById('search-field').addEventListener('keyup', (e) => list.search(e.target.value))
+
+        document.addEventListener("DOMContentLoaded", () => {
+            const alert = document.getElementById("chListLoading")
+            !!alert && alert.remove()
+        });
+
+
+        function savePlaylist() {
+            const link = document.createElement("a");
+            const content = document.getElementById("m3u-raw").value
+            const file = new Blob([content], { type: 'text/plain' });
+            link.href = URL.createObjectURL(file);
+            link.download = "{{ playlist.code }}.m3u8";
+            link.click();
+            URL.revokeObjectURL(link.href);
+        }
+
+        function resetGroup() {
+            document.getElementById('groupSelector').value = 'all'
+            updateFilter()
+        }
+
+        function resetSearch() {
+            list.search('')
+            document.getElementById('search-field').value = ''
+            document.getElementById('chfAll').checked = true
+            document.querySelectorAll('input[id*="btn-tag-"]:checked').forEach(tag => tag.checked = false)
+            updateFilter()
+        }
+
+        function updateFilter() {
+            const selectedGroupId = document.getElementById('groupSelector')?.value ?? 'all';
+            const tagsElements = document.querySelectorAll('input[id*="btn-tag-"]:checked')
+            const tagsSelected = []
+            tagsElements.forEach(tag => tagsSelected.push(tag.attributes['data-tag'].value));
+            const activeType = document.querySelector('input[name="chFilter"]:checked').id;
+            switch (activeType) {
+                case 'chfAll':
+                    list.filter(item => {
+                        const chTags = item.values().tags
+                        const isGroupValid = item.values().groupId === selectedGroupId || selectedGroupId === 'all';
+                        const tagsIntersection = tagsSelected.filter(tagSelected => chTags.includes(tagSelected));
+                        const hasValidTags = tagsIntersection.length > 0 || tagsSelected.length === 0;
+                        return isGroupValid && hasValidTags;
+                    })
+                    break
+
+                case 'chfOnline':
+                    list.filter(item => {
+                        const isOnline = item.values().isOnline
+                        const chTags = item.values().tags
+                        const isGroupValid = item.values().groupId === selectedGroupId || selectedGroupId === 'all';
+                        const tagsIntersection = tagsSelected.filter(tagSelected => chTags.includes(tagSelected));
+                        const hasValidTags = tagsIntersection.length > 0 || tagsSelected.length === 0;
+                        return isGroupValid && isOnline && hasValidTags
+                    })
+                    break
+
+                case 'chfOffline':
+                    list.filter(item => {
+                        const isOffline = !item.values().isOnline
+                        const chTags = item.values().tags
+                        const isGroupValid = item.values().groupId === selectedGroupId || selectedGroupId === 'all';
+                        const tagsIntersection = tagsSelected.filter(tagSelected => chTags.includes(tagSelected));
+                        const hasValidTags = tagsIntersection.length > 0 || tagsSelected.length === 0;
+                        return isGroupValid && isOffline && hasValidTags
+                    })
+                    break
+            }
+        }
+    </script>
+    {% endif %}
 {% endblock %}

views/template.twig

@@ -134,9 +134,6 @@
         </div>
     </footer>
 
-    <script src="/js/bootstrap.bundle.min.js"></script>
-    {% block footer %}{% endblock %}
-
     <div class="toast-container position-fixed bottom-0 end-0 p-3">
         <div class="toast align-items-center text-bg-success border-0" role="alert" id="clipboardToast">
             <div class="d-flex">
@@ -145,6 +142,9 @@
         </div>
     </div>
 
+    <script src="/js/bootstrap.bundle.min.js"></script>
+    {% block footer %}{% endblock %}
+
     <script>
         function showToast(message) {
             const toastEl = document.getElementById('clipboardToast');