Add Chromecast support on Google Chrome.

package.json

@@ -51,6 +51,7 @@
     "@emotion/react": "^11.6.0",
     "@emotion/styled": "^11.6.0",
     "@mui/material": "^5.2.1",
+    "@silvermine/videojs-chromecast": "^1.3.3",
     "@ungap/from-entries": "^0.2.1",
     "auto-launch": "^5.0.5",
     "electron-dl": "^1.11.0",

ui/component/viewers/videoViewer/internal/chromecast.js

@@ -0,0 +1,24 @@
+// @flow
+
+/**
+ * Wrapper for @silvermine/videojs-chromecast
+ */
+export default class Chromecast {
+  /**
+   * Actions that need to happen after initializing 'videojs'
+   */
+  static initialize(player: any) {
+    // --- Start plugin ---
+    player.chromecast();
+    // --- Init cast framework ---
+    const CHROMECAST_API_SCRIPT_ID = 'chromecastApi';
+    const existingChromecastScript = document.getElementById(CHROMECAST_API_SCRIPT_ID);
+    if (!existingChromecastScript) {
+      const script = document.createElement('script');
+      script.src = 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1';
+      script.id = CHROMECAST_API_SCRIPT_ID;
+      // $FlowFixMe
+      document.body.appendChild(script);
+    }
+  }
+}

ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -3,6 +3,7 @@ import 'videojs-contrib-ads'; // must be loaded in this order
 import 'videojs-ima'; // loads directly after contrib-ads
 import 'video.js/dist/alt/video-js-cdn.min.css';
 import './plugins/videojs-mobile-ui/plugin';
+import '@silvermine/videojs-chromecast/dist/silvermine-videojs-chromecast.css';
 
 import * as ICONS from 'constants/icons';
 import * as OVERLAY from './overlays';
@@ -14,6 +15,7 @@ import functions from './videojs-functions';
 import hlsQualitySelector from './plugins/videojs-hls-quality-selector/plugin';
 import keyboardShorcuts from './videojs-keyboard-shortcuts';
 import LbryVolumeBarClass from './lbry-volume-bar';
+import Chromecast from './chromecast';
 import playerjs from 'player.js';
 import qualityLevels from 'videojs-contrib-quality-levels';
 import React, { useEffect, useRef, useState } from 'react';
@@ -21,10 +23,13 @@ import recsys from './plugins/videojs-recsys/plugin';
 import runAds from './ads';
 import videojs from 'video.js';
 
+require('@silvermine/videojs-chromecast')(videojs);
+
 export type Player = {
   controlBar: { addChild: (string, any) => void },
   loadingSpinner: any,
   autoplay: (any) => boolean,
+  chromecast: (any) => void,
   currentTime: (?number) => number,
   dispose: () => void,
   ended: () => boolean,
@@ -157,6 +162,8 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     // fixes problem of errant CC button showing up on iOS
     // the true fix here is to fix the m3u8 file, see: https://github.com/lbryio/lbry-desktop/pull/6315
     controlBar: { subsCapsButton: false },
+    techOrder: ['chromecast', 'html5'],
+    chromecast: { requestTitleFn: (src) => '' },
   };
 
   const { detectFileType, createVideoPlayerDOM } = functions({ source, sourceType, videoJsOptions, isAudio });
@@ -192,8 +199,10 @@ export default React.memo<Props>(function VideoJs(props: Props) {
       // Add reloadSourceOnError plugin
       player.reloadSourceOnError({ errorInterval: 10 });
 
-      // initialize mobile UI
+      // Initialize mobile UI.
-      player.mobileUi(); // Inits mobile version. No-op if Desktop.
+      player.mobileUi();
+
+      Chromecast.initialize(player);
 
       // Add quality selector to player
       player.hlsQualitySelector({

ui/scss/component/_file-render.scss

@@ -477,6 +477,14 @@ $control-bar-icon-size: 0.8rem;
         left: -3em; // Center the popup on top of the button that invoked it.
       }
     }
+
+    .vjs-chromecast-button {
+      .vjs-icon-placeholder {
+        $chromecast-icon-size: 21px;
+        width: $chromecast-icon-size;
+        height: $chromecast-icon-size;
+      }
+    }
   }
 
   // control-bar: general padding

ui/scss/component/_videojs.scss

@@ -187,3 +187,41 @@ $control-bar-icon-size: 0.8rem;
 .ima-ad-container {
   display: none;
 }
+
+.video-js-parent .vjs-tech-chromecast {
+  .vjs-tech-chromecast-poster {
+    &::after {
+      $chromecast-poster-width: 50px;
+      width: $chromecast-poster-width;
+      left: calc(50% - #{$chromecast-poster-width * 0.5});
+    }
+  }
+
+  .vjs-tech-chromecast-poster-img {
+    $chromecast-poster-max-height: 50px;
+    max-height: $chromecast-poster-max-height;
+    &.vjs-tech-chromecast-poster-img-empty {
+      width: 80px;
+      height: 90px;
+    }
+  }
+
+  .vjs-tech-chromecast-title-container {
+    margin-bottom: var(--spacing-main-padding);
+  }
+
+  .vjs-tech-chromecast-title {
+    font-size: var(--font-title);
+    @media (max-width: $breakpoint-small) {
+      font-size: var(--font-small);
+    }
+  }
+
+  .vjs-tech-chromecast-subtitle {
+    color: var(--color-text-subtitle);
+    font-size: var(--font-body);
+    @media (max-width: $breakpoint-small) {
+      font-size: var(--font-xsmall);
+    }
+  }
+}

yarn.lock

@@ -1870,6 +1870,14 @@
   dependencies:
     "@sentry/cli" "^1.49.0"
 
+"@silvermine/videojs-chromecast@^1.3.3":
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@silvermine/videojs-chromecast/-/videojs-chromecast-1.3.3.tgz#44d81a18f6812aace05c0c37bfd3abc07505d495"
+  integrity sha512-vbytdnqgUzOYIxA1CEWYe19PHea9JlFULJSqJ00Z0E8xHwOk8LP3gtpQ4MnqH0IViciBDQmyq9ta/5rbDvDWEw==
+  dependencies:
+    class.extend "0.9.1"
+    webcomponents.js "git+https://git@github.com/webcomponents/webcomponentsjs.git#v0.7.24"
+
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
@@ -4651,6 +4659,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+class.extend@0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/class.extend/-/class.extend-0.9.1.tgz#b4ee417c693740a44a92a6d64f1c9540641b097a"
+  integrity sha1-tO5BfGk3QKRKkqbWTxyVQGQbCXo=
+
 classnames@^2.2.5:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
@@ -17099,6 +17112,10 @@ web-namespaces@^1.0.0:
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.4.tgz#bc98a3de60dadd7faefc403d1076d529f5e030ec"
   integrity sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==
 
+"webcomponents.js@git+https://git@github.com/webcomponents/webcomponentsjs.git#v0.7.24":
+  version "0.7.24"
+  resolved "git+https://git@github.com/webcomponents/webcomponentsjs.git#8a2e40557b177e2cca0def2553f84c8269c8f93e"
+
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"