Merge branch 'feature/66402-hide-controls-on-init' into 'develop'

#66402 Прятать контроллы при инициализации

See merge request ps/voka/voka-player-js!88

demo/index.html

@@ -31,15 +31,14 @@
         },
         apiConfig: {
             channelId: 'hls-998f5396-c9dd-4a1e-82c7-0aec531fc015',
-            urlGetParams: 'minheight=400',
+            urlGetParams: null,
             clientId: null,
             movieId: null,
             episodeId: null,
             newsId: null,
-            // apiHost: 'localhost:8080',
         },
         uiConfig: {
-            initAsLive: true
+            initAsLive: true,
         },
         globalOpts: {
             uiLanguage: 'ru'
@@ -63,7 +62,8 @@
     });
     player.afterInitialize(() => {
       console.log("afterInitialize")
-      player.setControlbarVisibility(false)
+      // player.setControlbarVisibility(true)
+      // player.attachSource("https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd")
     })
 
     player.addEventListener('play', onPlay, window)

doc/options.md

@@ -5,6 +5,12 @@
 ##### **1. Настройки элементов управления (controls)**
 
 ```js
+{
+  /**
+   * Показывать элементы управления
+   * @default false
+  */  
+  isVisible: true,
   zoomButton: {
     /**
      * Показывать кнопку масштабирования видео
@@ -19,7 +25,7 @@
     isVisible: false
   },
 
-  editing: {
+  selectionButton: {
     /**
      * Включить выбор диапазона на шкале прогресса
      * @default false
@@ -27,7 +33,7 @@
     enable: false
   },
 
-  externalSubtitles: {
+  tracks: {
     /**
      * URL к файлу субтитров (также субтитры тянутся из потока)
      * @deprecated Будет удалено/переработано
@@ -41,6 +47,7 @@
      */
     lang: null
   }
+}
 ```
 
 ##### **2. Основные настройки воспроизведения (streamOpts)**

src/components/BottomPanel.ts

@@ -21,8 +21,6 @@ import Player from 'video.js/dist/types/player'
  */
 class BottomPanel extends ClickableComponent {
 
-  private readonly observer: ControlbarVisibilityObserver.IObserver | null
-
   constructor(player: Player, options: VideoJsPlayerOptions) {
     let controls = options['controls'] || {}
     const _options = {
@@ -31,26 +29,29 @@ class BottomPanel extends ClickableComponent {
     }
 
     super(player, _options)
-    const observer = options.playerOptions.controls?.BottomPanel?.observer
-    this.observer = observer
-    if (!controls) {
-      observer?.visibility(false)
-      this.hide()
-    }
+
+    const params = options.playerOptions.controls?.CentralPanel
+    const observer = params?.observer
+    const isVisible = params?.isVisible
 
     if (observer != null) {
       observer.visibilityEmmiter.subscribe(
         ControlbarVisibilityObserver.visibilityEvent,
         event => {
-          if (event.payload.value) {
-            this.show()
-          } else {
-            this.hide()
-          }
+          this.toggleVisibility(event.payload.value);
         }
       )
+      observer.visibility(isVisible ?? true)
     }
+    this.toggleVisibility(isVisible ?? true)
+  }
 
+  private toggleVisibility(isVisible: boolean) {
+    if (isVisible) {
+      this.show();
+    } else {
+      this.hide();
+    }
   }
 
   /**

src/components/CentralPanel.ts

@@ -1,11 +1,12 @@
-import videojs, { VideoJsPlayer } from 'video.js'
-import ClickableComponent from './ClickableComponent'
-import VokaEvent from '@/constants/VokaEvent'
-import './BigPlayButton'
-import '@/components/skip-buttons/SkipForward'
-import '@/components/skip-buttons/SkipBackward'
-import '@/components/selection/SelectionWrapper'
-import ControlbarVisibilityObserver from '@/internal/observers/ControlbarVisibilityObserver'
+import "@/components/selection/SelectionWrapper";
+import "@/components/skip-buttons/SkipBackward";
+import "@/components/skip-buttons/SkipForward";
+import VokaEvent from "@/constants/VokaEvent";
+import ControlbarVisibilityObserver from "@/internal/observers/ControlbarVisibilityObserver";
+import { hkdf } from "crypto";
+import videojs, { VideoJsPlayer, VideoJsPlayerOptions } from "video.js";
+import "./BigPlayButton";
+import ClickableComponent from "./ClickableComponent";
 
 /**
  * Container of main controls.
@@ -17,29 +18,38 @@ class CentralPanel extends ClickableComponent {
   private isClickDisabled: boolean
   private readonly bigPlayButton: videojs.Component | undefined
 
-  constructor(player: VideoJsPlayer, options: CentralPanelOptions) {
+  constructor(player: VideoJsPlayer, options: VideoJsPlayerOptions) {
     const options_ = {
       ...options,
       children: ['SkipBackward', 'BigPlayButton', 'SkipForward', 'SelectionWrapper']
     }
 
     super(player, options_)
-    const observer = options.playerOptions.controls?.CentralPanel?.observer
+
+    const params = options.playerOptions.controls?.CentralPanel
+    const observer = params?.observer
+    const isVisible = params?.isVisible
+
     if (observer != null) {
       observer.visibilityEmmiter.subscribe(
         ControlbarVisibilityObserver.visibilityEvent,
         event => {
-          if (event.payload.value) {
-            this.show()
-            this.isClickDisabled = false
-          } else {
-            this.hide()
-            this.isClickDisabled = true
-          }
+          this.toggleVisibility(event.payload.value);
         }
       )
+      observer.visibility(isVisible ?? true)
+    }
+    this.toggleVisibility(isVisible ?? true)
+  }
+
+  private toggleVisibility(isVisible: boolean) {
+    if (isVisible) {
+      this.show();
+      this.isClickDisabled = false;
+    } else {
+      this.hide();
+      this.isClickDisabled = true;
     }
-    this.isClickDisabled = false
   }
 
   enableClick() {

src/internal/player/CorePlayerOptions.ts

@@ -4,6 +4,7 @@ namespace CorePlayerOptions {
 
   namespace UIControls {
     export interface IControls {
+      isVisible: boolean
       selectionButton: ISelectionButtons
       tracks: ITextTrack[]
       zoomButton: IZoomButton

src/internal/player/VokaCorePlayer.ts

@@ -594,9 +594,11 @@ namespace VokaCorePlayer {
                     },
                     CentralPanel: {
                       observer: this.controlbarVisibilityObserver,
+                      isVisible: options.controls.isVisible,
                     },
                     BottomPanel: {
                         observer: this.controlbarVisibilityObserver,
+                        isVisible: options.controls.isVisible,
                     },
                 },
                 previewPopup: {

src/public/VokaPlayerImpl.ts

@@ -106,6 +106,7 @@ export class VokaPlayerImpl implements IVokaPlayer {
         }
         return {
             controls: {
+                isVisible: options.uiConfig?.hideControls !== true,
                 tracks: options.controls.externalSubtitles?.url && [
                     {
                         kind: "subtitles",

src/public/models/VokaDefaultOptions.ts

@@ -28,7 +28,7 @@ const defaultOptions = {
     autoshowToolbox: true,
     emptyPoster: false,
     waitingPoster: false,
-    hideControls: false
+    hideControls: true
   },
   adConfig: {
     adInfo: true,