Hugging Face's logo

Spaces:
jbilcke-hf
/
AI-WebTV
Running

App Files Community
14
jbilcke-hf HF staff commited on
Commit
b5e7079
•
1 Parent(s): d96076f

cleanup

Browse files
Files changed (2) hide show
  1. public/hf-logo.png +0 -0
  2. public/index.html +17 -6
public/hf-logo.png ADDED
public/index.html CHANGED
@@ -3,20 +3,27 @@
3
  <title>AI Web TV 🤗</title>
4
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
5
  <!--<link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />-->
6
- <!--<link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />-->
7
  <script src="/mpegts.js"></script>
8
  </head>
9
  <body class="fixed inset-0 bg-[rgb(0,0,0)] flex flex-col w-full items-center justify-center">
10
  <div class="flex w-full">
11
  <video id="videoElement" muted autoplay class="aspect-video w-full"></video>
 
 
 
 
12
  </div>
13
- <script>window.HELP_IMPROVE_VIDEOJS = false;</script>
 
 
 
14
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
15
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
16
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
17
  <!--<script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>-->
18
  <script>
19
  (() => {
 
20
  if (mpegts.getFeatureList().mseLivePlayback) {
21
  var videoElement = document.getElementById('videoElement')
22
  var player = mpegts.createPlayer({
@@ -32,19 +39,23 @@
32
  console.log('Network error')
33
  }
34
  });
 
35
  player.load()
36
 
 
 
 
 
37
  videoElement.addEventListener('ended', function() {
38
- console.log('Stream ended, trying to reload...');
39
  setTimeout(() => {
40
  console.log('Reloading the page..')
41
- //Unloading and loading the source again
42
  // player.unload()
43
  // player.load()
44
  window.location.reload()
45
  }, 1200)
46
- }, false);
47
-
48
  player.play()
49
  }
50
  })()
 
3
  <title>AI Web TV 🤗</title>
4
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
5
  <!--<link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />-->
 
6
  <script src="/mpegts.js"></script>
7
  </head>
8
  <body class="fixed inset-0 bg-[rgb(0,0,0)] flex flex-col w-full items-center justify-center">
9
  <div class="flex w-full">
10
  <video id="videoElement" muted autoplay class="aspect-video w-full"></video>
11
+ <!--
12
+ We probably want to display a nice logo or decoration somewhere
13
+ <img src="/hf-logo.png" class="absolute mt-2 w-[16%]" />
14
+ -->
15
  </div>
16
+ <script>
17
+ // disable analytics (we don't use VideoJS yet anyway)
18
+ window.HELP_IMPROVE_VIDEOJS = false
19
+ </script>
20
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
21
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
22
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
23
  <!--<script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>-->
24
  <script>
25
  (() => {
26
+ // some devices such as the iPhone don't support MSE Live Playback
27
  if (mpegts.getFeatureList().mseLivePlayback) {
28
  var videoElement = document.getElementById('videoElement')
29
  var player = mpegts.createPlayer({
 
39
  console.log('Network error')
40
  }
41
  });
42
+
43
  player.load()
44
 
45
+ // due to an issue with our stream when the FFMPEG playlist ends,
46
+ // the stream gets interrupted for ~1sec, which causes the frontend to hangs up
47
+ // the following code tries to restart the page when that happens, but in the long term
48
+ // we should fix the issue on the server side (fix our FFMPEG bash script)
49
  videoElement.addEventListener('ended', function() {
50
+ console.log('Stream ended, trying to reload...')
51
  setTimeout(() => {
52
  console.log('Reloading the page..')
53
+ // Unloading and loading the source again isn't enough it seems
54
  // player.unload()
55
  // player.load()
56
  window.location.reload()
57
  }, 1200)
58
+ }, false)
 
59
  player.play()
60
  }
61
  })()