ravnur-player-public 3.4.3 → 3.4.4

package/src/state.js

@@ -0,0 +1,474 @@
+// @flow
+import Entity from './entity';
+
+import MicroEvent from './microevent';
+
+import {
+   uidGenerator,
+   each,
+   extend,
+   findIndex,
+   find,
+   map,
+   filter
+} from './utils';
+
+import { getStoredData, storeData } from './extensions/helpers/storage';
+import loadVTT from './extensions/helpers/vtt-loader';
+import load from './extensions/helpers/transport';
+import isMobile from './helpers/isMobile';
+
+import {
+   APPROVED_TIMEDATA_STATUS,
+   TRANSLATABLE_TIMEDATA_STATUS,
+   UNTRANSLATED_TIMEDATA_STATUS
+} from './config/statuses';
+
+import {
+   DEFAULT_CC_BG_COLOR,
+   DEFAULT_CC_FONT_FAMILY,
+   DEFAULT_CC_FONT_SIZE,
+   DEFAULT_CC_LOCATION,
+   DEFAULT_CC_TEXT_COLOR
+} from './config/cc';
+
+import type { Player$Logger } from './types/Logger';
+import type {
+   Player$State,
+   Player$StateCC,
+   Player$StateTOC
+} from './types/State';
+import type { Player$Source, Player$TimeDataSource } from './types/Source';
+// , Player$CCLocation
+// import type { Player$TimeData } from './types/TimeData'
+
+const OFF_IDX = 0;
+
+const OFF_ITEM: Player$TimeDataSource = {
+   label: 'None',
+   srclang: '',
+   src: '',
+   state: APPROVED_TIMEDATA_STATUS
+};
+
+const LOCALSTORAGE_CC_KEYS: { [key: $Keys<Player$StateCC>]: string } = {
+   color: 'fontcolor',
+   bgcolor: 'bgcolor',
+   fontSize: 'fontsize',
+   fontFamily: 'fontfamily',
+   location: 'cc_location',
+   lang: 'cclang'
+};
+
+const TOC_LANG_STORAGE_KEY = 'toclang';
+
+type Reducer = (
+  bus: MicroEvent,
+  state: Player$State,
+  ...args: Array<any>
+) => Player$State;
+
+type PreparedSource = {
+  sources: Player$TimeDataSource[],
+  current: ?Player$TimeDataSource,
+};
+
+const actions: { [key: string]: Reducer } = {
+   theaterchanging(buse, state) {
+      return extend({}, state, { isTheaterMode: !state.isTheaterMode });
+   },
+   fullscreenchanging(bus, state, isFullScreen: ?boolean) {
+      isFullScreen =
+      typeof isFullScreen === 'boolean' ? isFullScreen : !state.isFullScreen;
+      return extend({}, state, { isFullScreen });
+   },
+   cclang(bus, state, lang: string) {
+      const sources = state.cc.sources;
+      const idx = Math.max(
+         findIndex(sources, (d) => d.srclang === lang),
+         OFF_IDX
+      );
+      const source = sources[idx];
+
+      if (!source) {
+         return state;
+      }
+
+      if (source.state === APPROVED_TIMEDATA_STATUS) {
+         storeData(LOCALSTORAGE_CC_KEYS.lang, lang);
+      }
+
+      const cc = extend({}, state.cc, { lang, loading: false });
+      const res: Player$State = extend({}, state, { cc });
+
+      bus.emit('captionschange', source);
+      if (source.srclang) {
+         res.cc.loading = true;
+         _timedataLoader(bus, 'refreshcaptions', source);
+      // } else {
+      //    cc.timedata = [];
+      }
+
+      if (!state.cc.lang || !lang) {
+         bus.emit('cclayoutchange', {
+            mode: (lang && state.cc.location) || 'over',
+            fontSize: state.cc.fontSize
+         });
+      }
+      return res;
+   },
+   ccsources(
+      bus,
+      state,
+      sources: Player$TimeDataSource[],
+      lazy: boolean = false
+   ) {
+      const preparedCC = _prepareSources(sources, state.cc.lang);
+      sources = preparedCC.sources;
+      const lang = (preparedCC.current && preparedCC.current.srclang) || '';
+      if (!lazy) {
+         setTimeout(() => bus.emit('cclang', lang), 5);
+      }
+      const cc = extend({}, state.cc, { sources, lang, timedata: [] });
+      return extend({}, state, { cc });
+   },
+   refreshcaptions(bus, state, timedata, lang) {
+      const cc = extend({}, state.cc, { timedata });
+      cc.timedataLang = lang;
+      cc.loading = false;
+      return extend({}, state, { cc });
+   },
+   cclocation(bus, state, location) {
+      storeData(LOCALSTORAGE_CC_KEYS.location, location);
+      bus.emit('cclayoutchange', {
+         mode: (state.cc.lang && location) || 'over',
+         fontSize: state.cc.fontSize
+      });
+      const cc = extend({}, state.cc, { location });
+      return extend({}, state, { cc });
+   },
+   ccfontfamily(bus, state, fontFamily) {
+      storeData(LOCALSTORAGE_CC_KEYS.fontFamily, fontFamily);
+      const cc = extend({}, state.cc, { fontFamily });
+      return extend({}, state, { cc });
+   },
+   ccfontsize(bus, state, fontSize) {
+      storeData(LOCALSTORAGE_CC_KEYS.fontSize, fontSize);
+      bus.emit('cclayoutchange', {
+         mode: (state.cc.lang && state.cc.location) || 'over',
+         fontSize: fontSize
+      });
+      const cc = extend({}, state.cc, { fontSize });
+      return extend({}, state, { cc });
+   },
+   ccbgcolor(bus, state, bgcolor) {
+      storeData(LOCALSTORAGE_CC_KEYS.bgcolor, bgcolor);
+      const cc = extend({}, state.cc, { bgcolor });
+      return extend({}, state, { cc });
+   },
+   cccolor(bus, state, color) {
+      storeData(LOCALSTORAGE_CC_KEYS.color, color);
+      const cc = extend({}, state.cc, { color });
+      return extend({}, state, { cc });
+   },
+   chaptersloaded(bus, state, timedata, lang) {
+      const toc = extend({}, state.toc, { timedata });
+      toc.timedataLang = lang;
+      return extend({}, state, { toc });
+   },
+   tocsources(bus, state, sources: Player$TimeDataSource[]) {
+      const toc = _toc();
+      const preparedTOC = _prepareSources(sources, toc.lang);
+      toc.sources = preparedTOC.sources;
+      toc.lang = (preparedTOC.current && preparedTOC.current.srclang) || '';
+      const tocsource = find(toc.sources, (s) => s.srclang === toc.lang);
+      if (tocsource && tocsource.srclang) {
+         _timedataLoader(bus, 'chaptersloaded', tocsource);
+      } else {
+         const idx = 1;
+         const defsource =
+        find(toc.sources, (s) => !!s.default) || toc.sources[idx];
+         _timedataLoader(bus, 'chaptersloaded', defsource);
+      }
+
+      return extend({}, state, { toc });
+   },
+   changesource(bus, state, source: Player$Source) {
+      const cc = _cc();
+      const preparedCC = _prepareSources(source.cc, cc.lang);
+      cc.sources = preparedCC.sources;
+      cc.lang = (preparedCC.current && preparedCC.current.srclang) || '';
+      const ccsource = find(cc.sources, (s) => s.srclang === cc.lang);
+      if (ccsource && ccsource.srclang) {
+         _timedataLoader(bus, 'refreshcaptions', ccsource);
+      } else {
+         const idx = 1;
+         const defsource = find(cc.sources, (s) => !!s.default) || cc.sources[idx];
+         _timedataLoader(bus, 'refreshcaptions', defsource);
+      }
+
+      const toc = _toc();
+      const preparedTOC = _prepareSources(source.chapters, toc.lang);
+      toc.sources = preparedTOC.sources;
+      toc.lang = (preparedTOC.current && preparedTOC.current.srclang) || '';
+      const tocsource = find(toc.sources, (s) => s.srclang === toc.lang);
+      if (tocsource && tocsource.srclang) {
+         _timedataLoader(bus, 'chaptersloaded', tocsource);
+      } else {
+         const idx = 1;
+         const defsource =
+        find(toc.sources, (s) => !!s.default) || toc.sources[idx];
+         _timedataLoader(bus, 'chaptersloaded', defsource);
+      }
+
+      return extend({}, state, { cc, toc });
+   },
+   toclang(bus, state, lang: string) {
+      const sources = state.toc.sources;
+      const idx = Math.max(
+         findIndex(sources, (d) => d.srclang === lang),
+         OFF_IDX
+      );
+      const source = sources[idx];
+
+      if (source.state === APPROVED_TIMEDATA_STATUS) {
+         storeData(TOC_LANG_STORAGE_KEY, lang);
+      }
+
+      const toc = extend({}, state.toc, { lang });
+      const res: Player$State = extend({}, state, { toc });
+
+      if (source.srclang) {
+         _timedataLoader(bus, 'chaptersloaded', source);
+      // } else {
+      //    toc.timedata = [];
+      }
+      return res;
+   }
+};
+
+const DEFAULT_STATE: Player$State = {
+   isFullScreen: false,
+   isTheaterMode: false,
+
+   cc: {
+      color: DEFAULT_CC_TEXT_COLOR,
+      bgcolor: DEFAULT_CC_BG_COLOR,
+      fontSize: DEFAULT_CC_FONT_SIZE,
+      fontFamily: DEFAULT_CC_FONT_FAMILY,
+      location: DEFAULT_CC_LOCATION,
+      lang: null,
+      sources: [],
+      timedata: [],
+      timedataLang: '',
+      loading: false
+   },
+
+   toc: {
+      lang: null,
+      sources: [],
+      timedata: [],
+      timedataLang: ''
+   }
+};
+
+const cache: { [key: string]: Player$State } = {};
+
+export default class StateEntity extends Entity {
+  _uid: string;
+
+  constructor(bus: MicroEvent, logger: Player$Logger) {
+     super(bus, logger);
+     this._uid = uidGenerator();
+     cache[this._uid] = extend({}, DEFAULT_STATE);
+     cache[this._uid].cc = _cc();
+
+     each(actions, (transformer, listener) => {
+        if (typeof listener === 'number') {
+           return;
+        }
+        bus.on(listener, (...args: Array<any>) => {
+           const old = cache[this._uid];
+           const state = transformer.apply(this, [bus, old].concat(args));
+           cache[this._uid] = state;
+           bus.emit('statechanged', state, old);
+        });
+     });
+  }
+
+  isFullScreen() {
+     return cache[this._uid].isFullScreen;
+  }
+
+  isTheaterMode() {
+     return cache[this._uid].isTheaterMode;
+  }
+
+  getCCLang() {
+     return cache[this._uid].cc.lang;
+  }
+
+  getCCTextColor() {
+     return cache[this._uid].cc.color;
+  }
+
+  getCCBgColor() {
+     return cache[this._uid].cc.bgcolor;
+  }
+
+  getCCFontSize() {
+     return cache[this._uid].cc.fontSize;
+  }
+
+  getCCFontFamily() {
+     return cache[this._uid].cc.fontFamily;
+  }
+
+  getCCLocation() {
+     return cache[this._uid].cc.location;
+  }
+
+  getCCSources() {
+     const cc = cache[this._uid].cc.sources || [];
+     if (isMobile()) {
+        return filter(
+           cc,
+           (source) => source.state !== UNTRANSLATED_TIMEDATA_STATUS
+        );
+     }
+
+     return cc;
+  }
+
+  getCCTimeData() {
+     return cache[this._uid].cc.timedata;
+  }
+
+  getCCTimeDataLang() {
+     return cache[this._uid].cc.timedataLang;
+  }
+
+  getSelectedCC() {
+     const state = cache[this._uid];
+     const { sources, lang } = state.cc;
+     const idx = Math.max(
+        findIndex(sources, (d) => d.srclang === lang),
+        OFF_IDX
+     );
+     return sources[idx];
+  }
+
+  isTranslatingCC() {
+     const state = cache[this._uid];
+     const { sources, lang, loading } = state.cc;
+     const idx = Math.max(
+        findIndex(sources, (d) => d.srclang === lang),
+        OFF_IDX
+     );
+     return loading && sources[idx].state === TRANSLATABLE_TIMEDATA_STATUS;
+  }
+
+  getTOCSources() {
+     return cache[this._uid].toc.sources;
+  }
+
+  getTOCLang() {
+     return cache[this._uid].toc.lang;
+  }
+
+  getTOCTimeData() {
+     return cache[this._uid].toc.timedata;
+  }
+
+  getTOCTimeDataLang() {
+     return cache[this._uid].toc.timedataLang;
+  }
+}
+
+function _cc(): Player$StateCC {
+   const res = extend({}, DEFAULT_STATE.cc);
+   each(LOCALSTORAGE_CC_KEYS, (key, prop) => {
+      res[prop] = getStoredData(key, DEFAULT_STATE.cc[prop]);
+   });
+   return res;
+}
+
+function _toc(): Player$StateTOC {
+   const res: Player$StateTOC = extend({}, DEFAULT_STATE.toc);
+   res.lang = getStoredData(TOC_LANG_STORAGE_KEY, DEFAULT_STATE.toc.lang);
+   return res;
+}
+
+function _sortSource(
+   sources: Player$TimeDataSource[]
+): Player$TimeDataSource[] {
+   return sources.sort((s1, s2) => {
+      const st1 =
+      typeof s1.state === 'number' ? s1.state : APPROVED_TIMEDATA_STATUS;
+      const st2 =
+      typeof s2.state === 'number' ? s1.state : APPROVED_TIMEDATA_STATUS;
+
+      if (st1 === st2) {
+         return s1.label < s2.label ? -1 : 1;
+      }
+      if (typeof st1 === 'number' && typeof st2 === 'number') {
+         return st2 - st1;
+      }
+      return 0;
+   });
+}
+
+function _normalizeSource(
+   source: Player$TimeDataSource
+): Player$TimeDataSource {
+   const state =
+    typeof source.state === 'number' ? source.state : APPROVED_TIMEDATA_STATUS;
+   return extend({}, source, { state });
+}
+
+function _prepareSources(
+   input: ?(Player$TimeDataSource[]),
+   lang: ?string
+): PreparedSource {
+   const normalized = _sortSource(map(input || [], _normalizeSource));
+   const sources = normalized.length ? [OFF_ITEM].concat(normalized) : [];
+
+   let current = find(
+      sources,
+      (s) => s.srclang === lang && s.state !== TRANSLATABLE_TIMEDATA_STATUS
+   );
+   if (!current) {
+      let filtered = filter(
+         sources,
+         (s) => s.state !== TRANSLATABLE_TIMEDATA_STATUS
+      );
+      // 1 - because OFF is the first
+      const idx = 1;
+      current = find(sources, (s) => !!s.default) || filtered[idx];
+   }
+
+   return { sources, current };
+}
+
+function _timedataLoader(
+   bus: MicroEvent,
+   event: "chaptersloaded" | "refreshcaptions",
+   source: ?Player$TimeDataSource
+) {
+   if (!source || !source.src) {
+      bus.emit(event, []);
+      return;
+   }
+
+   const srclang = source.srclang;
+   const error = () => bus.emit(event, [], srclang);
+   if (source.type === 'json') {
+      load({
+         url: source.src,
+         success: (resp) => bus.emit(event, JSON.parse(resp.data), srclang),
+         error
+      });
+   } else {
+      loadVTT(source.src, (m) => bus.emit(event, m, srclang), error);
+   }
+}