@viewlift/player-backup 1.0.1 → 1.0.2-lighteningjs

package/src/player-ui/player-ui.js

@@ -0,0 +1,514 @@
+import { Button } from '../player-components/player-buttons/playerButtons.js';
+import { PlayerSeekbar } from '../player-components/player-seekbar/playerSeekbar.js';
+import { TextContent } from '../player-components/player-title/playerTitle.js';
+import { Sidebar } from '../player-components/player-sidebar/player-sidebar.js';
+import playIcon from '../assets/playIcon.png';
+import pauseIcon from '../assets/pauseIcon.png';
+import playIconFocus from '../assets/playIconFocus.png';
+import pauseIconFocus from '../assets/pauseIconFocus.png';
+import settingsIcon from '../assets/settingsIcon.png';
+
+class VideoPlayerUI {
+  constructor({ player, config }) {
+    if (!player || typeof player !== 'object' || !player.video) {
+      throw new Error('VideoPlayerUI: player must be a valid object with a video property');
+    }
+    if (!config || typeof config !== 'object') {
+      throw new Error('VideoPlayerUI: config must be a valid object');
+    }
+
+    this.player = player;
+    this.videoTitleConfig = config.videoTitleConfig || {};
+    this.drmEnabled = config.drmEnabled;
+    this.selectedVideoQuality = "auto";
+    this.selectedPlaybackCaption = "";
+    this.selectedAudioQuality = "";
+
+    this.container = document.createElement('div');
+    this.container.className = 'video-player-ui';
+    this.rightSideContainer = document.createElement('div');
+    this.rightSideContainer.className = 'right-side-container';
+    this.leftSideContainer = document.createElement('div');
+    this.leftSideContainer.className = 'left-side-container';
+    this.container.appendChild(this.rightSideContainer);
+    this.container.appendChild(this.leftSideContainer);
+    this.createControls();
+  }
+
+  createControls() {
+    this.createPlayPauseBtn();
+    this.createSeekbar();
+    this.createSettingsBtn();
+    this.createRestartVideoBtn();
+    this.createTextContent();
+    this.addEventListeners();
+
+    // Attach the video element
+    this.container.appendChild(this.player.video);
+  }
+
+  createPlayPauseBtn() {
+    this.playPauseBtn = new Button({
+      imgSrc: playIconFocus,
+      imgAltText: 'Play/Pause',
+      buttonText: 'Play',
+      width: 70,
+      height: 70,
+      klassname: 'play-pause-btn',
+      focused: false,
+      disabled: false,
+      handleClick: () => {
+        if (this.player.video.paused) {
+          this.player.play();
+          if (this.playPauseBtn && this.playPauseBtn.buttonElement && this.playPauseBtn.buttonElement.querySelector('img')) {
+            this.playPauseBtn.buttonElement.querySelector('img').setAttribute('src', pauseIconFocus);
+          } else if (this.playPauseBtn && this.playPauseBtn.buttonElement) {
+            this.playPauseBtn.buttonElement.textContent = 'Pause';
+          }
+        } else {
+          this.player.pause();
+          if (this.playPauseBtn && this.playPauseBtn.buttonElement) {
+            this.playPauseBtn.buttonElement.querySelector('img').setAttribute('src', playIconFocus);
+          } else if (this.playPauseBtn && this.playPauseBtn.buttonElement) {
+            this.playPauseBtn.buttonElement.textContent = 'Play';
+          }
+        }
+      }
+    });
+    this.playPauseBtn.mount(this.container);
+
+    requestAnimationFrame(() => {
+      if (this.playPauseBtn) this.playPauseBtn.focus();
+    });
+
+    this.createPlayPauseBtnEventListeners();
+  }
+
+  createPlayPauseBtnEventListeners() {
+    if (!this.playPauseBtn || !this.playPauseBtn.buttonElement) return;
+
+    this.playPauseBtn.buttonElement.addEventListener('focus', () => {
+      if (this.playPauseBtn && this.playPauseBtn.buttonElement && this.playPauseBtn.buttonElement.querySelector('img')) {
+        const iconSrc = this.player.video.paused ? playIconFocus : pauseIconFocus;
+        this.playPauseBtn.buttonElement.querySelector('img').setAttribute('src', iconSrc);
+        this.playPauseBtn.buttonElement.style.backgroundColor = 'rgba(255, 255, 255)';
+      }
+    });
+
+    this.playPauseBtn.buttonElement.addEventListener('blur', () => {
+      if (this.playPauseBtn && this.playPauseBtn.buttonElement && this.playPauseBtn.buttonElement.querySelector('img')) {
+        const iconSrc = this.player.video.paused ? playIcon : pauseIcon;
+        this.playPauseBtn.buttonElement.querySelector('img').setAttribute('src', iconSrc);
+        this.playPauseBtn.buttonElement.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
+      }
+    });
+  }
+
+  updatePlayPauseButton() {
+    if (this.playPauseBtn && this.playPauseBtn.buttonElement && this.seekbar.focused) {
+      const iconSrc = this.player.video.paused ? playIcon : pauseIcon;
+      this.playPauseBtn.buttonElement.querySelector('img').setAttribute('src', iconSrc);
+    }
+  }
+
+  createSeekbar() {
+    if (!this.player.video) return;
+
+    this.seekbar = new PlayerSeekbar(this.player.video);
+    this.seekbar.mount(this.container);
+
+    this.player.video.addEventListener('play', () => this.updatePlayPauseButton());
+    this.player.video.addEventListener('pause', () => this.updatePlayPauseButton());
+  }
+
+  addEventListeners() {
+    if (!this.playPauseBtn || !this.playPauseBtn.buttonElement) return;
+
+    this.playPauseBtn.buttonElement.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        if (this.settingsBtn) this.settingsBtn.focus();
+        else if (this.restartVideoBtn) this.restartVideoBtn.focus();
+        else if (this.seekbar) this.seekbar.focus();
+      }
+    });
+
+    if (this.settingsBtn && this.settingsBtn.buttonElement) {
+      this.settingsBtn.buttonElement.addEventListener('keydown', (e) => {
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          e.stopPropagation();
+          if (this.seekbar) this.seekbar.focus();
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          e.stopPropagation();
+          if (this.playPauseBtn) this.playPauseBtn.focus();
+        } else if (e.key === 'ArrowRight') {
+          e.preventDefault();
+          e.stopPropagation();
+          if (this.restartVideoBtn) this.restartVideoBtn.focus();
+        }
+      });
+    }
+
+    if (this.restartVideoBtn && this.restartVideoBtn.buttonElement) {
+      this.restartVideoBtn.buttonElement.addEventListener('keydown', (e) => {
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+           e.stopPropagation();
+          if (this.seekbar) this.seekbar.focus();
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          e.stopPropagation();
+          if (this.playPauseBtn) this.playPauseBtn.focus();
+        } else if (e.key === 'ArrowLeft') {
+          e.preventDefault();
+          e.stopPropagation();
+          if (this.settingsBtn) this.settingsBtn.focus();
+        }
+      });
+    }
+
+    const seekbarElement = this.seekbar.getElement && this.seekbar.getElement();
+    if (seekbarElement) {
+      seekbarElement.addEventListener('keydown', (e) => {
+        if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          e.stopPropagation();
+
+          if (this.settingsBtn) this.settingsBtn.focus();
+          else if (this.restartVideoBtn) this.restartVideoBtn.focus();
+          else if (this.playPauseBtn) this.playPauseBtn.focus();
+        }
+      });
+    }
+  }
+
+  createSettingsBtn() {
+    this.settingsBtn = new Button({
+      imgSrc: settingsIcon,
+      imgAltText: 'Settings',
+      buttonText: 'Settings',
+      width: 40,
+      height: 40,
+      klassname: 'settings-btn',
+      focused: false,
+      disabled: false,
+      handleClick: () => {
+        this.createSideBar();
+      }
+    });
+    this.settingsBtn.mount(this.rightSideContainer);
+  }
+
+  createRestartVideoBtn() {
+    this.restartVideoBtn = new Button({
+      imgSrc: '',
+      imgAltText: 'Start From Beginning',
+      buttonText: 'Start From Beginning',
+      width: 150,
+      height: 35,
+      klassname: 'restart-btn',
+      focused: false,
+      disabled: false,
+      handleClick: () => {
+        if (this.player.video) {
+          this.player.video.currentTime = 0;
+        }
+      }
+    });
+    this.restartVideoBtn.mount(this.rightSideContainer);
+  }
+
+  createTextContent() {
+    this.textContent = new TextContent({
+      text: this.videoTitleConfig.text,
+      fontSize: this.videoTitleConfig.fontSize,
+      color: this.videoTitleConfig.color,
+      fontWeight: this.videoTitleConfig.bold,
+    });
+    this.textContent.mount(this.leftSideContainer);
+  }
+
+  changePlayBackQuality(id) {
+    this.selectedPlaybackQuality = id;
+    let videoLevels = this.player.videoResolutions();
+
+    if (!videoLevels || videoLevels.length === 0) {
+      console.warn('No video resolutions available to change playback quality.');
+      return;
+    }
+
+    if (id == "auto") {
+      this.selectedVideoQuality = "auto";
+      if (this.drmEnabled) {
+
+      } else {
+        this.player.playerInstance.currentLevel = -1;
+      }
+    } else {
+      for (let i = 0; i < videoLevels?.length; i++) {
+        if (videoLevels[i].height == id) {
+          this.selectedVideoQuality = videoLevels[i].height;
+          if (this.drmEnabled) {
+            this.player.playerInstance.setQualityFor('video', i);
+          } else {
+            this.player.playerInstance.currentLevel = i;
+          }
+          break;
+        }
+      }
+    }
+  }
+
+  changePlaybackCaptions(id) {
+    let textTracks = this.player.captionsOptions();
+
+    if (!textTracks || textTracks.length === 0) {
+      console.warn('No text tracks available to change playback captions.');
+      return;
+    }
+    const validTextTracksType = ['captions', 'subtitles', 'caption', 'subtitle'];
+
+    for (let i = 0; i < textTracks.length; i++) {
+      if(validTextTracksType.includes(textTracks[i].kind.toLowerCase())){
+        if (textTracks[i].language === id) {
+          this.selectedPlaybackCaption = id;
+          textTracks[i].mode = 'showing';
+        } else {
+          textTracks[i].mode = 'disabled';
+        }
+      }
+    }
+  }
+
+
+  changePlaybackAudio(id){
+    let audioTracks = this.player.audioTracks();
+
+    if (!audioTracks || audioTracks.length === 0) {
+      console.warn('No audio tracks available to change playback audio.');
+      return;
+    }
+
+    for (let i = 0; i < audioTracks.length; i++) {
+      if (audioTracks[i].id == id || audioTracks[i].lang == id) {
+        this.selectedAudioQuality = id;
+        if(this.drmEnabled){
+          this.player.playerInstance.setCurrentTrack(audioTracks[i]);
+        } else{
+          this.player.playerInstance.audioTrack = i;
+        }
+        break;
+      }
+    }
+  }
+
+  videoQualitySelector() {
+    if (!this.mainSidebar) return;
+
+    const resolutions = this.player.videoResolutions();
+    const currentQuality = this.selectedVideoQuality;
+
+    const items = [
+      {
+        text: 'Auto',
+        id: 'auto',
+        isSelected: currentQuality === 'auto',
+        callback: () => {
+          this.mainSidebar.currentFocusedOption.focus();
+          this.sidebar.unmount();
+        }
+      },
+      ...resolutions.map(resolution => ({
+        text: `${resolution.height}p`,
+        id: resolution.height,
+        isSelected: currentQuality === resolution.height,
+        callback: () => {
+          this.mainSidebar.currentFocusedOption.focus();
+          this.sidebar.unmount();
+        }
+      }))
+    ];
+
+
+    this.sidebar = new Sidebar({
+      title: 'Video Quality',
+      items: items,
+      klassname: 'default-sidebar',
+      lastFocusedElement: this.mainSidebar.currentFocusedOption,
+      type: 'selection',
+      focused: true,
+      onselect: (data) => {
+        this.changePlayBackQuality(data.id);
+      },
+      callback: () => {
+        if (this.mainSidebar.sidebarElement) {
+          this.mainSidebar.sidebarElement.style.visibility = 'visible';
+        }
+      }
+    });
+    this.sidebar.mount(this.container);
+  }
+
+  audioLanguageSelector() {
+    if (!this.mainSidebar) return;
+    const audioTracks = this.player.audioTracks();
+    const currentAudioQuality = this.selectedAudioQuality;
+
+    this.sidebar = new Sidebar({
+      title: 'Audio Language',
+      items: audioTracks.map((audio, idx) => ({
+        id: audio.id || audio.lang,
+        text: audio.name || audio.lang,
+        isSelected: (audioTracks.length === 1)  || (currentAudioQuality ? currentAudioQuality === audio.id : audio.default),
+        callback: () => {
+          this.mainSidebar.currentFocusedOption.focus();
+          this.sidebar.unmount();
+        }
+      })),
+      klassname: 'default-sidebar',
+      lastFocusedElement: this.mainSidebar.currentFocusedOption,
+      type: 'selection',
+      focused: true,
+      onselect: (data) => {
+          this.changePlaybackAudio(data.id);
+      },
+      callback: () => {
+        if (this.mainSidebar.sidebarElement) {
+          this.mainSidebar.sidebarElement.style.visibility = 'visible';
+        }
+      }
+    });
+    this.sidebar.mount(this.container);
+  }
+
+  subtitlesSelector() {
+    if (!this.mainSidebar) return;
+
+    const captions = this.player.captionsOptions();
+    const currentCaption = this.selectedPlaybackCaption;
+
+
+    const items = [
+      {
+        id: 'off',
+        text: 'Off',
+        isSelected: currentCaption === 'off', // You can enhance this by checking if all tracks are disabled
+        callback: () => {
+          this.mainSidebar.currentFocusedOption.focus();
+          this.sidebar.unmount();
+        }
+      },
+      ...captions.map(subtitle => ({
+        id: subtitle.language,
+        text: subtitle.label,
+        isSelected: currentCaption === subtitle.language || subtitle.mode === 'showing',
+        callback: () => {
+          this.mainSidebar.currentFocusedOption.focus();
+          this.sidebar.unmount();
+        }
+      }))
+    ];
+
+
+    this.sidebar = new Sidebar({
+      title: 'Subtitles',
+      items: items,
+      klassname: 'default-sidebar',
+      lastFocusedElement: this.mainSidebar.currentFocusedOption,
+      type: 'selection',
+      focused: true,
+      callback: () => {
+        if (this.mainSidebar.sidebarElement) {
+          this.mainSidebar.sidebarElement.style.visibility = 'visible';
+        }
+      },
+      onselect: (data) => {
+        this.changePlaybackCaptions(data.id);
+      }
+    });
+    this.sidebar.mount(this.container);
+  }
+
+  createSideBar() {
+    let items = [
+      {
+        text: 'Video Quality', isSelected: true, callback: () => {
+          if (this.mainSidebar.sidebarElement) {
+            this.mainSidebar.sidebarElement.style.visibility = 'hidden';
+          }
+          this.videoQualitySelector();
+        }
+      }
+    ]
+
+    if (this.player.audioTracks() && this.player.audioTracks().length > 0) {
+      items.push(
+        {
+          text: 'Audio Language', isSelected: false, callback: () => {
+            if (this.mainSidebar.sidebarElement) {
+              this.mainSidebar.sidebarElement.style.visibility = 'hidden';
+            }
+            this.audioLanguageSelector();
+          }
+        }
+      )
+    }
+
+    if (this.player.captionsOptions() && this.player.captionsOptions().length > 0) {
+      items.push(
+        {
+          text: 'Subtitles', isSelected: false, callback: () => {
+            if (this.mainSidebar.sidebarElement) {
+              this.mainSidebar.sidebarElement.style.visibility = 'hidden';
+            }
+            this.subtitlesSelector();
+          }
+        }
+      )
+    }
+
+    this.mainSidebar = new Sidebar({
+      title: 'Settings',
+      items: items,
+      klassname: 'default-sidebar',
+      lastFocusedElement: this.settingsBtn.buttonElement,
+      type: 'navigation',
+      focused: true
+    });
+    this.mainSidebar.mount(this.container);
+  }
+
+  attachTo(parent) {
+    if (!parent || !(parent instanceof HTMLElement)) {
+      throw new Error('VideoPlayerUI: parent must be a valid DOM element');
+    }
+    parent.appendChild(this.container);
+  }
+
+  getElement() {
+    return this.container;
+  }
+
+  unmount() {
+    if (this.playPauseBtn && this.playPauseBtn.buttonElement) {
+      this.playPauseBtn.buttonElement.removeEventListener('focus', this.updatePlayPauseButton);
+      this.playPauseBtn.buttonElement.removeEventListener('blur', this.updatePlayPauseButton);
+      this.playPauseBtn.buttonElement.removeEventListener('keydown', this.handlePlayPauseKeydown);
+    }
+
+    if (this.player.video) {
+      this.player.video.removeEventListener('play', this.updatePlayPauseButton);
+      this.player.video.removeEventListener('pause', this.updatePlayPauseButton);
+    }
+
+    if (this.container) {
+      this.container.remove();
+    }
+  }
+}
+
+export default VideoPlayerUI;