Merge pull request #178 from midarrlabs/feature/175-replace-plyr-with…

…-vime Revert back to default video player
midarrlabs · Sep 9, 2022 · da8bc9f · da8bc9f
2 parents 3bfabf2 + 7abbe29
commit da8bc9f
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 125 deletions.
diff --git a/assets/js/cast.js b/assets/js/cast.js
diff --git a/assets/js/player.js b/assets/js/player.js
diff --git a/assets/package-lock.json b/assets/package-lock.json
diff --git a/assets/package.json b/assets/package.json
@@ -1,6 +1,5 @@
 {
   "dependencies": {
-    "plyr": "^3.7.2",
     "topbar": "^1.0.1"
   }
 }
diff --git a/config/config.exs b/config/config.exs
@@ -34,7 +34,7 @@ config :esbuild,
   version: "0.12.18",
   default: [
     args:
-      ~w(js/app.js js/player.js js/cast.js --bundle --target=es2016 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
+      ~w(js/app.js --bundle --target=es2016 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
     cd: Path.expand("../assets", __DIR__),
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]

diff --git a/lib/media_server_web/live/watch_episode_live/show.html.heex b/lib/media_server_web/live/watch_episode_live/show.html.heex
@@ -1,8 +1,7 @@
-<div id="parent" phx-update="ignore">
   <video
     id="video"
     phx-hook="video"
-    data-poster={MediaServerWeb.Repositories.Episodes.get_background(@episode)}
+    poster={MediaServerWeb.Repositories.Episodes.get_background(@episode)}
     controlsList="nodownload"
     controls
     autoplay
@@ -29,5 +28,4 @@
       >
       </track>
     <% end %>
-  </video>
-</div>
+  </video>
diff --git a/lib/media_server_web/live/watch_movie_live/show.html.heex b/lib/media_server_web/live/watch_movie_live/show.html.heex
@@ -1,8 +1,7 @@
-<div id="parent" phx-update="ignore">
   <video
     id="video"
     phx-hook="video"
-    data-poster={MediaServerWeb.Repositories.Movies.get_background(@movie)}
+    poster={MediaServerWeb.Repositories.Movies.get_background(@movie)}
     controlsList="nodownload"
     controls
     autoplay
@@ -29,5 +28,4 @@
       >
       </track>
     <% end %>
-  </video>
-</div>
+  </video>
diff --git a/lib/media_server_web/templates/watch/watch.html.heex b/lib/media_server_web/templates/watch/watch.html.heex
@@ -10,31 +10,50 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <link rel="manifest" href="/site.webmanifest" />
-    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.2/plyr.css" />
     <style>
       body {
         margin: unset;
       }
-      video, .plyr--video {
+      video {
         height: 100vh;
-      }
-      :root {
-        --plyr-color-main: #dc2626;
-        --plyr-video-control-background-hover: #4b5563;
+        width: 100%;
+        background-color: black;
       }
     </style>
     <script>
         window.userId = <%= assigns[:current_user].id %>;
         window.userEmail = "<%= assigns[:current_user].email %>";
         window.userName = "<%= assigns[:current_user].name %>";
-        window.mediaStream = "<%= System.get_env("APP_URL", "") <> assigns[:media_stream] %>";
     </script>
   </head>
   <body>
     <%= @inner_content %>
-    <script phx-track-static src={Routes.static_path(@conn, "/assets/player.js")}></script>
-    <script phx-track-static src={Routes.static_path(@conn, "/assets/cast.js")}></script>
-    <script src="//www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
+
+    <script>
+        window['__onGCastApiAvailable'] = function(isAvailable) {
+            if (isAvailable) {
+                cast.framework.CastContext.getInstance().setOptions({
+                  receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
+                });
+
+                cast.framework.CastContext.getInstance().addEventListener(cast.framework.CastContextEventType.CAST_STATE_CHANGED, function({ castState }) {
+                    if (castState === 'CONNECTED') {
+                        const mediaInfo = new chrome.cast.media.MediaInfo('<%= System.get_env("APP_URL", "") <> assigns[:media_stream] %>', 'video/mp4');
+                        const request = new chrome.cast.media.LoadRequest(mediaInfo);
+
+                        cast.framework.CastContext.getInstance().getCurrentSession().loadMedia(request).then(
+                          function() {
+                            console.log('Cast media loaded');
+                          },
+                          function(errorCode) {
+                            console.log(errorCode);
+                        });
+                    }
+                });
+            }
+        }
+    </script>
+    <script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
     <script defer phx-track-static src={Routes.static_path(@conn, "/assets/app.js")}></script>
   </body>
 </html>