Add Chromecast support on Google Chrome.
This commit is contained in:
parent
8710b1334f
commit
4c84fde31b
6 changed files with 99 additions and 2 deletions
|
@ -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",
|
||||
|
|
24
ui/component/viewers/videoViewer/internal/chromecast.js
Normal file
24
ui/component/viewers/videoViewer/internal/chromecast.js
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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({
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
17
yarn.lock
17
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"
|
||||
|
|
Loading…
Reference in a new issue