remove videojs; use lvpr.tv instead (#43)

victorges · Apr 18, 2023 · 3bdd5b4 · 3bdd5b4
1 parent 04845fc
commit 3bdd5b4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 45 deletions.
diff --git a/client/src/receiver/index.css b/client/src/receiver/index.css
@@ -15,22 +15,15 @@ body {
   background: #1f1f1f;
 }
 
-#video {
+#iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: none transparent;
+  border: none;
   /* transform: scaleX(-1); */
   /* border: 1px solid #dddddd; */
   /* box-sizing: border-box; */
 }
-
-.vjs-big-play-button {
-  position: absolute !important;
-  top: 50% !important;
-  left: 50% !important;
-  transform: translate(-50%, -50%) !important;
-  transition: opacity 0.2s linear, color 0.2s linear;
-}
diff --git a/client/src/receiver/index.html b/client/src/receiver/index.html
@@ -5,33 +5,20 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <base href="/receiver/">
+    <base href="/receiver/" />
 
     <title>Just Cast It</title>
 
-    <link href="https://vjs.zencdn.net/7.18.1/video-js.css" rel="stylesheet" />
     <link href="index.css" rel="stylesheet" />
   </head>
   <body>
-    <video
-      id="video"
-      class="video-js vjs-default-skin"
-      controls
-      autoplay
-      muted
-      preload="auto"
-    >
-      <p class="vjs-no-js">
-        To view this video please enable JavaScript, and consider upgrading to a
-        web browser that
-        <a href="https://videojs.com/html5-video-support/" target="_blank">
-          supports HTML5 video
-        </a>
-      </p>
-    </video>
-    <script src="https://vjs.zencdn.net/7.18.1/video.min.js"></script>
-    <script src="https://unpkg.com/videojs-contrib-quality-levels@2.1.0/dist/videojs-contrib-quality-levels.min.js"></script>
-    <script src="https://unpkg.com/videojs-hls-quality-selector@1.1.4/dist/videojs-hls-quality-selector.min.js"></script>
+    <iframe
+      id="iframe"
+      frameborder="0"
+      allowfullscreen
+      allow="autoplay; encrypted-media; picture-in-picture"
+      sandbox="allow-scripts"
+    ></iframe>
     <script src="bundle.js"></script>
   </body>
 </html>
diff --git a/client/src/receiver/index.ts b/client/src/receiver/index.ts
@@ -1,9 +1,6 @@
 const { body } = document
 
-const video = document.getElementById('video')
-
-// @ts-ignore
-const player = videojs(video)
+const iframe = document.getElementById('iframe') as HTMLIFrameElement
 
 // set background to transparent when inside iframe
 if (window.location !== window.parent.location) {
@@ -17,9 +14,6 @@ console.log('hostname', hostname)
 console.log('port', port)
 console.log('pathname', pathname)
 
-player.volume(1)
-player.controls(true)
-
 const humanId = pathname.substr(1)
 fetch(`/api/stream/${humanId}`)
   .then((res) => {
@@ -32,12 +26,5 @@ fetch(`/api/stream/${humanId}`)
     return { playbackUrl }
   })
   .then((info) => {
-    player.src({
-      src: info.playbackUrl,
-      type: 'application/x-mpegURL',
-      withCredentials: false,
-    })
-    player.hlsQualitySelector({
-      displayCurrentQuality: true,
-    })
+    iframe.src = `https://lvpr.tv/?v=${info.playbackId}`
   })