Add Chromecast support on Google Chrome.

This commit is contained in:
infinite-persistence 2021-12-07 19:14:58 +08:00 committed by Thomas Zarebczan
parent 8710b1334f
commit 4c84fde31b
6 changed files with 99 additions and 2 deletions

View file

@ -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",

View file

@ -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);
}
}
}

View file

@ -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
player.mobileUi(); // Inits mobile version. No-op if Desktop.
// Initialize mobile UI.
player.mobileUi();
Chromecast.initialize(player);
// Add quality selector to player
player.hlsQualitySelector({

View file

@ -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

View file

@ -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);
}
}
}

View file

@ -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"