{"id":476414,"date":"2026-04-18T06:16:14","date_gmt":"2026-04-18T06:16:14","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=476414"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=476414","title":{"rendered":"\u041a\u0430\u043a \u0418\u0418 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 IPTV-\u043f\u043b\u0435\u0439\u043b\u0438\u0441\u0442\u043e\u0432 \u043d\u0430 FastAPI + React 19"},"content":{"rendered":"
\n

\u0425\u0430\u0431\u044b<\/strong>: React<\/code>, FastAPI<\/code>, TypeScript<\/code>, Tailwind CSS<\/code>, Open source<\/code>, IPTV<\/code>, Python<\/code><\/p>\n

\u0422\u0435\u0433\u0438<\/strong>: m3u<\/code>, m3u8<\/code>, iptv<\/code>, fastapi<\/code>, react<\/code>, hls<\/code>, epg<\/code>, drag-and-drop<\/code>, self-hosted<\/code><\/p>\n

\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h3>\n

\u0423 \u043c\u0435\u043d\u044f \u0431\u044b\u043b \u043f\u043b\u0435\u0439\u043b\u0438\u0441\u0442 \u043d\u0430 1000+ IPTV-\u043a\u0430\u043d\u0430\u043b\u043e\u0432 \u0438 \u0441\u0442\u043e\u0439\u043a\u0430\u044f \u043f\u0440\u0438\u0432\u044b\u0447\u043a\u0430 \u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u0441\u0432\u043e\u0439 \u0432\u043a\u0443\u0441. \u041c\u0435\u043d\u044f\u0442\u044c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043a\u0430\u043d\u0430\u043b\u043e\u0432, \u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0434\u0443\u0431\u043b\u0438\u043a\u0430\u0442\u044b, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043b\u044e\u0431\u0438\u043c\u043e\u0435 \u0432 \u0433\u0440\u0443\u043f\u043f\u0443 \u00ab\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435\u00bb \u2014 \u0432\u0441\u0451 \u043e\u0447\u0435\u043d\u044c \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e. \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u043a\u0430\u043d\u0430\u043b\u043e\u0432\/\u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430 \u2014 \u0437\u0430\u043d\u043e\u0432\u043e.<\/p>\n

\u0412 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u043d\u0435 \u044d\u0442\u043e \u043d\u0430\u0434\u043e\u0435\u043b\u043e, \u0438 \u044f \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0438\u0434\u0435\u0435\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0418\u0418 \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 m3u Studio<\/strong> \u2014 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0431-\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043f\u043b\u0435\u0439\u043b\u0438\u0441\u0442\u043e\u0432 \u0441 drag-and-drop, \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u043c HLS-\u043f\u043b\u0435\u0435\u0440\u043e\u043c, EPG \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043f\u043e\u0434\u0442\u044f\u0433\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432.<\/p>\n

\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 <\/a>(MIT)<\/p>\n

\"workspace\"<\/p>\n
workspace<\/figcaption><\/div>\n<\/figure>\n

\u0412 \u044d\u0442\u043e\u043c \u043f\u043e\u0441\u0442\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0441\u043f\u043b\u044b\u043b\u0438 \u043f\u043e \u0445\u043e\u0434\u0443 \u0440\u0430\u0431\u043e\u0442\u044b.<\/p>\n

\u0427\u0442\u043e \u044d\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0442\u0430\u043a\u043e\u0435<\/h3>\n

\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0448\u044c docker compose up -d<\/code>, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0448\u044c http:\/\/127.0.0.1:8000<\/a>, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0448\u044c \u0441\u0432\u043e\u0439 .m3u8<\/code>. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0448\u044c \u0434\u0432\u0443\u0445\u043f\u0430\u043d\u0435\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441: \u0441\u043b\u0435\u0432\u0430 \u2014 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043f\u043b\u0435\u0439\u043b\u0438\u0441\u0442 \u043f\u043e \u0433\u0440\u0443\u043f\u043f\u0430\u043c, \u0441\u043f\u0440\u0430\u0432\u0430 \u2014 \u0442\u0432\u043e\u0439 \u043a\u0443\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u00abMain\u00bb. \u041f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u0448\u044c \u043a\u0430\u043d\u0430\u043b\u044b \u043c\u0435\u0436\u0434\u0443 \u043f\u0430\u043d\u0435\u043b\u044f\u043c\u0438, \u0432\u043d\u0443\u0442\u0440\u0438 Main \u2014 \u043f\u0435\u0440\u0435\u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0438\u0432\u0430\u0435\u0448\u044c drag\u2019n\u2019drop\u2019\u043e\u043c, \u043b\u044e\u0431\u043e\u0439 \u043a\u0430\u043d\u0430\u043b \u043a\u043b\u0438\u043a\u043e\u043c \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u043b\u0435\u0435\u0440\u0435. \u042d\u043a\u0441\u043f\u043e\u0440\u0442 \u2014 \u043e\u0434\u0438\u043d \u043a\u043b\u0438\u043a: \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0447\u0438\u0449\u0435\u043d\u043d\u044b\u0439 .m3u8<\/code> \u0441 \u0442\u0432\u043e\u0438\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u043c.<\/p>\n

\u0421\u0442\u0435\u043a<\/strong>: FastAPI + httpx + Pydantic v2 \u043d\u0430 \u0431\u044d\u043a\u0435, React 19 + TypeScript + Tailwind v4 + @dnd-kit<\/code> + hls.js<\/code> + TanStack Query \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435. ~10k LOC \u0441\u0443\u043c\u043c\u0430\u0440\u043d\u043e.<\/p>\n

\u0420\u0435\u0448\u0435\u043d\u0438\u0435 1: \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u043f\u043e \u0438\u043c\u0435\u043d\u0430\u043c, \u0430 \u043d\u0435 id<\/h3>\n

\u041a\u043e\u0433\u0434\u0430 \u043f\u0430\u0440\u0441\u0438\u0448\u044c m3u-\u0444\u0430\u0439\u043b, \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043a\u0430\u043d\u0430\u043b\u0443 \u043d\u0443\u0436\u0435\u043d \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u0439 \u0432\u044b\u0431\u043e\u0440 \u2014 \u0445\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c URL \u043f\u043e\u0442\u043e\u043a\u0430:<\/p>\n

def _stable_id(url: str) -> str:    digest = hashlib.sha1(url.encode(\"utf-8\"), usedforsecurity=False).hexdigest()    return digest[:12]<\/code>
<\/a><\/div><\/pre>\n
\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u0435\u0442, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u0435\u043d\u044f\u0435\u0442 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430. URL-\u044b \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u2014 \u0437\u043d\u0430\u0447\u0438\u0442, \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0432\u0441\u0435 id-\u0448\u043d\u0438\u043a\u0438, \u0438 \u0432\u0441\u044f \u0442\u0432\u043e\u044f \u043a\u0443\u0440\u0430\u0446\u0438\u044f (\u00ab\u0432\u043e\u0442 \u043c\u043e\u0438 \u043b\u044e\u0431\u0438\u043c\u044b\u0435 50 \u043a\u0430\u043d\u0430\u043b\u043e\u0432 \u0432 \u0442\u0430\u043a\u043e\u043c-\u0442\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0435\u00bb) \u0438\u0434\u0451\u0442 \u043a \u0447\u0451\u0440\u0442\u0443.<\/p>\n
\u0420\u0435\u0448\u0435\u043d\u0438\u0435: \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043a\u0443\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043f\u043e \u0438\u043c\u0435\u043d\u0430\u043c \u043a\u0430\u043d\u0430\u043b\u043e\u0432<\/strong>, \u0430 \u043d\u0435 id. \u0418\u043c\u0435\u043d\u0430 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b \u043c\u0435\u0436\u0434\u0443 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430\u043c\u0438. \u0412\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 store \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442 \u0438\u043c\u044f \u2194 id \u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u0435 \u0447\u0435\u0440\u0435\u0437 \u0441\u043b\u043e\u0432\u0430\u0440\u044c, \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0438\u0437 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043f\u043b\u0435\u0439\u043b\u0438\u0441\u0442\u0430:<\/p>\n
@dataclass(frozen=True, slots=True)class MainState:    main_names: tuple[str, ...]class StateStore:    def current_ids(self) -> list[str]:        \"\"\"Stored names \u2192 current playlist ids.\"\"\"        with self._lock:            name_to_id = self._name_to_id_map()            return [name_to_id[n] for n in self._state.main_names if n in name_to_id]<\/code>
<\/a><\/div><\/pre>\n
\u0424\u0440\u043e\u043d\u0442\u0443 \u044d\u0442\u043e \u043d\u0435\u0437\u0430\u043c\u0435\u0442\u043d\u043e \u2014 API \u043e\u0442\u0434\u0430\u0451\u0442 id-\u0448\u043d\u0438\u043a\u0438, \u043a\u0430\u043a \u0438 \u0440\u0430\u043d\u044c\u0448\u0435. \u041d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0448\u044c \u043d\u043e\u0432\u044b\u0439 \u043f\u043b\u0435\u0439\u043b\u0438\u0441\u0442 \u043e\u0442 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430 \u2014 \u0442\u0432\u043e\u044f \u043a\u0443\u0440\u0430\u0446\u0438\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0451\u0442\u0441\u044f \u043d\u0430 \u043d\u043e\u0432\u044b\u0435 \u043a\u0430\u043d\u0430\u043b\u044b \u0441 \u0442\u0435\u043c\u0438 \u0436\u0435 \u0438\u043c\u0435\u043d\u0430\u043c\u0438.<\/p>\n
\u0420\u0435\u0448\u0435\u043d\u0438\u0435 2: \u0437\u0435\u0440\u043a\u0430\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 Main \u2194 Source<\/h3>\n
\u041a\u0443\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u00abMain\u00bb \u0438 \u0433\u0440\u0443\u043f\u043f\u0430 \u00ab\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435\u00bb \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u043f\u043b\u0435\u0439\u043b\u0438\u0441\u0442\u0435 \u2014 \u044d\u0442\u043e, \u043f\u043e \u0441\u0443\u0442\u0438, \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435. \u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u0442 \u043a\u0430\u043d\u0430\u043b \u0432 Main, \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e:<\/p>\n
    \n
  1. \n
    \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c state.json<\/code> (\u043a\u0443\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a)<\/p>\n<\/li>\n
  2. \n
    \u041f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c playlist.m3u8<\/code> \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0433\u0440\u0443\u043f\u043f\u0430 \u00ab\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435\u00bb \u043e\u0442\u0440\u0430\u0436\u0430\u043b\u0430 \u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a (\u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u0438 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043b\u0435\u0432\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438)<\/p>\n<\/li>\n
  3. \n
    \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c default_names.txt<\/code> (\u0441\u043f\u0438\u0441\u043e\u043a \u0438\u043c\u0451\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u00ab\u0441\u0435\u043c\u044f\u00bb \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u0435)<\/p>\n<\/li>\n<\/ol>\n
    \u0412\u0441\u0451 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u0445\u0435\u043b\u043f\u0435\u0440\u043e\u043c sync<\/em>main_to_source<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u043a\u0430\u0436\u0434\u043e\u0433\u043e PATCH \/api\/main<\/code>:<\/p>\n
    def _sync_main_to_source() -> None:    main_ids = _state.store.current_ids()    text = build_with_main_group(        header=_state.playlist.header,        all_channels=_state.playlist.channels,        main_ids=main_ids,        group_name=MAIN_GROUP_NAME,    )    PLAYLIST_PATH.write_text(text, encoding=\"utf-8\")    _state.playlist = parse_playlist(PLAYLIST_PATH)    _state.store.bind_playlist(_state.playlist)    current_names = _state.store.state.main_names    if current_names:        DEFAULT_NAMES_PATH.write_text(\"\\n\".join(current_names), encoding=\"utf-8\")        _state.store.set_default_names(current_names)<\/code>
    <\/a><\/div><\/pre>\n
    \u0412\u0430\u0436\u043d\u044b\u0439 \u043d\u044e\u0430\u043d\u0441: \u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043d\u0435<\/strong> \u0432\u044b\u0437\u044b\u0432\u0430\u044e reload_playlist()<\/code> (\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0447\u0438\u0442\u0430\u043b \u0431\u044b state.json<\/code>), \u0430 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0440\u0435\u0431\u0438\u043d\u0434\u044e playlist \u0447\u0435\u0440\u0435\u0437 bind_playlist()<\/code>. \u0418\u043d\u0430\u0447\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f race condition: drag-and-drop \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0442\u0430\u0440\u044b\u0439 \u043e\u0442\u0432\u0435\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e load_or_bootstrap<\/code> \u0447\u0438\u0442\u0430\u0435\u0442 state.json<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0435\u0449\u0451 \u043d\u0435 \u0434\u043e \u043a\u043e\u043d\u0446\u0430 \u0437\u0430\u043f\u0438\u0441\u0430\u043d.<\/p>\n
    \u041d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435 React Query \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u0435\u0442 \u043a\u044d\u0448 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0439 \u043c\u0443\u0442\u0430\u0446\u0438\u0438:<\/p>\n
    onSettled: (server) => {  if (server) client.setQueryData(KEY_MAIN, server)  client.invalidateQueries({ queryKey: KEY_SOURCE })}<\/code>
    <\/a><\/div><\/pre>\n
    \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u2014 \u043e\u0431\u0435 \u043f\u0430\u043d\u0435\u043b\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b, \u0431\u0435\u0437 \u00absave\u00bb-\u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n
    \u0420\u0435\u0448\u0435\u043d\u0438\u0435 3: HLS-\u043f\u0440\u043e\u043a\u0441\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u044b<\/h3>\n
    IPTV-\u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u044b \u0432 90% \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u043d\u0435 \u043e\u0442\u0434\u0430\u044e\u0442 CORS-\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u043f\u043e\u0442\u043e\u043a\u0438 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e. \u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u2014 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u043a\u0441\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439 \u0441\u0435\u0440\u0432\u0435\u0440.<\/p>\n
    \u0422\u043e\u043d\u043a\u043e\u0441\u0442\u044c: \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c master.m3u8, \u0432 \u043d\u0451\u043c URL-\u044b \u043d\u0430 variant-\u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u044b, \u0430 \u0432\u043d\u0443\u0442\u0440\u0438 variant-\u043c\u0430\u043d\u0438\u0444\u0435\u0441\u0442\u043e\u0432 \u2014 URL-\u044b \u043d\u0430 .ts<\/code>-\u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b. \u0418\u0445 \u0432\u0441\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u043e\u043a\u0441\u0438-URL, \u0438\u043d\u0430\u0447\u0435 \u043f\u043b\u0435\u0435\u0440 \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438 \u0441\u043d\u043e\u0432\u0430 \u0443\u043f\u0440\u0451\u0442\u0441\u044f \u0432 CORS.<\/p>\n
    ~40 \u0441\u0442\u0440\u043e\u043a Python:<\/p>\n
    async def proxy_stream(upstream_url: str) -> Response:    async with httpx.AsyncClient() as client:        resp = await client.get(upstream_url, follow_redirects=True)        content_type = resp.headers.get(\"content-type\", \"\")        if \"mpegurl\" in content_type.lower() or upstream_url.endswith(\".m3u8\"):            # Rewrite every non-comment line to go through our proxy.            base = urljoin(upstream_url, \".\")            rewritten = []            for line in resp.text.splitlines():                if line.startswith(\"#\") or not line.strip():                    rewritten.append(line)                else:                    absolute = urljoin(base, line)                    rewritten.append(f\"\/api\/proxy?u={quote(absolute)}\")            return Response(\"\\n\".join(rewritten), media_type=content_type)        return Response(resp.content, media_type=content_type)<\/code>
    <\/a><\/div><\/pre>\n
    \u0420\u0435\u0448\u0435\u043d\u0438\u0435 4: AC-3 \u2192 AAC \u043d\u0430 \u043b\u0435\u0442\u0443<\/h3>\n
    \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u044b \u0433\u043e\u043d\u044f\u0442 AC-3 \/ E-AC-3 \u0430\u0443\u0434\u0438\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 Chrome \u0438 Safari \u0443\u043f\u043e\u0440\u043d\u043e \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0412\u0438\u0434\u0435\u043e \u0438\u0433\u0440\u0430\u0435\u0442, \u0437\u0432\u0443\u043a\u0430 \u043d\u0435\u0442.<\/p>\n
    \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 fallback-\u043a\u043d\u043e\u043f\u043a\u0430 \u00abFix audio\u00bb, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0430 \u0431\u044d\u043a\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 ffmpeg:<\/p>\n
    proc = await asyncio.create_subprocess_exec(    FFMPEG_BIN,    \"-i\", upstream_url,    \"-c:v\", \"copy\",      # \u0432\u0438\u0434\u0435\u043e \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0435\u043c    \"-c:a\", \"aac\",       # \u0442\u043e\u043b\u044c\u043a\u043e \u0430\u0443\u0434\u0438\u043e \u0440\u0435\u043c\u0443\u043a\u0441\u0438\u0440\u0443\u0435\u043c    \"-f\", \"hls\",    \"-hls_time\", \"4\",    \"-hls_list_size\", \"6\",    \"-hls_flags\", \"delete_segments\",    str(output_dir \/ \"index.m3u8\"),)<\/code>
    <\/a><\/div><\/pre>\n
    \u041f\u043b\u0435\u0435\u0440 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \/api\/transcode\/{channel_id}\/index.m3u8<\/code> \u0438 \u0437\u0432\u0443\u043a \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 ~3 \u0441\u0435\u043a\u0443\u043d\u0434\u044b (\u043b\u0430\u0442\u0435\u043d\u0442\u043d\u043e\u0441\u0442\u044c \u043e\u0434\u043d\u043e\u0433\u043e HLS-\u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430). \u041f\u0440\u043e\u0446\u0435\u0441\u0441\u044b ffmpeg\u2019\u0430 \u0442\u0440\u0435\u043a\u0430\u044e\u0442\u0441\u044f \u0438 \u0443\u0431\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 background-\u0437\u0430\u0434\u0430\u0447\u0435 cleanup\u2019\u0430.<\/p>\n
    \u0420\u0435\u0448\u0435\u043d\u0438\u0435 5: \u0441\u0432\u0435\u0442\u043b\u0430\u044f \u0442\u0435\u043c\u0430 \u043f\u043e\u0432\u0435\u0440\u0445 dark-only \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u044b<\/h3>\n
    \u0424\u0440\u043e\u043d\u0442 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043f\u0438\u0441\u0430\u043b\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434 \u0442\u0451\u043c\u043d\u0443\u044e \u0442\u0435\u043c\u0443, \u0438 \u0432 \u043a\u0443\u0447\u0435 \u043c\u0435\u0441\u0442 \u0437\u0430\u0445\u0430\u0440\u0434\u043a\u043e\u0436\u0435\u043d\u044b \u043a\u043b\u0430\u0441\u0441\u044b text-white<\/code>, bg-white\/5<\/code>, border-white\/10<\/code>. \u041f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0442\u044b\u0441\u044f\u0447\u0438 \u0441\u0442\u0440\u043e\u043a \u043d\u0430 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u2014 \u0434\u043e\u043b\u0433\u043e.<\/p>\n
    \u041f\u043e\u0448\u0451\u043b \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u0443\u0442\u0451\u043c: \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432 index.css<\/code> \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 utility-\u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0434\u043b\u044f [data-theme=\"light\"]<\/code>:<\/p>\n
    [data-theme=\"light\"] .text-white               { color: var(--color-fog-300); }[data-theme=\"light\"] .bg-white\\\/5              { background-color: var(--tint-bg-sm); }[data-theme=\"light\"] .bg-white\\\/10             { background-color: var(--tint-bg-md); }[data-theme=\"light\"] .border-white\\\/10         { border-color: var(--tint-border-sm); }[data-theme=\"light\"] .hover\\:bg-white\\\/5:hover { background-color: var(--tint-bg-sm); }\/* \u2026 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435 *\/<\/code>
    <\/a><\/div><\/pre>\n
    \u0421\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0442\u043e\u043a\u0435\u043d\u044b --tint-bg-sm<\/code> \/ --tint-border-sm<\/code> \/ \u2026 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0435\u043c\u044b \u0438 \u0434\u0430\u044e\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u0443\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 elevation\u2019\u0430. \u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e [data-theme=\"light\"] .class<\/code> \u0438\u043c\u0435\u0435\u0442 specificity (0,2,0), \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0431\u0438\u0432\u0430\u0435\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 .class<\/code> (0,1,0) \u0438\u0437 Tailwind.<\/p>\n
    \u041d\u0435 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e, \u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u2014 \u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0442\u0440\u043e\u0433\u0430\u0442\u044c \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n
    \u0427\u0442\u043e \u0435\u0449\u0451 \u0432\u043d\u0443\u0442\u0440\u0438<\/h3>\n