@tabler/core 1.0.0-beta17 → 1.0.0-beta18
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/README.md +23 -7
- package/dist/.DS_Store +0 -0
- package/dist/css/demo.css +13 -43
- package/dist/css/demo.min.css +3 -3
- package/dist/css/demo.rtl.css +13 -43
- package/dist/css/demo.rtl.min.css +3 -3
- package/dist/css/tabler-flags.css +5 -3
- package/dist/css/tabler-flags.min.css +3 -3
- package/dist/css/tabler-flags.rtl.css +5 -3
- package/dist/css/tabler-flags.rtl.min.css +3 -3
- package/dist/css/tabler-payments.css +12 -2
- package/dist/css/tabler-payments.min.css +3 -3
- package/dist/css/tabler-payments.rtl.css +12 -2
- package/dist/css/tabler-payments.rtl.min.css +3 -3
- package/dist/css/tabler-social.css +10 -0
- package/dist/css/tabler-social.min.css +8 -0
- package/dist/css/tabler-social.rtl.css +10 -0
- package/dist/css/tabler-social.rtl.min.css +8 -0
- package/dist/css/tabler-vendors.css +97 -38
- package/dist/css/tabler-vendors.min.css +3 -3
- package/dist/css/tabler-vendors.rtl.css +97 -38
- package/dist/css/tabler-vendors.rtl.min.css +3 -3
- package/dist/css/tabler.css +3827 -2186
- package/dist/css/tabler.min.css +7 -3
- package/dist/css/tabler.rtl.css +3827 -2187
- package/dist/css/tabler.rtl.min.css +7 -3
- package/dist/img/payments/epayco-dark.svg +1 -0
- package/dist/img/payments/epayco.svg +1 -0
- package/dist/js/demo-theme.js +9 -6
- package/dist/js/demo-theme.min.js +3 -3
- package/dist/js/demo.js +16 -16
- package/dist/js/demo.min.js +2 -2
- package/dist/js/tabler.esm.js +2115 -2970
- package/dist/js/tabler.esm.min.js +6 -6
- package/dist/js/tabler.js +2115 -2970
- package/dist/js/tabler.min.js +6 -6
- package/dist/libs/apexcharts/dist/apexcharts.amd.js +1 -1
- package/dist/libs/apexcharts/dist/apexcharts.common.js +5 -5
- package/dist/libs/apexcharts/dist/apexcharts.esm.js +5 -5
- package/dist/libs/apexcharts/dist/apexcharts.js +3010 -2741
- package/dist/libs/apexcharts/dist/apexcharts.min.js +5 -5
- package/dist/libs/bootstrap/dist/js/bootstrap.bundle.js +228 -228
- package/dist/libs/bootstrap/dist/js/bootstrap.bundle.js.map +1 -1
- package/dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js +3 -3
- package/dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js.map +1 -1
- package/dist/libs/bootstrap/dist/js/bootstrap.esm.js +196 -195
- package/dist/libs/bootstrap/dist/js/bootstrap.esm.js.map +1 -1
- package/dist/libs/bootstrap/dist/js/bootstrap.esm.min.js +3 -3
- package/dist/libs/bootstrap/dist/js/bootstrap.esm.min.js.map +1 -1
- package/dist/libs/bootstrap/dist/js/bootstrap.js +197 -196
- package/dist/libs/bootstrap/dist/js/bootstrap.js.map +1 -1
- package/dist/libs/bootstrap/dist/js/bootstrap.min.js +3 -3
- package/dist/libs/bootstrap/dist/js/bootstrap.min.js.map +1 -1
- package/dist/libs/countup.js/dist/countUp.d.ts +8 -3
- package/dist/libs/countup.js/dist/countUp.js +26 -8
- package/dist/libs/countup.js/dist/countUp.min.js +1 -1
- package/dist/libs/countup.js/dist/countUp.umd.js +1 -293
- package/dist/libs/countup.js/dist/requestAnimationFrame.polyfill.js +26 -0
- package/dist/libs/fslightbox/README.md +39 -33
- package/dist/libs/fslightbox/index.js +1 -1
- package/dist/libs/fslightbox/package.json +10 -44
- package/dist/libs/jsvectormap/dist/js/jsvectormap.js +517 -857
- package/dist/libs/jsvectormap/dist/js/jsvectormap.min.js +1 -1
- package/dist/libs/nouislider/dist/nouislider.d.ts +2 -0
- package/dist/libs/nouislider/dist/nouislider.js +28 -0
- package/dist/libs/nouislider/dist/nouislider.min.js +1 -1
- package/dist/libs/nouislider/dist/nouislider.min.mjs +1 -1
- package/dist/libs/nouislider/dist/nouislider.mjs +28 -0
- package/dist/libs/plyr/dist/plyr.css +1 -1
- package/dist/libs/plyr/dist/plyr.js +289 -229
- package/dist/libs/plyr/dist/plyr.min.js +1 -1
- package/dist/libs/plyr/dist/plyr.min.js.map +1 -1
- package/dist/libs/plyr/dist/plyr.min.mjs +1 -1
- package/dist/libs/plyr/dist/plyr.min.mjs.map +1 -1
- package/dist/libs/plyr/dist/plyr.mjs +289 -229
- package/dist/libs/plyr/dist/plyr.polyfilled.js +289 -229
- package/dist/libs/plyr/dist/plyr.polyfilled.min.js +1 -1
- package/dist/libs/plyr/dist/plyr.polyfilled.min.js.map +1 -1
- package/dist/libs/plyr/dist/plyr.polyfilled.min.mjs +1 -1
- package/dist/libs/plyr/dist/plyr.polyfilled.min.mjs.map +1 -1
- package/dist/libs/plyr/dist/plyr.polyfilled.mjs +289 -229
- package/dist/libs/tinymce/CHANGELOG.md +112 -0
- package/dist/libs/tinymce/composer.json +1 -1
- package/dist/libs/tinymce/icons/default/icons.js +4 -0
- package/dist/libs/tinymce/icons/default/icons.min.js +1 -1
- package/dist/libs/tinymce/models/dom/model.js +79 -23
- package/dist/libs/tinymce/models/dom/model.min.js +2 -2
- package/dist/libs/tinymce/package.json +1 -1
- package/dist/libs/tinymce/plugins/advlist/plugin.js +34 -28
- package/dist/libs/tinymce/plugins/advlist/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/anchor/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/anchor/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/autolink/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/autolink/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/autoresize/plugin.js +46 -11
- package/dist/libs/tinymce/plugins/autoresize/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/autosave/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/autosave/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/charmap/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/charmap/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/code/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/code/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/codesample/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/codesample/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/directionality/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/directionality/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/emoticons/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/emoticons/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/fullscreen/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/fullscreen/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/help/plugin.js +12 -4
- package/dist/libs/tinymce/plugins/help/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/image/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/image/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/importcss/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/importcss/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/insertdatetime/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/insertdatetime/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/link/plugin.js +21 -7
- package/dist/libs/tinymce/plugins/link/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/lists/plugin.js +132 -50
- package/dist/libs/tinymce/plugins/lists/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/media/plugin.js +7 -2
- package/dist/libs/tinymce/plugins/media/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/nonbreaking/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/nonbreaking/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/pagebreak/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/pagebreak/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/preview/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/preview/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/quickbars/plugin.js +21 -13
- package/dist/libs/tinymce/plugins/quickbars/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/save/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/save/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/searchreplace/plugin.js +56 -43
- package/dist/libs/tinymce/plugins/searchreplace/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/table/plugin.js +73 -55
- package/dist/libs/tinymce/plugins/table/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/template/plugin.js +17 -14
- package/dist/libs/tinymce/plugins/template/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/visualblocks/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/visualblocks/plugin.min.js +1 -1
- package/dist/libs/tinymce/plugins/visualchars/plugin.js +58 -7
- package/dist/libs/tinymce/plugins/visualchars/plugin.min.js +2 -2
- package/dist/libs/tinymce/plugins/wordcount/plugin.js +1 -1
- package/dist/libs/tinymce/plugins/wordcount/plugin.min.js +1 -1
- package/dist/libs/tinymce/skins/ui/oxide/skin.css +454 -6
- package/dist/libs/tinymce/skins/ui/oxide/skin.min.css +1 -1
- package/dist/libs/tinymce/skins/ui/oxide-dark/skin.css +454 -6
- package/dist/libs/tinymce/skins/ui/oxide-dark/skin.min.css +1 -1
- package/dist/libs/tinymce/skins/ui/tinymce-5/skin.css +455 -6
- package/dist/libs/tinymce/skins/ui/tinymce-5/skin.min.css +1 -1
- package/dist/libs/tinymce/skins/ui/tinymce-5-dark/skin.css +454 -5
- package/dist/libs/tinymce/skins/ui/tinymce-5-dark/skin.min.css +1 -1
- package/dist/libs/tinymce/themes/silver/theme.js +4374 -3074
- package/dist/libs/tinymce/themes/silver/theme.min.js +2 -2
- package/dist/libs/tinymce/tinymce.d.ts +305 -236
- package/dist/libs/tinymce/tinymce.js +1957 -1597
- package/dist/libs/tinymce/tinymce.min.js +2 -2
- package/package.json +56 -41
- package/src/js/demo-theme.js +13 -10
- package/src/js/demo.js +18 -15
- package/src/js/tabler.esm.js +7 -8
- package/src/js/tabler.js +12 -12
- package/src/scss/_bootstrap-components.scss +33 -33
- package/src/scss/_bootstrap-config.scss +6 -6
- package/src/scss/_bootstrap-override.scss +8 -12
- package/src/scss/_config.scss +2 -1
- package/src/scss/_core.scss +1 -1
- package/src/scss/_debug.scss +41 -30
- package/src/scss/_utilities.scss +21 -19
- package/src/scss/_variables-dark.scss +17 -0
- package/src/scss/_variables.scss +232 -168
- package/src/scss/demo/_examples.scss +0 -16
- package/src/scss/demo.scss +36 -25
- package/src/scss/layout/_core.scss +0 -1
- package/src/scss/layout/_dark.scss +47 -162
- package/src/scss/layout/_navbar.scss +82 -93
- package/src/scss/layout/_page.scss +9 -6
- package/src/scss/layout/_root.scss +21 -7
- package/src/scss/mixins/_functions.scss +2 -6
- package/src/scss/mixins/_mixins.scss +0 -32
- package/src/scss/tabler-social.scss +1 -0
- package/src/scss/tabler.scss +0 -1
- package/src/scss/ui/_avatars.scss +1 -1
- package/src/scss/ui/_buttons.scss +1 -1
- package/src/scss/ui/_dropdowns.scss +1 -3
- package/src/scss/ui/_grid.scss +0 -16
- package/src/scss/ui/_payments.scss +1 -1
- package/src/scss/ui/_status.scss +0 -10
- package/src/scss/ui/_tables.scss +0 -15
- package/src/scss/ui/_timeline.scss +3 -3
- package/src/scss/utils/_colors.scss +6 -2
- package/src/scss/vendor/_apexcharts.scss +16 -0
- package/src/scss/vendor/_jsvectormap.scss +1 -1
- package/src/scss/vendor/_nouislider.scss +1 -1
- package/src/scss/vendor/_tinymce.scss +5 -7
- package/src/scss/vendor/_tom-select.scss +43 -2
- package/dist/libs/countup.js/dist/countUp.withPolyfill.min.js +0 -1
- package/dist/libs/fslightbox/jest-setup.js +0 -1
|
@@ -481,6 +481,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
481
481
|
})(typeof commonjsGlobal !== 'undefined' ? commonjsGlobal : typeof window !== 'undefined' ? window : typeof self !== 'undefined' ? self : commonjsGlobal);
|
|
482
482
|
|
|
483
483
|
function _defineProperty$1(obj, key, value) {
|
|
484
|
+
key = _toPropertyKey(key);
|
|
484
485
|
if (key in obj) {
|
|
485
486
|
Object.defineProperty(obj, key, {
|
|
486
487
|
value: value,
|
|
@@ -493,6 +494,20 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
493
494
|
}
|
|
494
495
|
return obj;
|
|
495
496
|
}
|
|
497
|
+
function _toPrimitive(input, hint) {
|
|
498
|
+
if (typeof input !== "object" || input === null) return input;
|
|
499
|
+
var prim = input[Symbol.toPrimitive];
|
|
500
|
+
if (prim !== undefined) {
|
|
501
|
+
var res = prim.call(input, hint || "default");
|
|
502
|
+
if (typeof res !== "object") return res;
|
|
503
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
504
|
+
}
|
|
505
|
+
return (hint === "string" ? String : Number)(input);
|
|
506
|
+
}
|
|
507
|
+
function _toPropertyKey(arg) {
|
|
508
|
+
var key = _toPrimitive(arg, "string");
|
|
509
|
+
return typeof key === "symbol" ? key : String(key);
|
|
510
|
+
}
|
|
496
511
|
|
|
497
512
|
function _classCallCheck(e, t) {
|
|
498
513
|
if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
|
|
@@ -794,12 +809,20 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
794
809
|
// Unfortunately, due to mixed support, UA sniffing is required
|
|
795
810
|
// ==========================================================================
|
|
796
811
|
|
|
797
|
-
const
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
812
|
+
const isIE = Boolean(window.document.documentMode);
|
|
813
|
+
const isEdge = /Edge/g.test(navigator.userAgent);
|
|
814
|
+
const isWebKit = 'WebkitAppearance' in document.documentElement.style && !/Edge/g.test(navigator.userAgent);
|
|
815
|
+
const isIPhone = /iPhone|iPod/gi.test(navigator.userAgent) && navigator.maxTouchPoints > 1;
|
|
816
|
+
// navigator.platform may be deprecated but this check is still required
|
|
817
|
+
const isIPadOS = navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
|
|
818
|
+
const isIos = /iPad|iPhone|iPod/gi.test(navigator.userAgent) && navigator.maxTouchPoints > 1;
|
|
819
|
+
var browser = {
|
|
820
|
+
isIE,
|
|
821
|
+
isEdge,
|
|
822
|
+
isWebKit,
|
|
823
|
+
isIPhone,
|
|
824
|
+
isIPadOS,
|
|
825
|
+
isIos
|
|
803
826
|
};
|
|
804
827
|
|
|
805
828
|
// ==========================================================================
|
|
@@ -872,9 +895,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
872
895
|
|
|
873
896
|
// Set attributes
|
|
874
897
|
function setAttributes(element, attributes) {
|
|
875
|
-
if (!is.element(element) || is.empty(attributes))
|
|
876
|
-
return;
|
|
877
|
-
}
|
|
898
|
+
if (!is.element(element) || is.empty(attributes)) return;
|
|
878
899
|
|
|
879
900
|
// Assume null and undefined attributes should be left out,
|
|
880
901
|
// Setting them would otherwise convert them to "null" and "undefined"
|
|
@@ -900,19 +921,15 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
900
921
|
return element;
|
|
901
922
|
}
|
|
902
923
|
|
|
903
|
-
//
|
|
924
|
+
// Insert an element after another
|
|
904
925
|
function insertAfter(element, target) {
|
|
905
|
-
if (!is.element(element) || !is.element(target))
|
|
906
|
-
return;
|
|
907
|
-
}
|
|
926
|
+
if (!is.element(element) || !is.element(target)) return;
|
|
908
927
|
target.parentNode.insertBefore(element, target.nextSibling);
|
|
909
928
|
}
|
|
910
929
|
|
|
911
930
|
// Insert a DocumentFragment
|
|
912
931
|
function insertElement(type, parent, attributes, text) {
|
|
913
|
-
if (!is.element(parent))
|
|
914
|
-
return;
|
|
915
|
-
}
|
|
932
|
+
if (!is.element(parent)) return;
|
|
916
933
|
parent.appendChild(createElement(type, attributes, text));
|
|
917
934
|
}
|
|
918
935
|
|
|
@@ -930,9 +947,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
930
947
|
|
|
931
948
|
// Remove all child elements
|
|
932
949
|
function emptyElement(element) {
|
|
933
|
-
if (!is.element(element))
|
|
934
|
-
return;
|
|
935
|
-
}
|
|
950
|
+
if (!is.element(element)) return;
|
|
936
951
|
let {
|
|
937
952
|
length
|
|
938
953
|
} = element.childNodes;
|
|
@@ -944,9 +959,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
944
959
|
|
|
945
960
|
// Replace element
|
|
946
961
|
function replaceElement(newChild, oldChild) {
|
|
947
|
-
if (!is.element(oldChild) || !is.element(oldChild.parentNode) || !is.element(newChild))
|
|
948
|
-
return null;
|
|
949
|
-
}
|
|
962
|
+
if (!is.element(oldChild) || !is.element(oldChild.parentNode) || !is.element(newChild)) return null;
|
|
950
963
|
oldChild.parentNode.replaceChild(newChild, oldChild);
|
|
951
964
|
return newChild;
|
|
952
965
|
}
|
|
@@ -958,9 +971,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
958
971
|
// '#test' to { id: 'test' }
|
|
959
972
|
// '[data-test="test"]' to { 'data-test': 'test' }
|
|
960
973
|
|
|
961
|
-
if (!is.string(sel) || is.empty(sel)) {
|
|
962
|
-
return {};
|
|
963
|
-
}
|
|
974
|
+
if (!is.string(sel) || is.empty(sel)) return {};
|
|
964
975
|
const attributes = {};
|
|
965
976
|
const existing = extend({}, existingAttributes);
|
|
966
977
|
sel.split(',').forEach(s => {
|
|
@@ -998,9 +1009,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
998
1009
|
|
|
999
1010
|
// Toggle hidden
|
|
1000
1011
|
function toggleHidden(element, hidden) {
|
|
1001
|
-
if (!is.element(element))
|
|
1002
|
-
return;
|
|
1003
|
-
}
|
|
1012
|
+
if (!is.element(element)) return;
|
|
1004
1013
|
let hide = hidden;
|
|
1005
1014
|
if (!is.boolean(hide)) {
|
|
1006
1015
|
hide = !element.hidden;
|
|
@@ -1073,20 +1082,14 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
1073
1082
|
}
|
|
1074
1083
|
|
|
1075
1084
|
// Set focus and tab focus class
|
|
1076
|
-
function setFocus(element = null,
|
|
1077
|
-
if (!is.element(element))
|
|
1078
|
-
return;
|
|
1079
|
-
}
|
|
1085
|
+
function setFocus(element = null, focusVisible = false) {
|
|
1086
|
+
if (!is.element(element)) return;
|
|
1080
1087
|
|
|
1081
1088
|
// Set regular focus
|
|
1082
1089
|
element.focus({
|
|
1083
|
-
preventScroll: true
|
|
1090
|
+
preventScroll: true,
|
|
1091
|
+
focusVisible
|
|
1084
1092
|
});
|
|
1085
|
-
|
|
1086
|
-
// If we want to mimic keyboard focus via tab
|
|
1087
|
-
if (tabFocus) {
|
|
1088
|
-
toggleClass(element, this.config.classNames.tabFocus);
|
|
1089
|
-
}
|
|
1090
1093
|
}
|
|
1091
1094
|
|
|
1092
1095
|
// ==========================================================================
|
|
@@ -1107,10 +1110,9 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
1107
1110
|
video: 'canPlayType' in document.createElement('video'),
|
|
1108
1111
|
// Check for support
|
|
1109
1112
|
// Basic functionality vs full UI
|
|
1110
|
-
check(type, provider
|
|
1111
|
-
const canPlayInline = browser.isIPhone && playsinline && support.playsinline;
|
|
1113
|
+
check(type, provider) {
|
|
1112
1114
|
const api = support[type] || provider !== 'html5';
|
|
1113
|
-
const ui = api && support.rangeInput
|
|
1115
|
+
const ui = api && support.rangeInput;
|
|
1114
1116
|
return {
|
|
1115
1117
|
api,
|
|
1116
1118
|
ui
|
|
@@ -1607,7 +1609,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
1607
1609
|
// Format string
|
|
1608
1610
|
function format(input, ...args) {
|
|
1609
1611
|
if (is.empty(input)) return input;
|
|
1610
|
-
return input.toString().replace(/{(\d+)}/g, (
|
|
1612
|
+
return input.toString().replace(/{(\d+)}/g, (_, i) => args[i].toString());
|
|
1611
1613
|
}
|
|
1612
1614
|
|
|
1613
1615
|
// Get percentage
|
|
@@ -2188,7 +2190,8 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
2188
2190
|
const attributes = getAttributesFromSelector(this.config.selectors.display[type], attrs);
|
|
2189
2191
|
const container = createElement('div', extend(attributes, {
|
|
2190
2192
|
class: `${attributes.class ? attributes.class : ''} ${this.config.classNames.display.time} `.trim(),
|
|
2191
|
-
'aria-label': i18n.get(type, this.config)
|
|
2193
|
+
'aria-label': i18n.get(type, this.config),
|
|
2194
|
+
role: 'timer'
|
|
2192
2195
|
}), '00:00');
|
|
2193
2196
|
|
|
2194
2197
|
// Reference for updates
|
|
@@ -2202,7 +2205,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
2202
2205
|
// Navigate through menus via arrow keys and space
|
|
2203
2206
|
on.call(this, menuItem, 'keydown keyup', event => {
|
|
2204
2207
|
// We only care about space and ⬆️ ⬇️️ ➡️
|
|
2205
|
-
if (!['
|
|
2208
|
+
if (![' ', 'ArrowUp', 'ArrowDown', 'ArrowRight'].includes(event.key)) {
|
|
2206
2209
|
return;
|
|
2207
2210
|
}
|
|
2208
2211
|
|
|
@@ -2217,11 +2220,11 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
2217
2220
|
const isRadioButton = matches(menuItem, '[role="menuitemradio"]');
|
|
2218
2221
|
|
|
2219
2222
|
// Show the respective menu
|
|
2220
|
-
if (!isRadioButton && ['
|
|
2223
|
+
if (!isRadioButton && [' ', 'ArrowRight'].includes(event.key)) {
|
|
2221
2224
|
controls.showMenuPanel.call(this, type, true);
|
|
2222
2225
|
} else {
|
|
2223
2226
|
let target;
|
|
2224
|
-
if (event.key !== '
|
|
2227
|
+
if (event.key !== ' ') {
|
|
2225
2228
|
if (event.key === 'ArrowDown' || isRadioButton && event.key === 'ArrowRight') {
|
|
2226
2229
|
target = menuItem.nextElementSibling;
|
|
2227
2230
|
if (!is.element(target)) {
|
|
@@ -2286,7 +2289,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
2286
2289
|
}
|
|
2287
2290
|
});
|
|
2288
2291
|
this.listeners.bind(menuItem, 'click keyup', event => {
|
|
2289
|
-
if (is.keyboardEvent(event) && event.key !== '
|
|
2292
|
+
if (is.keyboardEvent(event) && event.key !== ' ') {
|
|
2290
2293
|
return;
|
|
2291
2294
|
}
|
|
2292
2295
|
event.preventDefault();
|
|
@@ -2426,7 +2429,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
2426
2429
|
}
|
|
2427
2430
|
|
|
2428
2431
|
// WebKit only
|
|
2429
|
-
if (!browser.
|
|
2432
|
+
if (!browser.isWebKit && !browser.isIPadOS) {
|
|
2430
2433
|
return;
|
|
2431
2434
|
}
|
|
2432
2435
|
|
|
@@ -2809,7 +2812,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
2809
2812
|
toggleHidden(this.elements.settings.menu, !visible);
|
|
2810
2813
|
},
|
|
2811
2814
|
// Focus the first menu item in a given (or visible) menu
|
|
2812
|
-
focusFirstMenuItem(pane,
|
|
2815
|
+
focusFirstMenuItem(pane, focusVisible = false) {
|
|
2813
2816
|
if (this.elements.settings.popup.hidden) {
|
|
2814
2817
|
return;
|
|
2815
2818
|
}
|
|
@@ -2818,7 +2821,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
2818
2821
|
target = Object.values(this.elements.settings.panels).find(p => !p.hidden);
|
|
2819
2822
|
}
|
|
2820
2823
|
const firstItem = target.querySelector('[role^="menuitem"]');
|
|
2821
|
-
setFocus.call(this, firstItem,
|
|
2824
|
+
setFocus.call(this, firstItem, focusVisible);
|
|
2822
2825
|
},
|
|
2823
2826
|
// Show/hide menu
|
|
2824
2827
|
toggleMenu(input) {
|
|
@@ -2894,7 +2897,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
2894
2897
|
};
|
|
2895
2898
|
},
|
|
2896
2899
|
// Show a panel in the menu
|
|
2897
|
-
showMenuPanel(type = '',
|
|
2900
|
+
showMenuPanel(type = '', focusVisible = false) {
|
|
2898
2901
|
const target = this.elements.container.querySelector(`#plyr-settings-${this.id}-${type}`);
|
|
2899
2902
|
|
|
2900
2903
|
// Nothing to show, bail
|
|
@@ -2945,7 +2948,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
2945
2948
|
toggleHidden(target, false);
|
|
2946
2949
|
|
|
2947
2950
|
// Focus the first item
|
|
2948
|
-
controls.focusFirstMenuItem.call(this, target,
|
|
2951
|
+
controls.focusFirstMenuItem.call(this, target, focusVisible);
|
|
2949
2952
|
},
|
|
2950
2953
|
// Set the download URL
|
|
2951
2954
|
setDownloadUrl() {
|
|
@@ -3072,7 +3075,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
3072
3075
|
// Volume range control
|
|
3073
3076
|
// Ignored on iOS as it's handled globally
|
|
3074
3077
|
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
|
|
3075
|
-
if (control === 'volume' && !browser.isIos) {
|
|
3078
|
+
if (control === 'volume' && !browser.isIos && !browser.isIPadOS) {
|
|
3076
3079
|
// Set the attributes
|
|
3077
3080
|
const attributes = {
|
|
3078
3081
|
max: 1,
|
|
@@ -3864,8 +3867,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
3864
3867
|
autoplay: false,
|
|
3865
3868
|
// Only allow one media playing at once (vimeo only)
|
|
3866
3869
|
autopause: true,
|
|
3867
|
-
// Allow inline playback on iOS
|
|
3868
|
-
// TODO: Remove iosNative fullscreen option in favour of this (logic needs work)
|
|
3870
|
+
// Allow inline playback on iOS
|
|
3869
3871
|
playsinline: true,
|
|
3870
3872
|
// Default time to skip when rewind/fast forward
|
|
3871
3873
|
seekTime: 10,
|
|
@@ -3895,7 +3897,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
3895
3897
|
// Sprite (for icons)
|
|
3896
3898
|
loadSprite: true,
|
|
3897
3899
|
iconPrefix: 'plyr',
|
|
3898
|
-
iconUrl: 'https://cdn.plyr.io/3.7.
|
|
3900
|
+
iconUrl: 'https://cdn.plyr.io/3.7.8/plyr.svg',
|
|
3899
3901
|
// Blank video (used to prevent errors on source change)
|
|
3900
3902
|
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
|
|
3901
3903
|
// Quality default
|
|
@@ -4128,7 +4130,6 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
4128
4130
|
marker: 'plyr__progress__marker',
|
|
4129
4131
|
hidden: 'plyr__sr-only',
|
|
4130
4132
|
hideControls: 'plyr--hide-controls',
|
|
4131
|
-
isIos: 'plyr--is-ios',
|
|
4132
4133
|
isTouch: 'plyr--is-touch',
|
|
4133
4134
|
uiSupported: 'plyr--full-ui',
|
|
4134
4135
|
noTransition: 'plyr--no-transition',
|
|
@@ -4156,7 +4157,6 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
4156
4157
|
supported: 'plyr--airplay-supported',
|
|
4157
4158
|
active: 'plyr--airplay-active'
|
|
4158
4159
|
},
|
|
4159
|
-
tabFocus: 'plyr__tab-focus',
|
|
4160
4160
|
previewThumbnails: {
|
|
4161
4161
|
// Tooltip thumbs
|
|
4162
4162
|
thumbContainer: 'plyr__preview-thumb',
|
|
@@ -4301,9 +4301,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
4301
4301
|
class Fullscreen {
|
|
4302
4302
|
constructor(player) {
|
|
4303
4303
|
_defineProperty$1(this, "onChange", () => {
|
|
4304
|
-
if (!this.
|
|
4305
|
-
return;
|
|
4306
|
-
}
|
|
4304
|
+
if (!this.supported) return;
|
|
4307
4305
|
|
|
4308
4306
|
// Update toggle button
|
|
4309
4307
|
const button = this.player.elements.buttons.fullscreen;
|
|
@@ -4320,8 +4318,8 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
4320
4318
|
// Store or restore scroll position
|
|
4321
4319
|
if (toggle) {
|
|
4322
4320
|
this.scrollPosition = {
|
|
4323
|
-
x: window.scrollX
|
|
4324
|
-
y: window.scrollY
|
|
4321
|
+
x: window.scrollX ?? 0,
|
|
4322
|
+
y: window.scrollY ?? 0
|
|
4325
4323
|
};
|
|
4326
4324
|
} else {
|
|
4327
4325
|
window.scrollTo(this.scrollPosition.x, this.scrollPosition.y);
|
|
@@ -4348,9 +4346,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
4348
4346
|
const hasProperty = is.string(viewport.content) && viewport.content.includes(property);
|
|
4349
4347
|
if (toggle) {
|
|
4350
4348
|
this.cleanupViewport = !hasProperty;
|
|
4351
|
-
if (!hasProperty) {
|
|
4352
|
-
viewport.content += `,${property}`;
|
|
4353
|
-
}
|
|
4349
|
+
if (!hasProperty) viewport.content += `,${property}`;
|
|
4354
4350
|
} else if (this.cleanupViewport) {
|
|
4355
4351
|
viewport.content = viewport.content.split(',').filter(part => part.trim() !== property).join(',');
|
|
4356
4352
|
}
|
|
@@ -4359,11 +4355,10 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
4359
4355
|
// Toggle button and fire events
|
|
4360
4356
|
this.onChange();
|
|
4361
4357
|
});
|
|
4358
|
+
// Trap focus inside container
|
|
4362
4359
|
_defineProperty$1(this, "trapFocus", event => {
|
|
4363
|
-
// Bail if iOS, not active, not the tab key
|
|
4364
|
-
if (browser.isIos || !this.active || event.key !== 'Tab')
|
|
4365
|
-
return;
|
|
4366
|
-
}
|
|
4360
|
+
// Bail if iOS/iPadOS, not active, not the tab key
|
|
4361
|
+
if (browser.isIos || browser.isIPadOS || !this.active || event.key !== 'Tab') return;
|
|
4367
4362
|
|
|
4368
4363
|
// Get the current focused element
|
|
4369
4364
|
const focused = document.activeElement;
|
|
@@ -4380,28 +4375,22 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
4380
4375
|
event.preventDefault();
|
|
4381
4376
|
}
|
|
4382
4377
|
});
|
|
4378
|
+
// Update UI
|
|
4383
4379
|
_defineProperty$1(this, "update", () => {
|
|
4384
|
-
if (this.
|
|
4380
|
+
if (this.supported) {
|
|
4385
4381
|
let mode;
|
|
4386
|
-
if (this.forceFallback)
|
|
4387
|
-
mode = 'Fallback (forced)';
|
|
4388
|
-
} else if (Fullscreen.native) {
|
|
4389
|
-
mode = 'Native';
|
|
4390
|
-
} else {
|
|
4391
|
-
mode = 'Fallback';
|
|
4392
|
-
}
|
|
4382
|
+
if (this.forceFallback) mode = 'Fallback (forced)';else if (Fullscreen.nativeSupported) mode = 'Native';else mode = 'Fallback';
|
|
4393
4383
|
this.player.debug.log(`${mode} fullscreen enabled`);
|
|
4394
4384
|
} else {
|
|
4395
4385
|
this.player.debug.log('Fullscreen not supported and fallback disabled');
|
|
4396
4386
|
}
|
|
4397
4387
|
|
|
4398
4388
|
// Add styling hook to show button
|
|
4399
|
-
toggleClass(this.player.elements.container, this.player.config.classNames.fullscreen.enabled, this.
|
|
4389
|
+
toggleClass(this.player.elements.container, this.player.config.classNames.fullscreen.enabled, this.supported);
|
|
4400
4390
|
});
|
|
4391
|
+
// Make an element fullscreen
|
|
4401
4392
|
_defineProperty$1(this, "enter", () => {
|
|
4402
|
-
if (!this.
|
|
4403
|
-
return;
|
|
4404
|
-
}
|
|
4393
|
+
if (!this.supported) return;
|
|
4405
4394
|
|
|
4406
4395
|
// iOS native fullscreen doesn't need the request step
|
|
4407
4396
|
if (browser.isIos && this.player.config.fullscreen.iosNative) {
|
|
@@ -4410,7 +4399,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
4410
4399
|
} else {
|
|
4411
4400
|
this.target.webkitEnterFullscreen();
|
|
4412
4401
|
}
|
|
4413
|
-
} else if (!Fullscreen.
|
|
4402
|
+
} else if (!Fullscreen.nativeSupported || this.forceFallback) {
|
|
4414
4403
|
this.toggleFallback(true);
|
|
4415
4404
|
} else if (!this.prefix) {
|
|
4416
4405
|
this.target.requestFullscreen({
|
|
@@ -4420,16 +4409,19 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
4420
4409
|
this.target[`${this.prefix}Request${this.property}`]();
|
|
4421
4410
|
}
|
|
4422
4411
|
});
|
|
4412
|
+
// Bail from fullscreen
|
|
4423
4413
|
_defineProperty$1(this, "exit", () => {
|
|
4424
|
-
if (!this.
|
|
4425
|
-
return;
|
|
4426
|
-
}
|
|
4414
|
+
if (!this.supported) return;
|
|
4427
4415
|
|
|
4428
4416
|
// iOS native fullscreen
|
|
4429
4417
|
if (browser.isIos && this.player.config.fullscreen.iosNative) {
|
|
4430
|
-
this.
|
|
4418
|
+
if (this.player.isVimeo) {
|
|
4419
|
+
this.player.embed.exitFullscreen();
|
|
4420
|
+
} else {
|
|
4421
|
+
this.target.webkitEnterFullscreen();
|
|
4422
|
+
}
|
|
4431
4423
|
silencePromise(this.player.play());
|
|
4432
|
-
} else if (!Fullscreen.
|
|
4424
|
+
} else if (!Fullscreen.nativeSupported || this.forceFallback) {
|
|
4433
4425
|
this.toggleFallback(false);
|
|
4434
4426
|
} else if (!this.prefix) {
|
|
4435
4427
|
(document.cancelFullScreen || document.exitFullscreen).call(document);
|
|
@@ -4438,12 +4430,9 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
4438
4430
|
document[`${this.prefix}${action}${this.property}`]();
|
|
4439
4431
|
}
|
|
4440
4432
|
});
|
|
4433
|
+
// Toggle state
|
|
4441
4434
|
_defineProperty$1(this, "toggle", () => {
|
|
4442
|
-
if (!this.active)
|
|
4443
|
-
this.enter();
|
|
4444
|
-
} else {
|
|
4445
|
-
this.exit();
|
|
4446
|
-
}
|
|
4435
|
+
if (!this.active) this.enter();else this.exit();
|
|
4447
4436
|
});
|
|
4448
4437
|
// Keep reference to parent
|
|
4449
4438
|
this.player = player;
|
|
@@ -4486,26 +4475,22 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
4486
4475
|
|
|
4487
4476
|
// Update the UI
|
|
4488
4477
|
this.update();
|
|
4489
|
-
|
|
4490
|
-
// this.toggle = this.toggle.bind(this);
|
|
4491
4478
|
}
|
|
4492
4479
|
|
|
4493
4480
|
// Determine if native supported
|
|
4494
|
-
static get
|
|
4481
|
+
static get nativeSupported() {
|
|
4495
4482
|
return !!(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled);
|
|
4496
4483
|
}
|
|
4497
4484
|
|
|
4498
4485
|
// If we're actually using native
|
|
4499
|
-
get
|
|
4500
|
-
return Fullscreen.
|
|
4486
|
+
get useNative() {
|
|
4487
|
+
return Fullscreen.nativeSupported && !this.forceFallback;
|
|
4501
4488
|
}
|
|
4502
4489
|
|
|
4503
4490
|
// Get the prefix for handlers
|
|
4504
4491
|
static get prefix() {
|
|
4505
4492
|
// No prefix
|
|
4506
|
-
if (is.function(document.exitFullscreen))
|
|
4507
|
-
return '';
|
|
4508
|
-
}
|
|
4493
|
+
if (is.function(document.exitFullscreen)) return '';
|
|
4509
4494
|
|
|
4510
4495
|
// Check for fullscreen support by vendor prefix
|
|
4511
4496
|
let value = '';
|
|
@@ -4523,19 +4508,26 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
4523
4508
|
return this.prefix === 'moz' ? 'FullScreen' : 'Fullscreen';
|
|
4524
4509
|
}
|
|
4525
4510
|
|
|
4526
|
-
// Determine if fullscreen is
|
|
4527
|
-
get
|
|
4528
|
-
return
|
|
4511
|
+
// Determine if fullscreen is supported
|
|
4512
|
+
get supported() {
|
|
4513
|
+
return [
|
|
4514
|
+
// Fullscreen is enabled in config
|
|
4515
|
+
this.player.config.fullscreen.enabled,
|
|
4516
|
+
// Must be a video
|
|
4517
|
+
this.player.isVideo,
|
|
4518
|
+
// Either native is supported or fallback enabled
|
|
4519
|
+
Fullscreen.nativeSupported || this.player.config.fullscreen.fallback,
|
|
4520
|
+
// YouTube has no way to trigger fullscreen, so on devices with no native support, playsinline
|
|
4521
|
+
// must be enabled and iosNative fullscreen must be disabled to offer the fullscreen fallback
|
|
4522
|
+
!this.player.isYouTube || Fullscreen.nativeSupported || !browser.isIos || this.player.config.playsinline && !this.player.config.fullscreen.iosNative].every(Boolean);
|
|
4529
4523
|
}
|
|
4530
4524
|
|
|
4531
4525
|
// Get active state
|
|
4532
4526
|
get active() {
|
|
4533
|
-
if (!this.
|
|
4534
|
-
return false;
|
|
4535
|
-
}
|
|
4527
|
+
if (!this.supported) return false;
|
|
4536
4528
|
|
|
4537
4529
|
// Fallback using classname
|
|
4538
|
-
if (!Fullscreen.
|
|
4530
|
+
if (!Fullscreen.nativeSupported || this.forceFallback) {
|
|
4539
4531
|
return hasClass(this.target, this.player.config.classNames.fullscreen.fallback);
|
|
4540
4532
|
}
|
|
4541
4533
|
const element = !this.prefix ? this.target.getRootNode().fullscreenElement : this.target.getRootNode()[`${this.prefix}${this.property}Element`];
|
|
@@ -4544,7 +4536,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
4544
4536
|
|
|
4545
4537
|
// Get target element
|
|
4546
4538
|
get target() {
|
|
4547
|
-
return browser.isIos && this.player.config.fullscreen.iosNative ? this.player.media : this.player.elements.fullscreen
|
|
4539
|
+
return browser.isIos && this.player.config.fullscreen.iosNative ? this.player.media : this.player.elements.fullscreen ?? this.player.elements.container;
|
|
4548
4540
|
}
|
|
4549
4541
|
}
|
|
4550
4542
|
|
|
@@ -4651,9 +4643,6 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
4651
4643
|
// Check for airplay support
|
|
4652
4644
|
toggleClass(this.elements.container, this.config.classNames.airplay.supported, support.airplay && this.isHTML5);
|
|
4653
4645
|
|
|
4654
|
-
// Add iOS class
|
|
4655
|
-
toggleClass(this.elements.container, this.config.classNames.isIos, browser.isIos);
|
|
4656
|
-
|
|
4657
4646
|
// Add touch class
|
|
4658
4647
|
toggleClass(this.elements.container, this.config.classNames.isTouch, this.touch);
|
|
4659
4648
|
|
|
@@ -4832,6 +4821,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
4832
4821
|
|
|
4833
4822
|
class Listeners {
|
|
4834
4823
|
constructor(_player) {
|
|
4824
|
+
// Device is touch enabled
|
|
4835
4825
|
_defineProperty$1(this, "firstTouch", () => {
|
|
4836
4826
|
const {
|
|
4837
4827
|
player
|
|
@@ -4844,62 +4834,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
4844
4834
|
// Add touch class
|
|
4845
4835
|
toggleClass(elements.container, player.config.classNames.isTouch, true);
|
|
4846
4836
|
});
|
|
4847
|
-
|
|
4848
|
-
const {
|
|
4849
|
-
player
|
|
4850
|
-
} = this;
|
|
4851
|
-
const {
|
|
4852
|
-
elements
|
|
4853
|
-
} = player;
|
|
4854
|
-
const {
|
|
4855
|
-
key,
|
|
4856
|
-
type,
|
|
4857
|
-
timeStamp
|
|
4858
|
-
} = event;
|
|
4859
|
-
clearTimeout(this.focusTimer);
|
|
4860
|
-
|
|
4861
|
-
// Ignore any key other than tab
|
|
4862
|
-
if (type === 'keydown' && key !== 'Tab') {
|
|
4863
|
-
return;
|
|
4864
|
-
}
|
|
4865
|
-
|
|
4866
|
-
// Store reference to event timeStamp
|
|
4867
|
-
if (type === 'keydown') {
|
|
4868
|
-
this.lastKeyDown = timeStamp;
|
|
4869
|
-
}
|
|
4870
|
-
|
|
4871
|
-
// Remove current classes
|
|
4872
|
-
const removeCurrent = () => {
|
|
4873
|
-
const className = player.config.classNames.tabFocus;
|
|
4874
|
-
const current = getElements.call(player, `.${className}`);
|
|
4875
|
-
toggleClass(current, className, false);
|
|
4876
|
-
};
|
|
4877
|
-
|
|
4878
|
-
// Determine if a key was pressed to trigger this event
|
|
4879
|
-
const wasKeyDown = timeStamp - this.lastKeyDown <= 20;
|
|
4880
|
-
|
|
4881
|
-
// Ignore focus events if a key was pressed prior
|
|
4882
|
-
if (type === 'focus' && !wasKeyDown) {
|
|
4883
|
-
return;
|
|
4884
|
-
}
|
|
4885
|
-
|
|
4886
|
-
// Remove all current
|
|
4887
|
-
removeCurrent();
|
|
4888
|
-
|
|
4889
|
-
// Delay the adding of classname until the focus has changed
|
|
4890
|
-
// This event fires before the focusin event
|
|
4891
|
-
if (type !== 'focusout') {
|
|
4892
|
-
this.focusTimer = setTimeout(() => {
|
|
4893
|
-
const focused = document.activeElement;
|
|
4894
|
-
|
|
4895
|
-
// Ignore if current focus element isn't inside the player
|
|
4896
|
-
if (!elements.container.contains(focused)) {
|
|
4897
|
-
return;
|
|
4898
|
-
}
|
|
4899
|
-
toggleClass(document.activeElement, player.config.classNames.tabFocus, true);
|
|
4900
|
-
}, 10);
|
|
4901
|
-
}
|
|
4902
|
-
});
|
|
4837
|
+
// Global window & document listeners
|
|
4903
4838
|
_defineProperty$1(this, "global", (toggle = true) => {
|
|
4904
4839
|
const {
|
|
4905
4840
|
player
|
|
@@ -4915,10 +4850,8 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
4915
4850
|
|
|
4916
4851
|
// Detect touch by events
|
|
4917
4852
|
once.call(player, document.body, 'touchstart', this.firstTouch);
|
|
4918
|
-
|
|
4919
|
-
// Tab focus detection
|
|
4920
|
-
toggleListener.call(player, document.body, 'keydown focus blur focusout', this.setTabFocus, toggle, false, true);
|
|
4921
4853
|
});
|
|
4854
|
+
// Container listeners
|
|
4922
4855
|
_defineProperty$1(this, "container", () => {
|
|
4923
4856
|
const {
|
|
4924
4857
|
player
|
|
@@ -5026,6 +4959,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
5026
4959
|
method.call(player, window, 'resize', resized);
|
|
5027
4960
|
});
|
|
5028
4961
|
});
|
|
4962
|
+
// Listen for media events
|
|
5029
4963
|
_defineProperty$1(this, "media", () => {
|
|
5030
4964
|
const {
|
|
5031
4965
|
player
|
|
@@ -5153,6 +5087,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
5153
5087
|
triggerEvent.call(player, elements.container, event.type, true, detail);
|
|
5154
5088
|
});
|
|
5155
5089
|
});
|
|
5090
|
+
// Run default and custom handlers
|
|
5156
5091
|
_defineProperty$1(this, "proxy", (event, defaultHandler, customHandlerKey) => {
|
|
5157
5092
|
const {
|
|
5158
5093
|
player
|
|
@@ -5171,6 +5106,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
5171
5106
|
defaultHandler.call(player, event);
|
|
5172
5107
|
}
|
|
5173
5108
|
});
|
|
5109
|
+
// Trigger custom and default handlers
|
|
5174
5110
|
_defineProperty$1(this, "bind", (element, type, defaultHandler, customHandlerKey, passive = true) => {
|
|
5175
5111
|
const {
|
|
5176
5112
|
player
|
|
@@ -5179,6 +5115,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
5179
5115
|
const hasCustomHandler = is.function(customHandler);
|
|
5180
5116
|
on.call(player, element, type, event => this.proxy(event, defaultHandler, customHandlerKey), passive && !hasCustomHandler);
|
|
5181
5117
|
});
|
|
5118
|
+
// Listen for control events
|
|
5182
5119
|
_defineProperty$1(this, "controls", () => {
|
|
5183
5120
|
const {
|
|
5184
5121
|
player
|
|
@@ -5253,7 +5190,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
5253
5190
|
// We have to bind to keyup otherwise Firefox triggers a click when a keydown event handler shifts focus
|
|
5254
5191
|
// https://bugzilla.mozilla.org/show_bug.cgi?id=1220143
|
|
5255
5192
|
this.bind(elements.buttons.settings, 'keyup', event => {
|
|
5256
|
-
if (!['
|
|
5193
|
+
if (![' ', 'Enter'].includes(event.key)) {
|
|
5257
5194
|
return;
|
|
5258
5195
|
}
|
|
5259
5196
|
|
|
@@ -5377,7 +5314,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
5377
5314
|
});
|
|
5378
5315
|
|
|
5379
5316
|
// Polyfill for lower fill in <input type="range"> for webkit
|
|
5380
|
-
if (browser.
|
|
5317
|
+
if (browser.isWebKit) {
|
|
5381
5318
|
Array.from(getElements.call(player, 'input[type="range"]')).forEach(element => {
|
|
5382
5319
|
this.bind(element, 'input', event => controls.updateRangeFill.call(player, event.target));
|
|
5383
5320
|
});
|
|
@@ -5478,7 +5415,6 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
5478
5415
|
this.lastKeyDown = null;
|
|
5479
5416
|
this.handleKey = this.handleKey.bind(this);
|
|
5480
5417
|
this.toggleMenu = this.toggleMenu.bind(this);
|
|
5481
|
-
this.setTabFocus = this.setTabFocus.bind(this);
|
|
5482
5418
|
this.firstTouch = this.firstTouch.bind(this);
|
|
5483
5419
|
}
|
|
5484
5420
|
|
|
@@ -5535,13 +5471,13 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
5535
5471
|
if (focused !== seek && matches(focused, editable)) {
|
|
5536
5472
|
return;
|
|
5537
5473
|
}
|
|
5538
|
-
if (event.key === '
|
|
5474
|
+
if (event.key === ' ' && matches(focused, 'button, [role^="menuitem"]')) {
|
|
5539
5475
|
return;
|
|
5540
5476
|
}
|
|
5541
5477
|
}
|
|
5542
5478
|
|
|
5543
5479
|
// Which keys should we prevent default
|
|
5544
|
-
const preventDefault = ['
|
|
5480
|
+
const preventDefault = [' ', 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'c', 'f', 'k', 'l', 'm'];
|
|
5545
5481
|
|
|
5546
5482
|
// If the key is found prevent default (e.g. prevent scrolling for arrows)
|
|
5547
5483
|
if (preventDefault.includes(key)) {
|
|
@@ -5563,7 +5499,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
5563
5499
|
seekByIncrement(parseInt(key, 10));
|
|
5564
5500
|
}
|
|
5565
5501
|
break;
|
|
5566
|
-
case '
|
|
5502
|
+
case ' ':
|
|
5567
5503
|
case 'k':
|
|
5568
5504
|
if (!repeat) {
|
|
5569
5505
|
silencePromise(player.togglePlay());
|
|
@@ -5616,8 +5552,6 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
5616
5552
|
toggleMenu(event) {
|
|
5617
5553
|
controls.toggleMenu.call(this.player, event);
|
|
5618
5554
|
}
|
|
5619
|
-
|
|
5620
|
-
// Device is touch enabled
|
|
5621
5555
|
}
|
|
5622
5556
|
|
|
5623
5557
|
var loadjs_umd = createCommonjsModule(function (module, exports) {
|
|
@@ -6023,7 +5957,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
6023
5957
|
autoplay: player.autoplay,
|
|
6024
5958
|
muted: player.muted,
|
|
6025
5959
|
gesture: 'media',
|
|
6026
|
-
playsinline:
|
|
5960
|
+
playsinline: player.config.playsinline,
|
|
6027
5961
|
// hash has to be added to iframe-URL
|
|
6028
5962
|
...hashParam,
|
|
6029
5963
|
...frameParams
|
|
@@ -6174,7 +6108,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
6174
6108
|
},
|
|
6175
6109
|
set(input) {
|
|
6176
6110
|
const toggle = is.boolean(input) ? input : false;
|
|
6177
|
-
player.embed.
|
|
6111
|
+
player.embed.setMuted(toggle ? true : player.config.muted).then(() => {
|
|
6178
6112
|
muted = toggle;
|
|
6179
6113
|
triggerEvent.call(player, player.media, 'volumechange');
|
|
6180
6114
|
});
|
|
@@ -6447,7 +6381,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
6447
6381
|
const posterSrc = s => `https://i.ytimg.com/vi/${videoId}/${s}default.jpg`;
|
|
6448
6382
|
|
|
6449
6383
|
// Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide)
|
|
6450
|
-
loadImage(posterSrc('maxres'), 121) //
|
|
6384
|
+
loadImage(posterSrc('maxres'), 121) // Highest quality and un-padded
|
|
6451
6385
|
.catch(() => loadImage(posterSrc('sd'), 121)) // 480p padded 4:3
|
|
6452
6386
|
.catch(() => loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists
|
|
6453
6387
|
.then(image => ui.setPoster.call(player, image.src)).then(src => {
|
|
@@ -6473,7 +6407,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
6473
6407
|
// Disable keyboard as we handle it
|
|
6474
6408
|
disablekb: 1,
|
|
6475
6409
|
// Allow iOS inline playback
|
|
6476
|
-
playsinline: !player.config.fullscreen.iosNative ? 1 : 0,
|
|
6410
|
+
playsinline: player.config.playsinline && !player.config.fullscreen.iosNative ? 1 : 0,
|
|
6477
6411
|
// Captions are flaky on YouTube
|
|
6478
6412
|
cc_load_policy: player.captions.active ? 1 : 0,
|
|
6479
6413
|
cc_lang_pref: player.config.captions.language,
|
|
@@ -6492,7 +6426,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
6492
6426
|
100: 'The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.',
|
|
6493
6427
|
101: 'The owner of the requested video does not allow it to be played in embedded players.',
|
|
6494
6428
|
150: 'The owner of the requested video does not allow it to be played in embedded players.'
|
|
6495
|
-
}[code] || 'An unknown error
|
|
6429
|
+
}[code] || 'An unknown error occurred';
|
|
6496
6430
|
player.media.error = {
|
|
6497
6431
|
code,
|
|
6498
6432
|
message
|
|
@@ -6804,6 +6738,9 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
6804
6738
|
* @return {Ads}
|
|
6805
6739
|
*/
|
|
6806
6740
|
constructor(player) {
|
|
6741
|
+
/**
|
|
6742
|
+
* Load the IMA SDK
|
|
6743
|
+
*/
|
|
6807
6744
|
_defineProperty$1(this, "load", () => {
|
|
6808
6745
|
if (!this.enabled) {
|
|
6809
6746
|
return;
|
|
@@ -6821,6 +6758,9 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
6821
6758
|
this.ready();
|
|
6822
6759
|
}
|
|
6823
6760
|
});
|
|
6761
|
+
/**
|
|
6762
|
+
* Get the ads instance ready
|
|
6763
|
+
*/
|
|
6824
6764
|
_defineProperty$1(this, "ready", () => {
|
|
6825
6765
|
// Double check we're enabled
|
|
6826
6766
|
if (!this.enabled) {
|
|
@@ -6842,6 +6782,14 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
6842
6782
|
// Setup the IMA SDK
|
|
6843
6783
|
this.setupIMA();
|
|
6844
6784
|
});
|
|
6785
|
+
/**
|
|
6786
|
+
* In order for the SDK to display ads for our video, we need to tell it where to put them,
|
|
6787
|
+
* so here we define our ad container. This div is set up to render on top of the video player.
|
|
6788
|
+
* Using the code below, we tell the SDK to render ads within that div. We also provide a
|
|
6789
|
+
* handle to the content video player - the SDK will poll the current time of our player to
|
|
6790
|
+
* properly place mid-rolls. After we create the ad display container, we initialize it. On
|
|
6791
|
+
* mobile devices, this initialization is done as the result of a user action.
|
|
6792
|
+
*/
|
|
6845
6793
|
_defineProperty$1(this, "setupIMA", () => {
|
|
6846
6794
|
// Create the container for our advertisements
|
|
6847
6795
|
this.elements.container = createElement('div', {
|
|
@@ -6871,6 +6819,9 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
6871
6819
|
// Request video ads to be pre-loaded
|
|
6872
6820
|
this.requestAds();
|
|
6873
6821
|
});
|
|
6822
|
+
/**
|
|
6823
|
+
* Request advertisements
|
|
6824
|
+
*/
|
|
6874
6825
|
_defineProperty$1(this, "requestAds", () => {
|
|
6875
6826
|
const {
|
|
6876
6827
|
container
|
|
@@ -6897,6 +6848,10 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
6897
6848
|
this.onAdError(error);
|
|
6898
6849
|
}
|
|
6899
6850
|
});
|
|
6851
|
+
/**
|
|
6852
|
+
* Update the ad countdown
|
|
6853
|
+
* @param {Boolean} start
|
|
6854
|
+
*/
|
|
6900
6855
|
_defineProperty$1(this, "pollCountdown", (start = false) => {
|
|
6901
6856
|
if (!start) {
|
|
6902
6857
|
clearInterval(this.countdownTimer);
|
|
@@ -6910,6 +6865,10 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
6910
6865
|
};
|
|
6911
6866
|
this.countdownTimer = setInterval(update, 100);
|
|
6912
6867
|
});
|
|
6868
|
+
/**
|
|
6869
|
+
* This method is called whenever the ads are ready inside the AdDisplayContainer
|
|
6870
|
+
* @param {Event} event - adsManagerLoadedEvent
|
|
6871
|
+
*/
|
|
6913
6872
|
_defineProperty$1(this, "onAdsManagerLoaded", event => {
|
|
6914
6873
|
// Load could occur after a source change (race condition)
|
|
6915
6874
|
if (!this.enabled) {
|
|
@@ -6960,6 +6919,12 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
6960
6919
|
});
|
|
6961
6920
|
}
|
|
6962
6921
|
});
|
|
6922
|
+
/**
|
|
6923
|
+
* This is where all the event handling takes place. Retrieve the ad from the event. Some
|
|
6924
|
+
* events (e.g. ALL_ADS_COMPLETED) don't have the ad object associated
|
|
6925
|
+
* https://developers.google.com/interactive-media-ads/docs/sdks/html5/v3/apis#ima.AdEvent.Type
|
|
6926
|
+
* @param {Event} event
|
|
6927
|
+
*/
|
|
6963
6928
|
_defineProperty$1(this, "onAdEvent", event => {
|
|
6964
6929
|
const {
|
|
6965
6930
|
container
|
|
@@ -7055,10 +7020,19 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7055
7020
|
break;
|
|
7056
7021
|
}
|
|
7057
7022
|
});
|
|
7023
|
+
/**
|
|
7024
|
+
* Any ad error handling comes through here
|
|
7025
|
+
* @param {Event} event
|
|
7026
|
+
*/
|
|
7058
7027
|
_defineProperty$1(this, "onAdError", event => {
|
|
7059
7028
|
this.cancel();
|
|
7060
7029
|
this.player.debug.warn('Ads error', event);
|
|
7061
7030
|
});
|
|
7031
|
+
/**
|
|
7032
|
+
* Setup hooks for Plyr and window events. This ensures
|
|
7033
|
+
* the mid- and post-roll launch at the correct time. And
|
|
7034
|
+
* resize the advertisement when the player resizes
|
|
7035
|
+
*/
|
|
7062
7036
|
_defineProperty$1(this, "listeners", () => {
|
|
7063
7037
|
const {
|
|
7064
7038
|
container
|
|
@@ -7094,6 +7068,9 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7094
7068
|
}
|
|
7095
7069
|
});
|
|
7096
7070
|
});
|
|
7071
|
+
/**
|
|
7072
|
+
* Initialize the adsManager and start playing advertisements
|
|
7073
|
+
*/
|
|
7097
7074
|
_defineProperty$1(this, "play", () => {
|
|
7098
7075
|
const {
|
|
7099
7076
|
container
|
|
@@ -7126,6 +7103,9 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7126
7103
|
}
|
|
7127
7104
|
}).catch(() => {});
|
|
7128
7105
|
});
|
|
7106
|
+
/**
|
|
7107
|
+
* Resume our video
|
|
7108
|
+
*/
|
|
7129
7109
|
_defineProperty$1(this, "resumeContent", () => {
|
|
7130
7110
|
// Hide the advertisement container
|
|
7131
7111
|
this.elements.container.style.zIndex = '';
|
|
@@ -7136,6 +7116,9 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7136
7116
|
// Play video
|
|
7137
7117
|
silencePromise(this.player.media.play());
|
|
7138
7118
|
});
|
|
7119
|
+
/**
|
|
7120
|
+
* Pause our video
|
|
7121
|
+
*/
|
|
7139
7122
|
_defineProperty$1(this, "pauseContent", () => {
|
|
7140
7123
|
// Show the advertisement container
|
|
7141
7124
|
this.elements.container.style.zIndex = 3;
|
|
@@ -7146,6 +7129,12 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7146
7129
|
// Pause our video.
|
|
7147
7130
|
this.player.media.pause();
|
|
7148
7131
|
});
|
|
7132
|
+
/**
|
|
7133
|
+
* Destroy the adsManager so we can grab new ads after this. If we don't then we're not
|
|
7134
|
+
* allowed to call new ads based on google policies, as they interpret this as an accidental
|
|
7135
|
+
* video requests. https://developers.google.com/interactive-
|
|
7136
|
+
* media-ads/docs/sdks/android/faq#8
|
|
7137
|
+
*/
|
|
7149
7138
|
_defineProperty$1(this, "cancel", () => {
|
|
7150
7139
|
// Pause our video
|
|
7151
7140
|
if (this.initialized) {
|
|
@@ -7158,6 +7147,9 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7158
7147
|
// Re-create our adsManager
|
|
7159
7148
|
this.loadAds();
|
|
7160
7149
|
});
|
|
7150
|
+
/**
|
|
7151
|
+
* Re-create our adsManager
|
|
7152
|
+
*/
|
|
7161
7153
|
_defineProperty$1(this, "loadAds", () => {
|
|
7162
7154
|
// Tell our adsManager to go bye bye
|
|
7163
7155
|
this.managerPromise.then(() => {
|
|
@@ -7178,6 +7170,11 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7178
7170
|
this.requestAds();
|
|
7179
7171
|
}).catch(() => {});
|
|
7180
7172
|
});
|
|
7173
|
+
/**
|
|
7174
|
+
* Handles callbacks after an ad event was invoked
|
|
7175
|
+
* @param {String} event - Event type
|
|
7176
|
+
* @param args
|
|
7177
|
+
*/
|
|
7181
7178
|
_defineProperty$1(this, "trigger", (event, ...args) => {
|
|
7182
7179
|
const handlers = this.events[event];
|
|
7183
7180
|
if (is.array(handlers)) {
|
|
@@ -7188,6 +7185,12 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7188
7185
|
});
|
|
7189
7186
|
}
|
|
7190
7187
|
});
|
|
7188
|
+
/**
|
|
7189
|
+
* Add event listeners
|
|
7190
|
+
* @param {String} event - Event type
|
|
7191
|
+
* @param {Function} callback - Callback for when event occurs
|
|
7192
|
+
* @return {Ads}
|
|
7193
|
+
*/
|
|
7191
7194
|
_defineProperty$1(this, "on", (event, callback) => {
|
|
7192
7195
|
if (!is.array(this.events[event])) {
|
|
7193
7196
|
this.events[event] = [];
|
|
@@ -7195,6 +7198,14 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7195
7198
|
this.events[event].push(callback);
|
|
7196
7199
|
return this;
|
|
7197
7200
|
});
|
|
7201
|
+
/**
|
|
7202
|
+
* Setup a safety timer for when the ad network doesn't respond for whatever reason.
|
|
7203
|
+
* The advertisement has 12 seconds to get its things together. We stop this timer when the
|
|
7204
|
+
* advertisement is playing, or when a user action is required to start, then we clear the
|
|
7205
|
+
* timer on ad ready
|
|
7206
|
+
* @param {Number} time
|
|
7207
|
+
* @param {String} from
|
|
7208
|
+
*/
|
|
7198
7209
|
_defineProperty$1(this, "startSafetyTimer", (time, from) => {
|
|
7199
7210
|
this.player.debug.log(`Safety timer invoked from: ${from}`);
|
|
7200
7211
|
this.safetyTimer = setTimeout(() => {
|
|
@@ -7202,6 +7213,10 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7202
7213
|
this.clearSafetyTimer('startSafetyTimer()');
|
|
7203
7214
|
}, time);
|
|
7204
7215
|
});
|
|
7216
|
+
/**
|
|
7217
|
+
* Clear our safety timer(s)
|
|
7218
|
+
* @param {String} from
|
|
7219
|
+
*/
|
|
7205
7220
|
_defineProperty$1(this, "clearSafetyTimer", from => {
|
|
7206
7221
|
if (!is.nullOrUndefined(this.safetyTimer)) {
|
|
7207
7222
|
this.player.debug.log(`Safety timer cleared from: ${from}`);
|
|
@@ -7240,11 +7255,6 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7240
7255
|
} = this;
|
|
7241
7256
|
return this.player.isHTML5 && this.player.isVideo && config.enabled && (!is.empty(config.publisherId) || is.url(config.tagUrl));
|
|
7242
7257
|
}
|
|
7243
|
-
|
|
7244
|
-
/**
|
|
7245
|
-
* Load the IMA SDK
|
|
7246
|
-
*/
|
|
7247
|
-
|
|
7248
7258
|
// Build the tag URL
|
|
7249
7259
|
get tagUrl() {
|
|
7250
7260
|
const {
|
|
@@ -7265,15 +7275,6 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7265
7275
|
const base = 'https://go.aniview.com/api/adserver6/vast/';
|
|
7266
7276
|
return `${base}?${buildUrlParams(params)}`;
|
|
7267
7277
|
}
|
|
7268
|
-
|
|
7269
|
-
/**
|
|
7270
|
-
* In order for the SDK to display ads for our video, we need to tell it where to put them,
|
|
7271
|
-
* so here we define our ad container. This div is set up to render on top of the video player.
|
|
7272
|
-
* Using the code below, we tell the SDK to render ads within that div. We also provide a
|
|
7273
|
-
* handle to the content video player - the SDK will poll the current time of our player to
|
|
7274
|
-
* properly place mid-rolls. After we create the ad display container, we initialize it. On
|
|
7275
|
-
* mobile devices, this initialization is done as the result of a user action.
|
|
7276
|
-
*/
|
|
7277
7278
|
}
|
|
7278
7279
|
|
|
7279
7280
|
/**
|
|
@@ -7372,9 +7373,13 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7372
7373
|
|
|
7373
7374
|
// Check to see if thumb container size was specified manually in CSS
|
|
7374
7375
|
this.determineContainerAutoSizing();
|
|
7376
|
+
|
|
7377
|
+
// Set up listeners
|
|
7378
|
+
this.listeners();
|
|
7375
7379
|
this.loaded = true;
|
|
7376
7380
|
});
|
|
7377
7381
|
});
|
|
7382
|
+
// Download VTT files and parse them
|
|
7378
7383
|
_defineProperty$1(this, "getThumbnails", () => {
|
|
7379
7384
|
return new Promise(resolve => {
|
|
7380
7385
|
const {
|
|
@@ -7410,6 +7415,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7410
7415
|
}
|
|
7411
7416
|
});
|
|
7412
7417
|
});
|
|
7418
|
+
// Process individual VTT file
|
|
7413
7419
|
_defineProperty$1(this, "getThumbnail", url => {
|
|
7414
7420
|
return new Promise(resolve => {
|
|
7415
7421
|
fetch(url).then(response => {
|
|
@@ -7516,6 +7522,9 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7516
7522
|
});
|
|
7517
7523
|
}
|
|
7518
7524
|
});
|
|
7525
|
+
/**
|
|
7526
|
+
* Setup hooks for Plyr and window events
|
|
7527
|
+
*/
|
|
7519
7528
|
_defineProperty$1(this, "listeners", () => {
|
|
7520
7529
|
// Hide thumbnail preview - on mouse click, mouse leave (in listeners.js for now), and video play/seek. All four are required, e.g., for buffering
|
|
7521
7530
|
this.player.on('play', () => {
|
|
@@ -7528,6 +7537,9 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7528
7537
|
this.lastTime = this.player.media.currentTime;
|
|
7529
7538
|
});
|
|
7530
7539
|
});
|
|
7540
|
+
/**
|
|
7541
|
+
* Create HTML elements for image containers
|
|
7542
|
+
*/
|
|
7531
7543
|
_defineProperty$1(this, "render", () => {
|
|
7532
7544
|
// Create HTML element: plyr__preview-thumbnail-container
|
|
7533
7545
|
this.elements.thumb.container = createElement('div', {
|
|
@@ -7603,6 +7615,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7603
7615
|
this.loadImage(qualityIndex);
|
|
7604
7616
|
}
|
|
7605
7617
|
});
|
|
7618
|
+
// Show the image that's currently specified in this.showingThumb
|
|
7606
7619
|
_defineProperty$1(this, "loadImage", (qualityIndex = 0) => {
|
|
7607
7620
|
const thumbNum = this.showingThumb;
|
|
7608
7621
|
const thumbnail = this.thumbnails[qualityIndex];
|
|
@@ -7656,6 +7669,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7656
7669
|
// Each step here has a short time delay, and only continues if still hovering/seeking the same spot. This is to protect slow connections from overloading
|
|
7657
7670
|
this.preloadNearby(thumbNum, true).then(this.preloadNearby(thumbNum, false)).then(this.getHigherQuality(qualityIndex, previewImage, frame, thumbFilename));
|
|
7658
7671
|
});
|
|
7672
|
+
// Remove all preview images that aren't the designated current image
|
|
7659
7673
|
_defineProperty$1(this, "removeOldImages", currentImage => {
|
|
7660
7674
|
// Get a list of all images, convert it from a DOM list to an array
|
|
7661
7675
|
Array.from(this.currentImageContainer.children).forEach(image => {
|
|
@@ -7680,6 +7694,8 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7680
7694
|
}
|
|
7681
7695
|
});
|
|
7682
7696
|
});
|
|
7697
|
+
// Preload images before and after the current one. Only if the user is still hovering/seeking the same frame
|
|
7698
|
+
// This will only preload the lowest quality
|
|
7683
7699
|
_defineProperty$1(this, "preloadNearby", (thumbNum, forward = true) => {
|
|
7684
7700
|
return new Promise(resolve => {
|
|
7685
7701
|
setTimeout(() => {
|
|
@@ -7725,6 +7741,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7725
7741
|
}, 300);
|
|
7726
7742
|
});
|
|
7727
7743
|
});
|
|
7744
|
+
// If user has been hovering current image for half a second, look for a higher quality one
|
|
7728
7745
|
_defineProperty$1(this, "getHigherQuality", (currentQualityIndex, previewImage, frame, thumbFilename) => {
|
|
7729
7746
|
if (currentQualityIndex < this.thumbnails.length - 1) {
|
|
7730
7747
|
// Only use the higher quality version if it's going to look any better - if the current thumb is of a lower pixel density than the thumbnail container
|
|
@@ -7766,6 +7783,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7766
7783
|
this.sizeSpecifiedInCSS = true;
|
|
7767
7784
|
}
|
|
7768
7785
|
});
|
|
7786
|
+
// Set the size to be about a quarter of the size of video. Unless option dynamicSize === false, in which case it needs to be set in CSS
|
|
7769
7787
|
_defineProperty$1(this, "setThumbContainerSizeAndPos", () => {
|
|
7770
7788
|
const {
|
|
7771
7789
|
imageContainer
|
|
@@ -7802,6 +7820,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7802
7820
|
// The arrow can follow the cursor
|
|
7803
7821
|
container.style.setProperty('--preview-arrow-offset', `${position - clamped}px`);
|
|
7804
7822
|
});
|
|
7823
|
+
// Can't use 100% width, in case the video is a different aspect ratio to the video container
|
|
7805
7824
|
_defineProperty$1(this, "setScrubbingContainerSize", () => {
|
|
7806
7825
|
const {
|
|
7807
7826
|
width,
|
|
@@ -7813,6 +7832,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
7813
7832
|
this.elements.scrubbing.container.style.width = `${width}px`;
|
|
7814
7833
|
this.elements.scrubbing.container.style.height = `${height}px`;
|
|
7815
7834
|
});
|
|
7835
|
+
// Sprites need to be offset to the correct location
|
|
7816
7836
|
_defineProperty$1(this, "setImageSizeAndOffset", (previewImage, frame) => {
|
|
7817
7837
|
if (!this.usingSprites) return;
|
|
7818
7838
|
|
|
@@ -8037,6 +8057,9 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
8037
8057
|
// Plyr instance
|
|
8038
8058
|
class Plyr {
|
|
8039
8059
|
constructor(target, options) {
|
|
8060
|
+
/**
|
|
8061
|
+
* Play the media, or play the advertisement (if they are not blocked)
|
|
8062
|
+
*/
|
|
8040
8063
|
_defineProperty$1(this, "play", () => {
|
|
8041
8064
|
if (!is.function(this.media.play)) {
|
|
8042
8065
|
return null;
|
|
@@ -8050,12 +8073,19 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
8050
8073
|
// Return the promise (for HTML5)
|
|
8051
8074
|
return this.media.play();
|
|
8052
8075
|
});
|
|
8076
|
+
/**
|
|
8077
|
+
* Pause the media
|
|
8078
|
+
*/
|
|
8053
8079
|
_defineProperty$1(this, "pause", () => {
|
|
8054
8080
|
if (!this.playing || !is.function(this.media.pause)) {
|
|
8055
8081
|
return null;
|
|
8056
8082
|
}
|
|
8057
8083
|
return this.media.pause();
|
|
8058
8084
|
});
|
|
8085
|
+
/**
|
|
8086
|
+
* Toggle playback based on current status
|
|
8087
|
+
* @param {Boolean} input
|
|
8088
|
+
*/
|
|
8059
8089
|
_defineProperty$1(this, "togglePlay", input => {
|
|
8060
8090
|
// Toggle based on current state if nothing passed
|
|
8061
8091
|
const toggle = is.boolean(input) ? input : !this.playing;
|
|
@@ -8064,6 +8094,9 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
8064
8094
|
}
|
|
8065
8095
|
return this.pause();
|
|
8066
8096
|
});
|
|
8097
|
+
/**
|
|
8098
|
+
* Stop playback
|
|
8099
|
+
*/
|
|
8067
8100
|
_defineProperty$1(this, "stop", () => {
|
|
8068
8101
|
if (this.isHTML5) {
|
|
8069
8102
|
this.pause();
|
|
@@ -8072,28 +8105,55 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
8072
8105
|
this.media.stop();
|
|
8073
8106
|
}
|
|
8074
8107
|
});
|
|
8108
|
+
/**
|
|
8109
|
+
* Restart playback
|
|
8110
|
+
*/
|
|
8075
8111
|
_defineProperty$1(this, "restart", () => {
|
|
8076
8112
|
this.currentTime = 0;
|
|
8077
8113
|
});
|
|
8114
|
+
/**
|
|
8115
|
+
* Rewind
|
|
8116
|
+
* @param {Number} seekTime - how far to rewind in seconds. Defaults to the config.seekTime
|
|
8117
|
+
*/
|
|
8078
8118
|
_defineProperty$1(this, "rewind", seekTime => {
|
|
8079
8119
|
this.currentTime -= is.number(seekTime) ? seekTime : this.config.seekTime;
|
|
8080
8120
|
});
|
|
8121
|
+
/**
|
|
8122
|
+
* Fast forward
|
|
8123
|
+
* @param {Number} seekTime - how far to fast forward in seconds. Defaults to the config.seekTime
|
|
8124
|
+
*/
|
|
8081
8125
|
_defineProperty$1(this, "forward", seekTime => {
|
|
8082
8126
|
this.currentTime += is.number(seekTime) ? seekTime : this.config.seekTime;
|
|
8083
8127
|
});
|
|
8128
|
+
/**
|
|
8129
|
+
* Increase volume
|
|
8130
|
+
* @param {Boolean} step - How much to decrease by (between 0 and 1)
|
|
8131
|
+
*/
|
|
8084
8132
|
_defineProperty$1(this, "increaseVolume", step => {
|
|
8085
8133
|
const volume = this.media.muted ? 0 : this.volume;
|
|
8086
8134
|
this.volume = volume + (is.number(step) ? step : 0);
|
|
8087
8135
|
});
|
|
8136
|
+
/**
|
|
8137
|
+
* Decrease volume
|
|
8138
|
+
* @param {Boolean} step - How much to decrease by (between 0 and 1)
|
|
8139
|
+
*/
|
|
8088
8140
|
_defineProperty$1(this, "decreaseVolume", step => {
|
|
8089
8141
|
this.increaseVolume(-step);
|
|
8090
8142
|
});
|
|
8143
|
+
/**
|
|
8144
|
+
* Trigger the airplay dialog
|
|
8145
|
+
* TODO: update player with state, support, enabled
|
|
8146
|
+
*/
|
|
8091
8147
|
_defineProperty$1(this, "airplay", () => {
|
|
8092
8148
|
// Show dialog if supported
|
|
8093
8149
|
if (support.airplay) {
|
|
8094
8150
|
this.media.webkitShowPlaybackTargetPicker();
|
|
8095
8151
|
}
|
|
8096
8152
|
});
|
|
8153
|
+
/**
|
|
8154
|
+
* Toggle the player controls
|
|
8155
|
+
* @param {Boolean} [toggle] - Whether to show the controls
|
|
8156
|
+
*/
|
|
8097
8157
|
_defineProperty$1(this, "toggleControls", toggle => {
|
|
8098
8158
|
// Don't toggle if missing UI support or if it's audio
|
|
8099
8159
|
if (this.supported.ui && !this.isAudio) {
|
|
@@ -8118,15 +8178,37 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
8118
8178
|
}
|
|
8119
8179
|
return false;
|
|
8120
8180
|
});
|
|
8181
|
+
/**
|
|
8182
|
+
* Add event listeners
|
|
8183
|
+
* @param {String} event - Event type
|
|
8184
|
+
* @param {Function} callback - Callback for when event occurs
|
|
8185
|
+
*/
|
|
8121
8186
|
_defineProperty$1(this, "on", (event, callback) => {
|
|
8122
8187
|
on.call(this, this.elements.container, event, callback);
|
|
8123
8188
|
});
|
|
8189
|
+
/**
|
|
8190
|
+
* Add event listeners once
|
|
8191
|
+
* @param {String} event - Event type
|
|
8192
|
+
* @param {Function} callback - Callback for when event occurs
|
|
8193
|
+
*/
|
|
8124
8194
|
_defineProperty$1(this, "once", (event, callback) => {
|
|
8125
8195
|
once.call(this, this.elements.container, event, callback);
|
|
8126
8196
|
});
|
|
8197
|
+
/**
|
|
8198
|
+
* Remove event listeners
|
|
8199
|
+
* @param {String} event - Event type
|
|
8200
|
+
* @param {Function} callback - Callback for when event occurs
|
|
8201
|
+
*/
|
|
8127
8202
|
_defineProperty$1(this, "off", (event, callback) => {
|
|
8128
8203
|
off(this.elements.container, event, callback);
|
|
8129
8204
|
});
|
|
8205
|
+
/**
|
|
8206
|
+
* Destroy an instance
|
|
8207
|
+
* Event listeners are removed when elements are removed
|
|
8208
|
+
* http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory
|
|
8209
|
+
* @param {Function} callback - Callback for when destroy is complete
|
|
8210
|
+
* @param {Boolean} soft - Whether it's a soft destroy (for source changes etc)
|
|
8211
|
+
*/
|
|
8130
8212
|
_defineProperty$1(this, "destroy", (callback, soft = false) => {
|
|
8131
8213
|
if (!this.ready) {
|
|
8132
8214
|
return;
|
|
@@ -8225,6 +8307,10 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
8225
8307
|
setTimeout(done, 200);
|
|
8226
8308
|
}
|
|
8227
8309
|
});
|
|
8310
|
+
/**
|
|
8311
|
+
* Check for support for a mime type (HTML5 only)
|
|
8312
|
+
* @param {String} type - Mime type
|
|
8313
|
+
*/
|
|
8228
8314
|
_defineProperty$1(this, "supports", type => support.mime.call(this, type));
|
|
8229
8315
|
this.timers = {};
|
|
8230
8316
|
|
|
@@ -8422,7 +8508,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
8422
8508
|
}
|
|
8423
8509
|
|
|
8424
8510
|
// Check for support again but with type
|
|
8425
|
-
this.supported = support.check(this.type, this.provider
|
|
8511
|
+
this.supported = support.check(this.type, this.provider);
|
|
8426
8512
|
|
|
8427
8513
|
// If no support for even API, bail
|
|
8428
8514
|
if (!this.supported.api) {
|
|
@@ -8442,9 +8528,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
8442
8528
|
|
|
8443
8529
|
// Wrap media
|
|
8444
8530
|
if (!is.element(this.elements.container)) {
|
|
8445
|
-
this.elements.container = createElement('div'
|
|
8446
|
-
tabindex: 0
|
|
8447
|
-
});
|
|
8531
|
+
this.elements.container = createElement('div');
|
|
8448
8532
|
wrap(this.media, this.elements.container);
|
|
8449
8533
|
}
|
|
8450
8534
|
|
|
@@ -8523,11 +8607,6 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
8523
8607
|
get isAudio() {
|
|
8524
8608
|
return this.type === types.audio;
|
|
8525
8609
|
}
|
|
8526
|
-
|
|
8527
|
-
/**
|
|
8528
|
-
* Play the media, or play the advertisement (if they are not blocked)
|
|
8529
|
-
*/
|
|
8530
|
-
|
|
8531
8610
|
/**
|
|
8532
8611
|
* Get playing state
|
|
8533
8612
|
*/
|
|
@@ -8555,12 +8634,6 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
8555
8634
|
get ended() {
|
|
8556
8635
|
return Boolean(this.media.ended);
|
|
8557
8636
|
}
|
|
8558
|
-
|
|
8559
|
-
/**
|
|
8560
|
-
* Toggle playback based on current status
|
|
8561
|
-
* @param {Boolean} input
|
|
8562
|
-
*/
|
|
8563
|
-
|
|
8564
8637
|
/**
|
|
8565
8638
|
* Seek to a time
|
|
8566
8639
|
* @param {Number} input - where to seek to in seconds. Defaults to 0 (the start)
|
|
@@ -8682,12 +8755,6 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
8682
8755
|
get volume() {
|
|
8683
8756
|
return Number(this.media.volume);
|
|
8684
8757
|
}
|
|
8685
|
-
|
|
8686
|
-
/**
|
|
8687
|
-
* Increase volume
|
|
8688
|
-
* @param {Boolean} step - How much to decrease by (between 0 and 1)
|
|
8689
|
-
*/
|
|
8690
|
-
|
|
8691
8758
|
/**
|
|
8692
8759
|
* Set muted state
|
|
8693
8760
|
* @param {Boolean} mute
|
|
@@ -9101,7 +9168,7 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
9101
9168
|
}
|
|
9102
9169
|
|
|
9103
9170
|
/**
|
|
9104
|
-
* Sets the preview
|
|
9171
|
+
* Sets the preview thumbnails for the current source
|
|
9105
9172
|
*/
|
|
9106
9173
|
setPreviewThumbnails(thumbnailSource) {
|
|
9107
9174
|
if (this.previewThumbnails && this.previewThumbnails.loaded) {
|
|
@@ -9115,20 +9182,13 @@ typeof navigator === "object" && (function (global, factory) {
|
|
|
9115
9182
|
this.previewThumbnails = new PreviewThumbnails(this);
|
|
9116
9183
|
}
|
|
9117
9184
|
}
|
|
9118
|
-
|
|
9119
|
-
/**
|
|
9120
|
-
* Trigger the airplay dialog
|
|
9121
|
-
* TODO: update player with state, support, enabled
|
|
9122
|
-
*/
|
|
9123
|
-
|
|
9124
9185
|
/**
|
|
9125
9186
|
* Check for support
|
|
9126
9187
|
* @param {String} type - Player type (audio/video)
|
|
9127
9188
|
* @param {String} provider - Provider (html5/youtube/vimeo)
|
|
9128
|
-
* @param {Boolean} inline - Where player has `playsinline` sttribute
|
|
9129
9189
|
*/
|
|
9130
|
-
static supported(type, provider
|
|
9131
|
-
return support.check(type, provider
|
|
9190
|
+
static supported(type, provider) {
|
|
9191
|
+
return support.check(type, provider);
|
|
9132
9192
|
}
|
|
9133
9193
|
|
|
9134
9194
|
/**
|