@gcorevideo/player 2.18.3 → 2.19.0

package/src/plugins/kibo/index.ts

@@ -0,0 +1,244 @@
+/* eslint-disable */
+// Kibo is released under the MIT License. Copyright (c) 2013 marquete.
+// see https://github.com/marquete/kibo
+
+type KeyboardEventHandler = (e: KeyboardEvent) => boolean | undefined;
+
+type KeyboardEventBindings = {
+  any: KeyboardEventHandler[];
+  [key: string]: KeyboardEventHandler[];
+}
+
+type UpDown = 'up' | 'down';
+
+export class Kibo {
+  private lastKeyCode = -1;
+
+  private lastModifiers: Record<string, boolean> = {};
+
+  private keysDown: KeyboardEventBindings = { any: [] }; // TODO
+  private keysUp: KeyboardEventBindings = { any: [] };
+
+  private downHandler: (e: KeyboardEvent) => void;
+
+  private upHandler: (e: KeyboardEvent) => void;
+
+  constructor(private element: Document | Element = window.document) {
+    for (const mod of MODIFIERS) {
+      this.lastModifiers[mod] = false;
+    }
+  
+    this.keysDown = { any: [] };
+    this.keysUp = { any: [] };
+    this.downHandler = this.handler('down');
+    this.upHandler = this.handler('up');
+  
+    registerEvent(this.element, 'keydown', this.downHandler);
+    registerEvent(this.element, 'keyup', this.upHandler);
+    const unloader = () => {
+      unregisterEvent(this.element, 'keydown', this.downHandler);
+      unregisterEvent(this.element, 'keyup', this.upHandler);
+      unregisterEvent(window, 'unload', unloader);
+    };
+    registerEvent(window, 'unload', unloader);
+  }
+
+  private handler(upOrDown: UpDown = 'up') {
+    return (e: KeyboardEvent) => {
+      this.lastKeyCode = e.keyCode; // TODO
+      for (const mod of MODIFIERS) {
+        this.lastModifiers[mod] = e[(mod + 'Key') as 'shiftKey' | 'ctrlKey' | 'altKey'];
+      }
+      // for (i = 0; i < Kibo.MODIFIERS.length; i++) {
+      //   that.lastModifiers[Kibo.MODIFIERS[i]] = e[Kibo.MODIFIERS[i] + 'Key'];
+      // }
+      // if (Kibo.arrayIncludes(Kibo.MODIFIERS, Kibo.keyName(that.lastKeyCode))) {
+      //   that.lastModifiers[Kibo.keyName(that.lastKeyCode)] = true;
+      // }
+      const key = keyName(this.lastKeyCode);
+      if (key && MODIFIERS.includes(key)) {
+        this.lastModifiers[key] = true;
+      }
+  
+      const regKeys: KeyboardEventBindings = upOrDown === 'up' ? this.keysUp : this.keysDown;
+      // this['keys' + capitalize(upOrDown)]; // TODO
+  
+      // for (i = 0; i < registeredKeys.any.length; i++) {
+      //   if ((registeredKeys.any[i](e) === false) && e.preventDefault) {
+      //     e.preventDefault();
+      //   }
+      // }
+      for (const h of regKeys.any) {
+        if (h(e) === false && e.preventDefault) {
+          e.preventDefault();
+        }
+      }
+  
+      const lastModifiersAndKey = this.lastModifiersAndKey();
+      if (regKeys[lastModifiersAndKey]) {
+        for (const h of regKeys[lastModifiersAndKey]) {
+          if ((h(e) === false) && e.preventDefault) {
+            e.preventDefault();
+          }
+        // for (i = 0; i < registeredKeys[lastModifiersAndKey].length; i++) {
+          // if ((registeredKeys[lastModifiersAndKey][i](e) === false) && e.preventDefault) {
+            // e.preventDefault();
+          // }
+        }
+      }
+    };
+  }
+
+  private registerKeys(upOrDown: UpDown, newKeys: string | string[], func: KeyboardEventHandler) {
+    const registeredKeys = upOrDown === 'up' ? this.keysUp : this.keysDown;
+  
+    const normKeys = typeof newKeys === "string" ? [newKeys] : newKeys;
+  
+    // for (i = 0; i < newKeys.length; i++) {
+    //   // keys = newKeys[i];
+    //   keys = modifiersAndKey(keys + '');
+  
+    //   if (registeredKeys[keys]) {
+    //     registeredKeys[keys].push(func);
+    //   } else {
+    //     registeredKeys[keys] = [func];
+    //   }
+    // }
+    for (const k of normKeys) {
+      const keys = modifiersAndKey(k);
+  
+      if (registeredKeys[keys]) {
+        registeredKeys[keys].push(func);
+      } else {
+        registeredKeys[keys] = [func];
+      }
+    }
+  
+    return this;
+  }
+
+  private unregisterKeys(upOrDown: UpDown, newKeys: string | string[], func: KeyboardEventHandler | null = null) {
+    const registeredKeys = upOrDown === 'up' ? this.keysUp : this.keysDown;
+    const normKeys = typeof newKeys === "string" ? [newKeys] : newKeys;
+
+    for (const k of normKeys) {
+      const keys = modifiersAndKey(k);
+      if (func === null) {
+        delete registeredKeys[keys];
+      } else {
+        if (registeredKeys[keys]) {
+          const p = registeredKeys[keys].indexOf(func);
+          if (p >= 0) {
+            registeredKeys[keys].splice(p, 1);
+          }
+        }
+      }
+    }
+  
+    return this;
+  }
+
+  off(keys: string | string[]): Kibo {
+    return this.unregisterKeys('down', keys, null);
+  }
+
+  delegate(upOrDown: UpDown, keys: string | string[], func?: KeyboardEventHandler | null): Kibo {
+    return (func !== null && func !== undefined)
+      ? this.registerKeys(upOrDown, keys, func)
+      : this.unregisterKeys(upOrDown, keys, func);
+  }
+
+  down(keys: string | string[], func?: KeyboardEventHandler | null): Kibo {
+    return this.delegate('down', keys, func);
+  }
+
+  up(keys: string | string[], func?: KeyboardEventHandler | null): Kibo {
+    return this.delegate('up', keys, func);
+  }
+
+  lastKey(modifier?: string): string | boolean {
+    if (!modifier) {
+      return keyName(this.lastKeyCode);
+    }
+  
+    return this.lastModifiers[modifier];
+  }
+
+  lastModifiersAndKey() {
+    const result = MODIFIERS.filter(m => this.lastKey(m));
+    const lastKey = keyName(this.lastKeyCode);
+    if (lastKey && !result.includes(lastKey)) {
+      result.push(lastKey);
+    }
+    return result.join(' ');
+  };
+}
+
+function registerEvent(element: Node | Window, eventName: string, func: (e: KeyboardEvent) => void): void {
+  element.addEventListener(eventName, func as EventListener, false);
+}
+
+function unregisterEvent(element: Node | Window, eventName: string, func: (e: KeyboardEvent) => void): void {
+  element.removeEventListener(eventName, func as EventListener, false);
+}
+
+const KEY_NAMES_BY_CODE: Record<number, string> = {
+  8: 'backspace', 9: 'tab', 13: 'enter',
+  16: 'shift', 17: 'ctrl', 18: 'alt',
+  20: 'caps_lock',
+  27: 'esc',
+  32: 'space',
+  37: 'left', 38: 'up', 39: 'right', 40: 'down',
+  48: '0', 49: '1', 50: '2', 51: '3', 52: '4', 53: '5', 54: '6', 55: '7', 56: '8', 57: '9',
+  65: 'a', 66: 'b', 67: 'c', 68: 'd', 69: 'e', 70: 'f', 71: 'g', 72: 'h', 73: 'i', 74: 'j',
+  75: 'k', 76: 'l', 77: 'm', 78: 'n', 79: 'o', 80: 'p', 81: 'q', 82: 'r', 83: 's', 84: 't',
+  85: 'u', 86: 'v', 87: 'w', 88: 'x', 89: 'y', 90: 'z', 112: 'f1', 113: 'f2', 114: 'f3',
+  115: 'f4', 116: 'f5', 117: 'f6', 118: 'f7', 119: 'f8', 120: 'f9', 121: 'f10', 122: 'f11', 123: 'f12'
+};
+
+const KEY_CODES_BY_NAME: Record<string, number> = {};
+
+(function () {
+  Object.entries(KEY_NAMES_BY_CODE).forEach(([key, name]) => {
+    KEY_CODES_BY_NAME[name] = +key;
+  });
+})();
+
+const MODIFIERS = ['shift', 'ctrl', 'alt'];
+
+function stringContains(string: string, substring: string): boolean {
+  return string.indexOf(substring) !== -1;
+}
+
+function neatString(string: string): string {
+  return string.replace(/^\s+|\s+$/g, '').replace(/\s+/g, ' ');
+};
+
+function extractModifiers(keyCombination: string): string[] {
+  return MODIFIERS.filter(m => keyCombination.includes(m));
+}
+
+function extractKey(keyCombination: string): string | undefined{
+  return neatString(keyCombination).split(' ').find(key => !MODIFIERS.includes(key));
+};
+
+ function modifiersAndKey(keyCombination: string) {
+  var result, key;
+
+  if (stringContains(keyCombination, 'any')) {
+    return neatString(keyCombination).split(' ').slice(0, 2).join(' ');
+  }
+
+  result = extractModifiers(keyCombination);
+
+  key = extractKey(keyCombination);
+  if (key) {
+    result.push(key);
+  }
+
+  return result.join(' ');
+}
+
+function keyName(keyCode: number): string {
+  return KEY_NAMES_BY_CODE[keyCode] || '';
+};

package/src/plugins/level-selector/LevelSelector.ts

@@ -0,0 +1,400 @@
+import { Events, template, UICorePlugin } from '@clappr/core'
+import { type QualityLevel } from '../..//playback.types'
+import { reportError, trace } from '@gcorevideo/utils'
+import { CLAPPR_VERSION } from '../build.js'
+import { ZeptoResult } from '../types.js'
+
+import buttonHtml from '../../../assets/level-selector/button.ejs'
+import listHtml from '../../../assets/level-selector/list.ejs'
+import hdIcon from '../../../assets/icons/new/hd.svg'
+import arrowRightIcon from '../../../assets/icons/new/arrow-right.svg'
+import arrowLeftIcon from '../../../assets/icons/new/arrow-left.svg'
+import checkIcon from '../../../assets/icons/new/check.svg'
+import '../../../assets/level-selector/style.scss'
+
+
+const T = 'plugins.level_selector'
+const VERSION = '2.18.3'
+
+type TemplateFunction = (data: Record<string, unknown>) => string
+
+/**
+ * Allows to control the quality level of the playback.
+ * @beta
+ *
+ * @remarks
+ * The plugin is rendered as a button in the gear menu.
+ * When clicked, it shows a list of quality levels to choose from.
+ *
+ * Configuration options:
+ *
+ * - `labels`: The labels to show in the level selector. [vertical resolution]: string
+ * - `restrictResolution`: The maximum resolution to allow in the level selector.
+ * - `title`: The title to show in the level selector.
+ *
+ * @example
+ * ```ts
+ * {
+ *   levelSelector: {
+ *     restrictResolution: 360,
+ *     labels: { 360: '360p', 720: '720p' },
+ *   },
+ * }
+ * ```
+ */
+export class LevelSelector extends UICorePlugin {
+  private levels: QualityLevel[] = []
+
+  private levelLabels: string[] = []
+
+  private removeAuto = false
+
+  private isHd = false
+
+  private isOpen = false
+
+  private buttonTemplate: TemplateFunction | null = null
+
+  private listTemplate: TemplateFunction | null = null
+
+  get name() {
+    return 'level_selector'
+  }
+
+  get supportedVersion() {
+    return { min: CLAPPR_VERSION }
+  }
+
+  static get version() {
+    return VERSION
+  }
+
+  override get attributes() {
+    return {
+      class: this.name,
+      'data-level-selector': '',
+    }
+  }
+
+  private currentText = 'Auto'
+
+  private selectedLevelId = -1
+
+  override get events() {
+    return {
+      'click .gear-sub-menu_btn': 'onLevelSelect',
+      'click .gear-option': 'onShowLevelSelectMenu',
+      'click .go-back': 'goBack',
+    }
+  }
+
+  override bindEvents() {
+    this.listenTo(this.core, Events.CORE_READY, () => this.bindPlaybackEvents())
+    this.listenTo(
+      this.core.mediaControl,
+      Events.MEDIACONTROL_CONTAINERCHANGED,
+      this.reload,
+    )
+    this.listenTo(this.core, 'gear:rendered', this.render)
+  }
+
+  private unBindEvents() {
+    this.stopListening(this.core, Events.CORE_READY, () =>
+      this.bindPlaybackEvents(),
+    )
+    this.stopListening(
+      this.core.mediaControl,
+      Events.MEDIACONTROL_CONTAINERCHANGED,
+      this.reload,
+    )
+    this.stopListening(this.core, 'gear:rendered', this.render)
+  }
+
+  private bindPlaybackEvents() {
+    this.removeAuto = false
+    this.isHd = false
+
+    const activePlayback = this.core.activePlayback
+
+    this.listenTo(activePlayback, Events.PLAYBACK_LEVELS_AVAILABLE, (levels: QualityLevel[]) =>
+      this.fillLevels(levels),
+    )
+    this.listenTo(
+      activePlayback,
+      Events.PLAYBACK_LEVEL_SWITCH_START,
+      this.onLevelSwitchStart,
+    )
+    this.listenTo(
+      activePlayback,
+      Events.PLAYBACK_LEVEL_SWITCH_END,
+      this.onLevelSwitchEnd,
+    )
+    this.listenTo(
+      activePlayback,
+      Events.PLAYBACK_BITRATE,
+      this.updateCurrentLevel,
+    )
+    this.listenTo(activePlayback, Events.PLAYBACK_STOP, this.onStop)
+    this.listenTo(
+      activePlayback,
+      Events.PLAYBACK_HIGHDEFINITIONUPDATE,
+      (isHd: boolean) => {
+        this.isHd = isHd
+        this.deferRender()
+      },
+    )
+    if (activePlayback?.levels?.length > 0) {
+      this.fillLevels(activePlayback.levels)
+    }
+  }
+
+  private onStop() {
+    trace(`${T} onStop`)
+    const currentPlayback = this.core.activePlayback
+
+    this.listenToOnce(currentPlayback, Events.PLAYBACK_PLAY, () => {
+      trace(`${T} on PLAYBACK_PLAY after stop`, { selectedLevelId: this.selectedLevelId })
+      if (currentPlayback.getPlaybackType() === 'live') {
+        if (this.selectedLevelId !== -1) {
+          currentPlayback.currentLevel = this.selectedLevelId
+        }
+      }
+    })
+  }
+
+  private reload() {
+    this.unBindEvents()
+    this.bindEvents()
+    this.bindPlaybackEvents()
+  }
+
+  private shouldRender() {
+    if (!this.core.activeContainer) {
+      return false
+    }
+
+    const activePlayback = this.core.activePlayback
+
+    if (!activePlayback) {
+      return false
+    }
+
+    const supportsCurrentLevel = 'currentLevel' in activePlayback
+    if (!supportsCurrentLevel) {
+      return false
+    }
+    // Only care if we have at least 2 to choose from
+    return !!(this.levels && this.levels.length > 1)
+  }
+
+  override render() {
+    if (!this.shouldRender()) {
+      return this
+    }
+
+    this.renderButton()
+
+    return this
+  }
+
+  private renderButton() {
+    if (!this.buttonTemplate) {
+      this.buttonTemplate = template(buttonHtml)
+    }
+
+    if (!this.isOpen) {
+      const html = this.buttonTemplate?.({
+        arrowRightIcon,
+        currentText: this.currentText,
+        isHd: this.isHd,
+        hdIcon,
+      })
+      this.$el.html(html)
+      this.core.mediaControl.$el
+        ?.find('.gear-options-list [data-quality]')
+        .html(this.el)
+    }
+  }
+
+  private renderDropdown() {
+    if (!this.listTemplate) {
+      this.listTemplate = template(listHtml)
+    }
+    const html = this.listTemplate!({
+      arrowLeftIcon,
+      checkIcon,
+      labels: this.levelLabels,
+      levels: this.levels,
+      maxLevel: this.maxLevel,
+      removeAuto: this.removeAuto,
+    })
+    this.$el.html(html)
+    this.core.mediaControl.$el?.find('.gear-wrapper').html(this.el)
+  }
+
+  private get maxLevel() {
+    const maxRes = this.core.options.levelSelector?.restrictResolution
+    return maxRes
+      ? this.levels.findIndex(
+          (level) =>
+            level.height === maxRes,
+        )
+      : -1
+  }
+
+  private fillLevels(levels: QualityLevel[]) {
+    const maxResolution = this.core.options.levelSelector?.restrictResolution
+    this.levels = levels
+    this.makeLevelsLabels()
+    if (maxResolution) {
+      this.removeAuto = true
+      // TODO account for vertical resolutions, i.e, normalize the resolution to the width
+      const initialLevel = levels
+        .filter((level) => level.height <= maxResolution)
+        .pop()
+      this.setLevel(initialLevel?.level ?? 0)
+    }
+    this.deferRender()
+  }
+
+  private makeLevelsLabels() {
+    const labels = this.core.options.levelSelector?.labels ?? {}
+    this.levelLabels = []
+
+    for (let i = 0; i < this.levels.length; i++) {
+      const level = this.levels[i]
+      const ll = level.width > level.height ? level.height : level.width
+      const label = labels[ll] || `${ll}p`
+      this.levelLabels.push(label)
+    }
+  }
+
+  private findLevelBy(id: number): QualityLevel | undefined {
+    return this.levels.find((level) => level.level === id)
+  }
+
+  private onLevelSelect(event: MouseEvent) {
+    const selectedLevel = parseInt(
+      (event.currentTarget as HTMLElement)?.dataset?.id ?? '-1',
+      10,
+    )
+    this.setLevel(selectedLevel)
+    event.stopPropagation()
+    return false
+  }
+
+  private goBack() {
+    trace(`${T} goBack`)
+    this.isOpen = false
+    this.core.trigger('gear:refresh')
+    this.deferRender()
+  }
+
+  private setLevel(index: number) {
+    trace(`${T} setIndexLevel`, { index })
+    this.selectedLevelId = index
+    if (!this.core.activePlayback) {
+      return
+    }
+    if (this.core.activePlayback.currentLevel === this.selectedLevelId) {
+      return
+    }
+    this.core.activePlayback.currentLevel = this.selectedLevelId
+
+    try {
+      this.highlightCurrentLevel()
+    } catch (error) {
+      reportError(error)
+    }
+    this.deferRender()
+  }
+
+  private onShowLevelSelectMenu() {
+    trace(`${T} onShowLevelSelectMenu`)
+    this.isOpen = true
+    this.renderDropdown()
+    this.highlightCurrentLevel()
+  }
+
+  private allLevelElements() {
+    return this.$('ul.gear-sub-menu li') as ZeptoResult
+  }
+
+  private levelElement(id = -1) {
+    return (
+      this.$(`ul.gear-sub-menu a[data-id="${id}"]`) as ZeptoResult
+    ).parent()
+  }
+
+  private getTitle() {
+    return (this.core.options.levelSelector || {}).title
+  }
+
+  private onLevelSwitchStart() {
+    this.core.activePlayback.trigger('playback:level:select:start')
+    this.levelElement(this.selectedLevelId).addClass('changing')
+  }
+
+  private onLevelSwitchEnd() {
+    this.levelElement(this.selectedLevelId).removeClass('changing')
+  }
+
+  private updateText(level: number) {
+    if (level === undefined || isNaN(level)) {
+      return
+    }
+    this.currentText = this.getLevelLabel(level)
+    this.deferRender()
+  }
+
+  private getLevelLabel(id: number): string {
+    if (id === -1) {
+      return 'Auto'
+    }
+    const index = this.levels.findIndex((l) => l.level === id)
+    if (index < 0) {
+      return 'Auto'
+    }
+    return this.levelLabels[index] ?? formatLevelLabel(this.levels[index])
+  }
+
+  private updateCurrentLevel(info: QualityLevel) {
+    trace(`${T} updateCurrentLevel`, { info })
+    this.highlightCurrentLevel()
+  }
+
+  private highlightCurrentLevel() {
+    trace(`${T} highlightCurrentLevel`, {
+      selectedLevelId: this.selectedLevelId,
+    })
+    this.allLevelElements().removeClass('current')
+    this.allLevelElements().find('a').removeClass('gcore-skin-active')
+
+    const currentLevelElement = this.levelElement(this.selectedLevelId)
+
+    currentLevelElement.addClass('current')
+    currentLevelElement.find('a').addClass('gcore-skin-active')
+
+    this.updateText(this.selectedLevelId)
+  }
+
+  private deferRender = debounce(() => this.render(), 0)
+}
+
+function formatLevelLabel(level: QualityLevel): string {
+  const h = level.width > level.height ? level.height : level.width
+  return `${h}p`
+}
+
+function debounce(fn: () => void, wait: number) {
+  let timerId: ReturnType<typeof setTimeout> | null = null
+  return function () {
+    if (timerId !== null) {
+      clearTimeout(timerId)
+    }
+    timerId = setTimeout(() => {
+      timerId = null
+      fn()
+    }, wait)
+  }
+}

package/src/plugins/level-selector/__tests__/LevelSelector.test.ts

@@ -0,0 +1,72 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { UICorePlugin } from '@clappr/core'
+import FakeTimers from '@sinonjs/fake-timers'
+import EventLite from 'event-lite'
+import { Logger, LogTracer, setTracer } from '@gcorevideo/utils'
+import { LevelSelector } from '../LevelSelector.js'
+
+setTracer(new LogTracer('LevelSelector.test'))
+Logger.enable('*')
+
+describe('LevelSelector', () => {
+  let clock: FakeTimers.InstalledClock
+  beforeEach(() => {
+    clock = FakeTimers.install()
+  })
+  afterEach(() => {
+    clock.uninstall()
+  })
+  describe('options.restrictResolution', () => {
+    let core: any
+    let levelSelector: LevelSelector
+    beforeEach(async () => {
+      const activeContainer = Object.assign(new EventLite(), {
+        $el: {
+          html: vi.fn(),
+        },
+      })
+      const activePlayback = Object.assign(new EventLite(), {
+        currentLevel: -1,
+        levels: [],
+      })
+      core = Object.assign(new EventLite(), {
+        activeContainer,
+        activePlayback,
+        options: {
+          levelSelector: {
+            restrictResolution: 360,
+          },
+        },
+      })
+      core.mediaControl = new UICorePlugin(core),
+      levelSelector = new LevelSelector(core)
+      core.emit('core:ready')
+      await clock.tickAsync(1)
+      activePlayback.emit('playback:levels:available', [
+        {
+          level: 0,
+          height: 360,
+          width: 640,
+          bitrate: 300000,
+        },
+        {
+          level: 1,
+          height: 720,
+          width: 1280,
+          bitrate: 150000,
+        },
+        {
+          level: 2,
+          height: 1080,
+          width: 1920,
+          bitrate: 250000,
+        },
+      ])
+      await clock.tickAsync(1)
+    })
+    it('should render the restricted quality level label', () => {
+      expect(levelSelector.el.textContent?.replace('/assets/icons/new/arrow-right.svg', '').replace(/\s+/g, ' ')).toContain('Quality 360p')
+      expect(levelSelector.el.innerHTML).toMatchSnapshot()
+    })
+  })
+})