ravnur-player-public 3.4.4 → 3.4.6

package/src/extensions/caption-search.js

@@ -1,230 +0,0 @@
-import BaseExtension from './base';
-
-import {
-   createElement,
-   toggleClass,
-   each,
-   toArray,
-   filter,
-   isEmpty,
-   removeClass,
-   addClass,
-   inRange,
-   findIndex,
-   hasClass
-} from '../utils';
-
-import binder from '../helpers/binder';
-import opener from './helpers/clickOpener';
-import popover from './helpers/popover';
-import { secondsToTime } from './helpers/timeCodeToSeconds';
-import createSvg, { SEARCH, CLEAR } from '../svgs';
-import scrollIntoView from './helpers/scrollIntoView';
-import textContent from './helpers/textContent';
-
-const CN = 'rmp-ext-search';
-const HIDDEN_CN = 'rmp-ext-search--hidden';
-const BUTTON_CN = `${CN}__button`;
-const SELECTOR_CN = `${CN}__selector`;
-const SELECTOR_OPEN_CN = `${SELECTOR_CN}--open`;
-const CAPTIONS_CN = `${CN}__captions`;
-const INPUT_CN = `${CN}__input`;
-const ITEM_CN = `${CN}__item`;
-const CURRENT_ITEM_CN = `${ITEM_CN}--current`;
-const CC_TIME_CN = `${CN}__cc-time`;
-const CC_TEXT_CN = `${CN}__cc-text`;
-const CC_CLEAR_CN = `${CN}__cc-clear`;
-
-export default class CaptionSearchExtension extends BaseExtension {
-   $el;
-   filter = '';
-
-   constructor(player, state, options) {
-      super(player, state, options, ['statechanged', 'timeupdate', 'showpopup', 'loadedmetadata', 'canplaythrough']);
-      this.logger.debug('search:extension:creating');
-
-      this.render();
-      this.init();
-      binder(this, ['onTimeupdate']);
-
-      this.logger.debug('search:extension:created');
-   }
-
-   render() {
-      /** @type {HTMLMediaElement} */
-      this.$el = createElement('div', { class: CN });
-
-      this.$button = createElement('button', { type: 'button', class: BUTTON_CN }, this.$el);
-
-      this.$selector = createElement('div', { class: SELECTOR_CN }, this.$el);
-
-      this.$captions = createElement('div', { class: CAPTIONS_CN }, this.$selector);
-      this.$input = createElement('input', { class: INPUT_CN, placeholder: this.$t('caption-search') }, this.$selector);
-      this.$clearBtn = createElement('button', { class: `${CC_CLEAR_CN} ${HIDDEN_CN}` }, this.$selector);
-
-      createSvg(this.$clearBtn, CLEAR);
-      createSvg(this.$button, SEARCH);
-   }
-
-   init() {
-      const $button = this.$button;
-      const $selector = this.$selector;
-      const reposition = false;
-      const closeOnClick = false;
-      const heightControl = false;
-
-      popover(this, { $button, text: this.$t('caption-search') } );
-      opener(this, { $button, $selector, SELECTOR_OPEN_CN, reposition, closeOnClick, heightControl });
-
-      this.addEvent(this.$input, 'input', () => {
-         this.filter = this.$input.value;
-         this.renderCaptions();
-
-         if (this.$input.value) {
-            this.$clearBtn.classList.remove(HIDDEN_CN);
-         } else {
-            this.$clearBtn.classList.add(HIDDEN_CN);
-         }
-      });
-
-      this.$clearBtn.addEventListener('click', () => {
-         this.$input.value = '';
-         this.filter = '';
-         this.renderCaptions();
-      });
-   }
-
-   onStatechanged(state, old) {
-      if (state.cc.lang !== old.cc.lang) {
-         this.handleCaptionLanguageChanged(state.cc.lang);
-      } else if ( state.cc.timedata !== old.cc.timedata ) {
-         this.handleTimeDataChanged();
-      }
-   }
-
-   onCanplaythrough() {
-      this.handleTimeDataChanged();
-   }
-
-   onLoadedmetadata() {
-      this.handleTimeDataChanged();
-   }
-
-   handleCaptionLanguageChanged(lang) {
-      toggleClass(this.$el, HIDDEN_CN, !lang);
-   }
-
-   handleTimeDataChanged() {
-      const lang = this.state.getCCLang();
-      this.handleCaptionLanguageChanged(lang);
-      this.renderCaptions();
-   }
-
-   filteredCaptions() {
-      const r = new RegExp(escapeRegExp(this.filter), 'ig');
-      return filter(this.state.getCCTimeData(), td => {
-         r.lastIndex = 0;
-         return r.test(td.text);
-      });
-   }
-
-   renderCaptions() {
-      const duration = this.player.getDuration();
-      if (!duration) {
-         return;
-      }
-      const hasHour = duration > 3600;
-      each(toArray(this.$captions.childNodes), btn => this.$captions.removeChild(btn) );
-
-      const list = this.filteredCaptions();
-      each(list, caption => {
-         const item = createElement('button', { type: 'button', class: ITEM_CN, id: _id(caption.id) }, this.$captions);
-         const time = createElement('span', { class: CC_TIME_CN }, item);
-         time.textContent = secondsToTime(caption.from, hasHour);
-         const captionText = textContent(caption.text);
-         const text = createElement('span', { class: CC_TEXT_CN, title: captionText }, item);
-         text.textContent = captionText;
-
-         this.addEvent(item, 'click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            const isPaused = this.player.isPaused();
-            this.player.setCurrentTime(caption.from);
-            if (isPaused) {
-               this.player.play();
-            }
-         });
-      });
-   }
-
-   onShowpopup() {
-      this.onTimeupdate();
-      this.scrollToCurrentCaption();
-   }
-
-   scrollToCurrentCaption() {
-      const timeData = this.filteredCaptions();
-      const ct = this.player.getCurrentTime();
-      const idx = findIndex(timeData, ({ from, to }) => inRange(ct, from, to));
-
-      if (idx > -1) {
-         const btns = toArray(this.$captions.childNodes);
-         const btn = btns[Math.max(0, idx - 2)];
-         if (btn) {
-            scrollIntoView(btn, this.$captions);
-         }
-      }
-   }
-
-   onTimeupdate() {
-      const timeData = this.filteredCaptions();
-
-      if (isEmpty(timeData)) {
-         return;
-      }
-
-      const ct = this.player.getCurrentTime();
-      const idx = findIndex(timeData, ({ from, to }) => inRange(ct, from, to));
-
-      if (idx > -1) {
-         const item = timeData[idx];
-         const btn = document.getElementById(_id(item.id));
-
-         if (!btn) {
-            each(toArray(this.$captions.childNodes), btn => removeClass(btn, CURRENT_ITEM_CN));
-            return;
-         }
-
-         if (hasClass(btn, CURRENT_ITEM_CN)) {
-            return;
-         }
-
-         // this.scrollToCurrentCaption();
-         each(toArray(this.$captions.childNodes), btn => removeClass(btn, CURRENT_ITEM_CN));
-         addClass(btn, CURRENT_ITEM_CN);
-      } else {
-         each(toArray(this.$captions.childNodes), btn => removeClass(btn, CURRENT_ITEM_CN));
-      }
-   }
-
-   getElement() {
-      return this.$el;
-   }
-
-   destroy() {
-      super.destroy();
-      const parent = this.$el.parentNode;
-      if (parent instanceof HTMLElement) {
-         parent.removeChild(this.$el);
-      }
-      this.$el = null;
-   }
-}
-
-function escapeRegExp(text) {
-   return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
-}
-
-function _id(id) {
-   return `cc-${id}`;
-}