video-player.js

  1. /**
  2.  * Video player class.
  3.  * @author Moez Bouhlel <bmoez.j@gmail.com>
  4.  * @license MPL-2.0
  5.  * @copyright 2014-2017 Moez Bouhlel
  6.  * @module
  7.  */
  9. import {
  10.   setClipboard,
  11.   createNode,
  12.   rmChildren,
  13. } from './common.js';
  14. import {
  15.   Qlt,
  16.   Cdc,
  17. } from './Options.js';
  19. class VP {
  20.   constructor(container, options) {
  21.     this.attached = false;
  22.     this.player = undefined;
  23.     this.container = container;
  24.     this._srcs = [];
  25.     this._style = {};
  26.     this._containerStyle = {};
  27.     this._props = {};
  28.     this._langs = [];
  29.     this._containerProps = {};
  30.     this._CSSRules = [];
  31.     this.styleEl = undefined;
  32.     this.options = options;
  33.   }
  35.   addSrc(url, qlt, cdc) {
  36.     this.log("addSrc", qlt, cdc);
  37.     this._srcs[Qlt.indexOf(qlt) * 2 + Cdc.indexOf(cdc)] = url;
  38.   }
  40.   srcs(fmts, wrapper, get) {
  41.     let slct;
  42.     let i;
  43.     let j;
  44.     if (!wrapper) {
  45.       for (const slct of Object.keys(fmts)) {
  46.         i = Qlt.indexOf(slct.split("/")[0]);
  47.         j = Cdc.indexOf(slct.split("/")[1]);
  48.         this._srcs[i * 2 + j] = fmts[slct];
  49.       }
  50.       return;
  51.     }
  52.     for (i = 0; i < Qlt.length; i++) {
  53.       for (j = 0; j < Cdc.length; j++) {
  54.         slct = Qlt[i] + "/" + Cdc[j];
  55.         if (!(slct in wrapper) || !fmts[wrapper[slct]]) continue;
  56.         this._srcs[i * 2 + j] =
  57.           (get) ? (get(fmts[wrapper[slct]]) || this._srcs[i * 2 + j]) : fmts[wrapper[slct]];
  58.       }
  59.     }
  60.   }
  62.   mainSrcIndex() {
  63.     let i;
  64.     const prefCdc = this.options.get("prefCdc");
  65.     const prefQlt = this.options.get("prefQlt");
  66.     i = prefQlt;
  67.     while (i > -1) {
  68.       if (this._srcs[i * 2 + prefCdc]) {
  69.         return {
  70.           qlt: i,
  71.           cdc: prefCdc,
  72.         };
  73.       } else if (this._srcs[i * 2 + (prefCdc + 1 % 2)]) {
  74.         return {
  75.           qlt: i,
  76.           cdc: prefCdc + 1 % 2,
  77.         };
  78.       }
  79.       i = (i >= prefQlt) ? i + 1 : i - 1;
  80.       if (i > 3) i = prefQlt - 1;
  81.     }
  82.   }
  84.   setup() {
  85.     let idx = this.mainSrcIndex();
  86.     if (!idx) return this.error("Failed to find video url");
  87.     this.clean();
  88.     // just to force contextmenu id. TODO: fix contextmenu and use createNode
  89.     this.container.innerHTML = "<video contextmenu='h5vew-contextmenu'></video>";
  90.     this.player = this.container.firstChild;
  91.     //    if (!this.player) {
  92.     //        this.player = createNode("video", this._props, this._style);
  93.     //    }
  94.     if (!this.styleEl) this.styleEl = createNode("style");
  95.     this.patch(this.player, this._props);
  96.     this.patch(this.player, this._style, "style");
  97.     this.player.appendChild(createNode(
  98.       "source", {
  99.         src: this._srcs[idx.qlt * 2 + idx.cdc],
  100.         type: "video/" + Cdc[idx.cdc],
  101.       }));
  102.     this._srcs.forEach((url, i) => {
  103.       if (i !== idx.qlt * 2 + idx.cdc) {
  104.         this.player.appendChild(createNode("source", {
  105.           src: url,
  106.           type: "video/" + Cdc[i % 2],
  107.         }));
  108.       }
  109.     });
  110.     this.container.appendChild(this.player);
  111.     this.container.appendChild(this.styleEl);
  112.     this.attached = true;
  113.     this.slctLang();
  114.     this._CSSRules.forEach((s) =>
  115.       this.styleEl.sheet.insertRule(s, this.styleEl.sheet.cssRules.length));
  116.     this.patch(this.container, this._containerProps);
  117.     this.patch(this.container, this._containerStyle, "style");
  118.     this.log("setup");
  119.     // if (this.options.get("player") === 1)
  120.     //   this.setupLBP();
  121.     // else
  122.     this.setupContextMenu(idx);
  123.   }
  125.   tracksList(langs, fnct) {
  126.     this._langs = langs.sort();
  127.     this._slctLang = fnct;
  128.     if (this.attached) this.slctLang();
  129.   }
  131.   slctLang(lang) {
  132.     if (!lang) lang = this.options.getLang();
  133.     if (!lang && !this._slctLang) return;
  134.     if (this._lang) this.player.textTracks.getTrackById(this._lang).mode = "disabled";
  135.     let track;
  136.     if ((track = this.player.textTracks.getTrackById(lang))) {
  137.       track.mode = "showing";
  138.       this._lang = lang;
  139.     } else {
  140.       new Promise((resolve, reject) => this._slctLang(lang, resolve, reject)).then((url) => {
  141.         track = createNode(
  142.           "track", {
  143.             kind: "subtitles",
  144.             id: lang,
  145.             src: url,
  146.             label: lang,
  147.             srclang: lang,
  148.           });
  149.         this.player.appendChild(track);
  150.         track.track.mode = "showing";
  151.         this._lang = lang;
  152.       });
  153.     }
  154.   }
  156.   on(evt, cb) {
  157.     this.player["on" + evt] = cb; // TODO
  158.   }
  160.   stop() {
  161.     this.log("stop");
  162.     if (!this.player) return;
  163.     this.player.pause();
  164.     this.player.onended = undefined;
  165.     if (this.player.duration) this.player.currentTime = this.player.duration;
  166.   }
  168.   clean() {
  169.     this.log("clean");
  170.     if (this.player) {
  171.       this.player.pause();
  172.       this.player.onended = undefined;
  173.     }
  174.     // site default video player sometime continue playing on background
  175.     let vds = this.container.getElementsByTagName("video");
  176.     for (let i = 0; i < vds.length; i++) {
  177.       if (this.player === vds[i]) continue;
  178.       vds[i].pause();
  179.       vds[i].volume = 0;
  180.       vds[i].currentTime = 0;
  181.       vds[i].srcObject = null;
  182.       vds[i].addEventListener("playing", (e) => {
  183.         e.currentTarget.pause();
  184.         e.currentTarget.volume = 0;
  185.         e.currentTarget.currentTime = 0;
  186.         e.currentTarget.srcObject = null;
  187.       });
  188.     }
  189.     rmChildren(this.container);
  190.     this.container.style.cssText = "";
  191.     this.container.className = "";
  192.     this.attached = false;
  193.   }
  195.   end() {
  196.     this.log("end");
  197.     this.stop();
  198.     this.clean();
  199.     this._srcs = {};
  200.     this._style = {};
  201.     this._containerStyle = {};
  202.     this._props = {};
  203.     this._containerProps = {};
  204.     this._sheets = [];
  205.   }
  207.   addCSSRule(cssText) {
  208.     this.log("addCSSRule", cssText);
  209.     this._CSSRules.push(cssText);
  210.     if (this.attached) this.styleEl.sheet.insertRule(cssText, this.styleEl.sheet.cssRules.length);
  211.   }
  213.   style(_style) {
  214.     this.apply(_style, this.player, "_style", "style");
  215.   }
  217.   containerStyle(_style) {
  218.     this.apply(_style, this.container, "_containerStyle", "style");
  219.   }
  221.   props(_props) {
  222.     this.apply(_props, this.player, "_props");
  223.   }
  225.   containerProps(_props) {
  226.     this.apply(_props, this.container, "_containerProps");
  227.   }
  229.   error(msg) {
  230.     this.log("ERROR Msg:", msg);
  231.     this.clean();
  232.     if (!this.styleEl) this.styleEl = createNode("style");
  233.     this.container.appendChild(
  234.       createNode("p", {
  235.         textContent: "Ooops! :(",
  236.       }, {
  237.         padding: "15px",
  238.         fontSize: "20px",
  239.       }));
  240.     this.container.appendChild(createNode("p", {
  241.       textContent: msg,
  242.     }, {
  243.       fontSize: "20px",
  244.     }));
  245.     this.container.appendChild(this.styleEl);
  246.     this._CSSRules.forEach((s) =>
  247.       this.styleEl.sheet.insertRule(s, this.styleEl.sheet.cssRules.length));
  248.     this.patch(this.container, this._containerProps);
  249.     this.patch(this.container, this._containerStyle, "style");
  250.   }
  252.   setupLBP() {
  253.     this.container.className += " leanback-player-video";
  254.     LBP.setup();
  255.     this.player.style = "";
  256.     this.player.style = "";
  257.     this.player.style.position = "relative";
  258.     this.player.style.height = "inherit";
  259.     this.container.style.marginLeft = "0px";
  260.   }
  262.   setupContextMenu(idx) {
  263.     /* jshint maxstatements:false */
  264.     this._contextMenu = createNode("menu", {
  265.       type: "context", // "popup",
  266.       id: "h5vew-contextmenu",
  267.     });
  268.     let qltMenu = createNode("menu", {
  269.       id: "h5vew-menu-qlt",
  270.       label: "Video Quality",
  271.     });
  272.     for (let i = 0; i < Qlt.length; i++) {
  273.       qltMenu.appendChild(createNode("menuitem", {
  274.         type: "radio",
  275.         label: Qlt[i],
  276.         radiogroup: "menu-qlt",
  277.         checked: (idx.qlt === i),
  278.         disabled: !(this._srcs[i * 2] || this._srcs[i * 2 + 1]),
  279.         onclick: (e) => {
  280.           idx.qlt = Qlt.indexOf(e.target.label);
  281.           idx.cdc = (this._srcs[idx.qlt * 2 + idx.cdc]) ? idx.cdc : (idx.cdc + 1 % 2);
  282.           let paused = this.player.paused;
  283.           this.player.src = this._srcs[idx.qlt * 2 + idx.cdc] + "#t=" + this.player.currentTime;
  284.           this.player.load();
  285.           this.player.oncanplay = () => {
  286.             if (!paused) this.player.play();
  287.             this.player.oncanplay = undefined;
  288.           };
  289.         },
  290.       }));
  291.     }
  292.     let cdcMenu = createNode("menu", {
  293.       id: "h5vew-menu-cdc",
  294.       label: "Preferred Video Format",
  295.     });
  296.     for (let i = 0; i < Cdc.length; i++) {
  297.       cdcMenu.appendChild(createNode("menuitem", {
  298.         type: "radio",
  299.         label: Cdc[i],
  300.         radiogroup: "menu-cdc",
  301.         checked: (this.options.get("prefCdc") === i),
  302.         onclick: (e) => chgPref("prefCdc", Cdc.indexOf(e.target.label)),
  303.       }));
  304.     }
  305.     let langMenu = createNode("menu", {
  306.       id: "h5vew-menu-lang",
  307.       label: "Subtitles",
  308.     });
  309.     langMenu.appendChild(createNode("menuitem", {
  310.       type: "radio",
  311.       label: "none",
  312.       radiogroup: "menu-lang",
  313.       checked: this.options.get("lang") === 0 ||
  314.         this._langs.findIndex((l) => l === this.options.getLang()) === -1,
  315.       onclick: (e) => {
  316.         if (this._lang === undefined) return;
  317.         this.player.textTracks.getTrackById(this._lang).mode = "disabled";
  318.         this._lang = undefined;
  319.       },
  320.     }));
  321.     for (let i = 0; i < this._langs.length; i++) {
  322.       langMenu.appendChild(createNode("menuitem", {
  323.         type: "radio",
  324.         label: this._langs[i],
  325.         radiogroup: "menu-lang",
  326.         checked: this._langs[i] === this.options.getLang(),
  327.         onclick: (e) => this.slctLang(e.target.label),
  328.       }));
  329.     }
  330.     let loopMenu = createNode("menu", {
  331.       id: "h5vew-menu-loop",
  332.       label: "Loop Video",
  333.     });
  334.     ["Never", "Always", "Default"].forEach((n, i) => {
  335.       loopMenu.appendChild(createNode("menuitem", {
  336.         type: "radio",
  337.         label: n,
  338.         radiogroup: "menu-loop",
  339.         checked: (this.options.get("loop") === i),
  340.         onclick: (e) => chgPref("loop", i),
  341.       }));
  342.     });
  343.     let autoNextMenu = createNode("menuitem", {
  344.       id: "h5vew-menu-autonext",
  345.       type: "checkbox",
  346.       label: "Auto Play Next Video",
  347.       checked: this.options.get("autoNext"),
  348.       onclick: (e) => chgPref("autoNext", e.target.checked),
  349.     });
  350.     let moreMenu = createNode("menu", {
  351.       id: "h5vew-menu-more",
  352.       label: "More options",
  353.     });
  354.     let copyMenu = createNode("menuitem", {
  355.       id: "h5vew-menu-copy",
  356.       label: "Copy Page URL",
  357.       onclick: () => setClipboard(location.href), // TODO
  358.     });
  359.     let disableMenu = createNode("menuitem", {
  360.       id: "h5vew-menu-disable",
  361.       label: "Disable " + this.options.moduleName.charAt(0).toUpperCase() +
  362.         this.options.moduleName.slice(1) + " Support",
  363.       onclick: () => {
  364.         self.port.emit("disable");
  365.         this._contextMenu.removeChild(disableMenu);
  366.       },
  367.     });
  368.     let aboutMenu = createNode("menuitem", {
  369.       id: "h5vew-menu-about",
  370.       label: "About HTML5 Video EveryWhere",
  371.       onclick: () => window.open(
  372.         "http://lejenome.github.io/html5-video-everywhere#v=" + this.options.getVersion() +
  373.         "&id=" + this.options.getId(),
  374.         "h5vew-about",
  375.         "width=550,height=300,menubar=no,toolbar=no,location=no,status=no,chrome=on,modal=on"
  376.       ),
  377.     });
  378.     moreMenu.appendChild(copyMenu);
  379.     moreMenu.appendChild(disableMenu);
  380.     moreMenu.appendChild(createNode("hr"));
  381.     moreMenu.appendChild(aboutMenu);
  383.     // const prefChanged = (name) => {
  384.     //   if (name === "autoNext") autoNextMenu.checked = this.options.get("autoNext");
  385.     // };
  386.     // onPrefChange.push(prefChanged);
  387.     this._contextMenu.appendChild(qltMenu);
  388.     this._contextMenu.appendChild(cdcMenu);
  389.     if (this._langs.length > 0) this._contextMenu.appendChild(langMenu);
  390.     this._contextMenu.appendChild(loopMenu);
  391.     this._contextMenu.appendChild(autoNextMenu);
  392.     this._contextMenu.appendChild(moreMenu);
  393.     this.container.appendChild(this._contextMenu);
  394.     // TODO: fix assigning contextMenu and uncommant createNode("video") ^
  395.     this.container.contextmenu = "h5vew-contextmenu";
  396.   }
  398.   apply(props, el, obj, sub) {
  399.     for (let prop of Object.keys(props)) {
  400.       this[obj][prop] = props[prop];
  401.       if (this.attached && sub) {
  402.         el[sub][prop] = props[prop];
  403.       } else if (this.attached && !sub) {
  404.         el[prop] = props[prop];
  405.       }
  406.     }
  407.   }
  409.   patch(el, props, sub) {
  410.     for (let prop of Object.keys(props)) {
  411.       if (sub) {
  412.         el[sub][prop] = props[prop];
  413.       } else {
  414.         el[prop] = props[prop];
  415.       }
  416.     }
  417.   }
  419.   log(...args) {
  420.     args.unshift("[DRIVER::VP]");
  421.     console.log(args.join(" ") + "\n");
  422.   }
  423. }
  425. export default VP;