530 lines
29 KiB
Twig
530 lines
29 KiB
Twig
{###########################################################################
|
||
# Copyright (c) 2025, Антон Аксенов
|
||
# This file is part of m3u.su project
|
||
# MIT License: https://git.axenov.dev/IPTV/web/src/branch/master/LICENSE
|
||
###########################################################################}
|
||
|
||
{% extends "template.twig" %}
|
||
|
||
{% block title %}[{{ playlist.code }}] {{ playlist.name }} - {{ config('app.title') }}{% endblock %}
|
||
|
||
{% block metadescription %}Смотреть бесплатный самообновляемый плейлист {{ playlist.name }}, проверить статус, {{ playlist.description }}{% endblock %}
|
||
|
||
{% block metakeywords %}самообновляемый,бесплатный,iptv-плейлист,iptv,плейлист{% if (playlist.groups|length > 1) %}{% for group in playlist.groups %},{{ group.name|lower }}{% endfor %}{% endif %},{{ playlist.tags|join(',') }}{% endblock %}
|
||
|
||
{% block head %}
|
||
<style>
|
||
img.tvg-logo{max-width:80px;max-height:80px;padding:2px;border-radius:5px}
|
||
tr.chrow td{padding:3px}
|
||
td.chindex{width:1%}
|
||
td.chlogo{width:100px}
|
||
div.chlist-table{max-height:550px}
|
||
textarea.m3u-raw{font-size:.7rem}
|
||
</style>
|
||
<script>
|
||
function setDefaultLogo(imgtag) {
|
||
imgtag.onerror = null
|
||
imgtag.src = '/no-tvg-logo.png'
|
||
}
|
||
</script>
|
||
{% endblock %}
|
||
|
||
{% block header %}
|
||
<h2>О плейлисте: {{ playlist.name }}</h2>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="row">
|
||
<div class="col-lg-7">
|
||
<ul class="nav nav-tabs">
|
||
<li class="nav-item small">
|
||
<a class="nav-link active"
|
||
type="button"
|
||
href="#tab-data"
|
||
data-bs-toggle="tab"
|
||
data-bs-target="#tab-data"
|
||
>
|
||
<ion-icon name="radio-outline"></ion-icon> Основные данные
|
||
</a>
|
||
</li>
|
||
<li class="nav-item small">
|
||
<a class="nav-link"
|
||
type="button"
|
||
href="#tab-raw"
|
||
data-bs-toggle="tab"
|
||
data-bs-target="#tab-raw"
|
||
>
|
||
<ion-icon name="document-text-outline"></ion-icon> Исходный текст
|
||
</a>
|
||
</li>
|
||
<li class="nav-item small">
|
||
<a class="nav-link"
|
||
type="button"
|
||
href="#tab-abuse"
|
||
data-bs-toggle="tab"
|
||
data-bs-target="#tab-abuse"
|
||
>
|
||
<ion-icon name="wallet-outline"></ion-icon> Правообладателям
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<div class="tab-content">
|
||
<div class="tab-pane fade show active" id="tab-data" tabindex="0">
|
||
<table class="table table-dark table-hover small mb-lg-5">
|
||
<tbody>
|
||
<tr>
|
||
<th class="w-25" scope="row">Код</th>
|
||
<th class="text-break">
|
||
<span class="pe-3 font-monospace">{{ playlist.code }}</span>
|
||
{% if playlist.isOnline is same as (true) %}
|
||
<span class="cursor-help badge small text-dark bg-success"
|
||
title="Вероятно, работает"
|
||
>online</span>
|
||
{% elseif playlist.isOnline is same as (false) %}
|
||
<span class="cursor-help badge small text-dark bg-danger"
|
||
title="Вероятно, не работает"
|
||
>offline</span>
|
||
{% elseif playlist.isOnline is same as (null) %}
|
||
<span class="cursor-help badge small text-dark bg-secondary"
|
||
title="Не проверялся"
|
||
>unknown</span>
|
||
{% endif %}
|
||
</th>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">Описание</th>
|
||
<td class="text-break"><p class="mb-0">{{ playlist.description }}</p></td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">Короткая ссылка</th>
|
||
<td>
|
||
<span onclick="copyPlaylistUrl('{{ playlist.code }}')"
|
||
class="cursor-pointer"
|
||
title="Нажми на ссылку, чтобы скопировать её в буфер обмена"
|
||
>
|
||
<b class="cursor-pointer font-monospace text-break">{{ base_url(playlist.code) }}</b>
|
||
<ion-icon name="copy-outline"></ion-icon>
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">Источник</th>
|
||
<td class="text-break">{{ playlist.source }}</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">Наполнение</th>
|
||
<td class="text-break">
|
||
{% if playlist.isOnline is same as (true) %}
|
||
{% if playlist.hasTokens is same as (true) %}
|
||
<span class="cursor-help badge bg-info text-dark">
|
||
<ion-icon name="paw"></ion-icon>
|
||
</span> могут быть нестабильные каналы<br>
|
||
{% endif %}
|
||
|
||
{% if "adult" in playlist.tags %}
|
||
<span class="cursor-help badge small bg-warning text-dark">18+</span> есть каналы для взрослых<br>
|
||
{% endif %}
|
||
|
||
<ion-icon name="folder-open-outline"></ion-icon> группы: {{ playlist.groups|length }}<br>
|
||
<ion-icon name="videocam-outline"></ion-icon> каналы:
|
||
<span class="cursor-help text-success" title="Возможно, рабочие каналы">
|
||
{{ playlist.onlineCount }} ({{ playlist.onlinePercent }}%)
|
||
</span>
|
||
+
|
||
<span class="cursor-help text-danger" title="Возможно, НЕрабочие каналы">
|
||
{{ playlist.offlineCount }} ({{ playlist.offlinePercent }}%)
|
||
</span>
|
||
= {{ playlist.channels|length }}
|
||
{% endif %}
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">Возможности</th>
|
||
<td class="text-break">
|
||
{% if playlist.isOnline is same as (true) %}
|
||
<ion-icon name="newspaper-outline"></ion-icon> Программа передач: {{ playlist.hasTvg ? 'есть' : 'нет' }}<br>
|
||
<ion-icon name="play-back"></ion-icon> Перемотка (архив): {{ playlist.hasCatchup ? 'есть' : 'нет' }}
|
||
{% endif %}
|
||
</td>
|
||
</tr>
|
||
<tr class="text-secondary">
|
||
<th scope="row">M3U</th>
|
||
<td class="text-break">{{ playlist.url }}</td>
|
||
</tr>
|
||
<tr class="text-secondary">
|
||
<th class="w-25" scope="row">Проверка плейлиста</th>
|
||
<td class="text-break">
|
||
<span title="Фактическая метка времени окончания проверки плейлиста">
|
||
{{ to_date(playlist.checkedAt) }}
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
{% if playlist.isOnline is same as (false) %}
|
||
<tr class="text-secondary">
|
||
<th class="w-25" scope="row">Ошибка проверки</th>
|
||
<td class="text-break">{{ playlist.content }}</td>
|
||
</tr>
|
||
{% endif %}
|
||
</tbody>
|
||
</table>
|
||
|
||
{% if (playlist.attributes) %}
|
||
<h4>Дополнительные атрибуты</h4>
|
||
<table class="table table-dark table-hover small font-monospace">
|
||
<tbody>
|
||
{% for attribute,value in playlist.attributes %}
|
||
<tr>
|
||
<th class="w-25" scope="row">{{ attribute }}</th>
|
||
<td class="text-break">{{ value }}</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
{% endif %}
|
||
</div>
|
||
<div class="tab-pane fade" id="tab-raw" tabindex="1">
|
||
<button class="btn btn-sm btn-success mye-md-3"
|
||
id="saveM3UBtn"
|
||
onclick="savePlaylist('{{ playlist.code }}')"
|
||
>
|
||
<ion-icon name="download-outline"></ion-icon> {{ playlist.code }}.m3u8
|
||
</button>
|
||
<button class="btn btn-sm btn-outline-light my-3"
|
||
id="saveM3UBtn"
|
||
data-bs-toggle="modal"
|
||
data-bs-target="#qrcode-popup"
|
||
>
|
||
<ion-icon name="qr-code-outline"></ion-icon> QR-код
|
||
</button>
|
||
<div class="modal fade" id="qrcode-popup" tabindex="-1">
|
||
<div class="modal-dialog ">
|
||
<div class="modal-content bg-dark">
|
||
<div class="modal-header">
|
||
<h1 class="modal-title fs-5">QR-код со ссылкой на плейлист {{ playlist.code }}</h1>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body text-center">
|
||
<img src="/api/playlists/{{ playlist.code }}/qrcode" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<textarea class="form-control bg-dark text-light font-monospace mb-3 mb-md-0 m3u-raw"
|
||
rows="40"
|
||
id="m3u-raw"
|
||
readonly
|
||
>{{ playlist.content }}</textarea>
|
||
</div>
|
||
<div class="tab-pane fade" id="tab-abuse" tabindex="2">
|
||
<p class="my-3">
|
||
Данные, представленные на данной странице, получены автоматически из открыто доступных в
|
||
интернете IPTV-плейлистов, опубликованных третьими лицами.
|
||
При наличии технической возможности, источник плейлиста может быть указан на вкладке "Основные
|
||
данные".
|
||
</p>
|
||
<p class="my-3">
|
||
Сервис {{ base_url() }} не размещает и не транслирует медиаконтент, не создаёт, не призывает
|
||
использовать и распространять плейлисты третьих лиц, а также не оказывает услуг по ретрансляции
|
||
телепрограмм.
|
||
</p>
|
||
<p class="my-3">
|
||
Подробности о проекте и о том, как здесь оказались объекты ваших прав,
|
||
<a href="{{ base_url('docs') }}" target="_blank">читайте здесь</a>.
|
||
</p>
|
||
<p class="my-3">
|
||
Информация о телеканалах (наименования, логотипы, технический статус и другие сведения)
|
||
формируется исключительно путём обработки содержимого самого плейлиста.
|
||
Вся информация носит технический и ознакомительный характер, и её достоверность не гарантируется.
|
||
</p>
|
||
<p class="my-3">
|
||
Все права на торговые марки и графические изображения принадлежат их законным владельцам.
|
||
Если вы являетесь правообладателем и считаете, что сведения на этой странице затрагивают ваши права, вы можете направить конфиденциальное уведомление на адрес abuse@m3u.su.
|
||
</p>
|
||
<p class="my-3">
|
||
Плейлисты, нарушающие законодательство, удаляются с сайта окончательно по факту обращения от правообладателя.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-5">
|
||
<h4>Список каналов: <span id="chcount">{{ playlist.channels|length }}</span></h4>
|
||
{% if (playlist.channels|length > 0) %}
|
||
{% if (playlist.groups|length > 1) %}
|
||
<div class="row my-3">
|
||
<div class="col-12">
|
||
{% if (playlist.channels|length > 100) %}
|
||
<div class="alert alert-warning small" role="alert" id="chListLoading">
|
||
<div class="spinner-border text-success spinner-border-sm" role="status"></div>
|
||
Загрузка...
|
||
</div>
|
||
{% endif %}
|
||
<div class="input-group">
|
||
<select id="groupSelector"
|
||
class="form-select form-select-sm border-secondary bg-dark text-light"
|
||
onchange="updateFilter()"
|
||
>
|
||
<option selected value="all">Все группы</option>
|
||
{% for group in playlist.groups %}
|
||
<option value="{{ group.id }}">{{ group.name }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
|
||
<button type="button"
|
||
onclick="resetGroup()"
|
||
class="btn btn-sm btn-outline-secondary"
|
||
title="Сбросить группу"
|
||
>
|
||
<ion-icon name="close-outline"></ion-icon>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
<div class="row my-3">
|
||
<div class="col-12">
|
||
<div class="input-group">
|
||
<input type="text"
|
||
id="search-field"
|
||
class="cursor-help form-control form-control-sm border-secondary bg-dark text-light fuzzy-search"
|
||
placeholder="Поиск каналов..."
|
||
title="Начни вводить название"
|
||
/>
|
||
|
||
<input type="radio"
|
||
class="btn-check"
|
||
name="chFilter"
|
||
id="chfAll"
|
||
autocomplete="off"
|
||
onclick="updateFilter()"
|
||
checked
|
||
>
|
||
<label class="btn btn-sm btn-outline-secondary"
|
||
for="chfAll"
|
||
title="Выбрать все каналы"
|
||
>
|
||
<ion-icon name="radio-button-on-outline"></ion-icon>
|
||
</label>
|
||
|
||
<input type="radio"
|
||
class="btn-check"
|
||
name="chFilter"
|
||
id="chfOnline"
|
||
autocomplete="off"
|
||
onclick="updateFilter()"
|
||
>
|
||
<label class="btn btn-sm btn-outline-success"
|
||
for="chfOnline"
|
||
title="Выбрать только онлайн каналы"
|
||
>
|
||
<ion-icon name="radio-button-on-outline"></ion-icon>{{ playlist.onlineCount }}
|
||
</label>
|
||
|
||
<input type="radio"
|
||
class="btn-check"
|
||
name="chFilter"
|
||
id="chfOffline"
|
||
autocomplete="off"
|
||
onclick="updateFilter()"
|
||
>
|
||
<label class="btn btn-sm btn-outline-danger"
|
||
for="chfOffline"
|
||
title="Выбрать только оффлайн каналы"
|
||
>
|
||
<ion-icon name="radio-button-on-outline"></ion-icon>{{ playlist.offlineCount }}
|
||
</label>
|
||
|
||
<button type="button"
|
||
class="btn btn-sm btn-outline-secondary"
|
||
onclick="resetSearch()"
|
||
title="Сбросить фильтрацию"
|
||
>
|
||
<ion-icon name="close-outline"></ion-icon>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="my-3">
|
||
{% for tag in playlist.tags %}
|
||
<input type="checkbox"
|
||
class="btn-check"
|
||
id="btn-tag-{{ tag }}"
|
||
data-tag="{{ tag }}"
|
||
autocomplete="off"
|
||
onclick="updateFilter()"
|
||
>
|
||
<label class="badge btn btn-sm btn-outline-secondary rounded-pill"
|
||
for="btn-tag-{{ tag }}"
|
||
title="Нажми для фильтрации каналов по тегу, нажми ещё раз чтобы снять фильтр"
|
||
>#{{ tag }}</label>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chlist-table overflow-auto">
|
||
<table id="chlist" class="table table-dark table-hover small">
|
||
<tbody class="list">
|
||
</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 %}
|
||
{% if playlist.isOnline is same as (true) %}
|
||
<script src="/js/list.min.js"></script>
|
||
<script>
|
||
function getChannelTemplate(channel) {
|
||
const httpCode = channel.status ?? '(неизвестно)'
|
||
const errText = !!channel.error
|
||
? channel.error.replace(/&/g, '&')
|
||
.replace(/</g, '<')
|
||
.replace(/>/g, '>')
|
||
.replace(/"/g, '"')
|
||
.replace(/'/g, ''')
|
||
: '(нет)'
|
||
|
||
const logoUrl = channel.attributes['tvg-logo'] ?? '/no-tvg-logo.png'
|
||
const logoHint = !!channel.attributes['tvg-logo']
|
||
? `Логотип канала '${channel.title}'`
|
||
: `Нет логотипа для канала '${channel.title}'`
|
||
|
||
const statusIconColor = channel.isOnline ? 'text-success' : 'text-danger'
|
||
const statusIconHint = channel.isOnline
|
||
? 'Состояние: онлайн (возможно, работает прямо сейчас)"'
|
||
: 'Состояние: оффлайн (не работал в момент проверки или ошибка проверки)"'
|
||
|
||
const adultIcon = channel.tags.indexOf('adult') !== -1
|
||
? '<span class="badge small bg-warning text-dark" title="Канал для взрослых!">18+</span>'
|
||
: ''
|
||
|
||
const pawIcon = channel.hasToken
|
||
? '<span class="cursor-help badge small bg-info text-dark" title="Может быть нестабилен"><ion-icon name="paw"></ion-icon></span>'
|
||
: ''
|
||
|
||
const tvgId = !!channel.attributes['tvg-id']
|
||
? `<div title="Идентификатор канала для телепрограммы (tvg-id)" class="cursor-help"><ion-icon name="star-outline" class="me-1"></ion-icon> ${channel.attributes['tvg-id']}</div>`
|
||
: ``
|
||
|
||
const mimeType = !!channel.contentType
|
||
? `<div title="Тип контента (mime-type)" class="cursor-help"><ion-icon name="eye-outline" class="me-1"></ion-icon> ${channel.contentType}</div>`
|
||
: ``
|
||
|
||
const tags = channel.tags.length > 0
|
||
? `<ion-icon name="pricetag-outline" class="cursor-help me-1" title="Теги"></ion-icon> `
|
||
+ channel.tags.map((tag) => `<span class="chtag">#${tag}</span>`).join(' ')
|
||
: ``
|
||
|
||
return `<tr class="chrow" title="
HTTP: ${httpCode}
Error: ${errText}">
|
||
<td class="chlogo text-center">
|
||
<img class="tvg-logo" alt="${logoHint}" title="${logoHint}" src="${logoUrl}" onerror="setDefaultLogo(this)" />
|
||
</td>
|
||
<td class="text-break">
|
||
<ion-icon name="radio-button-on-outline" class="cursor-help me-1 ${statusIconColor}" title="${statusIconHint}"></ion-icon>
|
||
${adultIcon}
|
||
${pawIcon}
|
||
${channel.title}
|
||
<div class="text-secondary small">
|
||
${tvgId}
|
||
${mimeType}
|
||
${tags}
|
||
</div>
|
||
</td>
|
||
</tr>`
|
||
}
|
||
|
||
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 %}
|