@viewlift/player-backup 1.0.3 → 1.0.4-lighteningjs

package/src/playerControls/playerControls.js

@@ -0,0 +1,501 @@
+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';
+import './playerControls.css';
+class PlayerControls {
+  constructor(entitlementResponse) {
+    this.container = document.createElement('div');
+    this.container.id = 'playerControlsContainer';
+    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;

package/src/styles/index.css

@@ -0,0 +1,204 @@
+/*************** playerSeekbar.css ***************/
+  body {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    background-color: #000;
+  }
+.vl-player-container .seekbar-container {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 50px;
+    height: 12px;
+    background: #444;
+    width: 90%;
+    cursor: pointer;
+    border-radius: 6px;
+    margin: 0;
+    user-select: none;
+    z-index: 20;
+  }
+  
+.vl-player-container .seekbar-buffer {
+    position: absolute;
+    height: 100%;
+    background: #888;
+    width: 0;
+    border-radius: 6px;
+    z-index: 1;
+  }
+  
+.vl-player-container  .seekbar-progress {
+    position: absolute;
+    height: 100%;
+    background: rgba(254, 253, 255, 0.7);
+    width: 0;
+    border-radius: 6px;
+    z-index: 2;
+    transition: width 0.1s linear;
+  }
+  
+.vl-player-container .seekbar-thumb {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 16px;
+    height: 16px;
+    background: #fff;
+    border-radius: 50%;
+    /* border: 2px solid #4169E1; */
+    z-index: 3;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+ .vl-player-container .seekbar-thumb:hover {
+    background: #ffeaea;
+  }
+  
+ .vl-player-container .seekbar-tooltip {
+    position: absolute;
+    bottom: 24px;
+    left: 0;
+    transform: translateX(-50%);
+    background: #222;
+    color: #fff;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+    pointer-events: none;
+    z-index: 10;
+  }
+  
+.vl-player-container  .seekbar-time-label, .vl-player-container .seekbar-duration-label {
+    position: relative;
+    top: 18px;
+    font-size: 13px;
+    color: #eee;
+    margin-right: 4px;
+    z-index: 5;
+  }
+  
+
+
+
+/*************** playerButtons.css ***************/
+
+.vl-player-container .play-pause-btn {
+  position: absolute !important;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 20;
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  background: rgba(255,255,255, .5);
+  cursor: pointer;
+} 
+
+.vl-player-container .play-pause-btn img {
+  position: absolute !important;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  height: 50px;
+}
+
+
+.vl-player-container .left-side-container {
+  position: absolute !important;
+  display: flex;
+  left: 5%;
+  bottom: 77px;
+}
+
+.vl-player-container .right-side-container {
+  position: absolute !important;
+  display: flex;
+  right: 5%;
+  bottom: 77px;
+}
+
+.vl-player-container .settings-btn {
+  border-radius: 5px;
+  padding: 5px;
+  bottom: 100px;
+  width: 50px;
+  height: 40px;
+  margin: 0 5px;
+  background: rgba(255,255,255, 0.5);
+  cursor: pointer;
+  z-index: 20;
+}
+
+.vl-player-container .settings-btn img{
+  height: 100%;
+}
+
+.vl-player-container .restart-btn {
+  right: 2%;
+  border-radius: 8px;
+  padding: 5px;
+  bottom: 100px;
+  border: 2px solid #fff;
+  color: #fff;
+  font-size: 20px;
+  font-weight: 700;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 0 5px;
+  cursor: pointer;
+  z-index: 20;
+}
+
+
+/*************** player-setting-option-wrapper ***************/
+.vl-player-container .default-option-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 95%;
+  height: 50px;
+  background: #525760;
+  color: #fff;
+  padding: 5px 10px;
+  font-weight: 700;
+  font-size: 18px;
+  border-radius: 2px;
+  box-shadow: 0 10px 15px rgba(0, 0, 0, .1);
+  margin: 20px 0px;
+  text-transform: capitalize;
+  cursor: pointer;
+}
+.vl-player-container .default-option-wrapper span {
+  height: 40px;
+}
+
+.vl-player-container .default-option-wrapper span > img{
+  height: 100%;
+}
+
+
+.vl-player-container .default-sidebar {
+  position: absolute;
+  top: 0;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(30, 30, 30, .75);
+  height: 100%;
+  min-height: 720px;
+  width: 400px;
+  padding: 50px 20px 0 20px;
+  right: 0px;
+  z-index: 30;
+  /* right: -450px; */
+}
+
+.vl-player-container .focused{
+    outline: 2px solid #ffffff;
+}