jbilcke-hf HF staff commited on
Commit
8127ca8
โ€ข
1 Parent(s): f006383

updated the beta

Browse files
Files changed (1) hide show
  1. public/index.html +110 -13
public/index.html CHANGED
@@ -7,12 +7,18 @@
7
  </head>
8
  <body
9
  x-data="app()" x-init="init()"
10
- class="fixed inset-0 bg-[rgb(0,0,0)] flex flex-col w-full items-center justify-center">
11
  <div x-show="!enabled">this space has been disabled by its owner</div>
12
 
13
  <div
14
- x-show="enabled"
15
- class="fixed w-full z-20 top-4 px-6 font-mono text-white flex items-center justify-between space-x-1"
 
 
 
 
 
 
16
  style="text-shadow: 0px 0px 3px #000000">
17
 
18
  <div class="text-md">๐Ÿค— AI WebTV ๐Ÿ‘‰ Pick a stream:
@@ -26,11 +32,33 @@
26
  x-text="chan.label"></span>
27
  </template>
28
  </div>
29
- <div class="text-xs">(<a
30
- class=""
 
 
 
 
 
31
  :href="channel.modelUrl"
32
  x-text="channel.model"
33
- target="_blank"></a>, <span x-text="channel.resolution"></span>)</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34
  </div>
35
  <div class="flex w-full">
36
  <video id="videoElement" muted autoplay class="aspect-video w-full"></video>
@@ -48,6 +76,7 @@
48
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
49
  <!--<script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>-->
50
  <script>
 
51
  function app() {
52
  return {
53
  enabled: false,
@@ -69,10 +98,47 @@ function app() {
69
  modelUrl: 'https://huggingface.co/cerspense/zeroscope_v2_XL',
70
  },
71
  },
72
- defaultChannelId: '2',
 
 
 
 
 
73
  channel: {
74
  },
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
75
  init() {
 
 
 
 
 
76
  console.log('initializing WebTV..')
77
 
78
  const urlParams = new URLSearchParams(window.location.search)
@@ -85,6 +151,8 @@ function app() {
85
  return
86
  }
87
 
 
 
88
  const defaultChannel = this.channels[this.defaultChannelId]
89
 
90
  this.channel = this.channels[requestedChannelId] || defaultChannel
@@ -92,15 +160,44 @@ function app() {
92
  console.log(`Selected channel: ${this.channel.label}`)
93
  console.log(`Stream URL: ${this.channel.url}`)
94
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
95
  // some devices such as the iPhone don't support MSE Live Playback
96
  if (mpegts.getFeatureList().mseLivePlayback) {
97
- var videoElement = document.getElementById('videoElement')
98
  var player = mpegts.createPlayer({
99
  type: 'flv', // could also be mpegts, m2ts, flv
100
  isLive: true,
101
  url: this.channel.url,
102
  })
103
- player.attachMediaElement(videoElement)
104
 
105
  player.on(mpegts.Events.ERROR, function (err) {
106
  console.log('got an error:', err)
@@ -115,7 +212,7 @@ function app() {
115
  // the stream gets interrupted for ~1sec, which causes the frontend to hangs up
116
  // the following code tries to restart the page when that happens, but in the long term
117
  // we should fix the issue on the server side (fix our FFMPEG bash script)
118
- videoElement.addEventListener('ended', function() {
119
  console.log('Stream ended, trying to reload...')
120
  setTimeout(() => {
121
  console.log('Reloading the page..')
@@ -127,10 +224,10 @@ function app() {
127
  }, false)
128
 
129
  // Handle autoplay restrictions.
130
- let promise = videoElement.play()
131
  if (promise !== undefined) {
132
- videoElement.addEventListener('click', function() {
133
- videoElement.play()
134
  })
135
  }
136
 
 
7
  </head>
8
  <body
9
  x-data="app()" x-init="init()"
10
+ class="fixed inset-0 bg-[rgb(0,0,0)] flex flex-col w-full items-center justify-start">
11
  <div x-show="!enabled">this space has been disabled by its owner</div>
12
 
13
  <div
14
+ x-show="enabled && showToolbar"
15
+ x-transition:enter="transition ease-out duration-100"
16
+ x-transition:enter-start="opacity-0 -translate-y-8"
17
+ x-transition:enter-end="opacity-100"
18
+ x-transition:leave="transition ease-in duration-200"
19
+ x-transition:leave-start="opacity-100"
20
+ x-transition:leave-end="opacity-0 -translate-y-8"
21
+ class="fixed w-full z-20 py-4 px-6 top-0 font-mono text-white flex items-center justify-between space-x-1 bg-black bg-opacity-60"
22
  style="text-shadow: 0px 0px 3px #000000">
23
 
24
  <div class="text-md">๐Ÿค— AI WebTV ๐Ÿ‘‰ Pick a stream:
 
32
  x-text="chan.label"></span>
33
  </template>
34
  </div>
35
+
36
+ <div class="flex justify-between space-x-4 items-center">
37
+ <div class="text-sm">(<a
38
+ class="hover:underline"
39
+ href="https://huggingface.co/facebook/musicgen-melody"
40
+ target="_blank">musicgen-melody</a> + <a
41
+ class="hover:underline"
42
  :href="channel.modelUrl"
43
  x-text="channel.model"
44
+ target="_blank"></a>)</div>
45
+
46
+ <div
47
+ x-on:click="toggleAudio()"
48
+ class="flex items-center justify-center text-white opacity-80 hover:opacity-100 cursor-pointer">
49
+ <div x-show="muted">
50
+ <svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="24px" height="24px"><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>
51
+ </div>
52
+ <div x-show="!muted">
53
+ <svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 512" width="24px" height="24px"><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>
54
+ </div>
55
+ </div>
56
+ <div
57
+ x-on:click="fullscreen()"
58
+ class="text-white hover:text-white opacity-80 hover:opacity-100 cursor-pointer">
59
+ <?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>
60
+ </div>
61
+ </div>
62
  </div>
63
  <div class="flex w-full">
64
  <video id="videoElement" muted autoplay class="aspect-video w-full"></video>
 
76
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
77
  <!--<script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>-->
78
  <script>
79
+
80
  function app() {
81
  return {
82
  enabled: false,
 
98
  modelUrl: 'https://huggingface.co/cerspense/zeroscope_v2_XL',
99
  },
100
  },
101
+ showToolbar: true,
102
+ muted: true,
103
+ initialized: false,
104
+ activityTimeout: null,
105
+ defaultChannelId: '1',
106
+ video: null,
107
  channel: {
108
  },
109
+ wakeUp() {
110
+ this.showToolbar = true
111
+ clearTimeout(this.activityTimeout)
112
+ this.activityTimeout = setTimeout(() => {
113
+ this.showToolbar = false
114
+ }, 1500);
115
+ },
116
+ toggleAudio() {
117
+ if (this.video.muted) {
118
+ this.video.muted = false
119
+ this.muted = false
120
+ } else {
121
+ this.video.muted = true
122
+ this.muted = true
123
+ }
124
+ },
125
+ fullscreen() {
126
+ if (this.video.requestFullscreen) {
127
+ this.video.requestFullscreen();
128
+ } else if (this.video.mozRequestFullScreen) {
129
+ this.video.mozRequestFullScreen();
130
+ } else if (this.video.webkitRequestFullscreen) {
131
+ this.video.webkitRequestFullscreen();
132
+ } else if (this.video.msRequestFullscreen) {
133
+ this.video.msRequestFullscreen();
134
+ }
135
+ },
136
  init() {
137
+ if (this.initialized) {
138
+ console.log("already initialized")
139
+ return
140
+ }
141
+ this.initialized = true
142
  console.log('initializing WebTV..')
143
 
144
  const urlParams = new URLSearchParams(window.location.search)
 
151
  return
152
  }
153
 
154
+ this.video = document.getElementById('videoElement')
155
+
156
  const defaultChannel = this.channels[this.defaultChannelId]
157
 
158
  this.channel = this.channels[requestedChannelId] || defaultChannel
 
160
  console.log(`Selected channel: ${this.channel.label}`)
161
  console.log(`Stream URL: ${this.channel.url}`)
162
 
163
+
164
+ const handleActivity = () => {
165
+ this.wakeUp()
166
+ }
167
+ handleActivity()
168
+
169
+ document.addEventListener("touchstart", handleActivity)
170
+ document.addEventListener("touchmove", handleActivity)
171
+ document.addEventListener("click", handleActivity)
172
+ document.addEventListener("mousemove", handleActivity)
173
+
174
+ // detect mute/unmute events
175
+ this.video.addEventListener("mute", () => {
176
+ this.muted = true
177
+ })
178
+ this.video.addEventListener("unmute", () => {
179
+ this.muted = false
180
+ })
181
+
182
+ // when we move outside the video, we always hide the toolbar
183
+ document.addEventListener("mouseleave", () => {
184
+ clearTimeout(this.activityTimeout)
185
+ this.showToolbar = false
186
+ })
187
+
188
+ // as a bonus, we also allow fullscreen on double click
189
+ this.video.addEventListener('dblclick', () => {
190
+ this.fullscreen()
191
+ })
192
+
193
  // some devices such as the iPhone don't support MSE Live Playback
194
  if (mpegts.getFeatureList().mseLivePlayback) {
 
195
  var player = mpegts.createPlayer({
196
  type: 'flv', // could also be mpegts, m2ts, flv
197
  isLive: true,
198
  url: this.channel.url,
199
  })
200
+ player.attachMediaElement(this.video)
201
 
202
  player.on(mpegts.Events.ERROR, function (err) {
203
  console.log('got an error:', err)
 
212
  // the stream gets interrupted for ~1sec, which causes the frontend to hangs up
213
  // the following code tries to restart the page when that happens, but in the long term
214
  // we should fix the issue on the server side (fix our FFMPEG bash script)
215
+ this.video.addEventListener('ended', function() {
216
  console.log('Stream ended, trying to reload...')
217
  setTimeout(() => {
218
  console.log('Reloading the page..')
 
224
  }, false)
225
 
226
  // Handle autoplay restrictions.
227
+ let promise = this.video.play()
228
  if (promise !== undefined) {
229
+ this.video.addEventListener('click', function() {
230
+ this.video.play()
231
  })
232
  }
233