@viewlift/player-backup 1.0.4-lighteningjs → 1.0.4

package/src/playerControls/playerControls.js

@@ -1,501 +0,0 @@
-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

@@ -1,204 +0,0 @@
-/*************** 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;
-}