aboutsummaryrefslogtreecommitdiffstats
path: root/docs/src
diff options
context:
space:
mode:
Diffstat (limited to 'docs/src')
-rw-r--r--docs/src/js/docs.js3
-rw-r--r--docs/src/js/lib/classlist.js237
-rw-r--r--docs/src/less/components/base.less9
-rw-r--r--docs/src/less/components/buttons.less6
-rw-r--r--docs/src/less/components/examples.less17
-rw-r--r--docs/src/templates/controls.html13
6 files changed, 264 insertions, 21 deletions
diff --git a/docs/src/js/docs.js b/docs/src/js/docs.js
index df205260..3835fef1 100644
--- a/docs/src/js/docs.js
+++ b/docs/src/js/docs.js
@@ -10,6 +10,7 @@ plyr.setup({
volume: 9,
title: "Video demo",
html: templates.controls.render({}),
+ tooltips: true,
captions: {
defaultActive: true
},
@@ -107,7 +108,7 @@ plyr.setup({
// Add star
function formatGitHubCount(count) {
- return "★ " + count;
+ return "★ " + count;
}
// Check if it's in session storage first
diff --git a/docs/src/js/lib/classlist.js b/docs/src/js/lib/classlist.js
new file mode 100644
index 00000000..eac1e99e
--- /dev/null
+++ b/docs/src/js/lib/classlist.js
@@ -0,0 +1,237 @@
+/*
+ * classList.js: Cross-browser full element.classList implementation.
+ * 1.1.20150312
+ *
+ * By Eli Grey, http://eligrey.com
+ * License: Dedicated to the public domain.
+ * See https://github.com/eligrey/classList.js/blob/master/LICENSE.md
+ */
+
+/*global self, document, DOMException */
+
+/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */
+
+if ("document" in self) {
+
+// Full polyfill for browsers with no classList support
+if (!("classList" in document.createElement("_"))) {
+
+(function (view) {
+
+"use strict";
+
+if (!('Element' in view)) return;
+
+var
+ classListProp = "classList"
+ , protoProp = "prototype"
+ , elemCtrProto = view.Element[protoProp]
+ , objCtr = Object
+ , strTrim = String[protoProp].trim || function () {
+ return this.replace(/^\s+|\s+$/g, "");
+ }
+ , arrIndexOf = Array[protoProp].indexOf || function (item) {
+ var
+ i = 0
+ , len = this.length
+ ;
+ for (; i < len; i++) {
+ if (i in this && this[i] === item) {
+ return i;
+ }
+ }
+ return -1;
+ }
+ // Vendors: please allow content code to instantiate DOMExceptions
+ , DOMEx = function (type, message) {
+ this.name = type;
+ this.code = DOMException[type];
+ this.message = message;
+ }
+ , checkTokenAndGetIndex = function (classList, token) {
+ if (token === "") {
+ throw new DOMEx(
+ "SYNTAX_ERR"
+ , "An invalid or illegal string was specified"
+ );
+ }
+ if (/\s/.test(token)) {
+ throw new DOMEx(
+ "INVALID_CHARACTER_ERR"
+ , "String contains an invalid character"
+ );
+ }
+ return arrIndexOf.call(classList, token);
+ }
+ , ClassList = function (elem) {
+ var
+ trimmedClasses = strTrim.call(elem.getAttribute("class") || "")
+ , classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
+ , i = 0
+ , len = classes.length
+ ;
+ for (; i < len; i++) {
+ this.push(classes[i]);
+ }
+ this._updateClassName = function () {
+ elem.setAttribute("class", this.toString());
+ };
+ }
+ , classListProto = ClassList[protoProp] = []
+ , classListGetter = function () {
+ return new ClassList(this);
+ }
+;
+// Most DOMException implementations don't allow calling DOMException's toString()
+// on non-DOMExceptions. Error's toString() is sufficient here.
+DOMEx[protoProp] = Error[protoProp];
+classListProto.item = function (i) {
+ return this[i] || null;
+};
+classListProto.contains = function (token) {
+ token += "";
+ return checkTokenAndGetIndex(this, token) !== -1;
+};
+classListProto.add = function () {
+ var
+ tokens = arguments
+ , i = 0
+ , l = tokens.length
+ , token
+ , updated = false
+ ;
+ do {
+ token = tokens[i] + "";
+ if (checkTokenAndGetIndex(this, token) === -1) {
+ this.push(token);
+ updated = true;
+ }
+ }
+ while (++i < l);
+
+ if (updated) {
+ this._updateClassName();
+ }
+};
+classListProto.remove = function () {
+ var
+ tokens = arguments
+ , i = 0
+ , l = tokens.length
+ , token
+ , updated = false
+ , index
+ ;
+ do {
+ token = tokens[i] + "";
+ index = checkTokenAndGetIndex(this, token);
+ while (index !== -1) {
+ this.splice(index, 1);
+ updated = true;
+ index = checkTokenAndGetIndex(this, token);
+ }
+ }
+ while (++i < l);
+
+ if (updated) {
+ this._updateClassName();
+ }
+};
+classListProto.toggle = function (token, force) {
+ token += "";
+
+ var
+ result = this.contains(token)
+ , method = result ?
+ force !== true && "remove"
+ :
+ force !== false && "add"
+ ;
+
+ if (method) {
+ this[method](token);
+ }
+
+ if (force === true || force === false) {
+ return force;
+ } else {
+ return !result;
+ }
+};
+classListProto.toString = function () {
+ return this.join(" ");
+};
+
+if (objCtr.defineProperty) {
+ var classListPropDesc = {
+ get: classListGetter
+ , enumerable: true
+ , configurable: true
+ };
+ try {
+ objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
+ } catch (ex) { // IE 8 doesn't support enumerable:true
+ if (ex.number === -0x7FF5EC54) {
+ classListPropDesc.enumerable = false;
+ objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
+ }
+ }
+} else if (objCtr[protoProp].__defineGetter__) {
+ elemCtrProto.__defineGetter__(classListProp, classListGetter);
+}
+
+}(self));
+
+} else {
+// There is full or partial native classList support, so just check if we need
+// to normalize the add/remove and toggle APIs.
+
+(function () {
+ "use strict";
+
+ var testElement = document.createElement("_");
+
+ testElement.classList.add("c1", "c2");
+
+ // Polyfill for IE 10/11 and Firefox <26, where classList.add and
+ // classList.remove exist but support only one argument at a time.
+ if (!testElement.classList.contains("c2")) {
+ var createMethod = function(method) {
+ var original = DOMTokenList.prototype[method];
+
+ DOMTokenList.prototype[method] = function(token) {
+ var i, len = arguments.length;
+
+ for (i = 0; i < len; i++) {
+ token = arguments[i];
+ original.call(this, token);
+ }
+ };
+ };
+ createMethod('add');
+ createMethod('remove');
+ }
+
+ testElement.classList.toggle("c3", false);
+
+ // Polyfill for IE 10 and Firefox <24, where classList.toggle does not
+ // support the second argument.
+ if (testElement.classList.contains("c3")) {
+ var _toggle = DOMTokenList.prototype.toggle;
+
+ DOMTokenList.prototype.toggle = function(token, force) {
+ if (1 in arguments && !this.contains(token) === !force) {
+ return force;
+ } else {
+ return _toggle.call(this, token);
+ }
+ };
+
+ }
+
+ testElement = null;
+}());
+
+}
+
+} \ No newline at end of file
diff --git a/docs/src/less/components/base.less b/docs/src/less/components/base.less
index 81a68058..b4e5ddf1 100644
--- a/docs/src/less/components/base.less
+++ b/docs/src/less/components/base.less
@@ -8,17 +8,24 @@
box-sizing: border-box;
}
+// Hidden
+[hidden] {
+ display: none;
+}
+
// Base
html {
+ height: 100%;
font-size: 100%;
+ background: linear-gradient(#fff, @body-background) fixed;
}
body {
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
- background: @body-background;
line-height: 1.5;
text-align: center;
color: @gray;
.font-smoothing(on);
+ padding: 0 (@padding-base / 2);
}
// Header
diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less
index 749cd11f..68c1f5d3 100644
--- a/docs/src/less/components/buttons.less
+++ b/docs/src/less/components/buttons.less
@@ -25,6 +25,7 @@ nav {
position: relative;
margin: 0 auto @padding-base;
max-width: @example-width-video;
+ white-space: nowrap;
&::before {
content: "";
@@ -101,7 +102,8 @@ nav {
}
}
.btn-primary {
- background: linear-gradient(@link-color, darken(@link-color, 3%));
+ background-image: linear-gradient(@link-color, darken(@link-color, 3%));
+ background-color: @link-color;
border-color: darken(@link-color, 10%);
box-shadow: 0 1px 1px rgba(0,0,0, .15);
text-shadow: 0 1px 1px rgba(0,0,0, .1);
@@ -123,7 +125,7 @@ nav {
position: relative;
margin-left: 6px;
padding: ((@padding-base / 2) - 1px);
- background: @body-background;
+ background: #fff;
border: 1px solid @gray-light;
&::before {
diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less
index d91bf727..97087b02 100644
--- a/docs/src/less/components/examples.less
+++ b/docs/src/less/components/examples.less
@@ -6,7 +6,6 @@
.example-audio .player,
.example-video .player {
margin: 0 auto @padding-base;
- box-shadow: 0 1px 1px rgba(0,0,0, .1);
&-controls {
border-radius: 0 0 @border-radius-base @border-radius-base;
@@ -31,29 +30,31 @@
iframe {
border-radius: @border-radius-base;
}
+ iframe {
+ -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+ }
}
// Style full supported player
.example-video .player-video,
-.example-video .player-youtube,
-.example-video .player-vimeo {
+.example-video .player-youtube {
video,
- .player-video-wrapper {
+ iframe {
border-radius: @border-radius-base @border-radius-base 0 0;
}
- .player-video-wrapper {
+ iframe {
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
&-fullscreen,
&.fullscreen-active {
max-width: none;
- video,
.player-controls,
- .player-video-wrapper {
+ video,
+ iframe {
border-radius: 0;
}
- .player-video-wrapper {
+ iframe {
-webkit-mask-image: none;
}
}
diff --git a/docs/src/templates/controls.html b/docs/src/templates/controls.html
index 47ccbd55..fb82cf0d 100644
--- a/docs/src/templates/controls.html
+++ b/docs/src/templates/controls.html
@@ -40,23 +40,18 @@
</span>
</span>
<span class="player-controls-right">
- <input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">
- <label id="mute{id}" for="mute{id}">
+ <button type="button" data-player="mute">
<svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>
<svg><use xlink:href="#icon-volume"></use></svg>
<span class="sr-only">Toggle Mute</span>
- </label>
-
+ </button>
<label for="volume{id}" class="sr-only">Volume</label>
<input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume">
-
- <input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">
- <label for="captions{id}">
+ <button type="button" data-player="captions">
<svg class="icon-captions-on"><use xlink:href="#icon-captions-on"></use></svg>
<svg><use xlink:href="#icon-captions-off"></use></svg>
<span class="sr-only">Toggle Captions</span>
- </label>
-
+ </button>
<button type="button" data-player="fullscreen">
<svg class="icon-exit-fullscreen"><use xlink:href="#icon-exit-fullscreen"></use></svg>
<svg><use xlink:href="#icon-enter-fullscreen"></use></svg>
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-09 16:25:39 +0000