ravnur-player-public 3.4.2 → 3.4.4

package/src/extensions/caption-search.js

@@ -0,0 +1,230 @@
+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}`;
+}