@viewlift/player-backup 1.0.4-lighteningjs → 1.0.4

package/index.html

@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>HLS Player Test</title>
-  <link rel="stylesheet" href="./src/styles/index.css">
-</head>
-<body>
-  <div id="player-container"></div>
-  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
-  <script type="module">
-    import { createHlsPlayer } from './src/playerInitializer.js';
-    const mountPoint = document.getElementById('player-container');
-    const config = {
-      // streamUrl: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
-      streamUrl: "https://cdn-vl-gcp-spinco-e-token-no-ssai-01.vos360.video/Content/HLS_HLS_CLEAR/Live/channel(886a397d-ff30-4021-eb16-bb73c658c033)/index.m3u8?hdnts=st=1753800508~exp=1753843708~acl=/Content/HLS_HLS_CLEAR/Live/channel(886a397d-ff30-4021-eb16-bb73c658c033)/*~hmac=461d4f615e40b0057f82b07d54f40bc029c4562ae65ef9d7caf85dd86f2e3270",
-      // streamUrl: 'https://cdn.bitmovin.com/content/assets/sintel/hls/playlist.m3u8',
-      videoTitleConfig: {
-        text: 'Big Buck Bunny',
-        fontSize: '40px',
-        fontWeight: 'bold',
-        textAlign: 'left',
-        textDecoration: 'none',
-        textTransform: 'none',
-        lineHeight: 'normal',
-        letterSpacing: 'normal',
-        color: '#ffffff',
-        backgroundColor: 'transparent'
-      },
-      startFromBeginningBtnConfig: {
-        text: 'Start From Beginning',
-        enabled: true,
-        width: '150px',
-        height: '35px',
-        fontSize: '16px',
-        fontWeight: 'normal',
-        textAlign: 'center',
-        textDecoration: 'none',
-        textTransform: 'none',
-        lineHeight: 'normal',
-        letterSpacing: 'normal',
-        color: '#ffffff',
-        backgroundColor: '#000000',
-        focused: false,
-      },
-    };
-    createHlsPlayer(mountPoint, config);
-  </script>
-</body>
-</html>

package/jsconfig.json

@@ -1,9 +0,0 @@
-   {
-      "compilerOptions": {
-        "baseUrl": ".",
-        "paths": {
-          "@src/*": ["src/*"],
-          "@components/*": ["components/*"]
-        }
-      }
-    }

package/rollup.config.mjs

@@ -1,39 +0,0 @@
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import terser from '@rollup/plugin-terser';
-import babel from '@rollup/plugin-babel';
-import postcss from 'rollup-plugin-postcss';
-import url from '@rollup/plugin-url';
-import json from '@rollup/plugin-json';
-const devMode = 'development';
-export default {
-  input: 'src/index.js',
-  output: [
-    {
-      file: './dist/bundle.js',
-  format: 'es',
-  sourcemap: true,
-  inlineDynamicImports: true,
-    },
-  ],
-  plugins: [
-    resolve(),
-    json(),
-    commonjs(),
-    babel({
-      babelHelpers: 'bundled',
-      extensions: ['.js', '.ts'],
-      exclude: 'node_modules/**',
-    }),
-    postcss({
-      extract: true, // creates a separate CSS file
-      minimize: true,
-      sourceMap: true,
-    }),
-    url({
-      include: ['**/*.png', '**/*.jpg', '**/*.gif'],
-      limit: 0, // Always copy the files
-    }),
-    terser(),
-  ],
-};

package/src/ads-manager/ads-manager.js

@@ -1,120 +0,0 @@
-import { Button } from "../player-components/player-buttons/playerButtons";
-
-export class AdsManager {
-    constructor(props) {
-        this.adsMediaPlaybackList = props.adsMediaPlaybackList;
-        this.isSkipAble = props.isSkipAble;
-        this.playerResumeCallback = props.playerResumeCallback;
-        this.adsPlayerId = props.adsPlayerId;
-
-        this.initializeAdsPlayer();
-        this.addAdsEventListener();
-    }
-
-    initializeAdsPlayer() {
-        this.adsContainer = document.createElement("div");
-        this.adsContainer.className = "adsContainer";
-        this.video = document.createElement('video');
-        this.adsContainer.appendChild(this.video);
-    }
-
-    addAdsEventListener() {
-        this.video.addEventListener("ended", onEnded);
-        this.video.addEventListener("error", onError);
-        this.video.addEventListener("waiting", onBuffering);
-        this.video.addEventListener("play", onPlay);
-        this.video.addEventListener("playing", onPlaying);
-        this.video.addEventListener("timeupdate", playbackprogress);
-    }
-
-    removeAdsEventListener() {
-        this.video.removeEventListener("ended", onEnded);
-        this.video.removeEventListener("error", onError);
-        this.video.removeEventListener("waiting", onBuffering);
-        this.video.removeEventListener("play", onPlay);
-        this.video.removeEventListener("playing", onPlaying);
-        this.video.removeEventListener("timeupdate", playbackprogress);
-    }
-
-    onEnded() {
-        console.log("AdsManager: ended");
-    }
-
-    onError() {
-        console.log("AdsManager: error");
-    }
-
-    onBuffering() {
-        console.log("AdsManager: buffering");
-    }
-
-    onPlay() {
-        console.log("AdsManager: play");
-    }
-
-    onPlaying() {
-        console.log("AdsManager: playing");
-    }
-
-    playbackprogress() {
-        console.log("AdsManager: playback progress");
-    }
-
-
-    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.video.paused) {
-                    this.video.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.video.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.adsContainer);
-
-        requestAnimationFrame(() => {
-            if (this.playPauseBtn) this.playPauseBtn.focus();
-        });
-
-        this.playPauseBtnEventListeners();
-    }
-
-    playPauseBtnEventListeners() {
-        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.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.video.paused ? playIcon : pauseIcon;
-            this.playPauseBtn.buttonElement.querySelector('img').setAttribute('src', iconSrc);
-            this.playPauseBtn.buttonElement.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
-            }
-        });
-    }
-}

package/src/index.js

@@ -1,13 +0,0 @@
-// LightningJS-compatible Video Player Component (ES5 compatible)
-import VLPlayerCore from '@viewlift/player-backup/esm';
-import '@viewlift/player-backup/esm/bundle.css';
-import PlayerControls from './playerControls/playerControls';
-import "./styles/index.css";
-
-
-
-export default class VideoPlayer {
-  constructor() {
-   return VLPlayerCore
-  }
-}

package/src/player-components/player-buttons/playerButtons.js

@@ -1,106 +0,0 @@
-export class Button {
-    constructor(props) {
-        if (!props) {
-            throw new Error('Button Class: props are required');
-        }
-
-        this.imgSrc = props.imgSrc || '';
-        this.imgAltText = props.imgAltText || '';
-        this.buttonText = props.buttonText || '';
-        this.klassname = props.klassname || 'default-button';
-        this.width = props.width;
-        this.height = props.height;
-        this.fontWeight = props.fontWeight;
-        this.focused = props.focused || false;
-        this.disabled = props.disabled || false;
-        this.handleClick = props.handleClick || (() => {});
-
-        if (typeof this.handleClick !== 'function') {
-            throw new Error('Button Class: handleClick must be a function');
-        }
-
-        if (this.disabled) {
-            this.klassname += ' disabled';
-        }
-
-        if (this.focused) {
-            this.klassname += ' focused';
-        }
-
-        this.handleClick = this.handleClick.bind(this);
-    }
-
-    focus() {
-        if (this.buttonElement) {
-            this.buttonElement.focus();
-            this.buttonElement.classList.add('focused');
-            this.focused = true;
-        }
-    }
-
-    blur() {
-        if (this.buttonElement) {
-            this.buttonElement.blur();
-            this.buttonElement.classList.remove('focused');
-            this.focused = false;
-        }
-    }
-
-    mount(mountPoint) {
-        if (!mountPoint || !(mountPoint instanceof HTMLElement)) {
-            throw new Error('Button Class: mountPoint must be a valid DOM element');
-        }
-
-        const button = document.createElement('div');
-        button.className = this.klassname;
-        button.style.width = `${this.width}px`;
-        button.style.height = `${this.height}px`;
-        button.style.fontWeight = this.fontWeight;
-        button.tabIndex = 0;
-
-        if (this.imgSrc) {
-            const img = document.createElement('img');
-            img.src = this.imgSrc;
-            img.alt = this.imgAltText;
-            img.onerror = () => {
-                console.warn('Button Class: Failed to load image at', this.imgSrc);
-            };
-            button.appendChild(img);
-        } else {
-            const span = document.createElement('span');
-            span.textContent = this.buttonText;
-            button.appendChild(span);
-        }
-
-        if (!this.disabled) {
-            button.addEventListener('click', this.handleClick);
-        }
-        button.addEventListener('keydown', (event) => {
-            if (event.key === 'Enter' || event.key === 'OK') {
-                this.handleClick();
-            }
-        });
-        button.addEventListener('focus', () => {
-            this.focused = true;
-            button.classList.add('focused');
-        });
-        button.addEventListener('blur', () => {
-            this.focused = false;
-            button.classList.remove('focused');
-        });
-
-        this.buttonElement = button;
-        mountPoint.appendChild(button);
-    }
-
-    unmount() {
-        if (this.buttonElement) {
-            this.buttonElement.removeEventListener('click', this.handleClick);
-            this.buttonElement.removeEventListener('keydown', this.handleClick);
-            this.buttonElement.removeEventListener('focus', this.handleClick);
-            this.buttonElement.removeEventListener('blur', this.handleClick);
-            this.buttonElement.remove();
-            this.buttonElement = undefined;
-        }
-    }
-}

package/src/player-components/player-seekbar/playerSeekbar.js

@@ -1,223 +0,0 @@
-export class PlayerSeekbar {
-  constructor(video) {
-    if (!video || !(video instanceof HTMLVideoElement)) {
-      throw new Error('PlayerSeekbar: A valid HTMLVideoElement is required');
-    }
-
-    this.video = video;
-    this.container = null;
-    this.progress = null;
-    this.buffer = null;
-    this.thumb = null;
-    this.tooltip = null;
-    this.timeLabel = null;
-    this.durationLabel = null;
-    this.isDragging = false;
-    this.focused = false;
-
-    this.init();
-  }
-
-  init() {
-    this.container = document.createElement('div');
-    this.container.className = 'seekbar-container';
-
-    this.buffer = document.createElement('div');
-    this.buffer.className = 'seekbar-buffer';
-
-    this.progress = document.createElement('div');
-    this.progress.className = 'seekbar-progress';
-
-    this.thumb = document.createElement('div');
-    this.thumb.className = 'seekbar-thumb';
-    this.thumb.tabIndex = 0; // Make thumb focusable
-
-    this.tooltip = document.createElement('div');
-    this.tooltip.className = 'seekbar-tooltip';
-    this.tooltip.style.display = 'none';
-
-    this.timeLabel = document.createElement('span');
-    this.timeLabel.className = 'seekbar-time-label';
-    this.durationLabel = document.createElement('span');
-    this.durationLabel.className = 'seekbar-duration-label';
-
-    this.container.appendChild(this.buffer);
-    this.container.appendChild(this.progress);
-    this.container.appendChild(this.thumb);
-    this.container.appendChild(this.tooltip);
-    this.container.appendChild(this.timeLabel);
-    this.container.appendChild(this.durationLabel);
-
-    // Update UI as video plays
-    this.video.addEventListener('timeupdate', () => this.update());
-    this.video.addEventListener('progress', () => this.updateBuffer());
-    this.video.addEventListener('durationchange', () => this.update());
-
-    // Seek on click
-    this.container.addEventListener('click', (e) => this.seek(e));
-    // Dragging
-    this.thumb.addEventListener('mousedown', (e) => this.startDrag(e));
-    // Tooltip on hover
-    this.container.addEventListener('mousemove', (e) => this.showTooltip(e));
-    this.container.addEventListener('mouseleave', () => this.hideTooltip());
-
-    // Focus/blur events for accessibility and visual feedback
-    this.thumb.addEventListener('focus', () => {
-      this.focused = true;
-      this.thumb.classList.add('focused');
-    });
-    this.thumb.addEventListener('blur', () => {
-      this.focused = false;
-      this.thumb.classList.remove('focused');
-    });
-
-    // Add keydown event listeners for arrow keys to simulate dragging
-    this.thumb.addEventListener('keydown', (e) => {
-      const increment = 1; 
-      if (e.key === 'ArrowRight') {
-        e.preventDefault();
-        e.stopPropagation();
-        this.video.currentTime = Math.min(this.video.duration, this.video.currentTime + increment);
-        this.update();
-      } else if (e.key === 'ArrowLeft') {
-        e.preventDefault();
-        e.stopPropagation();
-        this.video.currentTime = Math.max(0, this.video.currentTime - increment);
-        this.update();
-      } else if (e.key === 'Enter') {
-        e.preventDefault();
-        e.stopPropagation();
-        if(this.video.paused) {
-          this.video.play(); // Resume playing the video
-        }
-      }
-    });
-  }
-
-  focus() {
-    if (this.thumb) {
-      this.thumb.focus();
-      this.thumb.classList.add('focused');
-      this.focused = true;
-    }
-  }
-
-  blur() {
-    if (this.thumb) {
-      this.thumb.blur();
-      this.thumb.classList.remove('focused');
-      this.focused = false;
-    }
-  }
-
-  formatTime(seconds) {
-    if (isNaN(seconds)) return '0:00';
-    const m = Math.floor(seconds / 60);
-    const s = Math.floor(seconds % 60);
-    return `${m}:${String(s).padStart(2, '0')}`;
-  }
-
-  update() {
-    if (!this.video || !this.progress || !this.thumb || !this.timeLabel || !this.durationLabel) return;
-
-    const percent = (this.video.currentTime / this.video.duration) * 100;
-    this.progress.style.width = percent + '%';
-    this.thumb.style.left = percent + '%';
-    this.timeLabel.textContent = this.formatTime(this.video.currentTime);
-    this.durationLabel.textContent = ' / ' + this.formatTime(this.video.duration);
-  }
-
-  updateBuffer() {
-    if (!this.video || !this.buffer) return;
-
-    if (this.video.buffered.length) {
-      const end = this.video.buffered.end(this.video.buffered.length - 1);
-      const percent = (end / this.video.duration) * 100;
-      this.buffer.style.width = percent + '%';
-    }
-  }
-
-  seek(e) {
-    if (this.isDragging || !this.container || !this.video) return;
-
-    const rect = this.container.getBoundingClientRect();
-    const percent = (e.clientX - rect.left) / rect.width;
-    this.video.currentTime = percent * this.video.duration;
-  }
-
-  startDrag(e) {
-    if (!this.container || !this.video) return;
-
-    e.preventDefault();
-    this.isDragging = true;
-    const onMove = (moveEvent) => {
-      const rect = this.container.getBoundingClientRect();
-      let percent = (moveEvent.clientX - rect.left) / rect.width;
-      percent = Math.max(0, Math.min(1, percent));
-      this.progress.style.width = percent * 100 + '%';
-      this.thumb.style.left = percent * 100 + '%';
-      this.timeLabel.textContent = this.formatTime(percent * this.video.duration);
-    };
-    const onUp = (upEvent) => {
-      const rect = this.container.getBoundingClientRect();
-      let percent = (upEvent.clientX - rect.left) / rect.width;
-      percent = Math.max(0, Math.min(1, percent));
-      this.video.currentTime = percent * this.video.duration;
-      this.isDragging = false;
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-    };
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
-  }
-
-  showTooltip(e) {
-    if (!this.container || !this.tooltip || !this.video) return;
-
-    const rect = this.container.getBoundingClientRect();
-    const percent = (e.clientX - rect.left) / rect.width;
-    const time = percent * this.video.duration;
-    this.tooltip.textContent = this.formatTime(time);
-    this.tooltip.style.display = 'block';
-    this.tooltip.style.left = `${percent * 100}%`;
-  }
-
-  hideTooltip() {
-    if (this.tooltip) {
-      this.tooltip.style.display = 'none';
-    }
-  }
-
-  getElement() {
-    return this.thumb;
-  }
-
-  mount(parent) {
-    if (!parent || !(parent instanceof HTMLElement)) {
-      throw new Error('PlayerSeekbar: parent must be a valid DOM element');
-    }
-
-    parent.appendChild(this.container);
-    this.update();
-    this.updateBuffer();
-  }
-
-  unmount() {
-    if (!this.video || !this.container || !this.thumb) return;
-
-    this.video.removeEventListener('timeupdate', this.update);
-    this.video.removeEventListener('progress', this.updateBuffer);
-    this.video.removeEventListener('durationchange', this.update);
-    this.container.removeEventListener('click', this.seek);
-    this.thumb.removeEventListener('mousedown', this.startDrag);
-    this.container.removeEventListener('mousemove', this.showTooltip);
-    this.container.removeEventListener('mouseleave', this.hideTooltip);
-    this.thumb.removeEventListener('focus', this.focus);
-    this.thumb.removeEventListener('blur', this.blur);
-    this.thumb.removeEventListener('keydown', this.keydownHandler);
-
-    if (this.container) {
-      this.container.remove();
-    }
-  }
-}

package/src/player-components/player-setting-option-wrapper/player-setting-option-one-wrapper.js

@@ -1,82 +0,0 @@
-export class SettingsOptionOneWrapper {
-    constructor(props) {
-        if (!props || typeof props !== 'object') {
-            throw new Error('SettingsOptionOneWrapper: props must be a valid object');
-        }
-
-        this.title = props.title || 'Option';
-        this.klassname = props.klassname || 'default-option-wrapper';
-        this.handleClick = props.callback || (() => {});
-        this.focused = props.focused || false;
-
-        if (typeof this.handleClick !== 'function') {
-            throw new Error('SettingsOptionOneWrapper: callback must be a function');
-        }
-
-        this.handleClick = this.handleClick.bind(this);
-    }
-
-    mount(mountPoint) {
-        if (!mountPoint || !(mountPoint instanceof HTMLElement)) {
-            throw new Error('SettingsOptionOneWrapper: mountPoint must be a valid DOM element');
-        }
-
-        const optionWrapper = document.createElement('div');
-        optionWrapper.className = this.klassname;
-        optionWrapper.tabIndex = 0;
-
-        const titleElement = document.createElement('p');
-        titleElement.textContent = this.title;
-        optionWrapper.appendChild(titleElement);
-
-        const arrowElement = document.createElement('p');
-        arrowElement.textContent = "›";
-        optionWrapper.appendChild(arrowElement);
-
-        if (this.focused) {
-            optionWrapper.classList.add('focused');
-        }
-
-        optionWrapper.addEventListener('focus', () => {
-            this.focused = true;
-            optionWrapper.classList.add('focused');
-        });
-        optionWrapper.addEventListener('blur', () => {
-            this.focused = false;
-            optionWrapper.classList.remove('focused');
-        });
-
-        optionWrapper.addEventListener('keydown', (event) => {
-            if (event.key === 'Enter' || event.key === 'OK') {
-                this.handleClick();
-            }
-        });
-
-        this.optionWrapper = optionWrapper;
-        optionWrapper.instance = this; // Set the instance property
-        mountPoint.appendChild(optionWrapper);
-    }
-
-    unmount() {
-        if (this.optionWrapper) {
-            this.optionWrapper.remove();
-            this.optionWrapper = undefined;
-        }
-    }
-
-    focus() {
-        if (this.optionWrapper) {
-            this.optionWrapper.focus();
-            this.optionWrapper.classList.add('focused');
-            this.focused = true;
-        }
-    }
-
-    blur() {
-        if (this.optionWrapper) {
-            this.optionWrapper.blur();
-            this.optionWrapper.classList.remove('focused');
-            this.focused = false;
-        }
-    }
-}