tv

Runtime error

App Files Files Community

tv / public /index.html

cofaideveloper

Duplicate from TNR-5/AI-WebTV

0c454fe over 2 years ago

raw

history blame contribute delete

13.6 kB

	<html>
	<head>
	<title>☕ CofTV</title>
	<link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" />
	<!--<link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />-->
	<script src="/mpegts.js"></script>
	</head>
	<body
	x-data="app()" x-init="init()"
	class="fixed inset-0 bg-[rgb(0,0,0)] flex flex-col w-full items-center justify-start">
	<div x-show="!enabled">Loading CofTV...</div>

	<div
	x-show="enabled && showToolbar"
	x-transition:enter="transition ease-out duration-100"
	x-transition:enter-start="opacity-0 -translate-y-8"
	x-transition:enter-end="opacity-100"
	x-transition:leave="transition ease-in duration-200"
	x-transition:leave-start="opacity-100"
	x-transition:leave-end="opacity-0 -translate-y-8"
	class="fixed w-full z-20 py-4 px-6 top-0 font-mono text-white flex flex-col lg:flex-row items-center justify-between space-x-1 bg-black bg-opacity-60"
	style="text-shadow: 0px 0px 3px #000000">

	<div class="flex text-xl space-x-2">
	<div class="text-xl">☕ CofTV </div>
	<div class="text-md">👉 Текущий канал:</div>
	<template x-for="chan in channels">
	<div
	class="text-xl mr-2"
	:class="chan.id === channel.id
	? 'font-bold'
	: 'hover:underline opacity-60 hover:opacity-80 cursor-pointer'"
	x-on:click="window.location = `${window.location.origin}/?channel=${chan.id}`"
	x-text="chan.label">
	<div class="animate-ping absolute inline-flex h-4 w-4 rounded-full bg-red-400 opacity-75"></div>
	</div>
	</template>
	</div>

	<div class="flex justify-between space-x-6 items-center">

	<div class="flex items-center justify-center text-white opacity-100 space-x-2">
	<div>
	<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 640 512"><path fill="currentColor" d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM609.3 512H471.4c5.4-9.4 8.6-20.3 8.6-32v-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2h61.4C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z"/></svg>
	</div>
	<div x-text="channel.audience"></div>
	<div x-text="channel.audience > 1 ? 'viewers' : '🟢 Онлайн'"></div>
	</div>

	<div class="text-sm">(<a
	class="hover:underline"
	href="https://huggingface.co/facebook/musicgen-melody"
	target="_blank">musicgen-melody</a> + <a
	class="hover:underline"
	:href="channel.modelUrl"
	x-text="channel.model"
	target="_blank"></a>)</div>

	<div
	x-on:click="toggleAudio()"
	class="flex items-center justify-center text-white opacity-80 hover:opacity-100 cursor-pointer">
	<div x-show="muted">
	<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="32px" height="32px"><path fill="currentColor" d="M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zM461.64 256l45.64-45.64c6.3-6.3 6.3-16.52 0-22.82l-22.82-22.82c-6.3-6.3-16.52-6.3-22.82 0L416 210.36l-45.64-45.64c-6.3-6.3-16.52-6.3-22.82 0l-22.82 22.82c-6.3 6.3-6.3 16.52 0 22.82L370.36 256l-45.63 45.63c-6.3 6.3-6.3 16.52 0 22.82l22.82 22.82c6.3 6.3 16.52 6.3 22.82 0L416 301.64l45.64 45.64c6.3 6.3 16.52 6.3 22.82 0l22.82-22.82c6.3-6.3 6.3-16.52 0-22.82L461.64 256z" class=""></path></svg>
	</div>
	<div x-show="!muted">
	<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 512" width="32px" height="32px"><path fill="currentColor" d="M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zM480 256c0-63.53-32.06-121.94-85.77-156.24-11.19-7.14-26.03-3.82-33.12 7.46s-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.53 480 256zm-141.77-76.87c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.86z" class=""></path></svg>
	</div>
	</div>
	<div
	x-on:click="fullscreen()"
	class="text-white hover:text-white opacity-80 hover:opacity-100 cursor-pointer">
	<?xml version="1.0" ?><svg version="1.1" viewBox="0 0 14 14" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"><g fill="currentColor" id="Core" transform="translate(-215.000000, -257.000000)"><g id="fullscreen" transform="translate(215.000000, 257.000000)"><path d="M2,9 L0,9 L0,14 L5,14 L5,12 L2,12 L2,9 L2,9 Z M0,5 L2,5 L2,2 L5,2 L5,0 L0,0 L0,5 L0,5 Z M12,12 L9,12 L9,14 L14,14 L14,9 L12,9 L12,12 L12,12 Z M9,0 L9,2 L12,2 L12,5 L14,5 L14,0 L9,0 L9,0 Z" id="Shape"/></g></g></g></svg>
	</div>
	</div>
	</div>
	<div class="flex w-full">
	<video id="videoElement" muted autoplay class="aspect-video w-full"></video>
	<!--
	We probably want to display a nice logo or decoration somewhere
	<img src="/hf-logo.png" class="absolute mt-2 w-[16%]" />
	-->
	</div>
	<script>
	// disable analytics (we don't use VideoJS yet anyway)
	window.HELP_IMPROVE_VIDEOJS = false
	</script>
	<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
	<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
	<!--<script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>-->
	<script>

	function app() {
	return {
	enabled: false,
	channels: {
	/*
	legacy: {
	id: 'legacy',
	label: '#older',
	audience: 0,
	online: false,
	visible: false,
	url: 'https://jbilcke-hf-media-server.hf.space/live/legacy.flv',
	resolution: '576x320',
	model: 'zeroscope_v2_576w',
	modelUrl: 'https://huggingface.co/cerspense/zeroscope_v2_576w',
	},
	*/
	/*
	hdtv: {
	id: 'hdtv',
	label: '#old',
	audience: 0,
	online: false,
	visible: true,
	url: 'https://jbilcke-hf-media-server.hf.space/live/hdtv.flv',
	resolution: '1024x576_8FPS',
	model: 'zeroscope_v2_XL',
	modelUrl: 'https://huggingface.co/cerspense/zeroscope_v2_XL',
	},
	*/
	random: {
	id: 'random',
	label: 'Главный',
	audience: 0,
	online: false,
	visible: true,
	url: 'https://jbilcke-hf-media-server.hf.space/live/random.flv',
	resolution: '1024x576_24FPS',
	model: 'zeroscope_v2_XL',
	modelUrl: 'https://huggingface.co/cerspense/zeroscope_v2_XL',
	},
	comedy: {
	id: 'comedy',
	label: 'Интересный',
	audience: 0,
	online: false,
	visible: true,
	url: 'https://jbilcke-hf-media-server.hf.space/live/comedy.flv',
	resolution: '1024x576_24FPS',
	model: 'zeroscope_v2_XL',
	modelUrl: 'https://huggingface.co/cerspense/zeroscope_v2_XL',
	},
	documentary: {
	id: 'documentary',
	label: 'Документальный',
	audience: 0,
	online: false,
	visible: true,
	url: 'https://jbilcke-hf-media-server.hf.space/live/documentary.flv',
	resolution: '1024x576_24FPS',
	model: 'zeroscope_v2_XL',
	modelUrl: 'https://huggingface.co/cerspense/zeroscope_v2_XL',
	},
	},
	showToolbar: true,
	muted: true,
	initialized: false,
	activityTimeout: null,
	defaultChannelId: 'random',
	video: null,
	channel: {
	},
	wakeUp() {
	this.showToolbar = true
	clearTimeout(this.activityTimeout)
	this.activityTimeout = setTimeout(() => {
	this.showToolbar = false
	}, 1500);
	},
	toggleAudio() {
	if (this.video.muted) {
	this.video.muted = false
	this.muted = false
	} else {
	this.video.muted = true
	this.muted = true
	}
	},
	async checkAudience() {
	let audience = {}
	try {
	const res = await fetch('/stats')
	audience = await res.json()
	} catch (err) {
	console.log('failed to check the audience, something is wrong')
	}

	window.DEBUGME = Object.entries(this.channels)
	this.channels = Object.entries(this.channels).reduce((acc, [channel, data]) => ((console.log('debug:', {
	...data,
	audience: audience[channel] \|\| 0
	} ), {
	...acc,
	[channel]: {
	...data,
	audience: audience[channel] \|\| 0
	}
	})), {})
	this.channel = this.channels[this.channel.id]
	},
	fullscreen() {
	if (this.video.requestFullscreen) {
	this.video.requestFullscreen();
	} else if (this.video.mozRequestFullScreen) {
	this.video.mozRequestFullScreen();
	} else if (this.video.webkitRequestFullscreen) {
	this.video.webkitRequestFullscreen();
	} else if (this.video.msRequestFullscreen) {
	this.video.msRequestFullscreen();
	}
	},
	init() {
	if (this.initialized) {
	console.log("already initialized")
	return
	}
	this.initialized = true
	console.log('Иницилизация CofTV')

	const urlParams = new URLSearchParams(window.location.search)

	const requestedChannelId = `${urlParams.get('channel') \|\| 'random'}`

	this.enabled = true
	// this.enabled = `${urlParams.get('beta') \|\| 'false'}` === 'true'

	if (!this.enabled) {
	return
	}

	this.video = document.getElementById('videoElement')

	const defaultChannel = this.channels[this.defaultChannelId]

	this.channel = this.channels[requestedChannelId] \|\| defaultChannel

	console.log(`Selected channel: ${this.channel.label}`)
	console.log(`Stream URL: ${this.channel.url}`)


	const handleActivity = () => {
	this.wakeUp()
	}
	handleActivity()

	document.addEventListener("touchstart", handleActivity)
	document.addEventListener("touchmove", handleActivity)
	document.addEventListener("click", handleActivity)
	document.addEventListener("mousemove", handleActivity)

	this.checkAudience()
	setInterval(() => {
	this.checkAudience()
	}, 1000)

	// detect mute/unmute events
	this.video.addEventListener("mute", () => {
	this.muted = true
	})
	this.video.addEventListener("unmute", () => {
	this.muted = false
	})

	// when we move outside the video, we always hide the toolbar
	document.addEventListener("mouseleave", () => {
	clearTimeout(this.activityTimeout)
	this.showToolbar = false
	})

	// as a bonus, we also allow fullscreen on double click
	this.video.addEventListener('dblclick', () => {
	this.fullscreen()
	})

	// some devices such as the iPhone don't support MSE Live Playback
	if (mpegts.getFeatureList().mseLivePlayback) {
	var player = mpegts.createPlayer({
	type: 'flv', // could also be mpegts, m2ts, flv
	isLive: true,
	url: this.channel.url,
	})
	player.attachMediaElement(this.video)

	player.on(mpegts.Events.ERROR, function (err) {
	console.log('got an error:', err)
	if (err.type === mpegts.ErrorTypes.NETWORK_ERROR) {
	console.log('Network error')
	}
	});

	player.load()

	// due to an issue with our stream when the FFMPEG playlist ends,
	// the stream gets interrupted for ~1sec, which causes the frontend to hangs up
	// the following code tries to restart the page when that happens, but in the long term
	// we should fix the issue on the server side (fix our FFMPEG bash script)
	this.video.addEventListener('ended', function() {
	console.log('Stream ended, trying to reload...')
	setTimeout(() => {
	console.log('Reloading the page..')
	// Unloading and loading the source again isn't enough it seems
	// player.unload()
	// player.load()
	window.location.reload()
	}, 1200)
	}, false)

	// Handle autoplay restrictions.
	let promise = this.video.play()
	if (promise !== undefined) {
	this.video.addEventListener('click', function() {
	this.video.play()
	})
	}

	player.play()
	}
	}
	}
	}
	</script>
	</body>
	</html>