diff --git a/ui/v2.5/package.json b/ui/v2.5/package.json index 7236dda18..d287b8437 100644 --- a/ui/v2.5/package.json +++ b/ui/v2.5/package.json @@ -90,7 +90,7 @@ "@types/react-router-bootstrap": "^0.24.5", "@types/react-router-hash-link": "^2.4.5", "@types/video.js": "^7.3.51", - "@types/videojs-mobile-ui": "^0.5.0", + "@types/videojs-mobile-ui": "^0.8.0", "@types/videojs-seek-buttons": "^2.1.0", "@typescript-eslint/eslint-plugin": "^5.52.0", "@typescript-eslint/parser": "^5.52.0", diff --git a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx index 5ecc43a90..1a4c5e87d 100644 --- a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx +++ b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx @@ -16,6 +16,7 @@ import "./source-selector"; import "./persist-volume"; import "./markers"; import "./vtt-thumbnails"; +import "./big-buttons"; import "./track-activity"; import cx from "classnames"; import { @@ -303,6 +304,7 @@ export const ScenePlayer: React.FC = ({ markers: {}, sourceSelector: {}, persistVolume: {}, + bigButtons: {}, seekButtons: { forward: 10, back: 10, @@ -469,9 +471,7 @@ export const ScenePlayer: React.FC = ({ lockToLandscapeOnEnter: isLandscape, }, touchControls: { - seekSeconds: 10, - tapTimeout: 500, - disableOnEnd: false, + disabled: true, }, }; player.mobileUi(mobileUiOptions); diff --git a/ui/v2.5/src/components/ScenePlayer/big-buttons.ts b/ui/v2.5/src/components/ScenePlayer/big-buttons.ts new file mode 100644 index 000000000..619349aea --- /dev/null +++ b/ui/v2.5/src/components/ScenePlayer/big-buttons.ts @@ -0,0 +1,69 @@ +import videojs, { VideoJsPlayer } from "video.js"; + +// prettier-ignore +const BigPlayButton = videojs.getComponent("BigPlayButton") as unknown as typeof videojs.BigPlayButton; + +class BigPlayPauseButton extends BigPlayButton { + handleClick(event: videojs.EventTarget.Event) { + if (this.player().paused()) { + super.handleClick(event); + } else { + this.player().pause(); + } + } + + buildCSSClass() { + return "vjs-control vjs-button vjs-big-play-pause-button"; + } +} + +class BigButtonGroup extends videojs.getComponent("Component") { + constructor(player: VideoJsPlayer) { + super(player); + + this.addChild("seekButton", { + direction: "back", + seconds: 10, + }); + + this.addChild("BigPlayPauseButton"); + + this.addChild("seekButton", { + direction: "forward", + seconds: 10, + }); + } + + createEl() { + return super.createEl("div", { + className: "vjs-big-button-group", + }); + } +} + +class BigButtonsPlugin extends videojs.getPlugin("plugin") { + constructor(player: VideoJsPlayer) { + super(player); + + player.ready(() => { + player.addChild("BigButtonGroup"); + }); + } +} + +// Register the plugin with video.js. +videojs.registerComponent("BigButtonGroup", BigButtonGroup); +videojs.registerComponent("BigPlayPauseButton", BigPlayPauseButton); +videojs.registerPlugin("bigButtons", BigButtonsPlugin); + +/* eslint-disable @typescript-eslint/naming-convention */ +declare module "video.js" { + interface VideoJsPlayer { + bigButtons: () => BigButtonsPlugin; + } + interface VideoJsPlayerPluginOptions { + bigButtons?: {}; + } +} + +export default BigButtonsPlugin; diff --git a/ui/v2.5/yarn.lock b/ui/v2.5/yarn.lock index 32d6db07d..9c82c29b8 100644 --- a/ui/v2.5/yarn.lock +++ b/ui/v2.5/yarn.lock @@ -2440,10 +2440,10 @@ resolved "https://registry.yarnpkg.com/@types/video.js/-/video.js-7.3.51.tgz#ce69e02681ed6ed8abe61bb3802dd032a74d63e8" integrity sha512-xLlt/ZfCuWYBvG2MRn018RvaEplcK6dI63aOiVUeeAWFyjx3Br1hL749ndFgbrvNdY4m9FoHG1FQ/PB6IpfSAQ== -"@types/videojs-mobile-ui@^0.5.0": - version "0.5.0" - resolved "https://registry.yarnpkg.com/@types/videojs-mobile-ui/-/videojs-mobile-ui-0.5.0.tgz#66934b140fd437fda361986f8e7e87b01dc39138" - integrity sha512-wqeapTB35qpLfERxvL5mZGoexf5bA2TreDpFgc3zyCdr7Acf86VItvo9oTclFeUc11wOo7W7/4ueZZAEYmlTaA== +"@types/videojs-mobile-ui@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@types/videojs-mobile-ui/-/videojs-mobile-ui-0.8.0.tgz#0fb82810155f3dee9620ea411c8b9bd17e1ac645" + integrity sha512-Q8p7ezQLZzf8pnvYd8GZ/6tcg2oX0269Q94dDoqNnq2QMmqWp1sj8npU3gGnTaLkYvvdrO8UjBOIzX68RkQLew== dependencies: "@types/video.js" "*"