@viewlift/player-backup 1.0.1-lighteningjs → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/autoNextVideo-823821e8.js +1 -0
- package/cjs/bundle.css +657 -0
- package/cjs/caption-settings-67212c17.js +1 -0
- package/cjs/caption-settings-d42c056e.js +1 -0
- package/cjs/debugSelection-cbfdabb7.js +1 -0
- package/cjs/dvr_skin-f7f770ae.js +1 -0
- package/cjs/error-26d5a3c3.js +1 -0
- package/cjs/features-164c3cc6.js +1 -0
- package/cjs/generic-8b99b151.js +1 -0
- package/cjs/icons-7afb9c13.js +1 -0
- package/cjs/index-3dfe6459.js +1 -0
- package/cjs/index.js +1 -0
- package/cjs/keyboardShortcuts-cfd998c2.js +1 -0
- package/cjs/loader-393b838a.js +1 -0
- package/cjs/multicam-21c9a90b.js +1 -0
- package/cjs/multicam-a41fe4a6.js +1 -0
- package/cjs/multicamv2-76d8530b.js +1 -0
- package/cjs/multicamv2-c148fa24.js +1 -0
- package/cjs/mwebPotrait-3c11d7cf.js +1 -0
- package/cjs/mwebPotraitTray-b9d5d45a.js +1 -0
- package/cjs/nextEpisodeButton-300afadc.js +1 -0
- package/cjs/nextEpisodeButton-b6e6586f.js +1 -0
- package/cjs/nondvr_skin-ef2cb3b2.js +1 -0
- package/cjs/playlist-925f808b.js +1 -0
- package/cjs/playlist-df87ca90.js +1 -0
- package/cjs/renditions-bc841552.js +1 -0
- package/cjs/resolution-6a9adf54.js +1 -0
- package/cjs/series-82ec79d3.js +1 -0
- package/cjs/series-9c237975.js +1 -0
- package/cjs/series-v2-24855152.js +1 -0
- package/cjs/series-v2-70137d8c.js +1 -0
- package/cjs/settings-icon-a63f46fc.js +1 -0
- package/cjs/settings-icon-e6a8feee.js +1 -0
- package/cjs/skin-095cc078.js +1 -0
- package/cjs/skin-225252ff.js +1 -0
- package/cjs/skin-39ab30e2.js +1 -0
- package/cjs/skin-84083352.js +1 -0
- package/cjs/skin-93a3e5ae.js +1 -0
- package/cjs/skin-983a2ea7.js +1 -0
- package/cjs/skin-afbec6d7.js +1 -0
- package/cjs/skin-ec49b877.js +1 -0
- package/cjs/skin-f225a42e.js +1 -0
- package/cjs/skin-fb394911.js +1 -0
- package/cjs/util-fa21734a.js +1 -0
- package/cjs/videoSelector-01a9ef43.js +1 -0
- package/cjs/videoSelector-fcdf11eb.js +1 -0
- package/esm/autoNextVideo-1672740e.js +1 -0
- package/esm/bundle.css +657 -0
- package/esm/caption-settings-2e47813b.js +1 -0
- package/esm/caption-settings-3eacf3a0.js +1 -0
- package/esm/debugSelection-2601b8b3.js +1 -0
- package/esm/dvr_skin-9cc1b144.js +1 -0
- package/esm/error-2395864b.js +1 -0
- package/esm/features-f86404ce.js +1 -0
- package/esm/generic-7c43020f.js +1 -0
- package/esm/icons-c18c70b7.js +1 -0
- package/esm/index-9f022e82.js +1 -0
- package/esm/index.js +1 -0
- package/esm/keyboardShortcuts-c06f3c7b.js +1 -0
- package/esm/loader-580278fe.js +1 -0
- package/esm/multicam-94da3759.js +1 -0
- package/esm/multicam-de741974.js +1 -0
- package/esm/multicamv2-0105c40f.js +1 -0
- package/esm/multicamv2-d006cffa.js +1 -0
- package/esm/mwebPotrait-3c1805d8.js +1 -0
- package/esm/mwebPotraitTray-5ab39989.js +1 -0
- package/esm/nextEpisodeButton-2ea69b56.js +1 -0
- package/esm/nextEpisodeButton-a1556cdf.js +1 -0
- package/esm/nondvr_skin-64be70e5.js +1 -0
- package/esm/playlist-032fbbf3.js +1 -0
- package/esm/playlist-7ecf432a.js +1 -0
- package/esm/renditions-97276745.js +1 -0
- package/esm/resolution-38cd4f5c.js +1 -0
- package/esm/series-041152aa.js +1 -0
- package/esm/series-977edced.js +1 -0
- package/esm/series-v2-0727ee8c.js +1 -0
- package/esm/series-v2-516c91c2.js +1 -0
- package/esm/settings-icon-0125bffd.js +1 -0
- package/esm/settings-icon-2b713fbf.js +1 -0
- package/esm/skin-2c638dc1.js +1 -0
- package/esm/skin-42c2f81d.js +1 -0
- package/esm/skin-5e2fa9d4.js +1 -0
- package/esm/skin-6093bfb3.js +1 -0
- package/esm/skin-60a41d44.js +1 -0
- package/esm/skin-665ec17e.js +1 -0
- package/esm/skin-93e320fc.js +1 -0
- package/esm/skin-b939c35e.js +1 -0
- package/esm/skin-cd537931.js +1 -0
- package/esm/skin-d5510f70.js +1 -0
- package/esm/util-d9f5a7be.js +1 -0
- package/esm/videoSelector-8889c58e.js +1 -0
- package/esm/videoSelector-8e258d45.js +1 -0
- package/package.json +15 -31
- package/.babelrc +0 -8
- package/.browserslistrc +0 -2
- package/README.md +0 -29
- package/babel.config.json +0 -8
- package/dist/index.cjs.css +0 -2
- package/dist/index.cjs.css.map +0 -1
- package/dist/index.cjs.js +0 -1
- package/dist/index.d.ts +0 -45
- package/dist/index.esm.css +0 -2
- package/dist/index.esm.css.map +0 -1
- package/dist/index.esm.js +0 -1
- package/dist/main-player/player-ui.d.ts +0 -19
- package/dist/player-components/player-buttons/playerButtons.d.ts +0 -38
- package/dist/player-components/player-seekbar/playerSeekbar.d.ts +0 -25
- package/dist/player-ui/player-ui.d.ts +0 -18
- package/dist/playerInitializer.d.ts +0 -13
- package/rollup.config.mjs +0 -37
- package/src/index.ts +0 -242
- package/src/main-player/player-ui.ts +0 -65
- package/src/player-components/player-buttons/playerButtons.css +0 -0
- package/src/player-components/player-buttons/playerButtons.ts +0 -127
- package/src/player-components/player-seekbar/playerSeekbar.css +0 -75
- package/src/player-components/player-seekbar/playerSeekbar.ts +0 -158
- package/src/player-ui/player-ui.css +0 -8
- package/src/player-ui/player-ui.ts +0 -79
- package/src/playerInitializer.ts +0 -54
- package/tsconfig.json +0 -14
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var n=".tvProviderImage{\n position: absolute;\n right: 1rem;\n top: 1rem;\n max-height: 100px;\n max-width: 100px;\n}\n.tvProviderImage>img{\n height: 100%;\n width: 100%;\n}\n.vjs-button>.vjs-icon-placeholder:before {\n font-size: 2.2em;\n line-height: 2.6;\n}\n.vjs-control-bar{\n z-index: 1 !important;\n height: 6em !important;\n background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%) !important;\n}\n\n.vjs-fade>* {\n visibility: hidden !important;\n opacity: 0 !important;\n transition: visibility 1s, opacity 1s !important;\n}\n\n.video-js .vjs-progress-control {\n left: -6px;\n position: absolute;\n width: 100%;\n height: 0.5em;\n top: -0.5em;\n transition: height .1s,top .1s;\n}\n\n.video-js .vjs-custom-control-spacer {\n display: block;\n flex: 1 1 auto;\n}\n\n.vjs-remaining-time.vjs-time-control.vjs-control {\n position: absolute;\n right: 0;\n bottom: 18px;\n}\n\n.video-js .vjs-progress-control .vjs-progress-holder {\n margin: 0 41px 0 14px;\n}\n.vjs-remaining-time.vjs-time-control.vjs-control{\n display: none;\n}\n\nbutton.vjs-control.vjs-button.vjs-slowmo-button {\n font-size: 14px;\n font-weight: 500;\n}\n\n.video-js .vjs-progress-control .vjs-progress-holder{\n height: 6px !important;\n}\n\n.video-js .vjs-play-progress:before {\n font-size: 1.9em;\n}\n\n.video-js .vjs-current-time { display: block; }\n\n.video-js .vjs-current-time {\n display: block;\n position: absolute;\n right: 0em;\n bottom: 1.8em;\n font-size: 12px;\n font-weight: 600;\n}\n\n.video-js .vjs-button{\n width: 6em;\n}\n\nbutton.vjs-control.vjs-button.vjs-slowmo-button{\n align-self: center;\n height: min-content;\n padding: 5px 2px;\n border-radius: 8px;\n}\n\n\n.vjs-fullscreen .icon-minimize,\n.icon-maximize {\n display: block;\n height: 32px;\n}\n\n.vjs-fullscreen .icon-maximize,\n.icon-minimize {\n display: none;\n height: 32px;\n}\n\nbutton.vjs-play-control.vjs-control.vjs-button{\n outline: none !important;\n}\n\n.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before,\n.vjs-icon-fullscreen-enter:before {\n content: '' !important;\n}\n\n.video-js button.vjs-fullscreen-control.vjs-control.vjs-button {\n display: flex;\n justify-content: center;\n align-items: center;\n transform: rotate(90deg);\n}\n\n.video-js .vjs-subs-caps-button .vjs-icon-placeholder:before{\n display: none;\n}\n.video-js .vjs-volume-panel .vjs-volume-control{\n margin-left: -10px;\n}\n\n.skipbtn:hover{\n cursor: pointer;\n}\n\n.rewindbtn:hover{\n cursor: pointer;\n}\n\n.vjs-live-control{\n position: absolute !important;\n right: 0em !important;\n background-color: none;\n bottom: 1.8em !important;\n font-weight: 700 !important;\n font-size: 11px !important;\n}\n\n.vjs-seek-to-live-control.vjs-control{\n position: absolute !important;\n right: 0em !important;\n background-color: none;\n bottom: 3.2em !important;\n}\n\n.vjs-seek-to-live-control.vjs-control >span.vjs-icon-placeholder{\n display:none;\n}\n\n.video-js.vjs-paused .vjs-big-play-button {\n width: 90px;\n height: 90px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n margin: auto;\n font-size: 6em;\n line-height: 1.3em;\n}\n.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{\n font-weight: bold;\n}\n\n.vjs-menu > ul.vjs-menu-content{\n bottom: 3.5em !important;\n right: -1em;\n}\n\n.video-js .vjs-chromecast-button .vjs-icon-placeholder {\n width: 17px !important;\n height: 17px !important;\n}\n\n.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{\n /* display: flex;\n justify-content: center;\n align-items: center; */\n display: none;\n}\n\nbutton.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{\n height: min-content;\n width: min-content;\n}\n.video-js .vjs-volume-panel.vjs-volume-panel-vertical{\n width: 6em;\n}\n\n.video-js .content{\n bottom: 3.4rem !important;\n right: -4rem !important; \n}\n\n.setting-icon > svg{\n height:18px !important;\n}\n\n\n@media(max-width:600px){\n .tvProviderImage{\n display: none\n }\n.vjs-fullscreen .icon-minimize,\n .icon-maximize {\n height: 30px !important;\n }\n\n .vjs-fullscreen .icon-maximize,\n .icon-minimize {\n height: 30px !important;\n }\n\n button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {\n height: min-content;\n }\n\n .vjs-seek-to-live-control.vjs-control{\n position: relative !important;\n right: 0em !important;\n bottom: 0 !important;\n }\n\n .video-js .vjs-progress-control{\n top: -0.85em;\n }\n .vjs-live-control{\n right: -1em !important;\n position: relative !important;\n bottom: 0 !important;\n font-size: 12px !important;\n }\n button.vjs-slowmo-button{\n display: none;\n }\n button.vjs-rewind-button{\n display: none;\n }\n button.vjs-rewind-button>svg{\n height: 20px;\n }\n .video-js .vjs-button{\n width: 4.8em;\n }\n .video-js .widget-selection{\n display: none;\n }\n .video-js .container{\n display: none !important;\n }\n .video-js .vjs-control-bar{\n height: 4em !important;\n }\n .video-js .vjs-button>.vjs-icon-placeholder:before{\n font-size: 2.5em;\n line-height: 1.5;\n }\n .video-js .vjs-play-progress:before {\n font-size: 1.2em;\n position: absolute;\n right: -0.5em;\n /* top: -0.3333333333em; */\n z-index: 1;\n}\nbutton.vjs-skip-button>svg{\n height: 20px;\n}\nbutton.vjs-big-play-button {\n width: 50px !important;\n height: 50px !important;\n font-size: 2.1rem !important;\n}\n.vjs-seek-to-live-control.vjs-control >span.vjs-icon-placeholder{\n display: block;\n}\n\n.stream-selector-icon>svg{\n width: 24px;\n height: 24px;\n}\n.video-js.vjs-live .vjs-progress-control .vjs-progress-holder{\n margin: 0 12px 0 21px;\n}\n.vjs-seek-to-live-text{\n font-size: 12px;\n}\n.video-js .vjs-progress-control .vjs-progress-holder {\n margin: 0 40px 0px 21px;\n}\n.video-js .vjs-current-time{\n bottom: 2em !important;\n}\n}\n.output-overlay{\n position: absolute;\n bottom: 0;\n height: 100%;\n width: 100%;\n z-index: 0;\n border: 0;\n pointer-events:none\n}\n\niframe{\n width: 100%;\n height: 100%;\n}\n";export{n as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{b as e,e as t,f as s,g as o,h as n}from"./features-f86404ce.js";import{i}from"./keyboardShortcuts-c06f3c7b.js";import{S as r,M as a,a as l,N as d,b as m,R as u}from"./icons-c18c70b7.js";import{g as p,a as c}from"./generic-7c43020f.js";import{c as f}from"./skin-665ec17e.js";import"@babel/runtime/helpers/defineProperty";import"@babel/runtime/helpers/classCallCheck";import"@babel/runtime/helpers/createClass";import"@babel/runtime/helpers/inherits";import"@babel/runtime/helpers/possibleConstructorReturn";import"@babel/runtime/helpers/getPrototypeOf";import"video.js";import"./renditions-97276745.js";import"axios";import"js-cookie";import"ua-parser-js";import"@babel/runtime/helpers/toConsumableArray";function v(v,b){i(v,b),import("./skin-cd537931.js").then((function(e){var t=document.createElement("style");t.id="def_skin",t.append("".concat(e.default)),document.head.appendChild(t)})),function(e,t){0==t.liveVideo&&0==t.liveui&&o(e,"default",m());(0==t.liveVideo&&0==t.liveui||1==t.liveui)&&n(e,"default",u())}(v,b),function(o,n){var i=p(o),a=(null==n?void 0:n.sres)||null;i.on("loadeddata",(function(){e(o,"default",r()),a&&import("./nextEpisodeButton-2ea69b56.js").then((function(e){e.initaliseFunctionality(n.sres.seasons,c())}))})),i.one("loadedmetadata",(function(){var e;a&&(t(o,null==n||null===(e=n.sres)||void 0===e?void 0:e.seasons,n),s(n.sres,n.res,o))}))}(v,b),function(e,t){var s=p(e),o=document.getElementsByClassName("vjs-current-time")[0],n=document.getElementsByClassName("vjs-duration")[0],i=document.getElementsByClassName("vjs-time-divider")[0];t.liveVideo&&(o&&(o.style.display="none"),n&&(n.style.display="none"),i&&(i.style.display="none"));s.controlBar.getChild("FullscreenToggle").el().appendChild(f(a(window.controlsColor))),s.controlBar.getChild("FullscreenToggle").el().appendChild(f(l(window.controlsColor)));var r=s.controlBar.getChild("SubsCapsButton").el();document.getElementById(e).getElementsByClassName("vjs-subs-caps-button")[1].appendChild(f(d()));var m=document.createElement("div");m.classList.add("caption-header"),r.querySelector(".vjs-menu-content").insertBefore(m,r.querySelector(".vjs-menu-item"))}(v,b)}export{v as initialiseSkin};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var n=".video-js .vjs-custom-control-spacer {\n display: block;\n flex: 1 1 auto;\n}\n\n.video-js .vjs-play-progress {\n background-color: #CF0A2C !important;\n}\n\n.video-js .vjs-progress-control {\n position: absolute;\n width: 100%;\n height: 0.5em;\n top: -0.5em;\n transition: height .1s, top .1s;\n}\n\n.video-js .vjs-progress-control .vjs-progress-holder {\n margin: 0 7px;\n border-radius: 4px;\n height: 5px;\n}\n\n.video-js .vjs-play-progress:before {\n font-size: 1.2em;\n position: absolute;\n right: -0.5em;\n top: -0.3333333333em;\n}\n\n.video-js .vjs-current-time.vjs-time-control.vjs-control {\n padding-right: 0;\n}\n\n.video-js .vjs-duration.vjs-time-control.vjs-control {\n padding-left: 0;\n}\n\n.video-js .vjs-time-control.vjs-time-divider {\n padding-left: 0;\n padding-right: 0;\n display: flex;\n justify-content: center;\n width: min-content;\n}\n\n.video-js .vjs-time-control {\n display: flex;\n align-items: center;\n font-weight: 900;\n}\n\n.video-js .vjs-remaining-time {\n display: none;\n}\n\n.video-js .vjs-button>.vjs-icon-placeholder:before {\n font-size: 2.1em;\n line-height: 1.67;\n}\n\n.vjs-fullscreen .icon-maximize,\n.icon-minimize {\n display: none;\n height: 28px;\n}\n\n.vjs-fullscreen .icon-minimize,\n.icon-maximize {\n display: block;\n height: 28px;\n}\n\n.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before,\n.vjs-icon-fullscreen-enter:before {\n content: '' !important;\n}\n\n.video-js .vjs-control-bar {\n width: 100%;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 3.5em;\n background-color: #2b333f;\n background-color: rgba(43, 51, 63, .7);\n}\n\n.video-js button.vjs-fullscreen-control.vjs-control.vjs-button {\n display: flex;\n justify-content: center;\n align-items: center;\n transform: rotate(90deg);\n}\n\n.video-js .vjs-subs-caps-button .vjs-icon-placeholder:before {\n display: none;\n}\n\n.video-js .rewindbtn {\n width: 16px !important;\n}\n\n.video-js .skipbtn {\n width: 16px !important;\n}\n\n.video-js button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button {\n display: flex;\n justify-content: center;\n align-items: center;\n outline: none;\n}\n\n.video-js .vjs-big-play-button {\n font-size: 6em;\n line-height: 1.3em;\n}\n\n.video-js.vjs-paused .vjs-big-play-button{\n width: 90px;\n height: 90px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom:0;\n margin: auto;\n}\n\n.vjs-play-control.vjs-control.vjs-button:focus{\n outline: none;\n} \n\n.video-js.vjs-waiting .vjs-big-play-button{\n display: none;\n}\n\n.vjs-rewind-button{\n cursor: pointer;\n}\n\n.vjs-skip-button{\n cursor: pointer;\n}\n\n.video-js .vjs-live-display {\n background-color: red;\n padding: 0 5px;\n height: 20px;\n top: 5px;\n position: relative;\n}\n\n.video-js .vjs-live-control {\n line-height: 2em;\n}\n\n.vjs-live-control.vjs-control{\n margin-left: 0.8rem;\n padding-top: 2px;\n}\n\n@media (max-width:600px) {\n .vjs-live-control.vjs-control{\n margin-top: 3px !important;\n }\n\n .video-js .vjs-play-progress:before{\n font-size: 1em !important;\n } \n .video-js .vjs-big-play-button {\n font-size: 3.5em !important;\n line-height: 1.3em !important;\n }\n \n .video-js.vjs-paused .vjs-big-play-button{\n width: 50px !important;\n height: 50px !important;\n }\n\n .video-js .vjs-current-time.vjs-time-control.vjs-control {\n display: none !important;\n }\n\n .video-js .vjs-duration.vjs-time-control.vjs-control {\n display: none !important;\n }\n\n .video-js .vjs-time-control.vjs-time-divider {\n display: none !important;\n }\n\n .video-js .vjs-skip-button {\n display: none !important;\n }\n\n .video-js .vjs-progress-control.vjs-control {\n position: absolute;\n bottom: 1.8rem;\n width: 100;\n height: 1rem;\n }\n\n .video-js .vjs-remaining-time.vjs-time-control.vjs-control {\n position: absolute;\n bottom: 1rem;\n right: 0.2rem;\n font-size: 9px;\n }\n\n .video-js .vjs-custom-control-spacer {\n display: block;\n flex: 1 1 auto;\n }\n\n .video-js .container {\n display: none !important;\n }\n\n .video-js .vjs-control-bar {\n font-size: 12px;\n }\n\n .video-js .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button {\n display: none;\n }\n\n .video-js button.vjs-picture-in-picture-control.vjs-control.vjs-button {\n display: none;\n }\n\n .video-js .vjs-progress-control.vjs-control:focus {\n outline: none;\n }\n\n .video-js .vjs-slider:focus {\n outline: none;\n }\n\n .video-js .rewindbtn {\n width: 16px;\n }\n\n .video-js .skipbtn {\n width: 16px;\n }\n\n .video-js button.vjs-mute-control.vjs-control.vjs-button.vjs-vol-3 {\n font-size: 11px;\n margin-top: 1px;\n }\n\n .video-js button.vjs-mute-control.vjs-control.vjs-button.vjs-vol-0 {\n font-size: 11px;\n margin-top: 1px;\n }\n}";export{n as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var a="";export{a as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{g as t}from"./generic-7c43020f.js";var n=function(n,a,r){var e=t(n);e?a>=0&&a<=e.duration()?(r({status:!0,msg:"Successfully seeked to timestamp : ".concat(a)}),e.currentTime(a)):r({status:!1,msg:"Out of bounds, please provide a valid timestamp"}):r("Cannot find player with id: '".concat(n,"'"))},a=function(n,a){var r=t(n);if(!r)return"Cannot find player with id: '".concat(n,"'");try{return r.playbackRate(a),"Playback speed set to ".concat(a,"x")}catch(t){return"Error: ".concat(t)}},r=function(n,a){var r=t(n);r?r.on("timeupdate",(function(){return a(r.currentTime())})):a("Cannot find player with id: '".concat(n,"'"))},e=function(n,a){var r=t(n);r?r.on("ended",(function(){return a(!0)})):a("Cannot find player with id: '".concat(n,"'"))},i=function(n){var a=t(n);return a?a.duration():"Cannot find player with id: '".concat(n,"'")};export{e as a,a as b,i as g,r as o,n as s};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import e from"@babel/runtime/helpers/classCallCheck";import t from"@babel/runtime/helpers/createClass";import o from"@babel/runtime/helpers/inherits";import n from"@babel/runtime/helpers/possibleConstructorReturn";import i from"@babel/runtime/helpers/getPrototypeOf";import a from"video.js";import{E as r,e as l}from"./icons-c18c70b7.js";import{g as c,o as s,J as d}from"./generic-7c43020f.js";import{a as m,h as u}from"./skin-665ec17e.js";import{a as p}from"./autoNextVideo-1672740e.js";import"@babel/runtime/helpers/defineProperty";import"axios";import"js-cookie";import"ua-parser-js";import"@babel/runtime/helpers/toConsumableArray";import"./util-d9f5a7be.js";function v(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var o,a=i(e);if(t){var r=i(this).constructor;o=Reflect.construct(a,arguments,r)}else o=a.apply(this,arguments);return n(this,o)}}var h=a.getComponent("Component"),f=function(n){o(f,h);var i=v(f);function f(t){var o,n,a,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return e(this,f),(a=i.call(this,t,r)).playerId=r.playerId,a.seriesData=r.sres,a.videos=r.related.content,a.cb=(null==r||null===(o=r.related)||void 0===o?void 0:o.cb)||null,a.autoNext=(null==r||null===(n=r.related)||void 0===n?void 0:n.autoNext)||!1,a.currentVideoData=r.res,a.initialiseStructure(),a.loadCSS(),a.autoNext&&p({playerId:a.playerId,content:a.videos,cb:a.cb}),a}return t(f,[{key:"createEl",value:function(){var e=a.dom.createEl("div",{className:"video-selection vjs-control vjs-button"});e.style.position="unset";var t=a.dom.createEl("div",{className:"video-selector-icon",innerHTML:"".concat(r())});return a.dom.appendContent(e,t),e}},{key:"loadCSS",value:function(){import("./videoSelector-8e258d45.js").then((function(e){var t=document.createElement("style");t.id="video-selection",t.append("".concat(e.default)),document.head.appendChild(t)}))}},{key:"initialiseStructure",value:function(){var e=this.el(),t=a.dom.createEl("div",{className:"video-selection-container hidden"});a.dom.$(".video-selector-icon",this.el()).onclick=function(){var o;null!==(o=t.classList)&&void 0!==o&&o.contains("hidden")?(m(),t.classList.remove("hidden"),e.classList.add("open"),t.style.right="0px"):(t.classList.add("hidden"),e.classList.remove("open"),t.style.right="-350px")};var o=window.getComputedStyle(document.getElementById(this.playerId),null).getPropertyValue("height").slice(0,-2);t.style.height="".concat(o,"px"),a.dom.appendContent(e,t),document.getElementById(this.playerId).style.overflow="hidden",this.addFunctionality(t)}},{key:"toggleOpenClose",value:function(){}},{key:"addFunctionality",value:function(e){var t=this,o=this.el(),n=a.dom.createEl("div",{className:"video-selector-head"}),i=a.dom.createEl("div",{className:"video-selector-cross-icon",innerHTML:"".concat(l())});i.onclick=function(){e.classList.add("hidden"),o.classList.remove("open"),e.style.right="-350px"};for(var r=a.dom.createEl("div",{className:"video-selector-title",innerHTML:"Recommended"}),m=a.dom.createEl("div",{className:"video-selector-content"}),p=a.dom.createEl("div",{className:"video-container"}),v=function(e){var o,n=a.dom.createEl("div",{className:"video -".concat(e)}),i=a.dom.createEl("div",{className:"recommended -".concat(e)});i.setAttribute("video-idx",e),i.onclick=function(){d(e+1);for(var o=a.dom.$$(".recommended"),n=0;n<o.length;n++)o[n].style.border="none";u(e),s(t.playerId,t.videos[e].id,sessionStorage.getItem("token")).then((function(e){t.cb&&t.cb(e)})).catch((function(e){t.cb&&t.cb(e)}))};var r=document.createElement("img");r.className="related-thumbnail-image",r.src="".concat(t.videos[e].img),r.alt="No Thumbnail Available",i.append(r);var l=a.dom.createEl("div",{className:"info -".concat(e),innerHTML:"".concat((null==t||null===(o=t.videos[e])||void 0===o?void 0:o.title)||"")});a.dom.appendContent(n,i),a.dom.appendContent(n,l),a.dom.appendContent(p,n),a.dom.appendContent(m,p)},h=0;h<this.videos.length;h++)v(h);a.dom.appendContent(n,i),a.dom.appendContent(n,r),a.dom.appendContent(e,n),a.dom.appendContent(e,m),c(this.playerId).on("fullscreenchange",(function(){var o=window.getComputedStyle(document.getElementById(t.playerId),null).getPropertyValue("height").slice(0,-2);e.style.height="".concat(o,"px")}))}}]),f}();export{f as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var n=".video-selection {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.video-selector-icon {\n cursor: pointer;\n}\n\n.video-selection-container {\n position: absolute;\n width: 350px;\n bottom: 0px;\n right: -350px;\n background: #00000080 !important;\n z-index: -1;\n transition: right 300ms ease-out;\n}\n\n.video-container {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n}\n\n.video-selection.open {\n background: rgba(255, 255, 255, 0.20) !important;\n}\n\n.video-selector-head {\n display: flex;\n align-items: center;\n padding-top: 18px;\n padding-left: 20px;\n margin-bottom: 20px;\n}\n\n.video-selector-title {\n font-size: 18px;\n font-weight: 600;\n margin-left: 25px;\n user-select: none;\n}\n\n.video-selector-cross-icon {\n cursor: pointer;\n}\n\n.video-selector-content {\n height: 74%;\n overflow: scroll;\n}\n\n.video-selector-content::-webkit-scrollbar {\n display: none;\n}\n\n/* Hide scrollbar for IE, Edge and Firefox */\n.video-selector-content {\n -ms-overflow-style: none;\n /* IE and Edge */\n scrollbar-width: none;\n /* Firefox */\n}\n\n.video-selector-content-video {\n height: 300px;\n margin-bottom: 30px;\n}\n\n.recommended {\n height: 175px;\n width: 309px;\n background-repeat: no-repeat;\n background-size: contain;\n}\n.related-thumbnail-image{\n width: 100%;\n height: 100%;\n}\n.video {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.parent {\n margin: 21px 52px 23px 34px;\n\n}\n\n.recommended:hover {\n cursor: pointer;\n}\n\n.info {\n font-size: 13px;\n padding: 7px 22px;\n}\n\n@media (max-width:600px){\n .video-selector-cross-icon>svg{\n height: 12px;\n }\n .video-selector-title{\n font-size: 14px;\n }\n .video-selector-content{\n height: 52%;\n }\n .video-selection-container{\n width: 200px;\n }\n .recommended{\n height: 90px !important;\n width: 154px !important;\n }\n .info {\n font-size: 9px !important;\n }\n .video-selector-title{\n margin-left: 13px;\n }\n}";export{n as default};
|
package/package.json
CHANGED
|
@@ -1,33 +1,17 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
"SmartTV",
|
|
18
|
-
"video-player"
|
|
19
|
-
],
|
|
20
|
-
"devDependencies": {
|
|
21
|
-
"@babel/core": "^7.24.4",
|
|
22
|
-
"@babel/preset-env": "^7.24.4",
|
|
23
|
-
"@rollup/plugin-babel": "^6.0.4",
|
|
24
|
-
"@rollup/plugin-commonjs": "^25.0.7",
|
|
25
|
-
"@rollup/plugin-node-resolve": "^15.0.2",
|
|
26
|
-
"@rollup/plugin-terser": "^0.4.4",
|
|
27
|
-
"@rollup/plugin-typescript": "^11.1.6",
|
|
28
|
-
"rollup": "^4.16.4",
|
|
29
|
-
"tslib": "^2.6.2",
|
|
30
|
-
"typescript": "^5.4.5",
|
|
31
|
-
"rollup-plugin-postcss": "^4.0.2"
|
|
32
|
-
}
|
|
2
|
+
"name": "@viewlift/player-backup",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"main": "dist/bundle.cjs.js",
|
|
5
|
+
"amdName": "_playerCore",
|
|
6
|
+
"dependencies": {
|
|
7
|
+
"@silvermine/videojs-airplay": "^1.2.0",
|
|
8
|
+
"@silvermine/videojs-chromecast": "^1.4.1",
|
|
9
|
+
"axios": "^1.2.3",
|
|
10
|
+
"js-cookie": "^3.0.5",
|
|
11
|
+
"video.js": "^7.20.3",
|
|
12
|
+
"videojs-contrib-ads": "^6.9.0",
|
|
13
|
+
"videojs-contrib-dash": "^5.1.1",
|
|
14
|
+
"videojs-contrib-eme": "^3.11.0",
|
|
15
|
+
"videojs-ima": "^2.1.0"
|
|
16
|
+
}
|
|
33
17
|
}
|
package/.babelrc
DELETED
package/.browserslistrc
DELETED
package/README.md
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
# @viewlift/ligheningjs-video-player
|
|
2
|
-
|
|
3
|
-
A LightningJS video player component for Smart TV app development.
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
- Video player component for LightningJS
|
|
7
|
-
- TypeScript support
|
|
8
|
-
- Easy to use in LightningJS-based projects
|
|
9
|
-
|
|
10
|
-
## Installation
|
|
11
|
-
```bash
|
|
12
|
-
npm install @viewlift/ligheningjs-video-player
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
## Usage
|
|
16
|
-
```ts
|
|
17
|
-
import { LightningVideoPlayer } from '@viewlift/ligheningjs-video-player';
|
|
18
|
-
|
|
19
|
-
const player = new LightningVideoPlayer();
|
|
20
|
-
player.play();
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
## Build
|
|
24
|
-
```bash
|
|
25
|
-
npm run build
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
## License
|
|
29
|
-
ISC
|
package/babel.config.json
DELETED
package/dist/index.cjs.css
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
.seekbar-container{background:#444;border-radius:6px;bottom:50px;cursor:pointer;height:12px;left:50%;margin:0;position:absolute;transform:translateX(-50%);user-select:none;width:90%;z-index:20}.seekbar-buffer{background:#888;z-index:1}.seekbar-buffer,.seekbar-progress{border-radius:6px;height:100%;position:absolute;width:0}.seekbar-progress{background:#4169e1;transition:width .1s linear;z-index:2}.seekbar-thumb{background:#fff;border:2px solid #4169e1;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:pointer;height:16px;position:absolute;top:50%;transform:translate(-50%,-50%);transition:background .2s;width:16px;z-index:3}.seekbar-thumb:hover{background:#ffeaea}.seekbar-tooltip{background:#222;border-radius:4px;bottom:24px;color:#fff;font-size:12px;left:0;padding:2px 8px;pointer-events:none;position:absolute;transform:translateX(-50%);white-space:nowrap;z-index:10}.seekbar-duration-label,.seekbar-time-label{color:#eee;font-size:13px;margin-right:4px;position:relative;top:18px;z-index:5}.play-pause-btn{left:50%;position:absolute!important;top:50%;transform:translate(-50%,-50%);z-index:30}
|
|
2
|
-
/*# sourceMappingURL=index.cjs.css.map */
|
package/dist/index.cjs.css.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["playerSeekbar.css","player-ui.css"],"names":[],"mappings":"AAAA,mBAME,eAAgB,CAGhB,iBAAkB,CALlB,WAAY,CAIZ,cAAe,CAHf,WAAY,CAHZ,QAAS,CAQT,QAAS,CATT,iBAAkB,CAElB,0BAA2B,CAQ3B,gBAAiB,CAJjB,SAAU,CAKV,UACF,CAEA,gBAGE,eAAgB,CAGhB,SACF,CAEA,kCAJE,iBAAkB,CAHlB,WAAY,CADZ,iBAAkB,CAGlB,OAaF,CARA,kBAGE,kBAAmB,CAInB,2BAA6B,CAD7B,SAEF,CAEA,eAME,eAAgB,CAEhB,wBAAyB,CADzB,iBAAkB,CAGlB,mCAAqC,CACrC,cAAe,CANf,WAAY,CAJZ,iBAAkB,CAClB,OAAQ,CACR,8BAAgC,CAShC,yBAA2B,CAR3B,UAAW,CAKX,SAIF,CACA,qBACE,kBACF,CAEA,iBAKE,eAAgB,CAGhB,iBAAkB,CANlB,WAAY,CAIZ,UAAW,CAGX,cAAe,CANf,MAAO,CAIP,eAAgB,CAIhB,mBAAoB,CAVpB,iBAAkB,CAGlB,0BAA2B,CAM3B,kBAAmB,CAEnB,UACF,CAEA,4CAIE,UAAW,CADX,cAAe,CAEf,gBAAiB,CAJjB,iBAAkB,CAClB,QAAS,CAIT,SACF,CCzEA,gBAEE,QAAS,CADT,2BAA6B,CAE7B,OAAQ,CACR,8BAAgC,CAChC,UACF","file":"index.cjs.css","sourcesContent":[".seekbar-container {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n bottom: 50px;\n height: 12px;\n background: #444;\n width: 90%;\n cursor: pointer;\n border-radius: 6px;\n margin: 0;\n user-select: none;\n z-index: 20;\n}\n\n.seekbar-buffer {\n position: absolute;\n height: 100%;\n background: #888;\n width: 0;\n border-radius: 6px;\n z-index: 1;\n}\n\n.seekbar-progress {\n position: absolute;\n height: 100%;\n background: #4169E1;\n width: 0;\n border-radius: 6px;\n z-index: 2;\n transition: width 0.1s linear;\n}\n\n.seekbar-thumb {\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 16px;\n height: 16px;\n background: #fff;\n border-radius: 50%;\n border: 2px solid #4169E1;\n z-index: 3;\n box-shadow: 0 2px 8px rgba(0,0,0,0.2);\n cursor: pointer;\n transition: background 0.2s;\n}\n.seekbar-thumb:hover {\n background: #ffeaea;\n}\n\n.seekbar-tooltip {\n position: absolute;\n bottom: 24px;\n left: 0;\n transform: translateX(-50%);\n background: #222;\n color: #fff;\n padding: 2px 8px;\n border-radius: 4px;\n font-size: 12px;\n white-space: nowrap;\n pointer-events: none;\n z-index: 10;\n}\n\n.seekbar-time-label, .seekbar-duration-label {\n position: relative;\n top: 18px;\n font-size: 13px;\n color: #eee;\n margin-right: 4px;\n z-index: 5;\n}\n","/* Center play/pause button absolutely in the middle of the player */\n.play-pause-btn {\n position: absolute !important;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n z-index: 30;\n} "]}
|
package/dist/index.cjs.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";var t=function(){return t=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var s in e=arguments[n])Object.prototype.hasOwnProperty.call(e,s)&&(t[s]=e[s]);return t},t.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var e=function(){function t(t){if(this.imgSrc=t.imgSrc||"",this.imgAltText=t.imgAltText||"",this.buttonText=t.buttonText||"",this.klassname=t.klassname||"default-button",this.width=t.width||100,this.height=t.height||50,this.focused=t.focused||!1,this.disabled=t.disabled||!1,this.handleClick=t.handleClick||function(){},"function"!=typeof t.handleClick)throw new Error("Button Class: handleClick must be a function");this.disabled&&(this.klassname+=" disabled"),this.focused&&(this.klassname+=" focused"),this.handleClick=this.handleClick.bind(this)}return t.prototype.mount=function(t){var e=this,n=document.createElement("button");if(n.className=this.klassname,n.style.width="".concat(this.width,"px"),n.style.height="".concat(this.height,"px"),n.disabled=this.disabled,n.tabIndex=0,this.imgSrc){var i=document.createElement("img");i.src=this.imgSrc,i.alt=this.imgAltText,n.appendChild(i)}else{var s=document.createElement("span");s.textContent=this.buttonText,n.appendChild(s)}n.addEventListener("click",this.handleClick),n.addEventListener("focus",function(){e.focused=!0,n.classList.add("focused")}),n.addEventListener("blur",function(){e.focused=!1,n.classList.remove("focused")}),this.buttonElement=n,t.appendChild(n)},t.prototype.unmount=function(){this.buttonElement&&(this.buttonElement.removeEventListener("click",this.handleClick),this.buttonElement.removeEventListener("focus",this.handleClick),this.buttonElement.removeEventListener("blur",this.handleClick),this.buttonElement=void 0)},t.prototype.focus=function(){this.buttonElement&&(this.buttonElement.focus(),this.buttonElement.classList.add("focused"),this.focused=!0)},t.prototype.blur=function(){this.buttonElement&&(this.buttonElement.blur(),this.buttonElement.classList.remove("focused"),this.focused=!1)},t}(),n=function(){function t(t){var e=this;this.isDragging=!1,this.focused=!1,this.video=t,this.container=document.createElement("div"),this.container.className="seekbar-container",this.container.tabIndex=0,this.buffer=document.createElement("div"),this.buffer.className="seekbar-buffer",this.progress=document.createElement("div"),this.progress.className="seekbar-progress",this.thumb=document.createElement("div"),this.thumb.className="seekbar-thumb",this.tooltip=document.createElement("div"),this.tooltip.className="seekbar-tooltip",this.tooltip.style.display="none",this.timeLabel=document.createElement("span"),this.timeLabel.className="seekbar-time-label",this.durationLabel=document.createElement("span"),this.durationLabel.className="seekbar-duration-label",this.container.appendChild(this.buffer),this.container.appendChild(this.progress),this.container.appendChild(this.thumb),this.container.appendChild(this.tooltip),this.container.appendChild(this.timeLabel),this.container.appendChild(this.durationLabel),this.video.addEventListener("timeupdate",function(){return e.update()}),this.video.addEventListener("progress",function(){return e.updateBuffer()}),this.video.addEventListener("durationchange",function(){return e.update()}),this.container.addEventListener("click",function(t){return e.seek(t)}),this.thumb.addEventListener("mousedown",function(t){return e.startDrag(t)}),this.container.addEventListener("mousemove",function(t){return e.showTooltip(t)}),this.container.addEventListener("mouseleave",function(){return e.hideTooltip()}),this.container.addEventListener("focus",function(){e.focused=!0,e.container.classList.add("focused")}),this.container.addEventListener("blur",function(){e.focused=!1,e.container.classList.remove("focused")})}return t.prototype.focus=function(){this.container.focus(),this.container.classList.add("focused"),this.focused=!0},t.prototype.blur=function(){this.container.blur(),this.container.classList.remove("focused"),this.focused=!1},t.prototype.formatTime=function(t){if(isNaN(t))return"0:00";var e=Math.floor(t/60),n=Math.floor(t%60);return"".concat(e,":").concat(String(n).padStart(2,"0"))},t.prototype.update=function(){var t=this.video.currentTime/this.video.duration*100;this.progress.style.width=t+"%",this.thumb.style.left=t+"%",this.timeLabel.textContent=this.formatTime(this.video.currentTime),this.durationLabel.textContent=" / "+this.formatTime(this.video.duration)},t.prototype.updateBuffer=function(){if(this.video.buffered.length){var t=this.video.buffered.end(this.video.buffered.length-1)/this.video.duration*100;this.buffer.style.width=t+"%"}},t.prototype.seek=function(t){if(!this.isDragging){var e=this.container.getBoundingClientRect(),n=(t.clientX-e.left)/e.width;this.video.currentTime=n*this.video.duration}},t.prototype.startDrag=function(t){var e=this;t.preventDefault(),this.isDragging=!0;var n=function(t){var n=e.container.getBoundingClientRect(),i=(t.clientX-n.left)/n.width;i=Math.max(0,Math.min(1,i)),e.progress.style.width=100*i+"%",e.thumb.style.left=100*i+"%",e.timeLabel.textContent=e.formatTime(i*e.video.duration)},i=function(t){var s=e.container.getBoundingClientRect(),o=(t.clientX-s.left)/s.width;o=Math.max(0,Math.min(1,o)),e.video.currentTime=o*e.video.duration,e.isDragging=!1,document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",i)};document.addEventListener("mousemove",n),document.addEventListener("mouseup",i)},t.prototype.showTooltip=function(t){var e=this.container.getBoundingClientRect(),n=(t.clientX-e.left)/e.width,i=n*this.video.duration;this.tooltip.textContent=this.formatTime(i),this.tooltip.style.display="block",this.tooltip.style.left="".concat(100*n,"%")},t.prototype.hideTooltip=function(){this.tooltip.style.display="none"},t.prototype.mount=function(t){t.appendChild(this.container),this.update(),this.updateBuffer()},t.prototype.getElement=function(){return this.container},t}(),i=function(){function t(t){var e=t.player;this.player=e,this.container=document.createElement("div"),this.container.className="video-player-ui",this.createControls()}return t.prototype.createControls=function(){var t,i,s,o=this;this.playPauseBtn=new e({imgSrc:"",imgAltText:"Play/Pause",buttonText:"Play",width:80,height:40,klassname:"play-pause-btn",focused:!1,disabled:!1,handleClick:function(){o.player.video.paused?(o.player.play(),o.playPauseBtn&&o.playPauseBtn.buttonElement&&(o.playPauseBtn.buttonElement.textContent="Pause")):(o.player.pause(),o.playPauseBtn&&o.playPauseBtn.buttonElement&&(o.playPauseBtn.buttonElement.textContent="Play"))}}),this.playPauseBtn.mount(this.container),this.container.appendChild(this.player.video),this.seekbar=new n(this.player.video),this.seekbar.mount(this.container),(null===(t=this.playPauseBtn)||void 0===t?void 0:t.buttonElement)&&this.seekbar&&(this.playPauseBtn.buttonElement.addEventListener("keydown",function(t){var e;"ArrowDown"===t.key&&(t.preventDefault(),null===(e=o.seekbar)||void 0===e||e.focus())}),null===(s=null===(i=this.seekbar)||void 0===i?void 0:i.getElement())||void 0===s||s.addEventListener("keydown",function(t){var e;"ArrowUp"===t.key&&(t.preventDefault(),null===(e=o.playPauseBtn)||void 0===e||e.focus())}))},t.prototype.attachTo=function(t){t.appendChild(this.container)},t.prototype.getElement=function(){return this.container},t}();exports.createHlsPlayer=function(e,n){var s=document.createElement("video");s.controls=!1,s.style.width="100%",s.style.height="100%";var o=null;if(window.Hls&&window.Hls.isSupported())(o=new window.Hls).loadSource(n),o.attachMedia(s),o.on(window.Hls.Events.MANIFEST_PARSED,function(){s.play()});else{if(!s.canPlayType("application/vnd.apple.mpegurl"))throw new Error("HLS is not supported in this browser.");s.src=n,s.addEventListener("loadedmetadata",function(){s.play()})}var a={video:s,play:function(){return s.play()},pause:function(){return s.pause()}},r=new i({player:a});return r.attachTo(e),t(t({},a),{ui:r})};
|
package/dist/index.d.ts
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
export interface VideoPlayerOptions {
|
|
2
|
-
onPlaybackSuccess?: () => void;
|
|
3
|
-
onPlaybackEnded?: () => void;
|
|
4
|
-
onPlaybackError?: (error?: any) => void;
|
|
5
|
-
src: string;
|
|
6
|
-
autoplay?: boolean;
|
|
7
|
-
controls?: boolean;
|
|
8
|
-
width?: number;
|
|
9
|
-
height?: number;
|
|
10
|
-
}
|
|
11
|
-
type EventHandler = (...args: any[]) => void;
|
|
12
|
-
type VideoPlayerEvent = 'play' | 'pause' | 'ended' | 'timeupdate' | 'error' | 'loadedmetadata' | 'seeking' | 'seeked' | 'volumechange';
|
|
13
|
-
export declare class LightningVideoPlayer {
|
|
14
|
-
/**
|
|
15
|
-
* Reinitialize the current videoElement with a new set of options and handle autoplay.
|
|
16
|
-
*/
|
|
17
|
-
reinitialize(options: VideoPlayerOptions): void;
|
|
18
|
-
private videoElement;
|
|
19
|
-
private options;
|
|
20
|
-
private listeners;
|
|
21
|
-
private boundEmitters;
|
|
22
|
-
private boundHandlerMap;
|
|
23
|
-
constructor(options: VideoPlayerOptions);
|
|
24
|
-
attachTo(container: HTMLElement): void;
|
|
25
|
-
play(): void;
|
|
26
|
-
pause(): void;
|
|
27
|
-
stop(): void;
|
|
28
|
-
destroy(): void;
|
|
29
|
-
get element(): HTMLVideoElement;
|
|
30
|
-
onPlay(e: Event): void;
|
|
31
|
-
onPause(e: Event): void;
|
|
32
|
-
onEnded(e: Event): void;
|
|
33
|
-
onTimeupdate(e: Event): void;
|
|
34
|
-
onError(e: Event): void;
|
|
35
|
-
onLoadedmetadata(e: Event): void;
|
|
36
|
-
onSeeking(e: Event): void;
|
|
37
|
-
onSeeked(e: Event): void;
|
|
38
|
-
onVolumechange(e: Event): void;
|
|
39
|
-
on(event: VideoPlayerEvent, handler: EventHandler): void;
|
|
40
|
-
off(event: VideoPlayerEvent, handler: EventHandler): void;
|
|
41
|
-
once(event: VideoPlayerEvent, handler: EventHandler): void;
|
|
42
|
-
private emitEvent;
|
|
43
|
-
private removeAllListeners;
|
|
44
|
-
}
|
|
45
|
-
export {};
|
package/dist/index.esm.css
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
.seekbar-container{background:#444;border-radius:6px;bottom:50px;cursor:pointer;height:12px;left:50%;margin:0;position:absolute;transform:translateX(-50%);user-select:none;width:90%;z-index:20}.seekbar-buffer{background:#888;z-index:1}.seekbar-buffer,.seekbar-progress{border-radius:6px;height:100%;position:absolute;width:0}.seekbar-progress{background:#4169e1;transition:width .1s linear;z-index:2}.seekbar-thumb{background:#fff;border:2px solid #4169e1;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:pointer;height:16px;position:absolute;top:50%;transform:translate(-50%,-50%);transition:background .2s;width:16px;z-index:3}.seekbar-thumb:hover{background:#ffeaea}.seekbar-tooltip{background:#222;border-radius:4px;bottom:24px;color:#fff;font-size:12px;left:0;padding:2px 8px;pointer-events:none;position:absolute;transform:translateX(-50%);white-space:nowrap;z-index:10}.seekbar-duration-label,.seekbar-time-label{color:#eee;font-size:13px;margin-right:4px;position:relative;top:18px;z-index:5}.play-pause-btn{left:50%;position:absolute!important;top:50%;transform:translate(-50%,-50%);z-index:30}
|
|
2
|
-
/*# sourceMappingURL=index.esm.css.map */
|
package/dist/index.esm.css.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["playerSeekbar.css","player-ui.css"],"names":[],"mappings":"AAAA,mBAME,eAAgB,CAGhB,iBAAkB,CALlB,WAAY,CAIZ,cAAe,CAHf,WAAY,CAHZ,QAAS,CAQT,QAAS,CATT,iBAAkB,CAElB,0BAA2B,CAQ3B,gBAAiB,CAJjB,SAAU,CAKV,UACF,CAEA,gBAGE,eAAgB,CAGhB,SACF,CAEA,kCAJE,iBAAkB,CAHlB,WAAY,CADZ,iBAAkB,CAGlB,OAaF,CARA,kBAGE,kBAAmB,CAInB,2BAA6B,CAD7B,SAEF,CAEA,eAME,eAAgB,CAEhB,wBAAyB,CADzB,iBAAkB,CAGlB,mCAAqC,CACrC,cAAe,CANf,WAAY,CAJZ,iBAAkB,CAClB,OAAQ,CACR,8BAAgC,CAShC,yBAA2B,CAR3B,UAAW,CAKX,SAIF,CACA,qBACE,kBACF,CAEA,iBAKE,eAAgB,CAGhB,iBAAkB,CANlB,WAAY,CAIZ,UAAW,CAGX,cAAe,CANf,MAAO,CAIP,eAAgB,CAIhB,mBAAoB,CAVpB,iBAAkB,CAGlB,0BAA2B,CAM3B,kBAAmB,CAEnB,UACF,CAEA,4CAIE,UAAW,CADX,cAAe,CAEf,gBAAiB,CAJjB,iBAAkB,CAClB,QAAS,CAIT,SACF,CCzEA,gBAEE,QAAS,CADT,2BAA6B,CAE7B,OAAQ,CACR,8BAAgC,CAChC,UACF","file":"index.esm.css","sourcesContent":[".seekbar-container {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n bottom: 50px;\n height: 12px;\n background: #444;\n width: 90%;\n cursor: pointer;\n border-radius: 6px;\n margin: 0;\n user-select: none;\n z-index: 20;\n}\n\n.seekbar-buffer {\n position: absolute;\n height: 100%;\n background: #888;\n width: 0;\n border-radius: 6px;\n z-index: 1;\n}\n\n.seekbar-progress {\n position: absolute;\n height: 100%;\n background: #4169E1;\n width: 0;\n border-radius: 6px;\n z-index: 2;\n transition: width 0.1s linear;\n}\n\n.seekbar-thumb {\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 16px;\n height: 16px;\n background: #fff;\n border-radius: 50%;\n border: 2px solid #4169E1;\n z-index: 3;\n box-shadow: 0 2px 8px rgba(0,0,0,0.2);\n cursor: pointer;\n transition: background 0.2s;\n}\n.seekbar-thumb:hover {\n background: #ffeaea;\n}\n\n.seekbar-tooltip {\n position: absolute;\n bottom: 24px;\n left: 0;\n transform: translateX(-50%);\n background: #222;\n color: #fff;\n padding: 2px 8px;\n border-radius: 4px;\n font-size: 12px;\n white-space: nowrap;\n pointer-events: none;\n z-index: 10;\n}\n\n.seekbar-time-label, .seekbar-duration-label {\n position: relative;\n top: 18px;\n font-size: 13px;\n color: #eee;\n margin-right: 4px;\n z-index: 5;\n}\n","/* Center play/pause button absolutely in the middle of the player */\n.play-pause-btn {\n position: absolute !important;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n z-index: 30;\n} "]}
|
package/dist/index.esm.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
var t=function(){return t=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},t.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var e=function(){function t(t){if(this.imgSrc=t.imgSrc||"",this.imgAltText=t.imgAltText||"",this.buttonText=t.buttonText||"",this.klassname=t.klassname||"default-button",this.width=t.width||100,this.height=t.height||50,this.focused=t.focused||!1,this.disabled=t.disabled||!1,this.handleClick=t.handleClick||function(){},"function"!=typeof t.handleClick)throw new Error("Button Class: handleClick must be a function");this.disabled&&(this.klassname+=" disabled"),this.focused&&(this.klassname+=" focused"),this.handleClick=this.handleClick.bind(this)}return t.prototype.mount=function(t){var e=this,n=document.createElement("button");if(n.className=this.klassname,n.style.width="".concat(this.width,"px"),n.style.height="".concat(this.height,"px"),n.disabled=this.disabled,n.tabIndex=0,this.imgSrc){var i=document.createElement("img");i.src=this.imgSrc,i.alt=this.imgAltText,n.appendChild(i)}else{var o=document.createElement("span");o.textContent=this.buttonText,n.appendChild(o)}n.addEventListener("click",this.handleClick),n.addEventListener("focus",function(){e.focused=!0,n.classList.add("focused")}),n.addEventListener("blur",function(){e.focused=!1,n.classList.remove("focused")}),this.buttonElement=n,t.appendChild(n)},t.prototype.unmount=function(){this.buttonElement&&(this.buttonElement.removeEventListener("click",this.handleClick),this.buttonElement.removeEventListener("focus",this.handleClick),this.buttonElement.removeEventListener("blur",this.handleClick),this.buttonElement=void 0)},t.prototype.focus=function(){this.buttonElement&&(this.buttonElement.focus(),this.buttonElement.classList.add("focused"),this.focused=!0)},t.prototype.blur=function(){this.buttonElement&&(this.buttonElement.blur(),this.buttonElement.classList.remove("focused"),this.focused=!1)},t}(),n=function(){function t(t){var e=this;this.isDragging=!1,this.focused=!1,this.video=t,this.container=document.createElement("div"),this.container.className="seekbar-container",this.container.tabIndex=0,this.buffer=document.createElement("div"),this.buffer.className="seekbar-buffer",this.progress=document.createElement("div"),this.progress.className="seekbar-progress",this.thumb=document.createElement("div"),this.thumb.className="seekbar-thumb",this.tooltip=document.createElement("div"),this.tooltip.className="seekbar-tooltip",this.tooltip.style.display="none",this.timeLabel=document.createElement("span"),this.timeLabel.className="seekbar-time-label",this.durationLabel=document.createElement("span"),this.durationLabel.className="seekbar-duration-label",this.container.appendChild(this.buffer),this.container.appendChild(this.progress),this.container.appendChild(this.thumb),this.container.appendChild(this.tooltip),this.container.appendChild(this.timeLabel),this.container.appendChild(this.durationLabel),this.video.addEventListener("timeupdate",function(){return e.update()}),this.video.addEventListener("progress",function(){return e.updateBuffer()}),this.video.addEventListener("durationchange",function(){return e.update()}),this.container.addEventListener("click",function(t){return e.seek(t)}),this.thumb.addEventListener("mousedown",function(t){return e.startDrag(t)}),this.container.addEventListener("mousemove",function(t){return e.showTooltip(t)}),this.container.addEventListener("mouseleave",function(){return e.hideTooltip()}),this.container.addEventListener("focus",function(){e.focused=!0,e.container.classList.add("focused")}),this.container.addEventListener("blur",function(){e.focused=!1,e.container.classList.remove("focused")})}return t.prototype.focus=function(){this.container.focus(),this.container.classList.add("focused"),this.focused=!0},t.prototype.blur=function(){this.container.blur(),this.container.classList.remove("focused"),this.focused=!1},t.prototype.formatTime=function(t){if(isNaN(t))return"0:00";var e=Math.floor(t/60),n=Math.floor(t%60);return"".concat(e,":").concat(String(n).padStart(2,"0"))},t.prototype.update=function(){var t=this.video.currentTime/this.video.duration*100;this.progress.style.width=t+"%",this.thumb.style.left=t+"%",this.timeLabel.textContent=this.formatTime(this.video.currentTime),this.durationLabel.textContent=" / "+this.formatTime(this.video.duration)},t.prototype.updateBuffer=function(){if(this.video.buffered.length){var t=this.video.buffered.end(this.video.buffered.length-1)/this.video.duration*100;this.buffer.style.width=t+"%"}},t.prototype.seek=function(t){if(!this.isDragging){var e=this.container.getBoundingClientRect(),n=(t.clientX-e.left)/e.width;this.video.currentTime=n*this.video.duration}},t.prototype.startDrag=function(t){var e=this;t.preventDefault(),this.isDragging=!0;var n=function(t){var n=e.container.getBoundingClientRect(),i=(t.clientX-n.left)/n.width;i=Math.max(0,Math.min(1,i)),e.progress.style.width=100*i+"%",e.thumb.style.left=100*i+"%",e.timeLabel.textContent=e.formatTime(i*e.video.duration)},i=function(t){var o=e.container.getBoundingClientRect(),s=(t.clientX-o.left)/o.width;s=Math.max(0,Math.min(1,s)),e.video.currentTime=s*e.video.duration,e.isDragging=!1,document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",i)};document.addEventListener("mousemove",n),document.addEventListener("mouseup",i)},t.prototype.showTooltip=function(t){var e=this.container.getBoundingClientRect(),n=(t.clientX-e.left)/e.width,i=n*this.video.duration;this.tooltip.textContent=this.formatTime(i),this.tooltip.style.display="block",this.tooltip.style.left="".concat(100*n,"%")},t.prototype.hideTooltip=function(){this.tooltip.style.display="none"},t.prototype.mount=function(t){t.appendChild(this.container),this.update(),this.updateBuffer()},t.prototype.getElement=function(){return this.container},t}(),i=function(){function t(t){var e=t.player;this.player=e,this.container=document.createElement("div"),this.container.className="video-player-ui",this.createControls()}return t.prototype.createControls=function(){var t,i,o,s=this;this.playPauseBtn=new e({imgSrc:"",imgAltText:"Play/Pause",buttonText:"Play",width:80,height:40,klassname:"play-pause-btn",focused:!1,disabled:!1,handleClick:function(){s.player.video.paused?(s.player.play(),s.playPauseBtn&&s.playPauseBtn.buttonElement&&(s.playPauseBtn.buttonElement.textContent="Pause")):(s.player.pause(),s.playPauseBtn&&s.playPauseBtn.buttonElement&&(s.playPauseBtn.buttonElement.textContent="Play"))}}),this.playPauseBtn.mount(this.container),this.container.appendChild(this.player.video),this.seekbar=new n(this.player.video),this.seekbar.mount(this.container),(null===(t=this.playPauseBtn)||void 0===t?void 0:t.buttonElement)&&this.seekbar&&(this.playPauseBtn.buttonElement.addEventListener("keydown",function(t){var e;"ArrowDown"===t.key&&(t.preventDefault(),null===(e=s.seekbar)||void 0===e||e.focus())}),null===(o=null===(i=this.seekbar)||void 0===i?void 0:i.getElement())||void 0===o||o.addEventListener("keydown",function(t){var e;"ArrowUp"===t.key&&(t.preventDefault(),null===(e=s.playPauseBtn)||void 0===e||e.focus())}))},t.prototype.attachTo=function(t){t.appendChild(this.container)},t.prototype.getElement=function(){return this.container},t}();function o(e,n){var o=document.createElement("video");o.controls=!1,o.style.width="100%",o.style.height="100%";var s=null;if(window.Hls&&window.Hls.isSupported())(s=new window.Hls).loadSource(n),s.attachMedia(o),s.on(window.Hls.Events.MANIFEST_PARSED,function(){o.play()});else{if(!o.canPlayType("application/vnd.apple.mpegurl"))throw new Error("HLS is not supported in this browser.");o.src=n,o.addEventListener("loadedmetadata",function(){o.play()})}var a={video:o,play:function(){return o.play()},pause:function(){return o.pause()}},r=new i({player:a});return r.attachTo(e),t(t({},a),{ui:r})}export{o as createHlsPlayer};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
interface VideoPlayerUIOptions {
|
|
2
|
-
player: {
|
|
3
|
-
video: HTMLVideoElement;
|
|
4
|
-
play: () => void;
|
|
5
|
-
pause: () => void;
|
|
6
|
-
};
|
|
7
|
-
width?: string;
|
|
8
|
-
height?: string;
|
|
9
|
-
}
|
|
10
|
-
declare class VideoPlayerUI {
|
|
11
|
-
private player;
|
|
12
|
-
private container;
|
|
13
|
-
private playPauseBtn?;
|
|
14
|
-
private seekbar?;
|
|
15
|
-
constructor({ player, width, height }: VideoPlayerUIOptions);
|
|
16
|
-
private createControls;
|
|
17
|
-
attachTo(parent: HTMLElement): void;
|
|
18
|
-
}
|
|
19
|
-
export default VideoPlayerUI;
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import './playerButtons.css';
|
|
2
|
-
type EventHandler = (event?: any) => void;
|
|
3
|
-
type ButtonProps = {
|
|
4
|
-
imgSrc: string;
|
|
5
|
-
imgAltText: string;
|
|
6
|
-
width: number;
|
|
7
|
-
height: number;
|
|
8
|
-
klassname: string;
|
|
9
|
-
buttonText: string;
|
|
10
|
-
focused: boolean;
|
|
11
|
-
disabled: boolean;
|
|
12
|
-
handleClick: EventHandler;
|
|
13
|
-
};
|
|
14
|
-
export declare class Button {
|
|
15
|
-
private imgSrc;
|
|
16
|
-
private imgAltText;
|
|
17
|
-
private klassname;
|
|
18
|
-
private width;
|
|
19
|
-
private height;
|
|
20
|
-
private focused;
|
|
21
|
-
private disabled;
|
|
22
|
-
private handleClick;
|
|
23
|
-
private buttonText;
|
|
24
|
-
buttonElement?: HTMLButtonElement;
|
|
25
|
-
constructor(props: ButtonProps);
|
|
26
|
-
/**
|
|
27
|
-
* Mounts the button to the specified mount point
|
|
28
|
-
* @param mountPoint The HTML element to which the button will be appended
|
|
29
|
-
*/
|
|
30
|
-
mount(mountPoint: HTMLElement): void;
|
|
31
|
-
/**
|
|
32
|
-
* Removes the click event listener from the button
|
|
33
|
-
*/
|
|
34
|
-
unmount(): void;
|
|
35
|
-
focus(): void;
|
|
36
|
-
blur(): void;
|
|
37
|
-
}
|
|
38
|
-
export {};
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import './playerSeekbar.css';
|
|
2
|
-
export declare class PlayerSeekbar {
|
|
3
|
-
private container;
|
|
4
|
-
private progress;
|
|
5
|
-
private buffer;
|
|
6
|
-
private thumb;
|
|
7
|
-
private tooltip;
|
|
8
|
-
private video;
|
|
9
|
-
private timeLabel;
|
|
10
|
-
private durationLabel;
|
|
11
|
-
private isDragging;
|
|
12
|
-
private focused;
|
|
13
|
-
constructor(video: HTMLVideoElement);
|
|
14
|
-
focus(): void;
|
|
15
|
-
blur(): void;
|
|
16
|
-
private formatTime;
|
|
17
|
-
private update;
|
|
18
|
-
private updateBuffer;
|
|
19
|
-
private seek;
|
|
20
|
-
private startDrag;
|
|
21
|
-
private showTooltip;
|
|
22
|
-
private hideTooltip;
|
|
23
|
-
mount(parent: HTMLElement): void;
|
|
24
|
-
getElement(): HTMLDivElement;
|
|
25
|
-
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import './player-ui.css';
|
|
2
|
-
declare class VideoPlayerUI {
|
|
3
|
-
private player;
|
|
4
|
-
private container;
|
|
5
|
-
private playPauseBtn?;
|
|
6
|
-
private seekbar?;
|
|
7
|
-
constructor({ player }: {
|
|
8
|
-
player: {
|
|
9
|
-
video: HTMLVideoElement;
|
|
10
|
-
play: () => void;
|
|
11
|
-
pause: () => void;
|
|
12
|
-
};
|
|
13
|
-
});
|
|
14
|
-
private createControls;
|
|
15
|
-
attachTo(parent: HTMLElement): void;
|
|
16
|
-
getElement(): HTMLDivElement;
|
|
17
|
-
}
|
|
18
|
-
export default VideoPlayerUI;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import VideoPlayerUI from './player-ui/player-ui';
|
|
2
|
-
declare global {
|
|
3
|
-
interface Window {
|
|
4
|
-
Hls: any;
|
|
5
|
-
}
|
|
6
|
-
}
|
|
7
|
-
export interface PlayerInstance {
|
|
8
|
-
video: HTMLVideoElement;
|
|
9
|
-
play: () => void;
|
|
10
|
-
pause: () => void;
|
|
11
|
-
ui: VideoPlayerUI;
|
|
12
|
-
}
|
|
13
|
-
export declare function createHlsPlayer(mountPoint: HTMLElement, streamUrl: string): PlayerInstance;
|
package/rollup.config.mjs
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import resolve from '@rollup/plugin-node-resolve';
|
|
2
|
-
import commonjs from '@rollup/plugin-commonjs';
|
|
3
|
-
import terser from '@rollup/plugin-terser';
|
|
4
|
-
import typescript from '@rollup/plugin-typescript';
|
|
5
|
-
import babel from '@rollup/plugin-babel';
|
|
6
|
-
import postcss from 'rollup-plugin-postcss';
|
|
7
|
-
|
|
8
|
-
export default {
|
|
9
|
-
input: 'src/playerInitializer.ts',
|
|
10
|
-
output: [
|
|
11
|
-
{
|
|
12
|
-
file: 'dist/index.cjs.js',
|
|
13
|
-
format: 'cjs',
|
|
14
|
-
exports: 'auto',
|
|
15
|
-
},
|
|
16
|
-
{
|
|
17
|
-
file: 'dist/index.esm.js',
|
|
18
|
-
format: 'esm',
|
|
19
|
-
},
|
|
20
|
-
],
|
|
21
|
-
plugins: [
|
|
22
|
-
resolve(),
|
|
23
|
-
commonjs(),
|
|
24
|
-
typescript({ tsconfig: './tsconfig.json' }),
|
|
25
|
-
babel({
|
|
26
|
-
babelHelpers: 'bundled',
|
|
27
|
-
extensions: ['.js', '.ts'],
|
|
28
|
-
exclude: 'node_modules/**',
|
|
29
|
-
}),
|
|
30
|
-
postcss({
|
|
31
|
-
extract: true, // creates a separate CSS file
|
|
32
|
-
minimize: true,
|
|
33
|
-
sourceMap: true,
|
|
34
|
-
}),
|
|
35
|
-
terser(),
|
|
36
|
-
],
|
|
37
|
-
};
|