edit pages

This commit is contained in:
razusrest
2024-04-18 17:45:44 +05:45
parent f4e3b7c750
commit 46f1b89d3d
3923 changed files with 1838473 additions and 156 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,84 @@
/* global console, MediaElementPlayer, mejs */
(function ( window, $ ) {
// Reintegrate `plugins` since they don't exist in MEJS anymore; it won't affect anything in the player
if (mejs.plugins === undefined) {
mejs.plugins = {};
mejs.plugins.silverlight = [];
mejs.plugins.silverlight.push({
types: []
});
}
// Inclusion of old `HtmlMediaElementShim` if it doesn't exist
mejs.HtmlMediaElementShim = mejs.HtmlMediaElementShim || {
getTypeFromFile: mejs.Utils.getTypeFromFile
};
// Add missing global variables for backward compatibility
if (mejs.MediaFeatures === undefined) {
mejs.MediaFeatures = mejs.Features;
}
if (mejs.Utility === undefined) {
mejs.Utility = mejs.Utils;
}
/**
* Create missing variables and have default `classPrefix` overridden to avoid issues.
*
* `media` is now a fake wrapper needed to simplify manipulation of various media types,
* so in order to access the `video` or `audio` tag, use `media.originalNode` or `player.node`;
* `player.container` used to be jQuery but now is a HTML element, and many elements inside
* the player rely on it being a HTML now, so its conversion is difficult; however, a
* `player.$container` new variable has been added to be used as jQuery object
*/
var init = MediaElementPlayer.prototype.init;
MediaElementPlayer.prototype.init = function () {
this.options.classPrefix = 'mejs-';
this.$media = this.$node = $( this.node );
init.call( this );
};
var ready = MediaElementPlayer.prototype._meReady;
MediaElementPlayer.prototype._meReady = function () {
this.container = $( this.container) ;
this.controls = $( this.controls );
this.layers = $( this.layers );
ready.apply( this, arguments );
};
// Override method so certain elements can be called with jQuery
MediaElementPlayer.prototype.getElement = function ( el ) {
return $ !== undefined && el instanceof $ ? el[0] : el;
};
// Add jQuery ONLY to most of custom features' arguments for backward compatibility; default features rely 100%
// on the arguments being HTML elements to work properly
MediaElementPlayer.prototype.buildfeatures = function ( player, controls, layers, media ) {
var defaultFeatures = [
'playpause',
'current',
'progress',
'duration',
'tracks',
'volume',
'fullscreen'
];
for (var i = 0, total = this.options.features.length; i < total; i++) {
var feature = this.options.features[i];
if (this['build' + feature]) {
try {
// Use jQuery for non-default features
if (defaultFeatures.indexOf(feature) === -1) {
this['build' + feature]( player, $(controls), $(layers), media );
} else {
this['build' + feature]( player, controls, layers, media );
}
} catch (e) {
console.error( 'error building ' + feature, e );
}
}
}
};
})( window, jQuery );

View File

@@ -0,0 +1 @@
!function(a){void 0===mejs.plugins&&(mejs.plugins={},mejs.plugins.silverlight=[],mejs.plugins.silverlight.push({types:[]})),mejs.HtmlMediaElementShim=mejs.HtmlMediaElementShim||{getTypeFromFile:mejs.Utils.getTypeFromFile},void 0===mejs.MediaFeatures&&(mejs.MediaFeatures=mejs.Features),void 0===mejs.Utility&&(mejs.Utility=mejs.Utils);var e=MediaElementPlayer.prototype.init,t=(MediaElementPlayer.prototype.init=function(){this.options.classPrefix="mejs-",this.$media=this.$node=a(this.node),e.call(this)},MediaElementPlayer.prototype._meReady);MediaElementPlayer.prototype._meReady=function(){this.container=a(this.container),this.controls=a(this.controls),this.layers=a(this.layers),t.apply(this,arguments)},MediaElementPlayer.prototype.getElement=function(e){return void 0!==a&&e instanceof a?e[0]:e},MediaElementPlayer.prototype.buildfeatures=function(e,t,i,s){for(var l=["playpause","current","progress","duration","tracks","volume","fullscreen"],r=0,n=this.options.features.length;r<n;r++){var o=this.options.features[r];if(this["build"+o])try{-1===l.indexOf(o)?this["build"+o](e,a(t),a(i),s):this["build"+o](e,t,i,s)}catch(e){console.error("error building "+o,e)}}}}((window,jQuery));

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,774 @@
/* Accessibility: hide screen reader texts (and prefer "top" for RTL languages).
Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ */
.mejs-offscreen {
border: 0;
clip: rect( 1px, 1px, 1px, 1px );
-webkit-clip-path: inset( 50% );
clip-path: inset( 50% );
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal;
}
.mejs-container {
background: #000;
box-sizing: border-box;
font-family: 'Helvetica', Arial, serif;
position: relative;
text-align: left;
text-indent: 0;
vertical-align: top;
}
.mejs-container * {
box-sizing: border-box;
}
/* Hide native play button and control bar from iOS to favor plugin button */
.mejs-container video::-webkit-media-controls,
.mejs-container video::-webkit-media-controls-panel,
.mejs-container video::-webkit-media-controls-panel-container,
.mejs-container video::-webkit-media-controls-start-playback-button {
-webkit-appearance: none;
display: none !important;
}
.mejs-fill-container,
.mejs-fill-container .mejs-container {
height: 100%;
width: 100%;
}
.mejs-fill-container {
background: transparent;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.mejs-container:focus {
outline: none;
}
.mejs-iframe-overlay {
height: 100%;
position: absolute;
width: 100%;
}
.mejs-embed,
.mejs-embed body {
background: #000;
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
}
.mejs-fullscreen {
overflow: hidden !important;
}
.mejs-container-fullscreen {
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: 1000;
}
.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video {
height: 100% !important;
width: 100% !important;
}
/* Start: LAYERS */
.mejs-background {
left: 0;
position: absolute;
top: 0;
}
.mejs-mediaelement {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
.mejs-poster {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
left: 0;
position: absolute;
top: 0;
z-index: 1;
}
:root .mejs-poster-img {
display: none;
}
.mejs-poster-img {
border: 0;
padding: 0;
}
.mejs-overlay {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
left: 0;
position: absolute;
top: 0;
}
.mejs-layer {
z-index: 1;
}
.mejs-overlay-play {
cursor: pointer;
}
.mejs-overlay-button {
background: url('mejs-controls.svg') no-repeat;
background-position: 0 -39px;
height: 80px;
width: 80px;
}
.mejs-overlay:hover > .mejs-overlay-button {
background-position: -80px -39px;
}
.mejs-overlay-loading {
height: 80px;
width: 80px;
}
.mejs-overlay-loading-bg-img {
-webkit-animation: mejs-loading-spinner 1s linear infinite;
animation: mejs-loading-spinner 1s linear infinite;
background: transparent url('mejs-controls.svg') -160px -40px no-repeat;
display: block;
height: 80px;
width: 80px;
z-index: 1;
}
@-webkit-keyframes mejs-loading-spinner {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes mejs-loading-spinner {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* End: LAYERS */
/* Start: CONTROL BAR */
.mejs-controls {
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 40px;
left: 0;
list-style-type: none;
margin: 0;
padding: 0 10px;
position: absolute;
width: 100%;
z-index: 3;
}
.mejs-controls:not([style*='display: none']) {
background: rgba(255, 0, 0, 0.7);
background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.35));
background: linear-gradient(transparent, rgba(0, 0, 0, 0.35));
}
.mejs-button,
.mejs-time,
.mejs-time-rail {
font-size: 10px;
height: 40px;
line-height: 10px;
margin: 0;
width: 32px;
}
.mejs-button > button {
background: transparent url('mejs-controls.svg');
border: 0;
cursor: pointer;
display: block;
font-size: 0;
height: 20px;
line-height: 0;
margin: 10px 6px;
overflow: hidden;
padding: 0;
position: absolute;
text-decoration: none;
width: 20px;
}
/* :focus for accessibility */
.mejs-button > button:focus {
outline: dotted 1px #999;
}
.mejs-container-keyboard-inactive a,
.mejs-container-keyboard-inactive a:focus,
.mejs-container-keyboard-inactive button,
.mejs-container-keyboard-inactive button:focus,
.mejs-container-keyboard-inactive [role=slider],
.mejs-container-keyboard-inactive [role=slider]:focus {
outline: 0;
}
/* End: CONTROL BAR */
/* Start: Time (Current / Duration) */
.mejs-time {
box-sizing: content-box;
color: #fff;
font-size: 11px;
font-weight: bold;
height: 24px;
overflow: hidden;
padding: 16px 6px 0;
text-align: center;
width: auto;
}
/* End: Time (Current / Duration) */
/* Start: Play/Pause/Stop */
.mejs-play > button {
background-position: 0 0;
}
.mejs-pause > button {
background-position: -20px 0;
}
.mejs-replay > button {
background-position: -160px 0;
}
/* End: Play/Pause/Stop */
/* Start: Progress Bar */
.mejs-time-rail {
direction: ltr;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 40px;
margin: 0 10px;
padding-top: 10px;
position: relative;
}
.mejs-time-total,
.mejs-time-buffering,
.mejs-time-loaded,
.mejs-time-current,
.mejs-time-float,
.mejs-time-hovered,
.mejs-time-float-current,
.mejs-time-float-corner,
.mejs-time-marker {
border-radius: 2px;
cursor: pointer;
display: block;
height: 10px;
position: absolute;
}
.mejs-time-total {
background: rgba(255, 255, 255, 0.3);
margin: 5px 0 0;
width: 100%;
}
.mejs-time-buffering {
-webkit-animation: buffering-stripes 2s linear infinite;
animation: buffering-stripes 2s linear infinite;
background: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
background: linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
background-size: 15px 15px;
width: 100%;
}
@-webkit-keyframes buffering-stripes {
from {
background-position: 0 0;
}
to {
background-position: 30px 0;
}
}
@keyframes buffering-stripes {
from {
background-position: 0 0;
}
to {
background-position: 30px 0;
}
}
.mejs-time-loaded {
background: rgba(255, 255, 255, 0.3);
}
.mejs-time-current,
.mejs-time-handle-content {
background: rgba(255, 255, 255, 0.9);
}
.mejs-time-hovered {
background: rgba(255, 255, 255, 0.5);
z-index: 10;
}
.mejs-time-hovered.negative {
background: rgba(0, 0, 0, 0.2);
}
.mejs-time-current,
.mejs-time-buffering,
.mejs-time-loaded,
.mejs-time-hovered {
left: 0;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transition: 0.15s ease-in all;
transition: 0.15s ease-in all;
width: 100%;
}
.mejs-time-buffering {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
.mejs-time-hovered {
-webkit-transition: height 0.1s cubic-bezier(0.44, 0, 1, 1);
transition: height 0.1s cubic-bezier(0.44, 0, 1, 1);
}
.mejs-time-hovered.no-hover {
-webkit-transform: scaleX(0) !important;
-ms-transform: scaleX(0) !important;
transform: scaleX(0) !important;
}
.mejs-time-handle,
.mejs-time-handle-content {
border: 4px solid transparent;
cursor: pointer;
left: 0;
position: absolute;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
z-index: 11;
}
.mejs-time-handle-content {
border: 4px solid rgba(255, 255, 255, 0.9);
border-radius: 50%;
height: 10px;
left: -7px;
top: -4px;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
width: 10px;
}
.mejs-time-rail:hover .mejs-time-handle-content,
.mejs-time-rail .mejs-time-handle-content:focus,
.mejs-time-rail .mejs-time-handle-content:active {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.mejs-time-float {
background: #eee;
border: solid 1px #333;
bottom: 100%;
color: #111;
display: none;
height: 17px;
margin-bottom: 9px;
position: absolute;
text-align: center;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 36px;
}
.mejs-time-float-current {
display: block;
left: 0;
margin: 2px;
text-align: center;
width: 30px;
}
.mejs-time-float-corner {
border: solid 5px #eee;
border-color: #eee transparent transparent;
border-radius: 0;
display: block;
height: 0;
left: 50%;
line-height: 0;
position: absolute;
top: 100%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 0;
}
.mejs-long-video .mejs-time-float {
margin-left: -23px;
width: 64px;
}
.mejs-long-video .mejs-time-float-current {
width: 60px;
}
.mejs-broadcast {
color: #fff;
height: 10px;
position: absolute;
top: 15px;
width: 100%;
}
/* End: Progress Bar */
/* Start: Fullscreen */
.mejs-fullscreen-button > button {
background-position: -80px 0;
}
.mejs-unfullscreen > button {
background-position: -100px 0;
}
/* End: Fullscreen */
/* Start: Mute/Volume */
.mejs-mute > button {
background-position: -60px 0;
}
.mejs-unmute > button {
background-position: -40px 0;
}
.mejs-volume-button {
position: relative;
}
.mejs-volume-button > .mejs-volume-slider {
-webkit-backface-visibility: hidden;
background: rgba(50, 50, 50, 0.7);
border-radius: 0;
bottom: 100%;
display: none;
height: 115px;
left: 50%;
margin: 0;
position: absolute;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 25px;
z-index: 1;
}
.mejs-volume-button:hover {
border-radius: 0 0 4px 4px;
}
.mejs-volume-total {
background: rgba(255, 255, 255, 0.5);
height: 100px;
left: 50%;
margin: 0;
position: absolute;
top: 8px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 2px;
}
.mejs-volume-current {
background: rgba(255, 255, 255, 0.9);
left: 0;
margin: 0;
position: absolute;
width: 100%;
}
.mejs-volume-handle {
background: rgba(255, 255, 255, 0.9);
border-radius: 1px;
cursor: ns-resize;
height: 6px;
left: 50%;
position: absolute;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 16px;
}
.mejs-horizontal-volume-slider {
display: block;
height: 36px;
position: relative;
vertical-align: middle;
width: 56px;
}
.mejs-horizontal-volume-total {
background: rgba(50, 50, 50, 0.8);
border-radius: 2px;
font-size: 1px;
height: 8px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 16px;
width: 50px;
}
.mejs-horizontal-volume-current {
background: rgba(255, 255, 255, 0.8);
border-radius: 2px;
font-size: 1px;
height: 100%;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
}
.mejs-horizontal-volume-handle {
display: none;
}
/* End: Mute/Volume */
/* Start: Track (Captions and Chapters) */
.mejs-captions-button,
.mejs-chapters-button {
position: relative;
}
.mejs-captions-button > button {
background-position: -140px 0;
}
.mejs-chapters-button > button {
background-position: -180px 0;
}
.mejs-captions-button > .mejs-captions-selector,
.mejs-chapters-button > .mejs-chapters-selector {
background: rgba(50, 50, 50, 0.7);
border: solid 1px transparent;
border-radius: 0;
bottom: 100%;
margin-right: -43px;
overflow: hidden;
padding: 0;
position: absolute;
right: 50%;
visibility: visible;
width: 86px;
}
.mejs-chapters-button > .mejs-chapters-selector {
margin-right: -55px;
width: 110px;
}
.mejs-captions-selector-list,
.mejs-chapters-selector-list {
list-style-type: none !important;
margin: 0;
overflow: hidden;
padding: 0;
}
.mejs-captions-selector-list-item,
.mejs-chapters-selector-list-item {
color: #fff;
cursor: pointer;
display: block;
list-style-type: none !important;
margin: 0 0 6px;
overflow: hidden;
padding: 0;
}
.mejs-captions-selector-list-item:hover,
.mejs-chapters-selector-list-item:hover {
background-color: rgb(200, 200, 200) !important;
background-color: rgba(255, 255, 255, 0.4) !important;
}
.mejs-captions-selector-input,
.mejs-chapters-selector-input {
clear: both;
float: left;
left: -1000px;
margin: 3px 3px 0 5px;
position: absolute;
}
.mejs-captions-selector-label,
.mejs-chapters-selector-label {
cursor: pointer;
float: left;
font-size: 10px;
line-height: 15px;
padding: 4px 10px 0;
width: 100%;
}
.mejs-captions-selected,
.mejs-chapters-selected {
color: rgba(33, 248, 248, 1);
}
.mejs-captions-translations {
font-size: 10px;
margin: 0 0 5px;
}
.mejs-captions-layer {
bottom: 0;
color: #fff;
font-size: 16px;
left: 0;
line-height: 20px;
position: absolute;
text-align: center;
}
.mejs-captions-layer a {
color: #fff;
text-decoration: underline;
}
.mejs-captions-layer[lang=ar] {
font-size: 20px;
font-weight: normal;
}
.mejs-captions-position {
bottom: 15px;
left: 0;
position: absolute;
width: 100%;
}
.mejs-captions-position-hover {
bottom: 35px;
}
.mejs-captions-text,
.mejs-captions-text * {
background: rgba(20, 20, 20, 0.5);
box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5);
padding: 0;
white-space: pre-wrap;
}
.mejs-container.mejs-hide-cues video::-webkit-media-text-track-container {
display: none;
}
/* End: Track (Captions and Chapters) */
/* Start: Error */
.mejs-overlay-error {
position: relative;
}
.mejs-overlay-error > img {
left: 0;
max-width: 100%;
position: absolute;
top: 0;
z-index: -1;
}
.mejs-cannotplay,
.mejs-cannotplay a {
color: #fff;
font-size: 0.8em;
}
.mejs-cannotplay {
position: relative;
}
.mejs-cannotplay p,
.mejs-cannotplay a {
display: inline-block;
padding: 0 15px;
width: 100%;
}
/* End: Error */

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,774 @@
/* Accessibility: hide screen reader texts (and prefer "top" for RTL languages).
Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ */
.mejs__offscreen {
border: 0;
clip: rect( 1px, 1px, 1px, 1px );
-webkit-clip-path: inset( 50% );
clip-path: inset( 50% );
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal;
}
.mejs__container {
background: #000;
box-sizing: border-box;
font-family: 'Helvetica', Arial, serif;
position: relative;
text-align: left;
text-indent: 0;
vertical-align: top;
}
.mejs__container * {
box-sizing: border-box;
}
/* Hide native play button and control bar from iOS to favor plugin button */
.mejs__container video::-webkit-media-controls,
.mejs__container video::-webkit-media-controls-panel,
.mejs__container video::-webkit-media-controls-panel-container,
.mejs__container video::-webkit-media-controls-start-playback-button {
-webkit-appearance: none;
display: none !important;
}
.mejs__fill-container,
.mejs__fill-container .mejs__container {
height: 100%;
width: 100%;
}
.mejs__fill-container {
background: transparent;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.mejs__container:focus {
outline: none;
}
.mejs__iframe-overlay {
height: 100%;
position: absolute;
width: 100%;
}
.mejs__embed,
.mejs__embed body {
background: #000;
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
}
.mejs__fullscreen {
overflow: hidden !important;
}
.mejs__container-fullscreen {
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: 1000;
}
.mejs__container-fullscreen .mejs__mediaelement,
.mejs__container-fullscreen video {
height: 100% !important;
width: 100% !important;
}
/* Start: LAYERS */
.mejs__background {
left: 0;
position: absolute;
top: 0;
}
.mejs__mediaelement {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
.mejs__poster {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
left: 0;
position: absolute;
top: 0;
z-index: 1;
}
:root .mejs__poster-img {
display: none;
}
.mejs__poster-img {
border: 0;
padding: 0;
}
.mejs__overlay {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
left: 0;
position: absolute;
top: 0;
}
.mejs__layer {
z-index: 1;
}
.mejs__overlay-play {
cursor: pointer;
}
.mejs__overlay-button {
background: url('mejs-controls.svg') no-repeat;
background-position: 0 -39px;
height: 80px;
width: 80px;
}
.mejs__overlay:hover > .mejs__overlay-button {
background-position: -80px -39px;
}
.mejs__overlay-loading {
height: 80px;
width: 80px;
}
.mejs__overlay-loading-bg-img {
-webkit-animation: mejs__loading-spinner 1s linear infinite;
animation: mejs__loading-spinner 1s linear infinite;
background: transparent url('mejs-controls.svg') -160px -40px no-repeat;
display: block;
height: 80px;
width: 80px;
z-index: 1;
}
@-webkit-keyframes mejs__loading-spinner {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes mejs__loading-spinner {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* End: LAYERS */
/* Start: CONTROL BAR */
.mejs__controls {
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 40px;
left: 0;
list-style-type: none;
margin: 0;
padding: 0 10px;
position: absolute;
width: 100%;
z-index: 3;
}
.mejs__controls:not([style*='display: none']) {
background: rgba(255, 0, 0, 0.7);
background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.35));
background: linear-gradient(transparent, rgba(0, 0, 0, 0.35));
}
.mejs__button,
.mejs__time,
.mejs__time-rail {
font-size: 10px;
height: 40px;
line-height: 10px;
margin: 0;
width: 32px;
}
.mejs__button > button {
background: transparent url('mejs-controls.svg');
border: 0;
cursor: pointer;
display: block;
font-size: 0;
height: 20px;
line-height: 0;
margin: 10px 6px;
overflow: hidden;
padding: 0;
position: absolute;
text-decoration: none;
width: 20px;
}
/* :focus for accessibility */
.mejs__button > button:focus {
outline: dotted 1px #999;
}
.mejs__container-keyboard-inactive a,
.mejs__container-keyboard-inactive a:focus,
.mejs__container-keyboard-inactive button,
.mejs__container-keyboard-inactive button:focus,
.mejs__container-keyboard-inactive [role=slider],
.mejs__container-keyboard-inactive [role=slider]:focus {
outline: 0;
}
/* End: CONTROL BAR */
/* Start: Time (Current / Duration) */
.mejs__time {
box-sizing: content-box;
color: #fff;
font-size: 11px;
font-weight: bold;
height: 24px;
overflow: hidden;
padding: 16px 6px 0;
text-align: center;
width: auto;
}
/* End: Time (Current / Duration) */
/* Start: Play/Pause/Stop */
.mejs__play > button {
background-position: 0 0;
}
.mejs__pause > button {
background-position: -20px 0;
}
.mejs__replay > button {
background-position: -160px 0;
}
/* End: Play/Pause/Stop */
/* Start: Progress Bar */
.mejs__time-rail {
direction: ltr;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 40px;
margin: 0 10px;
padding-top: 10px;
position: relative;
}
.mejs__time-total,
.mejs__time-buffering,
.mejs__time-loaded,
.mejs__time-current,
.mejs__time-float,
.mejs__time-hovered,
.mejs__time-float-current,
.mejs__time-float-corner,
.mejs__time-marker {
border-radius: 2px;
cursor: pointer;
display: block;
height: 10px;
position: absolute;
}
.mejs__time-total {
background: rgba(255, 255, 255, 0.3);
margin: 5px 0 0;
width: 100%;
}
.mejs__time-buffering {
-webkit-animation: buffering-stripes 2s linear infinite;
animation: buffering-stripes 2s linear infinite;
background: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
background: linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
background-size: 15px 15px;
width: 100%;
}
@-webkit-keyframes buffering-stripes {
from {
background-position: 0 0;
}
to {
background-position: 30px 0;
}
}
@keyframes buffering-stripes {
from {
background-position: 0 0;
}
to {
background-position: 30px 0;
}
}
.mejs__time-loaded {
background: rgba(255, 255, 255, 0.3);
}
.mejs__time-current,
.mejs__time-handle-content {
background: rgba(255, 255, 255, 0.9);
}
.mejs__time-hovered {
background: rgba(255, 255, 255, 0.5);
z-index: 10;
}
.mejs__time-hovered.negative {
background: rgba(0, 0, 0, 0.2);
}
.mejs__time-current,
.mejs__time-buffering,
.mejs__time-loaded,
.mejs__time-hovered {
left: 0;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transition: 0.15s ease-in all;
transition: 0.15s ease-in all;
width: 100%;
}
.mejs__time-buffering {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
.mejs__time-hovered {
-webkit-transition: height 0.1s cubic-bezier(0.44, 0, 1, 1);
transition: height 0.1s cubic-bezier(0.44, 0, 1, 1);
}
.mejs__time-hovered.no-hover {
-webkit-transform: scaleX(0) !important;
-ms-transform: scaleX(0) !important;
transform: scaleX(0) !important;
}
.mejs__time-handle,
.mejs__time-handle-content {
border: 4px solid transparent;
cursor: pointer;
left: 0;
position: absolute;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
z-index: 11;
}
.mejs__time-handle-content {
border: 4px solid rgba(255, 255, 255, 0.9);
border-radius: 50%;
height: 10px;
left: -7px;
top: -4px;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
width: 10px;
}
.mejs__time-rail:hover .mejs__time-handle-content,
.mejs__time-rail .mejs__time-handle-content:focus,
.mejs__time-rail .mejs__time-handle-content:active {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.mejs__time-float {
background: #eee;
border: solid 1px #333;
bottom: 100%;
color: #111;
display: none;
height: 17px;
margin-bottom: 9px;
position: absolute;
text-align: center;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 36px;
}
.mejs__time-float-current {
display: block;
left: 0;
margin: 2px;
text-align: center;
width: 30px;
}
.mejs__time-float-corner {
border: solid 5px #eee;
border-color: #eee transparent transparent;
border-radius: 0;
display: block;
height: 0;
left: 50%;
line-height: 0;
position: absolute;
top: 100%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 0;
}
.mejs__long-video .mejs__time-float {
margin-left: -23px;
width: 64px;
}
.mejs__long-video .mejs__time-float-current {
width: 60px;
}
.mejs__broadcast {
color: #fff;
height: 10px;
position: absolute;
top: 15px;
width: 100%;
}
/* End: Progress Bar */
/* Start: Fullscreen */
.mejs__fullscreen-button > button {
background-position: -80px 0;
}
.mejs__unfullscreen > button {
background-position: -100px 0;
}
/* End: Fullscreen */
/* Start: Mute/Volume */
.mejs__mute > button {
background-position: -60px 0;
}
.mejs__unmute > button {
background-position: -40px 0;
}
.mejs__volume-button {
position: relative;
}
.mejs__volume-button > .mejs__volume-slider {
-webkit-backface-visibility: hidden;
background: rgba(50, 50, 50, 0.7);
border-radius: 0;
bottom: 100%;
display: none;
height: 115px;
left: 50%;
margin: 0;
position: absolute;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 25px;
z-index: 1;
}
.mejs__volume-button:hover {
border-radius: 0 0 4px 4px;
}
.mejs__volume-total {
background: rgba(255, 255, 255, 0.5);
height: 100px;
left: 50%;
margin: 0;
position: absolute;
top: 8px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 2px;
}
.mejs__volume-current {
background: rgba(255, 255, 255, 0.9);
left: 0;
margin: 0;
position: absolute;
width: 100%;
}
.mejs__volume-handle {
background: rgba(255, 255, 255, 0.9);
border-radius: 1px;
cursor: ns-resize;
height: 6px;
left: 50%;
position: absolute;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
width: 16px;
}
.mejs__horizontal-volume-slider {
display: block;
height: 36px;
position: relative;
vertical-align: middle;
width: 56px;
}
.mejs__horizontal-volume-total {
background: rgba(50, 50, 50, 0.8);
border-radius: 2px;
font-size: 1px;
height: 8px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 16px;
width: 50px;
}
.mejs__horizontal-volume-current {
background: rgba(255, 255, 255, 0.8);
border-radius: 2px;
font-size: 1px;
height: 100%;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
}
.mejs__horizontal-volume-handle {
display: none;
}
/* End: Mute/Volume */
/* Start: Track (Captions and Chapters) */
.mejs__captions-button,
.mejs__chapters-button {
position: relative;
}
.mejs__captions-button > button {
background-position: -140px 0;
}
.mejs__chapters-button > button {
background-position: -180px 0;
}
.mejs__captions-button > .mejs__captions-selector,
.mejs__chapters-button > .mejs__chapters-selector {
background: rgba(50, 50, 50, 0.7);
border: solid 1px transparent;
border-radius: 0;
bottom: 100%;
margin-right: -43px;
overflow: hidden;
padding: 0;
position: absolute;
right: 50%;
visibility: visible;
width: 86px;
}
.mejs__chapters-button > .mejs__chapters-selector {
margin-right: -55px;
width: 110px;
}
.mejs__captions-selector-list,
.mejs__chapters-selector-list {
list-style-type: none !important;
margin: 0;
overflow: hidden;
padding: 0;
}
.mejs__captions-selector-list-item,
.mejs__chapters-selector-list-item {
color: #fff;
cursor: pointer;
display: block;
list-style-type: none !important;
margin: 0 0 6px;
overflow: hidden;
padding: 0;
}
.mejs__captions-selector-list-item:hover,
.mejs__chapters-selector-list-item:hover {
background-color: rgb(200, 200, 200) !important;
background-color: rgba(255, 255, 255, 0.4) !important;
}
.mejs__captions-selector-input,
.mejs__chapters-selector-input {
clear: both;
float: left;
left: -1000px;
margin: 3px 3px 0 5px;
position: absolute;
}
.mejs__captions-selector-label,
.mejs__chapters-selector-label {
cursor: pointer;
float: left;
font-size: 10px;
line-height: 15px;
padding: 4px 10px 0;
width: 100%;
}
.mejs__captions-selected,
.mejs__chapters-selected {
color: rgba(33, 248, 248, 1);
}
.mejs__captions-translations {
font-size: 10px;
margin: 0 0 5px;
}
.mejs__captions-layer {
bottom: 0;
color: #fff;
font-size: 16px;
left: 0;
line-height: 20px;
position: absolute;
text-align: center;
}
.mejs__captions-layer a {
color: #fff;
text-decoration: underline;
}
.mejs__captions-layer[lang=ar] {
font-size: 20px;
font-weight: normal;
}
.mejs__captions-position {
bottom: 15px;
left: 0;
position: absolute;
width: 100%;
}
.mejs__captions-position-hover {
bottom: 35px;
}
.mejs__captions-text,
.mejs__captions-text * {
background: rgba(20, 20, 20, 0.5);
box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5);
padding: 0;
white-space: pre-wrap;
}
.mejs__container.mejs__hide-cues video::-webkit-media-text-track-container {
display: none;
}
/* End: Track (Captions and Chapters) */
/* Start: Error */
.mejs__overlay-error {
position: relative;
}
.mejs__overlay-error > img {
left: 0;
max-width: 100%;
position: absolute;
top: 0;
z-index: -1;
}
.mejs__cannotplay,
.mejs__cannotplay a {
color: #fff;
font-size: 0.8em;
}
.mejs__cannotplay {
position: relative;
}
.mejs__cannotplay p,
.mejs__cannotplay a {
display: inline-block;
padding: 0 15px;
width: 100%;
}
/* End: Error */

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="120" viewBox="0 0 400 120"><style>.st0{fill:#FFFFFF;width:16px;height:16px} .st1{fill:none;stroke:#FFFFFF;stroke-width:1.5;stroke-linecap:round;} .st2{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;} .st3{fill:none;stroke:#FFFFFF;} .st4{fill:#231F20;} .st5{opacity:0.75;fill:none;stroke:#FFFFFF;stroke-width:5;enable-background:new;} .st6{fill:none;stroke:#FFFFFF;stroke-width:5;} .st7{opacity:0.4;fill:#FFFFFF;enable-background:new;} .st8{opacity:0.6;fill:#FFFFFF;enable-background:new;} .st9{opacity:0.8;fill:#FFFFFF;enable-background:new;} .st10{opacity:0.9;fill:#FFFFFF;enable-background:new;} .st11{opacity:0.3;fill:#FFFFFF;enable-background:new;} .st12{opacity:0.5;fill:#FFFFFF;enable-background:new;} .st13{opacity:0.7;fill:#FFFFFF;enable-background:new;}</style><path class="st0" d="M16.5 8.5c.3.1.4.5.2.8-.1.1-.1.2-.2.2l-11.4 7c-.5.3-.8.1-.8-.5V2c0-.5.4-.8.8-.5l11.4 7z"/><path class="st0" d="M24 1h2.2c.6 0 1 .4 1 1v14c0 .6-.4 1-1 1H24c-.6 0-1-.4-1-1V2c0-.5.4-1 1-1zm9.8 0H36c.6 0 1 .4 1 1v14c0 .6-.4 1-1 1h-2.2c-.6 0-1-.4-1-1V2c0-.5.4-1 1-1z"/><path class="st0" d="M81 1.4c0-.6.4-1 1-1h5.4c.6 0 .7.3.3.7l-6 6c-.4.4-.7.3-.7-.3V1.4zm0 15.8c0 .6.4 1 1 1h5.4c.6 0 .7-.3.3-.7l-6-6c-.4-.4-.7-.3-.7.3v5.4zM98.8 1.4c0-.6-.4-1-1-1h-5.4c-.6 0-.7.3-.3.7l6 6c.4.4.7.3.7-.3V1.4zm0 15.8c0 .6-.4 1-1 1h-5.4c-.6 0-.7-.3-.3-.7l6-6c.4-.4.7-.3.7.3v5.4z"/><path class="st0" d="M112.7 5c0 .6.4 1 1 1h4.1c.6 0 .7-.3.3-.7L113.4.6c-.4-.4-.7-.3-.7.3V5zm-7.1 1c.6 0 1-.4 1-1V.9c0-.6-.3-.7-.7-.3l-4.7 4.7c-.4.4-.3.7.3.7h4.1zm1 7.1c0-.6-.4-1-1-1h-4.1c-.6 0-.7.3-.3.7l4.7 4.7c.4.4.7.3.7-.3v-4.1zm7.1-1c-.6 0-1 .4-1 1v4.1c0 .5.3.7.7.3l4.7-4.7c.4-.4.3-.7-.3-.7h-4.1z"/><path class="st0" d="M67 5.8c-.5.4-1.2.6-1.8.6H62c-.6 0-1 .4-1 1v5.7c0 .6.4 1 1 1h4.2c.3.2.5.4.8.6l3.5 2.6c.4.3.8.1.8-.4V3.5c0-.5-.4-.7-.8-.4L67 5.8z"/><path class="st1" d="M73.9 2.5s3.9-.8 3.9 7.7-3.9 7.8-3.9 7.8"/><path class="st1" d="M72.6 6.4s2.6-.4 2.6 3.8-2.6 3.9-2.6 3.9"/><path class="st0" d="M47 5.8c-.5.4-1.2.6-1.8.6H42c-.6 0-1 .4-1 1v5.7c0 .6.4 1 1 1h4.2c.3.2.5.4.8.6l3.5 2.6c.4.3.8.1.8-.4V3.5c0-.5-.4-.7-.8-.4L47 5.8z"/><path class="st2" d="M52.8 7l5.4 5.4m-5.4 0L58.2 7"/><path class="st3" d="M128.7 8.6c-6.2-4.2-6.5 7.8 0 3.9m6.5-3.9c-6.2-4.2-6.5 7.8 0 3.9"/><path class="st0" d="M122.2 3.4h15.7v13.1h-15.7V3.4zM120.8 2v15.7h18.3V2h-18.3z"/><path class="st0" d="M143.2 3h14c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2h-14c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2z"/><path class="st4" d="M146.4 13.8c-.8 0-1.6-.4-2.1-1-1.1-1.4-1-3.4.1-4.8.5-.6 2-1.7 4.6.2l-.6.8c-1.4-1-2.6-1.1-3.3-.3-.8 1-.8 2.4-.1 3.5.7.9 1.9.8 3.4-.1l.5.9c-.7.5-1.6.7-2.5.8zm7.5 0c-.8 0-1.6-.4-2.1-1-1.1-1.4-1-3.4.1-4.8.5-.6 2-1.7 4.6.2l-.5.8c-1.4-1-2.6-1.1-3.3-.3-.8 1-.8 2.4-.1 3.5.7.9 1.9.8 3.4-.1l.5.9c-.8.5-1.7.7-2.6.8z"/><path class="st0" d="M60.3 77c.6.2.8.8.6 1.4-.1.3-.3.5-.6.6L30 96.5c-1 .6-1.7.1-1.7-1v-35c0-1.1.8-1.5 1.7-1L60.3 77z"/><path class="st5" d="M2.5 79c0-20.7 16.8-37.5 37.5-37.5S77.5 58.3 77.5 79 60.7 116.5 40 116.5 2.5 99.7 2.5 79z"/><path class="st0" d="M140.3 77c.6.2.8.8.6 1.4-.1.3-.3.5-.6.6L110 96.5c-1 .6-1.7.1-1.7-1v-35c0-1.1.8-1.5 1.7-1L140.3 77z"/><path class="st6" d="M82.5 79c0-20.7 16.8-37.5 37.5-37.5s37.5 16.8 37.5 37.5-16.8 37.5-37.5 37.5S82.5 99.7 82.5 79z"/><circle class="st0" cx="201.9" cy="47.1" r="8.1"/><circle class="st7" cx="233.9" cy="79" r="5"/><circle class="st8" cx="201.9" cy="110.9" r="6"/><circle class="st9" cx="170.1" cy="79" r="7"/><circle class="st10" cx="178.2" cy="56.3" r="7.5"/><circle class="st11" cx="226.3" cy="56.1" r="4.5"/><circle class="st12" cx="225.8" cy="102.8" r="5.5"/><circle class="st13" cx="178.2" cy="102.8" r="6.5"/><path class="st0" d="M178 9.4c0 .4-.4.7-.9.7-.1 0-.2 0-.2-.1L172 8.2c-.5-.2-.6-.6-.1-.8l6.2-3.6c.5-.3.8-.1.7.5l-.8 5.1z"/><path class="st0" d="M169.4 15.9c-1 0-2-.2-2.9-.7-2-1-3.2-3-3.2-5.2.1-3.4 2.9-6 6.3-6 2.5.1 4.8 1.7 5.6 4.1l.1-.1 2.1 1.1c-.6-4.4-4.7-7.5-9.1-6.9-3.9.6-6.9 3.9-7 7.9 0 2.9 1.7 5.6 4.3 7 1.2.6 2.5.9 3.8 1 2.6 0 5-1.2 6.6-3.3l-1.8-.9c-1.2 1.2-3 2-4.8 2z"/><path class="st0" d="M183.4 3.2c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5-1.5-.7-1.5-1.5c0-.9.7-1.5 1.5-1.5zm5.1 0h8.5c.9 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-8.5c-.9 0-1.5-.7-1.5-1.5-.1-.9.6-1.5 1.5-1.5zm-5.1 5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5-1.5-.7-1.5-1.5c0-.9.7-1.5 1.5-1.5zm5.1 0h8.5c.9 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-8.5c-.9 0-1.5-.7-1.5-1.5-.1-.9.6-1.5 1.5-1.5zm-5.1 5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5-1.5-.7-1.5-1.5c0-.9.7-1.5 1.5-1.5zm5.1 0h8.5c.9 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-8.5c-.9 0-1.5-.7-1.5-1.5-.1-.9.6-1.5 1.5-1.5z"/></svg>

After

Width:  |  Height:  |  Size: 4.5 KiB

View File

@@ -0,0 +1,432 @@
/*!
* MediaElement.js
* http://www.mediaelementjs.com/
*
* Wrapper that mimics native HTML5 MediaElement (audio and video)
* using a variety of technologies (pure JavaScript, Flash, iframe)
*
* Copyright 2010-2017, John Dyer (http://j.hn/)
* License: MIT
*
*/(function(){function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}return e})()({1:[function(_dereq_,module,exports){
'use strict';
var VimeoApi = {
promise: null,
load: function load(settings) {
if (typeof Vimeo !== 'undefined') {
VimeoApi._createPlayer(settings);
} else {
VimeoApi.promise = VimeoApi.promise || mejs.Utils.loadScript('https://player.vimeo.com/api/player.js');
VimeoApi.promise.then(function () {
VimeoApi._createPlayer(settings);
});
}
},
_createPlayer: function _createPlayer(settings) {
var player = new Vimeo.Player(settings.iframe);
window['__ready__' + settings.id](player);
},
getVimeoId: function getVimeoId(url) {
if (url == null) {
return null;
}
var parts = url.split('?');
url = parts[0];
var playerLinkMatch = url.match(/https:\/\/player.vimeo.com\/video\/(\d+)$/);
if (playerLinkMatch) {
return parseInt(playerLinkMatch[1], 10);
}
var vimeoLinkMatch = url.match(/https:\/\/vimeo.com\/(\d+)$/);
if (vimeoLinkMatch) {
return parseInt(vimeoLinkMatch[1], 10);
}
var privateVimeoLinkMatch = url.match(/https:\/\/vimeo.com\/(\d+)\/\w+$/);
if (privateVimeoLinkMatch) {
return parseInt(privateVimeoLinkMatch[1], 10);
}
return NaN;
}
};
var vimeoIframeRenderer = {
name: 'vimeo_iframe',
options: {
prefix: 'vimeo_iframe'
},
canPlayType: function canPlayType(type) {
return ~['video/vimeo', 'video/x-vimeo'].indexOf(type.toLowerCase());
},
create: function create(mediaElement, options, mediaFiles) {
var apiStack = [],
vimeo = {},
readyState = 4;
var paused = true,
volume = 1,
oldVolume = volume,
currentTime = 0,
bufferedTime = 0,
ended = false,
duration = 0,
vimeoPlayer = null,
url = '';
vimeo.options = options;
vimeo.id = mediaElement.id + '_' + options.prefix;
vimeo.mediaElement = mediaElement;
var errorHandler = function errorHandler(error) {
mediaElement.generateError('Code ' + error.name + ': ' + error.message, mediaFiles);
};
var props = mejs.html5media.properties,
assignGettersSetters = function assignGettersSetters(propName) {
var capName = '' + propName.substring(0, 1).toUpperCase() + propName.substring(1);
vimeo['get' + capName] = function () {
if (vimeoPlayer !== null) {
var value = null;
switch (propName) {
case 'currentTime':
return currentTime;
case 'duration':
return duration;
case 'volume':
return volume;
case 'muted':
return volume === 0;
case 'paused':
return paused;
case 'ended':
return ended;
case 'src':
vimeoPlayer.getVideoUrl().then(function (_url) {
url = _url;
}).catch(function (error) {
return errorHandler(error);
});
return url;
case 'buffered':
return {
start: function start() {
return 0;
},
end: function end() {
return bufferedTime * duration;
},
length: 1
};
case 'readyState':
return readyState;
}
return value;
} else {
return null;
}
};
vimeo['set' + capName] = function (value) {
if (vimeoPlayer !== null) {
switch (propName) {
case 'src':
var _url2 = typeof value === 'string' ? value : value[0].src,
videoId = VimeoApi.getVimeoId(_url2);
vimeoPlayer.loadVideo(videoId).then(function () {
if (mediaElement.originalNode.autoplay) {
vimeoPlayer.play();
}
}).catch(function (error) {
return errorHandler(error);
});
break;
case 'currentTime':
vimeoPlayer.setCurrentTime(value).then(function () {
currentTime = value;
setTimeout(function () {
var event = mejs.Utils.createEvent('timeupdate', vimeo);
mediaElement.dispatchEvent(event);
}, 50);
}).catch(function (error) {
return errorHandler(error);
});
break;
case 'volume':
vimeoPlayer.setVolume(value).then(function () {
volume = value;
oldVolume = volume;
setTimeout(function () {
var event = mejs.Utils.createEvent('volumechange', vimeo);
mediaElement.dispatchEvent(event);
}, 50);
}).catch(function (error) {
return errorHandler(error);
});
break;
case 'loop':
vimeoPlayer.setLoop(value).catch(function (error) {
return errorHandler(error);
});
break;
case 'muted':
if (value) {
vimeoPlayer.setVolume(0).then(function () {
volume = 0;
setTimeout(function () {
var event = mejs.Utils.createEvent('volumechange', vimeo);
mediaElement.dispatchEvent(event);
}, 50);
}).catch(function (error) {
return errorHandler(error);
});
} else {
vimeoPlayer.setVolume(oldVolume).then(function () {
volume = oldVolume;
setTimeout(function () {
var event = mejs.Utils.createEvent('volumechange', vimeo);
mediaElement.dispatchEvent(event);
}, 50);
}).catch(function (error) {
return errorHandler(error);
});
}
break;
case 'readyState':
var event = mejs.Utils.createEvent('canplay', vimeo);
mediaElement.dispatchEvent(event);
break;
default:
break;
}
} else {
apiStack.push({ type: 'set', propName: propName, value: value });
}
};
};
for (var i = 0, total = props.length; i < total; i++) {
assignGettersSetters(props[i]);
}
var methods = mejs.html5media.methods,
assignMethods = function assignMethods(methodName) {
vimeo[methodName] = function () {
if (vimeoPlayer !== null) {
switch (methodName) {
case 'play':
paused = false;
return vimeoPlayer.play();
case 'pause':
paused = true;
return vimeoPlayer.pause();
case 'load':
return null;
}
} else {
apiStack.push({ type: 'call', methodName: methodName });
}
};
};
for (var _i = 0, _total = methods.length; _i < _total; _i++) {
assignMethods(methods[_i]);
}
window['__ready__' + vimeo.id] = function (_vimeoPlayer) {
mediaElement.vimeoPlayer = vimeoPlayer = _vimeoPlayer;
if (apiStack.length) {
for (var _i2 = 0, _total2 = apiStack.length; _i2 < _total2; _i2++) {
var stackItem = apiStack[_i2];
if (stackItem.type === 'set') {
var propName = stackItem.propName,
capName = '' + propName.substring(0, 1).toUpperCase() + propName.substring(1);
vimeo['set' + capName](stackItem.value);
} else if (stackItem.type === 'call') {
vimeo[stackItem.methodName]();
}
}
}
if (mediaElement.originalNode.muted) {
vimeoPlayer.setVolume(0);
volume = 0;
}
var vimeoIframe = document.getElementById(vimeo.id);
var events = void 0;
events = ['mouseover', 'mouseout'];
var assignEvents = function assignEvents(e) {
var event = mejs.Utils.createEvent(e.type, vimeo);
mediaElement.dispatchEvent(event);
};
for (var _i3 = 0, _total3 = events.length; _i3 < _total3; _i3++) {
vimeoIframe.addEventListener(events[_i3], assignEvents, false);
}
vimeoPlayer.on('loaded', function () {
vimeoPlayer.getDuration().then(function (loadProgress) {
duration = loadProgress;
if (duration > 0) {
bufferedTime = duration * loadProgress;
if (mediaElement.originalNode.autoplay) {
paused = false;
ended = false;
var event = mejs.Utils.createEvent('play', vimeo);
mediaElement.dispatchEvent(event);
}
}
}).catch(function (error) {
errorHandler(error, vimeo);
});
});
vimeoPlayer.on('progress', function () {
vimeoPlayer.getDuration().then(function (loadProgress) {
duration = loadProgress;
if (duration > 0) {
bufferedTime = duration * loadProgress;
if (mediaElement.originalNode.autoplay) {
var initEvent = mejs.Utils.createEvent('play', vimeo);
mediaElement.dispatchEvent(initEvent);
var playingEvent = mejs.Utils.createEvent('playing', vimeo);
mediaElement.dispatchEvent(playingEvent);
}
}
var event = mejs.Utils.createEvent('progress', vimeo);
mediaElement.dispatchEvent(event);
}).catch(function (error) {
return errorHandler(error);
});
});
vimeoPlayer.on('timeupdate', function () {
vimeoPlayer.getCurrentTime().then(function (seconds) {
currentTime = seconds;
var event = mejs.Utils.createEvent('timeupdate', vimeo);
mediaElement.dispatchEvent(event);
}).catch(function (error) {
return errorHandler(error);
});
});
vimeoPlayer.on('play', function () {
paused = false;
ended = false;
var event = mejs.Utils.createEvent('play', vimeo);
mediaElement.dispatchEvent(event);
var playingEvent = mejs.Utils.createEvent('playing', vimeo);
mediaElement.dispatchEvent(playingEvent);
});
vimeoPlayer.on('pause', function () {
paused = true;
ended = false;
var event = mejs.Utils.createEvent('pause', vimeo);
mediaElement.dispatchEvent(event);
});
vimeoPlayer.on('ended', function () {
paused = false;
ended = true;
var event = mejs.Utils.createEvent('ended', vimeo);
mediaElement.dispatchEvent(event);
});
events = ['rendererready', 'loadedmetadata', 'loadeddata', 'canplay'];
for (var _i4 = 0, _total4 = events.length; _i4 < _total4; _i4++) {
var event = mejs.Utils.createEvent(events[_i4], vimeo);
mediaElement.dispatchEvent(event);
}
};
var height = mediaElement.originalNode.height,
width = mediaElement.originalNode.width,
vimeoContainer = document.createElement('iframe'),
standardUrl = 'https://player.vimeo.com/video/' + VimeoApi.getVimeoId(mediaFiles[0].src);
var queryArgs = ~mediaFiles[0].src.indexOf('?') ? '?' + mediaFiles[0].src.slice(mediaFiles[0].src.indexOf('?') + 1) : '';
var args = [];
if (mediaElement.originalNode.autoplay && queryArgs.indexOf('autoplay') === -1) {
args.push('autoplay=1');
}
if (mediaElement.originalNode.loop && queryArgs.indexOf('loop') === -1) {
args.push('loop=1');
}
queryArgs = '' + queryArgs + (queryArgs ? '&' : '?') + args.join('&');
vimeoContainer.setAttribute('id', vimeo.id);
vimeoContainer.setAttribute('width', width);
vimeoContainer.setAttribute('height', height);
vimeoContainer.setAttribute('frameBorder', '0');
vimeoContainer.setAttribute('src', '' + standardUrl + queryArgs);
vimeoContainer.setAttribute('webkitallowfullscreen', 'true');
vimeoContainer.setAttribute('mozallowfullscreen', 'true');
vimeoContainer.setAttribute('allowfullscreen', 'true');
vimeoContainer.setAttribute('allow', 'autoplay');
mediaElement.originalNode.parentNode.insertBefore(vimeoContainer, mediaElement.originalNode);
mediaElement.originalNode.style.display = 'none';
VimeoApi.load({
iframe: vimeoContainer,
id: vimeo.id
});
vimeo.hide = function () {
vimeo.pause();
if (vimeoPlayer) {
vimeoContainer.style.display = 'none';
}
};
vimeo.setSize = function (width, height) {
vimeoContainer.setAttribute('width', width);
vimeoContainer.setAttribute('height', height);
};
vimeo.show = function () {
if (vimeoPlayer) {
vimeoContainer.style.display = '';
}
};
vimeo.destroy = function () {};
return vimeo;
}
};
mejs.Utils.typeChecks.push(function (url) {
return (/(\/\/player\.vimeo|vimeo\.com)/i.test(url) ? 'video/x-vimeo' : null
);
});
mejs.Renderers.add(vimeoIframeRenderer);
},{}]},{},[1]);

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,293 @@
.mejs-container {
clear: both;
max-width: 100%;
}
.mejs-container * {
font-family: Helvetica, Arial;
}
.mejs-container,
.mejs-embed,
.mejs-embed body,
.mejs-container .mejs-controls {
background: #222;
}
.mejs-time {
font-weight: normal;
word-wrap: normal;
}
.mejs-controls a.mejs-horizontal-volume-slider {
display: table;
}
.mejs-controls .mejs-time-rail .mejs-time-loaded,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
background: #fff;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
background: #0073aa;
}
.mejs-controls .mejs-time-rail .mejs-time-total,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
background: rgba(255, 255, 255, .33);
}
.mejs-controls .mejs-time-rail span,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
border-radius: 0;
}
.mejs-overlay-loading {
background: transparent;
}
/* Override theme styles that may conflict with controls. */
.mejs-controls button:hover {
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.me-cannotplay {
width: auto !important;
}
.media-embed-details .wp-audio-shortcode {
display: inline-block;
max-width: 400px;
}
.audio-details .embed-media-settings {
overflow: visible;
}
.media-embed-details .embed-media-settings .setting span:not(.button-group) {
max-width: 400px; /* Back-compat for pre-5.3 */
width: auto; /* Back-compat for pre-5.3 */
}
.media-embed-details .embed-media-settings .checkbox-setting span {
display: inline-block;
}
.media-embed-details .embed-media-settings {
padding-top: 0;
top: 28px;
}
.media-embed-details .instructions {
padding: 16px 0;
max-width: 600px;
}
.media-embed-details .setting p,
.media-embed-details .setting .remove-setting {
color: #a00;
font-size: 10px;
text-transform: uppercase;
}
.media-embed-details .setting .remove-setting {
padding: 5px 0;
}
.media-embed-details .setting a:hover {
color: #dc3232;
}
.media-embed-details .embed-media-settings .checkbox-setting {
float: none;
margin: 0 0 10px;
}
.wp-video {
max-width: 100%;
height: auto;
}
.wp_attachment_holder .wp-video,
.wp_attachment_holder .wp-audio-shortcode {
margin-top: 18px;
}
video.wp-video-shortcode,
.wp-video-shortcode video {
max-width: 100%;
display: inline-block;
}
.video-details .wp-video-holder {
width: 100%;
max-width: 640px;
}
.wp-playlist {
border: 1px solid #ccc;
padding: 10px;
margin: 12px 0 18px;
font-size: 14px;
line-height: 1.5;
}
.wp-admin .wp-playlist {
margin: 0 0 18px;
}
.wp-playlist video {
display: inline-block;
max-width: 100%;
}
.wp-playlist audio {
display: none;
max-width: 100%;
width: 400px;
}
.wp-playlist .mejs-container {
margin: 0;
max-width: 100%;
}
.wp-playlist .mejs-controls .mejs-button button {
outline: 0;
}
.wp-playlist-light {
background: #fff;
color: #000;
}
.wp-playlist-dark {
color: #fff;
background: #000;
}
.wp-playlist-caption {
display: block;
max-width: 88%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
line-height: 1.5;
}
.wp-playlist-item .wp-playlist-caption {
text-decoration: none;
color: #000;
max-width: -webkit-calc(100% - 40px);
max-width: calc(100% - 40px);
}
.wp-playlist-item-meta {
display: block;
font-size: 14px;
line-height: 1.5;
}
.wp-playlist-item-title {
font-size: 14px;
line-height: 1.5;
}
.wp-playlist-item-album {
font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wp-playlist-item-artist {
font-size: 12px;
text-transform: uppercase;
}
.wp-playlist-item-length {
position: absolute;
right: 3px;
top: 0;
font-size: 14px;
line-height: 1.5;
}
.rtl .wp-playlist-item-length {
left: 3px;
right: auto;
}
.wp-playlist-tracks {
margin-top: 10px;
}
.wp-playlist-item {
position: relative;
cursor: pointer;
padding: 0 3px;
border-bottom: 1px solid #ccc;
}
.wp-playlist-item:last-child {
border-bottom: 0;
}
.wp-playlist-light .wp-playlist-caption {
color: #333;
}
.wp-playlist-dark .wp-playlist-caption {
color: #ddd;
}
.wp-playlist-playing {
font-weight: bold;
background: #f7f7f7;
}
.wp-playlist-light .wp-playlist-playing {
background: #fff;
color: #000;
}
.wp-playlist-dark .wp-playlist-playing {
background: #000;
color: #fff;
}
.wp-playlist-current-item {
overflow: hidden;
margin-bottom: 10px;
height: 60px;
}
.wp-playlist .wp-playlist-current-item img {
float: left;
max-width: 60px;
height: auto;
margin-right: 10px;
padding: 0;
border: 0;
}
.rtl .wp-playlist .wp-playlist-current-item img {
float: right;
margin-left: 10px;
margin-right: 0;
}
.wp-playlist-current-item .wp-playlist-item-title,
.wp-playlist-current-item .wp-playlist-item-artist {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wp-audio-playlist .me-cannotplay span {
padding: 5px 15px;
}

View File

@@ -0,0 +1,100 @@
/* global _wpmejsSettings, mejsL10n */
(function( window, $ ) {
window.wp = window.wp || {};
function wpMediaElement() {
var settings = {};
/**
* Initialize media elements.
*
* Ensures media elements that have already been initialized won't be
* processed again.
*
* @memberOf wp.mediaelement
*
* @since 4.4.0
*
* @return {void}
*/
function initialize() {
var selectors = [];
if ( typeof _wpmejsSettings !== 'undefined' ) {
settings = $.extend( true, {}, _wpmejsSettings );
}
settings.classPrefix = 'mejs-';
settings.success = settings.success || function ( mejs ) {
var autoplay, loop;
if ( mejs.rendererName && -1 !== mejs.rendererName.indexOf( 'flash' ) ) {
autoplay = mejs.attributes.autoplay && 'false' !== mejs.attributes.autoplay;
loop = mejs.attributes.loop && 'false' !== mejs.attributes.loop;
if ( autoplay ) {
mejs.addEventListener( 'canplay', function() {
mejs.play();
}, false );
}
if ( loop ) {
mejs.addEventListener( 'ended', function() {
mejs.play();
}, false );
}
}
};
/**
* Custom error handler.
*
* Sets up a custom error handler in case a video render fails, and provides a download
* link as the fallback.
*
* @since 4.9.3
*
* @param {object} media The wrapper that mimics all the native events/properties/methods for all renderers.
* @param {object} node The original HTML video, audio, or iframe tag where the media was loaded.
* @return {string}
*/
settings.customError = function ( media, node ) {
// Make sure we only fall back to a download link for flash files.
if ( -1 !== media.rendererName.indexOf( 'flash' ) || -1 !== media.rendererName.indexOf( 'flv' ) ) {
return '<a href="' + node.src + '">' + mejsL10n.strings['mejs.download-file'] + '</a>';
}
};
if ( 'undefined' === typeof settings.videoShortcodeLibrary || 'mediaelement' === settings.videoShortcodeLibrary ) {
selectors.push( '.wp-video-shortcode' );
}
if ( 'undefined' === typeof settings.audioShortcodeLibrary || 'mediaelement' === settings.audioShortcodeLibrary ) {
selectors.push( '.wp-audio-shortcode' );
}
if ( ! selectors.length ) {
return;
}
// Only initialize new media elements.
$( selectors.join( ', ' ) )
.not( '.mejs-container' )
.filter(function () {
return ! $( this ).parent().hasClass( 'mejs-mediaelement' );
})
.mediaelementplayer( settings );
}
return {
initialize: initialize
};
}
/**
* @namespace wp.mediaelement
* @memberOf wp
*/
window.wp.mediaelement = new wpMediaElement();
$( window.wp.mediaelement.initialize );
})( window, jQuery );

View File

@@ -0,0 +1 @@
.mejs-container{clear:both;max-width:100%}.mejs-container *{font-family:Helvetica,Arial}.mejs-container,.mejs-container .mejs-controls,.mejs-embed,.mejs-embed body{background:#222}.mejs-time{font-weight:400;word-wrap:normal}.mejs-controls a.mejs-horizontal-volume-slider{display:table}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,.mejs-controls .mejs-time-rail .mejs-time-loaded{background:#fff}.mejs-controls .mejs-time-rail .mejs-time-current{background:#0073aa}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,.mejs-controls .mejs-time-rail .mejs-time-total{background:rgba(255,255,255,.33)}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,.mejs-controls .mejs-time-rail span{border-radius:0}.mejs-overlay-loading{background:0 0}.mejs-controls button:hover{border:none;-webkit-box-shadow:none;box-shadow:none}.me-cannotplay{width:auto!important}.media-embed-details .wp-audio-shortcode{display:inline-block;max-width:400px}.audio-details .embed-media-settings{overflow:visible}.media-embed-details .embed-media-settings .setting span:not(.button-group){max-width:400px;width:auto}.media-embed-details .embed-media-settings .checkbox-setting span{display:inline-block}.media-embed-details .embed-media-settings{padding-top:0;top:28px}.media-embed-details .instructions{padding:16px 0;max-width:600px}.media-embed-details .setting .remove-setting,.media-embed-details .setting p{color:#a00;font-size:10px;text-transform:uppercase}.media-embed-details .setting .remove-setting{padding:5px 0}.media-embed-details .setting a:hover{color:#dc3232}.media-embed-details .embed-media-settings .checkbox-setting{float:none;margin:0 0 10px}.wp-video{max-width:100%;height:auto}.wp_attachment_holder .wp-audio-shortcode,.wp_attachment_holder .wp-video{margin-top:18px}.wp-video-shortcode video,video.wp-video-shortcode{max-width:100%;display:inline-block}.video-details .wp-video-holder{width:100%;max-width:640px}.wp-playlist{border:1px solid #ccc;padding:10px;margin:12px 0 18px;font-size:14px;line-height:1.5}.wp-admin .wp-playlist{margin:0 0 18px}.wp-playlist video{display:inline-block;max-width:100%}.wp-playlist audio{display:none;max-width:100%;width:400px}.wp-playlist .mejs-container{margin:0;max-width:100%}.wp-playlist .mejs-controls .mejs-button button{outline:0}.wp-playlist-light{background:#fff;color:#000}.wp-playlist-dark{color:#fff;background:#000}.wp-playlist-caption{display:block;max-width:88%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:1.5}.wp-playlist-item .wp-playlist-caption{text-decoration:none;color:#000;max-width:-webkit-calc(100% - 40px);max-width:calc(100% - 40px)}.wp-playlist-item-meta{display:block;font-size:14px;line-height:1.5}.wp-playlist-item-title{font-size:14px;line-height:1.5}.wp-playlist-item-album{font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wp-playlist-item-artist{font-size:12px;text-transform:uppercase}.wp-playlist-item-length{position:absolute;right:3px;top:0;font-size:14px;line-height:1.5}.rtl .wp-playlist-item-length{left:3px;right:auto}.wp-playlist-tracks{margin-top:10px}.wp-playlist-item{position:relative;cursor:pointer;padding:0 3px;border-bottom:1px solid #ccc}.wp-playlist-item:last-child{border-bottom:0}.wp-playlist-light .wp-playlist-caption{color:#333}.wp-playlist-dark .wp-playlist-caption{color:#ddd}.wp-playlist-playing{font-weight:700;background:#f7f7f7}.wp-playlist-light .wp-playlist-playing{background:#fff;color:#000}.wp-playlist-dark .wp-playlist-playing{background:#000;color:#fff}.wp-playlist-current-item{overflow:hidden;margin-bottom:10px;height:60px}.wp-playlist .wp-playlist-current-item img{float:left;max-width:60px;height:auto;margin-right:10px;padding:0;border:0}.rtl .wp-playlist .wp-playlist-current-item img{float:right;margin-left:10px;margin-right:0}.wp-playlist-current-item .wp-playlist-item-artist,.wp-playlist-current-item .wp-playlist-item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wp-audio-playlist .me-cannotplay span{padding:5px 15px}

View File

@@ -0,0 +1 @@
!function(e,n){e.wp=e.wp||{},e.wp.mediaelement=new function(){var t={};return{initialize:function(){var e=[];(t="undefined"!=typeof _wpmejsSettings?n.extend(!0,{},_wpmejsSettings):t).classPrefix="mejs-",t.success=t.success||function(e){var t,n;e.rendererName&&-1!==e.rendererName.indexOf("flash")&&(t=e.attributes.autoplay&&"false"!==e.attributes.autoplay,n=e.attributes.loop&&"false"!==e.attributes.loop,t&&e.addEventListener("canplay",function(){e.play()},!1),n)&&e.addEventListener("ended",function(){e.play()},!1)},t.customError=function(e,t){if(-1!==e.rendererName.indexOf("flash")||-1!==e.rendererName.indexOf("flv"))return'<a href="'+t.src+'">'+mejsL10n.strings["mejs.download-file"]+"</a>"},void 0!==t.videoShortcodeLibrary&&"mediaelement"!==t.videoShortcodeLibrary||e.push(".wp-video-shortcode"),void 0!==t.audioShortcodeLibrary&&"mediaelement"!==t.audioShortcodeLibrary||e.push(".wp-audio-shortcode"),e.length&&n(e.join(", ")).not(".mejs-container").filter(function(){return!n(this).parent().hasClass("mejs-mediaelement")}).mediaelementplayer(t)}}},n(e.wp.mediaelement.initialize)}(window,jQuery);

View File

@@ -0,0 +1,205 @@
/* global _wpmejsSettings, MediaElementPlayer */
(function ($, _, Backbone) {
'use strict';
/** @namespace wp */
window.wp = window.wp || {};
var WPPlaylistView = Backbone.View.extend(/** @lends WPPlaylistView.prototype */{
/**
* @constructs
*
* @param {Object} options The options to create this playlist view with.
* @param {Object} options.metadata The metadata
*/
initialize : function (options) {
this.index = 0;
this.settings = {};
this.data = options.metadata || $.parseJSON( this.$('script.wp-playlist-script').html() );
this.playerNode = this.$( this.data.type );
this.tracks = new Backbone.Collection( this.data.tracks );
this.current = this.tracks.first();
if ( 'audio' === this.data.type ) {
this.currentTemplate = wp.template( 'wp-playlist-current-item' );
this.currentNode = this.$( '.wp-playlist-current-item' );
}
this.renderCurrent();
if ( this.data.tracklist ) {
this.itemTemplate = wp.template( 'wp-playlist-item' );
this.playingClass = 'wp-playlist-playing';
this.renderTracks();
}
this.playerNode.attr( 'src', this.current.get( 'src' ) );
_.bindAll( this, 'bindPlayer', 'bindResetPlayer', 'setPlayer', 'ended', 'clickTrack' );
if ( ! _.isUndefined( window._wpmejsSettings ) ) {
this.settings = _.clone( _wpmejsSettings );
}
this.settings.success = this.bindPlayer;
this.setPlayer();
},
bindPlayer : function (mejs) {
this.mejs = mejs;
this.mejs.addEventListener( 'ended', this.ended );
},
bindResetPlayer : function (mejs) {
this.bindPlayer( mejs );
this.playCurrentSrc();
},
setPlayer: function (force) {
if ( this.player ) {
this.player.pause();
this.player.remove();
this.playerNode = this.$( this.data.type );
}
if (force) {
this.playerNode.attr( 'src', this.current.get( 'src' ) );
this.settings.success = this.bindResetPlayer;
}
// This is also our bridge to the outside world.
this.player = new MediaElementPlayer( this.playerNode.get(0), this.settings );
},
playCurrentSrc : function () {
this.renderCurrent();
this.mejs.setSrc( this.playerNode.attr( 'src' ) );
this.mejs.load();
this.mejs.play();
},
renderCurrent : function () {
var dimensions, defaultImage = 'wp-includes/images/media/video.svg';
if ( 'video' === this.data.type ) {
if ( this.data.images && this.current.get( 'image' ) && -1 === this.current.get( 'image' ).src.indexOf( defaultImage ) ) {
this.playerNode.attr( 'poster', this.current.get( 'image' ).src );
}
dimensions = this.current.get( 'dimensions' );
if ( dimensions && dimensions.resized ) {
this.playerNode.attr( dimensions.resized );
}
} else {
if ( ! this.data.images ) {
this.current.set( 'image', false );
}
this.currentNode.html( this.currentTemplate( this.current.toJSON() ) );
}
},
renderTracks : function () {
var self = this, i = 1, tracklist = $( '<div class="wp-playlist-tracks"></div>' );
this.tracks.each(function (model) {
if ( ! self.data.images ) {
model.set( 'image', false );
}
model.set( 'artists', self.data.artists );
model.set( 'index', self.data.tracknumbers ? i : false );
tracklist.append( self.itemTemplate( model.toJSON() ) );
i += 1;
});
this.$el.append( tracklist );
this.$( '.wp-playlist-item' ).eq(0).addClass( this.playingClass );
},
events : {
'click .wp-playlist-item' : 'clickTrack',
'click .wp-playlist-next' : 'next',
'click .wp-playlist-prev' : 'prev'
},
clickTrack : function (e) {
e.preventDefault();
this.index = this.$( '.wp-playlist-item' ).index( e.currentTarget );
this.setCurrent();
},
ended : function () {
if ( this.index + 1 < this.tracks.length ) {
this.next();
} else {
this.index = 0;
this.setCurrent();
}
},
next : function () {
this.index = this.index + 1 >= this.tracks.length ? 0 : this.index + 1;
this.setCurrent();
},
prev : function () {
this.index = this.index - 1 < 0 ? this.tracks.length - 1 : this.index - 1;
this.setCurrent();
},
loadCurrent : function () {
var last = this.playerNode.attr( 'src' ) && this.playerNode.attr( 'src' ).split('.').pop(),
current = this.current.get( 'src' ).split('.').pop();
this.mejs && this.mejs.pause();
if ( last !== current ) {
this.setPlayer( true );
} else {
this.playerNode.attr( 'src', this.current.get( 'src' ) );
this.playCurrentSrc();
}
},
setCurrent : function () {
this.current = this.tracks.at( this.index );
if ( this.data.tracklist ) {
this.$( '.wp-playlist-item' )
.removeClass( this.playingClass )
.eq( this.index )
.addClass( this.playingClass );
}
this.loadCurrent();
}
});
/**
* Initialize media playlists in the document.
*
* Only initializes new playlists not previously-initialized.
*
* @since 4.9.3
* @return {void}
*/
function initialize() {
$( '.wp-playlist:not(:has(.mejs-container))' ).each( function() {
new WPPlaylistView( { el: this } );
} );
}
/**
* Expose the API publicly on window.wp.playlist.
*
* @namespace wp.playlist
* @since 4.9.3
* @type {object}
*/
window.wp.playlist = {
initialize: initialize
};
$( document ).ready( initialize );
window.WPPlaylistView = WPPlaylistView;
}(jQuery, _, Backbone));

View File

@@ -0,0 +1 @@
!function(r,e,i){"use strict";window.wp=window.wp||{};var t=i.View.extend({initialize:function(t){this.index=0,this.settings={},this.data=t.metadata||r.parseJSON(this.$("script.wp-playlist-script").html()),this.playerNode=this.$(this.data.type),this.tracks=new i.Collection(this.data.tracks),this.current=this.tracks.first(),"audio"===this.data.type&&(this.currentTemplate=wp.template("wp-playlist-current-item"),this.currentNode=this.$(".wp-playlist-current-item")),this.renderCurrent(),this.data.tracklist&&(this.itemTemplate=wp.template("wp-playlist-item"),this.playingClass="wp-playlist-playing",this.renderTracks()),this.playerNode.attr("src",this.current.get("src")),e.bindAll(this,"bindPlayer","bindResetPlayer","setPlayer","ended","clickTrack"),e.isUndefined(window._wpmejsSettings)||(this.settings=e.clone(_wpmejsSettings)),this.settings.success=this.bindPlayer,this.setPlayer()},bindPlayer:function(t){this.mejs=t,this.mejs.addEventListener("ended",this.ended)},bindResetPlayer:function(t){this.bindPlayer(t),this.playCurrentSrc()},setPlayer:function(t){this.player&&(this.player.pause(),this.player.remove(),this.playerNode=this.$(this.data.type)),t&&(this.playerNode.attr("src",this.current.get("src")),this.settings.success=this.bindResetPlayer),this.player=new MediaElementPlayer(this.playerNode.get(0),this.settings)},playCurrentSrc:function(){this.renderCurrent(),this.mejs.setSrc(this.playerNode.attr("src")),this.mejs.load(),this.mejs.play()},renderCurrent:function(){var t;"video"===this.data.type?(this.data.images&&this.current.get("image")&&-1===this.current.get("image").src.indexOf("wp-includes/images/media/video.svg")&&this.playerNode.attr("poster",this.current.get("image").src),(t=this.current.get("dimensions"))&&t.resized&&this.playerNode.attr(t.resized)):(this.data.images||this.current.set("image",!1),this.currentNode.html(this.currentTemplate(this.current.toJSON())))},renderTracks:function(){var e=this,i=1,s=r('<div class="wp-playlist-tracks"></div>');this.tracks.each(function(t){e.data.images||t.set("image",!1),t.set("artists",e.data.artists),t.set("index",!!e.data.tracknumbers&&i),s.append(e.itemTemplate(t.toJSON())),i+=1}),this.$el.append(s),this.$(".wp-playlist-item").eq(0).addClass(this.playingClass)},events:{"click .wp-playlist-item":"clickTrack","click .wp-playlist-next":"next","click .wp-playlist-prev":"prev"},clickTrack:function(t){t.preventDefault(),this.index=this.$(".wp-playlist-item").index(t.currentTarget),this.setCurrent()},ended:function(){this.index+1<this.tracks.length?this.next():(this.index=0,this.setCurrent())},next:function(){this.index=this.index+1>=this.tracks.length?0:this.index+1,this.setCurrent()},prev:function(){this.index=this.index-1<0?this.tracks.length-1:this.index-1,this.setCurrent()},loadCurrent:function(){var t=this.playerNode.attr("src")&&this.playerNode.attr("src").split(".").pop(),e=this.current.get("src").split(".").pop();this.mejs&&this.mejs.pause(),t!==e?this.setPlayer(!0):(this.playerNode.attr("src",this.current.get("src")),this.playCurrentSrc())},setCurrent:function(){this.current=this.tracks.at(this.index),this.data.tracklist&&this.$(".wp-playlist-item").removeClass(this.playingClass).eq(this.index).addClass(this.playingClass),this.loadCurrent()}});function s(){r(".wp-playlist:not(:has(.mejs-container))").each(function(){new t({el:this})})}window.wp.playlist={initialize:s},r(document).ready(s),window.WPPlaylistView=t}(jQuery,_,Backbone);