Replaced jwplayer with HTML5 player using MediaElement.js

libresonic-main/src/main/resources/liquibase/legacy/schema43.xml

@@ -23,97 +23,97 @@
             <column name="version" valueNumeric="17" />
         </insert>
         <delete tableName="transcoding">
-            <where>target_format = 'flv' and source_format in ('avi', 'mpg', 'mpeg', 'mp4', 'm4v', 'mkv', 'mov', 'wmv', 'ogv')</where>
+            <where>target_format = 'mp4' and source_format in ('avi', 'mpg', 'mpeg', 'mp4', 'm4v', 'mkv', 'mov', 'wmv', 'ogv')</where>
         </delete>
         <insert tableName="transcoding">
-            <column name="name" value="avi > flv"/>
+            <column name="name" value="avi > mp4"/>
             <column name="source_format" value="avi" />
-            <column name="target_format" value="flv" />
-            <column name="step1" value="ffmpeg -ss %o -i %s -async 1 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f flv -" />
+            <column name="target_format" value="mp4" />
+            <column name="step1" value="ffmpeg -ss %o -i %s -async 1 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f mp4 -vcodec libx264 -preset superfast -threads 0 -movflags frag_keyframe+empty_moov -" />
             <column name="enabled" valueBoolean="true" />
         </insert>
         <sql>
-            insert into player_transcoding(player_id, transcoding_id) select p.id as player_id, t.id as transaction_id from player p, transcoding t where t.name = 'avi > flv'
+            insert into player_transcoding(player_id, transcoding_id) select p.id as player_id, t.id as transaction_id from player p, transcoding t where t.name = 'avi > mp4'
         </sql>
         <insert tableName="transcoding">
-            <column name="name" value="mpg > flv"/>
+            <column name="name" value="mpg > mp4"/>
             <column name="source_format" value="mpg" />
-            <column name="target_format" value="flv" />
-            <column name="step1" value="ffmpeg -ss %o -i %s -async 1 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f flv -" />
+            <column name="target_format" value="mp4" />
+            <column name="step1" value="ffmpeg -ss %o -i %s -async 1 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f mp4 -vcodec libx264 -preset superfast -threads 0 -movflags frag_keyframe+empty_moov -" />
             <column name="enabled" valueBoolean="true" />
         </insert>
         <sql>
-            insert into player_transcoding(player_id, transcoding_id) select p.id as player_id, t.id as transaction_id from player p, transcoding t where t.name = 'mpg > flv'
+            insert into player_transcoding(player_id, transcoding_id) select p.id as player_id, t.id as transaction_id from player p, transcoding t where t.name = 'mpg > mp4'
         </sql>
         <insert tableName="transcoding">
-            <column name="name" value="mpeg > flv"/>
+            <column name="name" value="mpeg > mp4"/>
             <column name="source_format" value="mpeg" />
-            <column name="target_format" value="flv" />
-            <column name="step1" value="ffmpeg -ss %o -i %s -async 1 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f flv -" />
+            <column name="target_format" value="mp4" />
+            <column name="step1" value="ffmpeg -ss %o -i %s -async 1 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f mp4 -vcodec libx264 -preset superfast -threads 0 -movflags frag_keyframe+empty_moov -" />
             <column name="enabled" valueBoolean="true" />
         </insert>
         <sql>
-            insert into player_transcoding(player_id, transcoding_id) select p.id as player_id, t.id as transaction_id from player p, transcoding t where t.name = 'mpeg > flv'
+            insert into player_transcoding(player_id, transcoding_id) select p.id as player_id, t.id as transaction_id from player p, transcoding t where t.name = 'mpeg > mp4'
         </sql>
         <insert tableName="transcoding">
-            <column name="name" value="mp4 > flv"/>
-            <column name="source_format" value="mp4" />
-            <column name="target_format" value="flv" />
-            <column name="step1" value="ffmpeg -ss %o -i %s -async 1 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f flv -" />
+            <column name="name" value="flv > mp4"/>
+            <column name="source_format" value="flv" />
+            <column name="target_format" value="mp4" />
+            <column name="step1" value="ffmpeg -ss %o -i %s -async 1 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f mp4 -vcodec libx264 -preset superfast -threads 0 -movflags frag_keyframe+empty_moov -" />
             <column name="enabled" valueBoolean="true" />
         </insert>
         <sql>
-            insert into player_transcoding(player_id, transcoding_id) select p.id as player_id, t.id as transaction_id from player p, transcoding t where t.name = 'mp4 > flv'
+            insert into player_transcoding(player_id, transcoding_id) select p.id as player_id, t.id as transaction_id from player p, transcoding t where t.name = 'flv > mp4'
         </sql>
         <insert tableName="transcoding">
-            <column name="name" value="m4v > flv"/>
+            <column name="name" value="m4v > mp4"/>
             <column name="source_format" value="m4v" />
-            <column name="target_format" value="flv" />
-            <column name="step1" value="ffmpeg -ss %o -i %s -async 1 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f flv -" />
+            <column name="target_format" value="mp4" />
+            <column name="step1" value="ffmpeg -ss %o -i %s -async 1 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f mp4 -vcodec libx264 -preset superfast -threads 0 -movflags frag_keyframe+empty_moov -" />
             <column name="enabled" valueBoolean="true" />
         </insert>
         <sql>
-            insert into player_transcoding(player_id, transcoding_id) select p.id as player_id, t.id as transaction_id from player p, transcoding t where t.name = 'm4v > flv'
+            insert into player_transcoding(player_id, transcoding_id) select p.id as player_id, t.id as transaction_id from player p, transcoding t where t.name = 'm4v > mp4'
         </sql>
         <insert tableName="transcoding">
-            <column name="name" value="mkv > flv"/>
+            <column name="name" value="mkv > mp4"/>
             <column name="source_format" value="mkv" />
-            <column name="target_format" value="flv" />
-            <column name="step1" value="ffmpeg -ss %o -i %s -async 1 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f flv -" />
+            <column name="target_format" value="mp4" />
+            <column name="step1" value="ffmpeg -ss %o -i %s -async 1 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f mp4 -vcodec libx264 -preset superfast -threads 0 -movflags frag_keyframe+empty_moov -" />
             <column name="enabled" valueBoolean="true" />
         </insert>
         <sql>
-            insert into player_transcoding(player_id, transcoding_id) select p.id as player_id, t.id as transaction_id from player p, transcoding t where t.name = 'mkv > flv'
+            insert into player_transcoding(player_id, transcoding_id) select p.id as player_id, t.id as transaction_id from player p, transcoding t where t.name = 'mkv > mp4'
         </sql>
         <insert tableName="transcoding">
-            <column name="name" value="mov > flv"/>
+            <column name="name" value="mov > mp4"/>
             <column name="source_format" value="mov" />
-            <column name="target_format" value="flv" />
-            <column name="step1" value="ffmpeg -ss %o -i %s -async 1 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f flv -" />
+            <column name="target_format" value="mp4" />
+            <column name="step1" value="ffmpeg -ss %o -i %s -async 1 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f mp4 -vcodec libx264 -preset superfast -threads 0 -movflags frag_keyframe+empty_moov -" />
             <column name="enabled" valueBoolean="true" />
         </insert>
         <sql>
-            insert into player_transcoding(player_id, transcoding_id) select p.id as player_id, t.id as transaction_id from player p, transcoding t where t.name = 'mov > flv'
+            insert into player_transcoding(player_id, transcoding_id) select p.id as player_id, t.id as transaction_id from player p, transcoding t where t.name = 'mov > mp4'
         </sql>
         <insert tableName="transcoding">
-            <column name="name" value="wmv > flv"/>
+            <column name="name" value="wmv > mp4"/>
             <column name="source_format" value="wmv" />
-            <column name="target_format" value="flv" />
-            <column name="step1" value="ffmpeg -ss %o -i %s -async 1 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f flv -" />
+            <column name="target_format" value="mp4" />
+            <column name="step1" value="ffmpeg -ss %o -i %s -async 1 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f mp4 -vcodec libx264 -preset superfast -threads 0 -movflags frag_keyframe+empty_moov -" />
             <column name="enabled" valueBoolean="true" />
         </insert>
         <sql>
-            insert into player_transcoding(player_id, transcoding_id) select p.id as player_id, t.id as transaction_id from player p, transcoding t where t.name = 'wmv > flv'
+            insert into player_transcoding(player_id, transcoding_id) select p.id as player_id, t.id as transaction_id from player p, transcoding t where t.name = 'wmv > mp4'
         </sql>
         <insert tableName="transcoding">
-            <column name="name" value="ogv > flv"/>
+            <column name="name" value="ogv > mp4"/>
             <column name="source_format" value="ogv" />
-            <column name="target_format" value="flv" />
-            <column name="step1" value="ffmpeg -ss %o -i %s -async 1 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f flv -" />
+            <column name="target_format" value="mp4" />
+            <column name="step1" value="ffmpeg -ss %o -i %s -async 1 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f mp4 -vcodec libx264 -preset superfast -threads 0 -movflags frag_keyframe+empty_moov -" />
             <column name="enabled" valueBoolean="true" />
         </insert>
         <sql>
-            insert into player_transcoding(player_id, transcoding_id) select p.id as player_id, t.id as transaction_id from player p, transcoding t where t.name = 'ogv > flv'
+            insert into player_transcoding(player_id, transcoding_id) select p.id as player_id, t.id as transaction_id from player p, transcoding t where t.name = 'ogv > mp4'
         </sql>
         <rollback/>
     </changeSet>

libresonic-main/src/main/resources/liquibase/legacy/schema46.xml

@@ -47,10 +47,10 @@
             <column name="step1" value="ffmpeg -i %s -ab %bk -v 0 -f mp3 -"/>
         </insert>
         <insert tableName="transcoding2">
-            <column name="name" value="flv/h264 video" />
-            <column name="source_formats" value="avi mpg mpeg mp4 m4v mkv mov wmv ogv divx m2ts" />
+            <column name="name" value="mp4/h264 video" />
+            <column name="source_formats" value="avi flv mpg mpeg m4v mkv mov wmv ogv divx m2ts" />
             <column name="target_format" value="flv" />
-            <column name="step1" value="ffmpeg -ss %o -i %s -async 1 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f flv -vcodec libx264 -preset superfast -threads 0 -"/>
+            <column name="step1" value="ffmpeg -ss %o -i %s -async 1 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f mp4 -vcodec libx264 -preset superfast -threads 0 -movflags frag_keyframe+empty_moov -"/>
         </insert>
         <rollback>
             <dropTable tableName="transcoding2" />

libresonic-main/src/main/webapp/WEB-INF/jsp/playQueue.jsp

@@ -10,9 +10,10 @@
     <script type="text/javascript" src="<c:url value="/dwr/interface/playlistService.js"/>"></script>
     <script type="text/javascript" src="<c:url value="/dwr/engine.js"/>"></script>
     <script type="text/javascript" src="<c:url value="/dwr/util.js"/>"></script>
-    <script type="text/javascript" src="<c:url value="/script/jwplayer-5.10.min.js"/>"></script>
+    <script type="text/javascript" src="<c:url value="/script/mediaelement/mediaelement-and-player.min.js"/>"></script>
     <%@ include file="playQueueCast.jsp" %>
     <link type="text/css" rel="stylesheet" href="<c:url value="/script/webfx/luna.css"/>">
+    <link type="text/css" rel="stylesheet" href="<c:url value="/script/mediaelement/mediaelementplayer.min.css"/>">
     <style type="text/css">
         .ui-slider .ui-slider-handle {
             width: 11px;
@@ -143,17 +144,12 @@
         }
     }
 
-    function createPlayer() {
-        jwplayer("jwplayer").setup({
-            flashplayer: "<c:url value="/flash/jw-player-5.10.swf"/>",
-            height: 24,
-            width: 350,
-            controlbar: "bottom",
-            backcolor:"<spring:theme code="backgroundColor"/>",
-            frontcolor:"<spring:theme code="textColor"/>"
-        });
+    function onEnded() {
+        onNext(repeatEnabled);
+    }
 
-        jwplayer().onComplete(function() {onNext(repeatEnabled)});
+    function createPlayer() {
+        $('#audioPlayer').get(0).addEventListener("ended", onEnded);
     }
 
     function getPlayQueue() {
@@ -176,11 +172,10 @@
     function onStart() {
         if (CastPlayer.castSession) {
             CastPlayer.playCast();
-        } else if (jwplayer()) {
-            if (jwplayer().getState() == "IDLE") {
-                skip(0);
-            } else if (jwplayer().getState() == "PAUSED") {
-                jwplayer().play(true);
+        } else if ($('#audioPlayer')) {
+            var audioPlayer = $('#audioPlayer');
+            if(audioPlayer.paused) {
+                skip(0, audioPlayer.currentTime);
             }
         } else {
             playQueueService.start(playQueueCallback);
@@ -193,8 +188,8 @@
     function onStop() {
         if (CastPlayer.castSession) {
             CastPlayer.pauseCast();
-        } else if (jwplayer()) {
-            jwplayer().pause(true);
+        } else if ($('#audioPlayer')) {
+            $('#audioPlayer').get(0).pause();
         } else {
             playQueueService.stop(playQueueCallback);
         }
@@ -210,8 +205,8 @@
             var playing = CastPlayer.mediaSession && CastPlayer.mediaSession.playerState == chrome.cast.media.PlayerState.PLAYING;
             if (playing) onStop();
             else onStart();
-        } else if (jwplayer()) {
-            if (jwplayer().getState() == "PLAYING") onStop();
+        } else if ($('#audioPlayer')) {
+            if (!$('#audioPlayer').get(0).paused) onStop();
             else onStart();
         } else {
             playQueueService.toggleStartStop(playQueueCallback);
@@ -242,11 +237,11 @@
             if (volume < 0) volume = 0;
             CastPlayer.setCastVolume(volume / 100, false);
             $("#castVolume").slider("option", "value", volume); // Need to update UI
-        } else if (jwplayer()) {
-            var volume = parseInt(jwplayer().getVolume()) + gain;
+        } else if ($('#audioPlayer')) {
+            var volume = parseInt($('#audioPlayer').get(0).volume) + gain;
             if (volume > 100) volume = 100;
             if (volume < 0) volume = 0;
-            jwplayer().setVolume(volume);
+            $('#audioPlayer').get(0).volume = volume;
         } else {
             var volume = parseInt($("#jukeboxVolume").slider("option", "value")) + gain;
             if (volume > 100) volume = 100;
@@ -362,7 +357,7 @@
         playQueueService.sortByAlbum(playQueueCallback);
     }
     function onSavePlayQueue() {
-        var positionMillis = jwplayer() ? Math.round(1000.0 * jwplayer().getPosition()) : 0;
+        var positionMillis = $('#audioPlayer') ? Math.round(1000.0 * $('#audioPlayer').get(0).currentTime) : 0;
         playQueueService.savePlayQueue(getCurrentSongIndex(), positionMillis);
         $().toastmessage("showSuccessToast", "<fmt:message key="playlist.toast.saveplayqueue"/>");
     }
@@ -515,14 +510,13 @@
             if (songs.length > index) {
                 skip(index);
                 if (positionMillis != 0) {
-                    jwplayer().seek(positionMillis / 1000);
+                    $('#audioPlayer').get(0).currentTime = positionMillis / 1000;
                 }
             }
         }
         updateCurrentImage();
         if (songs.length == 0) {
-            jwplayer().stop();
-            jwplayer().load([]);
+            $('#audioPlayer').get(0).stop();
         }
     }
 
@@ -538,12 +532,9 @@
         if (CastPlayer.castSession) {
             CastPlayer.loadCastMedia(song, position);
         } else {
-            jwplayer().load({
-                file: song.streamUrl,
-                provider: song.format == "aac" || song.format == "m4a" ? "video" : "sound",
-                duration: song.duration
-            });
-            jwplayer().play();
+            $('#audioPlayer').get(0).src = song.streamUrl;
+            $('#audioPlayer').get(0).load();
+            $('#audioPlayer').get(0).play();
             console.log(song.streamUrl);
         }
 
@@ -668,7 +659,7 @@
 
 </script>
 
-<div class="bgcolor2" style="position:fixed; bottom:0; width:100%;padding-top:10px;padding-bottom: 5px">
+<div class="bgcolor2" style="position:fixed; bottom:0; width:100%;padding-top:10px;">
     <table style="white-space:nowrap;">
         <tr style="white-space:nowrap;">
             <c:if test="${model.user.settingsRole and fn:length(model.players) gt 1}">
@@ -680,8 +671,8 @@
             </c:if>
             <c:if test="${model.player.web}">
                 <td>
-                    <div id="flashPlayer" style="width:340px; height:24px;padding-right:10px">
-                        <div id="jwplayer"><a href="http://www.adobe.com/go/getflashplayer" target="_blank"><fmt:message key="playlist.getflash"/></a></div>
+                    <div id="player" style="width:340px; height:40px;padding-right:10px">
+                        <audio id="audioPlayer" class="mejs__player" data-mejsoptions='{"alwaysShowControls": "true"}' width="340px" height"40px"/>
                     </div>
                     <div id="castPlayer" style="display: none">
                         <div style="float:left">

libresonic-main/src/main/webapp/WEB-INF/jsp/playQueueCast.jsp

@@ -119,8 +119,8 @@
         this.castSession = s;
 
         var position = -1;
-        if (jwplayer().getState() == "PLAYING") {
-            position = jwplayer().getPosition();
+        if (!$('#audioPlayer').get(0).paused) {
+            position = $('#audioPlayer').get(0).currentTime;
         }
 
         this.setCastControlsVisible(true);

libresonic-main/src/main/webapp/WEB-INF/jsp/videoPlayer.jsp

@@ -7,7 +7,6 @@
     <link rel="stylesheet" type="text/css" href="<c:url value="/style/videoPlayer.css"/>">
     <script type="text/javascript" src="<c:url value="/dwr/engine.js"/>"></script>
     <script type="text/javascript" src="<c:url value="/dwr/interface/starService.js"/>"></script>
-    <script type="text/javascript" src="<c:url value="/script/jwplayer-5.10.min.js"/>"></script>
     <script type="text/javascript" src="<c:url value="/script/cast_sender-v1.js"/>"></script>
     <%@ include file="videoPlayerCast.jsp" %>
 
@@ -31,7 +30,7 @@
         <div id="overlay">
             <div id="overlay_text">Playing on Chromecast</div>
         </div>
-        <div id="jwplayer"><a href="http://www.adobe.com/go/getflashplayer" target="_blank">Get Flash</a></div>
+        <video id="videoPlayer" width="640" height="360"></video>
         <div id="media_control">
             <div id="progress_slider"></div>
             <div id="play"></div>

libresonic-main/src/main/webapp/WEB-INF/jsp/videoPlayerCast.jsp

@@ -64,7 +64,7 @@
         // @type {PLAYER_STATE} A state for local media player
         this.localPlayerState = PLAYER_STATE.IDLE;
 
-        // @type {jwplayer} local player
+        // @type {video} local player
         this.localPlayer = null;
 
         /* Current media variables */
@@ -95,31 +95,17 @@
      * Initialize local media player
      */
     CastPlayer.prototype.initializeLocalPlayer = function () {
-        jwplayer("jwplayer").setup({
-            flashplayer: "<c:url value="/flash/jw-player-5.10.swf"/>",
-            height: 360,
-            width: 640,
-            skin: "<c:url value="/flash/jw-player-libresonic-skin.zip"/>",
-            screencolor: "000000",
-            controlbar: "over",
-            autostart: "false",
-            bufferlength: 3,
-            provider: "video",
-            events: {
-                onTime: this.updateLocalProgress.bind(this),
-                onPlay: this.updateLocalState.bind(this),
-                onPause: this.updateLocalState.bind(this),
-                onIdle: this.updateLocalState.bind(this)
-            }
-        });
-
-        this.localPlayer = jwplayer();
-        this.localPlayer.setMute(false);
-        this.localPlayer.setVolume(this.currentVolume);
+        this.localPlayer = $('#videoPlayer').get(0);
+        this.localPlayer.volume = this.currentVolume/100;
+        this.localPlayer.addEventListener("timeupdate", this.updateLocalProgress.bind(this));
+        this.localPlayer.addEventListener("play", this.updateLocalState.bind(this));
+        this.localPlayer.addEventListener("pause", this.updateLocalState.bind(this));
+        this.localPlayer.addEventListener("playing", this.updateLocalState.bind(this));
+        this.localPlayer.addEventListener("paused", this.updateLocalState.bind(this));
     };
 
-    CastPlayer.prototype.updateLocalProgress = function (event) {
-        var newTime = Math.round(event.position);
+    CastPlayer.prototype.updateLocalProgress = function () {
+        var newTime = Math.round(this.localPlayer.currentTime);
         if (newTime != this.currentMediaTime && !this.seekInProgress) {
             this.currentMediaTime = newTime;
             this.updateProgressBar();
@@ -127,12 +113,10 @@
     };
 
     CastPlayer.prototype.updateLocalState = function () {
-        if (this.localPlayer.getState() == "PLAYING" || this.localPlayer.getState() == "BUFFERING") {
-            this.localPlayerState = PLAYER_STATE.PLAYING;
-        } else if (this.localPlayer.getState() == "PAUSED") {
+        if (this.localPlayer.paused) {
             this.localPlayerState = PLAYER_STATE.PAUSED;
-        } else if (this.localPlayer.getState() == "IDLE") {
-            this.localPlayerState = PLAYER_STATE.IDLE;
+        } else {
+            this.localPlayerState = PLAYER_STATE.PLAYING;
         }
         this.updateMediaControlUI();
     };
@@ -456,6 +440,7 @@
      * @param {Number} offset A number for media current position
      */
     CastPlayer.prototype.playMediaLocally = function (offset) {
+        this.currentMediaDuration = this.localPlayer.duration;
 
         if (this.localPlayerState == PLAYER_STATE.PLAYING || this.localPlayerState == PLAYER_STATE.PAUSED) {
             this.localPlayer.play();
@@ -466,11 +451,7 @@
             var url = "${model.streamUrl}" + "&maxBitRate=" + this.getBitRate() + "&timeOffset=" + offset;
             console.log("playing local: " + url);
 
-            this.localPlayer.load({
-                file: url,
-                duration: this.currentMediaDuration,
-                provider: "video"
-            });
+            this.localPlayer.src = url;
             this.localPlayer.play();
             this.seekInProgress = false;
         }
@@ -534,7 +515,8 @@
      * Stop media playback in local player
      */
     CastPlayer.prototype.stopMediaLocally = function () {
-        this.localPlayer.stop();
+        this.localPlayer.pause();
+        this.localPlayer.currentTime = 0;
         this.updateMediaControlUI();
     };
 
@@ -546,9 +528,9 @@
         this.currentVolume = parseInt($("#volume_slider").slider("option", "value"));
 
         if (!this.currentMediaSession) {
-            this.localPlayer.setMute(mute);
+            this.localPlayer.muted = mute;
             if (!mute) {
-                this.localPlayer.setVolume(this.currentVolume);
+                this.localPlayer.volume = this.currentVolume / 100;
             }
             return;
         }
@@ -638,7 +620,10 @@
             $("#casticonactive").hide();
             $("#casticonidle").hide();
             $("#overlay_text").hide();
-            var loaded = this.localPlayer.getPlaylist().length > 0;
+            var loaded = false;
+            if(this.localPlayer.src) {
+                loaded = true;
+            }
             $("#overlay").toggle(!loaded);
         } else if (this.deviceState == DEVICE_STATE.ACTIVE) {
             $("#casticonactive").show();
@@ -650,7 +635,10 @@
             $("#casticonactive").hide();
             $("#casticonidle").show();
             $("#overlay_text").hide();
-            var loaded = this.localPlayer.getPlaylist().length > 0;
+            var loaded = false;
+            if(this.localPlayer.src) {
+                loaded = true;
+            }
             $("#overlay").toggle(!loaded);
         }
 

libresonic-main/src/main/webapp/script/mediaelement/lang/ca.js

@@ -0,0 +1,89 @@
+'use strict';/*!
+ * This is a `i18n` language object.
+ *
+ * Catalan
+ *
+ * @author
+ * 	Tongro
+ *
+ * @see core/i18n.js
+ */
+(function (exports) {
+	if (exports.ca === undefined) {
+		exports.ca = {
+			"mejs.plural-form": 1,			
+			"mejs.download-file": "Descarregar arxiu",			
+			// "mejs.install-flash": "You are using a browser that does not have Flash player enabled or installed. Please turn on your Flash player plugin or download the latest version from https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "Pantalla completa",			
+			"mejs.play": "Reproducció",
+			"mejs.pause": "Pausa",			
+			// "mejs.time-slider": "Time Slider",
+			// "mejs.time-help-text": "Use Left/Right Arrow keys to advance one second, Up/Down arrows to advance ten seconds.",
+			//"mejs.live-broadcast" : "Live Broadcast",			
+			// "mejs.volume-help-text": "Use Up/Down Arrow keys to increase or decrease volume.",
+			"mejs.unmute": "Reactivar silenci",
+			"mejs.mute": "Silenci",
+			// "mejs.volume-slider": "Volume Slider",			
+			"mejs.video-player": "Reproductor de vídeo",
+			"mejs.audio-player": "Reproductor d'àudio",			
+			"mejs.captions-subtitles": "Llegendes/Subtítols",
+			// "mejs.captions-chapters": "Chapters",
+			"mejs.none": "Ningú"
+			// "mejs.afrikaans": "Afrikaans",
+			// "mejs.albanian": "Albanian",
+			// "mejs.arabic": "Arabic",
+			// "mejs.belarusian": "Belarusian",
+			// "mejs.bulgarian": "Bulgarian",
+			// "mejs.catalan": "Catalan",
+			// "mejs.chinese": "Chinese",
+			// "mejs.chinese-simplified": "Chinese (Simplified)",
+			// "mejs.chinese-traditional": "Chinese (Traditional)",
+			// "mejs.croatian": "Croatian",
+			// "mejs.czech": "Czech",
+			// "mejs.danish": "Danish",
+			// "mejs.dutch": "Dutch",
+			// "mejs.english": "English",
+			// "mejs.estonian": "Estonian",
+			// "mejs.filipino": "Filipino",
+			// "mejs.finnish": "Finnish",
+			// "mejs.french": "French",
+			// "mejs.galician": "Galician",
+			// "mejs.german": "German",
+			// "mejs.greek": "Greek",
+			// "mejs.haitian-creole": "Haitian Creole",
+			// "mejs.hebrew": "Hebrew",
+			// "mejs.hindi": "Hindi",
+			// "mejs.hungarian": "Hungarian",
+			// "mejs.icelandic": "Icelandic",
+			// "mejs.indonesian": "Indonesian",
+			// "mejs.irish": "Irish",
+			// "mejs.italian": "Italian",
+			// "mejs.japanese": "Japanese",
+			// "mejs.korean": "Korean",
+			// "mejs.latvian": "Latvian",
+			// "mejs.lithuanian": "Lithuanian",
+			// "mejs.macedonian": "Macedonian",
+			// "mejs.malay": "Malay",
+			// "mejs.maltese": "Maltese",
+			// "mejs.norwegian": "Norwegian",
+			// "mejs.persian": "Persian",
+			// "mejs.polish": "Polish",
+			// "mejs.portuguese": "Portuguese",
+			// "mejs.romanian": "Romanian",
+			// "mejs.russian": "Russian",
+			// "mejs.serbian": "Serbian",
+			// "mejs.slovak": "Slovak",
+			// "mejs.slovenian": "Slovenian",
+			// "mejs.spanish": "Spanish",
+			// "mejs.swahili": "Swahili",
+			// "mejs.swedish": "Swedish",
+			// "mejs.tagalog": "Tagalog",
+			// "mejs.thai": "Thai",
+			// "mejs.turkish": "Turkish",
+			// "mejs.ukrainian": "Ukrainian",
+			// "mejs.vietnamese": "Vietnamese",
+			// "mejs.welsh": "Welsh",
+			// "mejs.yiddish": "Yiddish"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/lang/cs.js

@@ -0,0 +1,90 @@
+'use strict';/*!
+ * This is a `i18n` language object.
+ *
+ * Czech
+ *
+ * @author
+ *   Jalios (Twitter: @Jalios)
+ *   Sascha Greuel (Twitter: @SoftCreatR)
+ *
+ * @see core/i18n.js
+ */
+(function (exports) {
+	if (exports.cs === undefined) {
+		exports.cs = {
+			"mejs.plural-form": 8,			
+			"mejs.download-file": "Stáhnout soubor",			
+			// "mejs.install-flash": "You are using a browser that does not have Flash player enabled or installed. Please turn on your Flash player plugin or download the latest version from https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "Celá obrazovka",			
+			"mejs.play": "Přehrát",
+			"mejs.pause": "Pozastavit",			
+			"mejs.time-slider": "Posuvný běžec nastavení času",
+			"mejs.time-help-text": "Použijte tlačítka se šipkami doleva / doprava pro posun o jednu vteřinu, tlačítka se šipkami nahoru / dolů pro posun o deset vteřin.",
+			//"mejs.live-broadcast" : "Live Broadcast",			
+			"mejs.volume-help-text": "Použijte tlačítka se šipkami nahoru / dolů pro zesílení nebo zeslabení hlasitosti.",
+			"mejs.unmute": "Zapnout zvuk",
+			"mejs.mute": "Vypnout zvuk",
+			"mejs.volume-slider": "Posuvný běžec nastavení hlasitosti",			
+			"mejs.video-player": "Přehrávač videa",
+			"mejs.audio-player": "Přehrávač hudby",			
+			"mejs.captions-subtitles": "Titulky",
+			// "mejs.captions-chapters": "Chapters",
+			"mejs.none": "Žádný"
+			// "mejs.afrikaans": "Afrikaans",
+			// "mejs.albanian": "Albanian",
+			// "mejs.arabic": "Arabic",
+			// "mejs.belarusian": "Belarusian",
+			// "mejs.bulgarian": "Bulgarian",
+			// "mejs.catalan": "Catalan",
+			// "mejs.chinese": "Chinese",
+			// "mejs.chinese-simplified": "Chinese (Simplified)",
+			// "mejs.chinese-traditional": "Chinese (Traditional)",
+			// "mejs.croatian": "Croatian",
+			// "mejs.czech": "Czech",
+			// "mejs.danish": "Danish",
+			// "mejs.dutch": "Dutch",
+			// "mejs.english": "English",
+			// "mejs.estonian": "Estonian",
+			// "mejs.filipino": "Filipino",
+			// "mejs.finnish": "Finnish",
+			// "mejs.french": "French",
+			// "mejs.galician": "Galician",
+			// "mejs.german": "German",
+			// "mejs.greek": "Greek",
+			// "mejs.haitian-creole": "Haitian Creole",
+			// "mejs.hebrew": "Hebrew",
+			// "mejs.hindi": "Hindi",
+			// "mejs.hungarian": "Hungarian",
+			// "mejs.icelandic": "Icelandic",
+			// "mejs.indonesian": "Indonesian",
+			// "mejs.irish": "Irish",
+			// "mejs.italian": "Italian",
+			// "mejs.japanese": "Japanese",
+			// "mejs.korean": "Korean",
+			// "mejs.latvian": "Latvian",
+			// "mejs.lithuanian": "Lithuanian",
+			// "mejs.macedonian": "Macedonian",
+			// "mejs.malay": "Malay",
+			// "mejs.maltese": "Maltese",
+			// "mejs.norwegian": "Norwegian",
+			// "mejs.persian": "Persian",
+			// "mejs.polish": "Polish",
+			// "mejs.portuguese": "Portuguese",
+			// "mejs.romanian": "Romanian",
+			// "mejs.russian": "Russian",
+			// "mejs.serbian": "Serbian",
+			// "mejs.slovak": "Slovak",
+			// "mejs.slovenian": "Slovenian",
+			// "mejs.spanish": "Spanish",
+			// "mejs.swahili": "Swahili",
+			// "mejs.swedish": "Swedish",
+			// "mejs.tagalog": "Tagalog",
+			// "mejs.thai": "Thai",
+			// "mejs.turkish": "Turkish",
+			// "mejs.ukrainian": "Ukrainian",
+			// "mejs.vietnamese": "Vietnamese",
+			// "mejs.welsh": "Welsh",
+			// "mejs.yiddish": "Yiddish"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/lang/de.js

@@ -0,0 +1,90 @@
+'use strict';/*!
+ * This is a `i18n` language object.
+ *
+ * German
+ *
+ * @author
+ *   Jalios (Twitter: @Jalios)
+ *   Sascha Greuel (Twitter: @SoftCreatR)
+ *
+ * @see core/i18n.js
+ */
+(function (exports) {
+	if (exports.de === undefined) {
+		exports.de = {
+			"mejs.plural-form": 1,			
+			"mejs.download-file": "Datei herunterladen",			
+			"mejs.install-flash": "Ihr Browser unterstützt kein Flash. Bitte aktivieren Sie Flash bzw. laden Sie die aktuellste Flash-Version herunter unter https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "Vollbild",			
+			"mejs.play": "Abspielen",
+			"mejs.pause": "Pause",			
+			"mejs.time-slider": "Zeitschieberegler",
+			"mejs.time-help-text": "Verwende die Pfeiltaste nach links/rechts, um eine Sekunde zu spulen, hoch/runter um zehn Sekunden zu spulen.",
+			"mejs.live-broadcast" : "Live-Übertragung",			
+			"mejs.volume-help-text": "Verwende die Pfeiltaste nach oben/nach unten um die Lautstärke zu erhöhen oder zu verringern.",
+			"mejs.unmute": "Stummschaltung aufheben",
+			"mejs.mute": "Stummschalten",
+			"mejs.volume-slider": "Lautstärkeregler",			
+			"mejs.video-player": "Video-Player",
+			"mejs.audio-player": "Audio-Player",			
+			"mejs.captions-subtitles": "Überschriften/Untertitel",
+			"mejs.captions-chapters": "Kapitel",
+			"mejs.none": "Keine",
+			"mejs.afrikaans": "Afrikanisch",
+			"mejs.albanian": "Albanisch",
+			"mejs.arabic": "Arabisch",
+			"mejs.belarusian": "Weißrussisch",
+			"mejs.bulgarian": "Bulgarisch",
+			"mejs.catalan": "Katalanisch",
+			"mejs.chinese": "Chinesisch",
+			"mejs.chinese-simplified": "Chinesisch (Vereinfacht)",
+			"mejs.chinese-traditional": "Chinesisch (Traditionell)",
+			"mejs.croatian": "Kroatisch",
+			"mejs.czech": "Tschechisch",
+			"mejs.danish": "Dänisch",
+			"mejs.dutch": "Niederländisch",
+			"mejs.english": "Englisch",
+			"mejs.estonian": "Estnisch",
+			"mejs.filipino": "Filipino",
+			"mejs.finnish": "Finnisch",
+			"mejs.french": "Französisch",
+			"mejs.galician": "Galicisch",
+			"mejs.german": "Deutsch",
+			"mejs.greek": "Griechisch",
+			"mejs.haitian-creole": "Haitianisch",
+			"mejs.hebrew": "Hebräisch",
+			"mejs.hindi": "Hindi",
+			"mejs.hungarian": "Ungarisch",
+			"mejs.icelandic": "Isländisch",
+			"mejs.indonesian": "Indonesisch",
+			"mejs.irish": "Irisch",
+			"mejs.italian": "Italienisch",
+			"mejs.japanese": "Japanisch",
+			"mejs.korean": "Koreanisch",
+			"mejs.latvian": "Lettisch",
+			"mejs.lithuanian": "Litauisch",
+			"mejs.macedonian": "Mazedonisch",
+			"mejs.malay": "Malaysisch",
+			"mejs.maltese": "Maltesisch",
+			"mejs.norwegian": "Norwegisch",
+			"mejs.persian": "Persisch",
+			"mejs.polish": "Polnisch",
+			"mejs.portuguese": "Portugiesisch",
+			"mejs.romanian": "Rumänisch",
+			"mejs.russian": "Russisch",
+			"mejs.serbian": "Serbisch",
+			"mejs.slovak": "Slovakisch",
+			"mejs.slovenian": "Slovenisch",
+			"mejs.spanish": "Spanisch",
+			"mejs.swahili": "Swahili",
+			"mejs.swedish": "Schwedisch",
+			"mejs.tagalog": "Tagalog",
+			"mejs.thai": "Thailändisch",
+			"mejs.turkish": "Türkisch",
+			"mejs.ukrainian": "Ukrainisch",
+			"mejs.vietnamese": "Vietnamnesisch",
+			"mejs.welsh": "Walisisch",
+			"mejs.yiddish": "Jiddisch"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/lang/es.js

@@ -0,0 +1,90 @@
+/*!
+ * This is a `i18n` language object.
+ *
+ * Spanish
+ *
+ * @author
+ *   Jalios (Twitter: @Jalios)
+ *   Sascha Greuel (Twitter: @SoftCreatR)
+ *   Rafael Miranda (GitHub: @rafa8626)
+ *
+ * @see core/i18n.js
+ */(function (exports) {
+	if (exports.es === undefined) {
+		exports.es = {
+			"mejs.plural-form": 1,			
+			"mejs.download-file": "Descargar archivo",			
+			"mejs.install-flash": "Esta usando un navegador que no tiene activado o instalado el reproductor de Flash. Por favor active el plugin del reproductor de Flash o descargue la versión más reciente en https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "Pantalla completa",			
+			"mejs.play": "Reproducción",
+			"mejs.pause": "Pausa",			
+			"mejs.time-slider": "Control deslizante de tiempo",
+			"mejs.time-help-text": "Use las flechas Izquierda/Derecha para avanzar un segundo y las flechas Arriba/Abajo para avanzar diez segundos.",
+			"mejs.live-broadcast": "Transmisión en Vivo",			
+			"mejs.volume-help-text": "Use las flechas Arriba/Abajo para subir o bajar el volumen.",
+			"mejs.unmute": "Reactivar silencio",
+			"mejs.mute": "Silencio",
+			"mejs.volume-slider": "Control deslizante de volumen",			
+			"mejs.video-player": "Reproductor de video",
+			"mejs.audio-player": "Reproductor de audio",			
+			"mejs.captions-subtitles": "Leyendas/Subtítulos",
+			"mejs.captions-chapters": "Capítulos",
+			"mejs.none": "Ninguno",
+			"mejs.afrikaans": "Afrikaans",
+			"mejs.albanian": "Albano",
+			"mejs.arabic": "Árabe",
+			"mejs.belarusian": "Bielorruso",
+			"mejs.bulgarian": "Búlgaro",
+			"mejs.catalan": "Catalán",
+			"mejs.chinese": "Chino",
+			"mejs.chinese-simplified": "Chino (Simplificado)",
+			"mejs.chinese-traditional": "Chino (Tradicional)",
+			"mejs.croatian": "Croata",
+			"mejs.czech": "Checo",
+			"mejs.danish": "Danés",
+			"mejs.dutch": "Holandés",
+			"mejs.english": "Inglés",
+			"mejs.estonian": "Estoniano",
+			"mejs.filipino": "Filipino",
+			"mejs.finnish": "Finlandés",
+			"mejs.french": "Francés",
+			"mejs.galician": "Gallego",
+			"mejs.german": "Alemán",
+			"mejs.greek": "Griego",
+			"mejs.haitian-creole": "Haitiano Criollo",
+			"mejs.hebrew": "Hebreo",
+			"mejs.hindi": "Hindi",
+			"mejs.hungarian": "Húngaro",
+			"mejs.icelandic": "Islandés",
+			"mejs.indonesian": "Indonesio",
+			"mejs.irish": "Irlandés",
+			"mejs.italian": "Italiano",
+			"mejs.japanese": "Japonés",
+			"mejs.korean": "Coreano",
+			"mejs.latvian": "Letón",
+			"mejs.lithuanian": "Lituano",
+			"mejs.macedonian": "Macedonio",
+			"mejs.malay": "Malayo",
+			"mejs.maltese": "Maltés",
+			"mejs.norwegian": "Noruego",
+			"mejs.persian": "Persa",
+			"mejs.polish": "Polaco",
+			"mejs.portuguese": "Portugués",
+			"mejs.romanian": "Rumano",
+			"mejs.russian": "Ruso",
+			"mejs.serbian": "Serbio",
+			"mejs.slovak": "Eslovaco",
+			"mejs.slovenian": "Eslovenio",
+			"mejs.spanish": "Español",
+			"mejs.swahili": "Swahili",
+			"mejs.swedish": "Suizo",
+			"mejs.tagalog": "Tagalog",
+			"mejs.thai": "Tailandés",
+			"mejs.turkish": "Turco",
+			"mejs.ukrainian": "Ucraniano",
+			"mejs.vietnamese": "Vietnamita",
+			"mejs.welsh": "Galés",
+			"mejs.yiddish": "Yiddish"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/lang/fr.js

@@ -0,0 +1,91 @@
+'use strict';/*!
+ * This is a `i18n` language object.
+ *
+ * French
+ *
+ * @author
+ *   Luc Poupard (Twitter: @klohFR)
+ *   Jalios (Twitter: @Jalios)
+ *   Sascha Greuel (Twitter: @SoftCreatR)
+ *
+ * @see core/i18n.js
+ */
+(function (exports) {
+	if (exports.fr === undefined) {
+		exports.fr = {
+			"mejs.plural-form": 2,			
+			"mejs.download-file": "Télécharger le fichier",			
+			"mejs.install-flash": "Vous utilisez un navigateur sur lequel Flash ne semble pas installé ou activé. Veuillez activer le plugin Flash ou télécharger la dernière version sur https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "Plein écran",			
+			"mejs.play": "Lecture",
+			"mejs.pause": "Pause",			
+			"mejs.time-slider": "Curseur temporel",
+			"mejs.time-help-text": "Utilisez les flèches Gauche/Droite du clavier pour avancer d'une seconde, les flèches Haut/Bas pour avancer de 10 secondes.",
+			"mejs.live-broadcast" : "Diffusion en direct",			
+			"mejs.volume-help-text": "Utilisez les flèches Haut/Bas du clavier pour augmenter ou diminuer le volume.",
+			"mejs.unmute": "Activer le son",
+			"mejs.mute": "Désactiver le son",
+			"mejs.volume-slider": "Volume",			
+			"mejs.video-player": "Lecteur Vidéo",
+			"mejs.audio-player": "Lecteur Audio",			
+			"mejs.captions-subtitles": "Sous-titres",
+			"mejs.captions-chapters": "Chapitres",
+			"mejs.none": "Aucun",
+			"mejs.afrikaans": "Afrikaans",
+			"mejs.albanian": "Albanais",
+			"mejs.arabic": "Arabe",
+			"mejs.belarusian": "Biélorusse",
+			"mejs.bulgarian": "Bulgare",
+			"mejs.catalan": "Catalan",
+			"mejs.chinese": "Chinois",
+			"mejs.chinese-simplified": "Chinois (simplifié)",
+			"mejs.chinese-traditional": "Chinois (traditionnel)",
+			"mejs.croatian": "Croate",
+			"mejs.czech": "Tchèque",
+			"mejs.danish": "Danois",
+			"mejs.dutch": "Néerlandais",
+			"mejs.english": "Anglais",
+			"mejs.estonian": "Estonien",
+			"mejs.filipino": "Filipino",
+			"mejs.finnish": "Finnois",
+			"mejs.french": "Français",
+			"mejs.galician": "Galicien",
+			"mejs.german": "Allemand",
+			"mejs.greek": "Grec",
+			"mejs.haitian-creole": "Créole haïtien",
+			"mejs.hebrew": "Hébreu",
+			"mejs.hindi": "Hindi",
+			"mejs.hungarian": "Hongrois",
+			"mejs.icelandic": "Islandais",
+			"mejs.indonesian": "Indonésien",
+			"mejs.irish": "Irlandais",
+			"mejs.italian": "Italien",
+			"mejs.japanese": "Japonais",
+			"mejs.korean": "Coréen",
+			"mejs.latvian": "Letton",
+			"mejs.lithuanian": "Lituanien",
+			"mejs.macedonian": "Macédonien",
+			"mejs.malay": "Malais",
+			"mejs.maltese": "Maltais",
+			"mejs.norwegian": "Norvégien",
+			"mejs.persian": "Perse",
+			"mejs.polish": "Polonais",
+			"mejs.portuguese": "Portugais",
+			"mejs.romanian": "Roumain",
+			"mejs.russian": "Russe",
+			"mejs.serbian": "Serbe",
+			"mejs.slovak": "Slovaque",
+			"mejs.slovenian": "Slovène",
+			"mejs.spanish": "Espagnol",
+			"mejs.swahili": "Swahili",
+			"mejs.swedish": "Suédois",
+			"mejs.tagalog": "Tagalog",
+			"mejs.thai": "Thaï",
+			"mejs.turkish": "Turque",
+			"mejs.ukrainian": "Ukrainien",
+			"mejs.vietnamese": "Vietnamien",
+			"mejs.welsh": "Gallois",
+			"mejs.yiddish": "Yiddish"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/lang/hr.js

@@ -0,0 +1,87 @@
+'use strict';/*!
+ * This is a `i18n` language object.
+ *
+ * Croatian
+ *
+ * @author
+ *   Hrvoj3e (hrvoj3e@gmail.com) * @see core/i18n.js
+ */
+(function (exports) {
+	if (exports.hr === undefined) {
+		exports.hr = {
+			"mejs.plural-form": 7,			
+			"mejs.download-file": "Preuzmi datoteku",			
+			"mejs.install-flash": "Koristite preglednik koji nema omogućen ili instaliran Flash preglednik. Molimo Vas uključite Flash dodatak ili preuzmite najnoviju verziju s https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "Puni zaslon",			
+			"mejs.play": "Pokreni",
+			"mejs.pause": "Zaustavi",			
+			"mejs.time-slider": "Vremenska traka",
+			"mejs.time-help-text": "Koristi strelice lijevo/desno za pomak naprijed za 1 sekundu te gore/dolje za pomak od 10 sekundi.",
+			//"mejs.live-broadcast" : "Live Broadcast",			
+			"mejs.volume-help-text": "Koristi strelice gore/dolje za pojačavanje ili stišavanje.",
+			"mejs.unmute": "Uključi zvuk",
+			"mejs.mute": "Isključi zvuk",
+			"mejs.volume-slider": "Pokazivač razine zvuka",			
+			"mejs.video-player": "Video preglednik",
+			"mejs.audio-player": "Audio preglednik",			
+			"mejs.captions-subtitles": "Opisi/Prijevodi",
+			// "mejs.captions-chapters": "Chapters",
+			"mejs.none": "Ništa",
+			"mejs.afrikaans": "Afrički",
+			"mejs.albanian": "Albanski",
+			"mejs.arabic": "Arapski",
+			"mejs.belarusian": "Bjeloruski",
+			"mejs.bulgarian": "Bugarski",
+			"mejs.catalan": "Katalonski",
+			"mejs.chinese": "Kineski",
+			"mejs.chinese-simplified": "Kineski (jednostavni)",
+			"mejs.chinese-traditional": "Kineski (tradicionalni)",
+			"mejs.croatian": "Hrvatski",
+			"mejs.czech": "Češki",
+			"mejs.danish": "Danski",
+			"mejs.dutch": "Nizozemski",
+			"mejs.english": "Engleski",
+			"mejs.estonian": "Estonski",
+			"mejs.filipino": "Filipinski",
+			"mejs.finnish": "Finski",
+			"mejs.french": "Francuski",
+			"mejs.galician": "Galicijski",
+			"mejs.german": "Njemački",
+			"mejs.greek": "Grčki",
+			"mejs.haitian-creole": "Haićanski kreolski",
+			"mejs.hebrew": "Hebrejski",
+			"mejs.hindi": "Hindski",
+			"mejs.hungarian": "Mađarski",
+			"mejs.icelandic": "Islandski",
+			"mejs.indonesian": "Indonezijski",
+			"mejs.irish": "Irski",
+			"mejs.italian": "Talijanski",
+			"mejs.japanese": "Japanski",
+			"mejs.korean": "Korejski",
+			"mejs.latvian": "Latvijski",
+			"mejs.lithuanian": "Litvanski",
+			"mejs.macedonian": "Makedonski",
+			"mejs.malay": "Malajski",
+			"mejs.maltese": "Malteški",
+			"mejs.norwegian": "Norveški",
+			"mejs.persian": "Perzijski",
+			"mejs.polish": "Poljski",
+			"mejs.portuguese": "Portugalski",
+			"mejs.romanian": "Rumunjski",
+			"mejs.russian": "Ruski",
+			"mejs.serbian": "Srpski",
+			"mejs.slovak": "Slovački",
+			"mejs.slovenian": "Slovenski",
+			"mejs.spanish": "Španjolski",
+			"mejs.swahili": "Svahili",
+			"mejs.swedish": "Švedski",
+			"mejs.tagalog": "Tagaloški",
+			"mejs.thai": "Tajski",
+			"mejs.turkish": "Turski",
+			"mejs.ukrainian": "Ukrajinski",
+			"mejs.vietnamese": "Vijetnamski",
+			"mejs.welsh": "Velški",
+			"mejs.yiddish": "Jidiški"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/lang/hu.js

@@ -0,0 +1,90 @@
+'use strict';/*!
+ * This is a `i18n` language object.
+ *
+ * Hungarian
+ *
+ * @author
+ *   Jalios (Twitter: @Jalios)
+ *   Sascha Greuel (Twitter: @SoftCreatR)
+ *
+ * @see core/i18n.js
+ */
+(function (exports) {
+	if (exports.hu === undefined) {
+		exports.hu = {
+			"mejs.plural-form": 1,			
+			"mejs.download-file": "Fájl letöltése",			
+			// "mejs.install-flash": "You are using a browser that does not have Flash player enabled or installed. Please turn on your Flash player plugin or download the latest version from https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "Teljes képernyő",			
+			"mejs.play": "Lejátszás",
+			"mejs.pause": "Szünet",			
+			"mejs.time-slider": "Idő csúszka",
+			"mejs.time-help-text": "Használja a Bal/Jobb nyíl gombokat az egy másodperces léptetéshez, a Fel/Le nyíl gombokat a tíz másodperces léptetéshez.",
+			//"mejs.live-broadcast" : "Live Broadcast",			
+			"mejs.volume-help-text": "Használja a Fel/Le nyíl gombokat a hangerő növeléséhez vagy csökkentéséhez.",
+			"mejs.unmute": "Némítás feloldása",
+			"mejs.mute": "Némítás",
+			"mejs.volume-slider": "Hangerőcsúszka",			
+			"mejs.video-player": "Videolejátszó",
+			"mejs.audio-player": "Audiolejátszó",			
+			"mejs.captions-subtitles": "Képaláírás/Feliratok",
+			// "mejs.captions-chapters": "Chapters",
+			"mejs.none": "Nincs"
+			// "mejs.afrikaans": "Afrikaans",
+			// "mejs.albanian": "Albanian",
+			// "mejs.arabic": "Arabic",
+			// "mejs.belarusian": "Belarusian",
+			// "mejs.bulgarian": "Bulgarian",
+			// "mejs.catalan": "Catalan",
+			// "mejs.chinese": "Chinese",
+			// "mejs.chinese-simplified": "Chinese (Simplified)",
+			// "mejs.chinese-traditional": "Chinese (Traditional)",
+			// "mejs.croatian": "Croatian",
+			// "mejs.czech": "Czech",
+			// "mejs.danish": "Danish",
+			// "mejs.dutch": "Dutch",
+			// "mejs.english": "English",
+			// "mejs.estonian": "Estonian",
+			// "mejs.filipino": "Filipino",
+			// "mejs.finnish": "Finnish",
+			// "mejs.french": "French",
+			// "mejs.galician": "Galician",
+			// "mejs.german": "German",
+			// "mejs.greek": "Greek",
+			// "mejs.haitian-creole": "Haitian Creole",
+			// "mejs.hebrew": "Hebrew",
+			// "mejs.hindi": "Hindi",
+			// "mejs.hungarian": "Hungarian",
+			// "mejs.icelandic": "Icelandic",
+			// "mejs.indonesian": "Indonesian",
+			// "mejs.irish": "Irish",
+			// "mejs.italian": "Italian",
+			// "mejs.japanese": "Japanese",
+			// "mejs.korean": "Korean",
+			// "mejs.latvian": "Latvian",
+			// "mejs.lithuanian": "Lithuanian",
+			// "mejs.macedonian": "Macedonian",
+			// "mejs.malay": "Malay",
+			// "mejs.maltese": "Maltese",
+			// "mejs.norwegian": "Norwegian",
+			// "mejs.persian": "Persian",
+			// "mejs.polish": "Polish",
+			// "mejs.portuguese": "Portuguese",
+			// "mejs.romanian": "Romanian",
+			// "mejs.russian": "Russian",
+			// "mejs.serbian": "Serbian",
+			// "mejs.slovak": "Slovak",
+			// "mejs.slovenian": "Slovenian",
+			// "mejs.spanish": "Spanish",
+			// "mejs.swahili": "Swahili",
+			// "mejs.swedish": "Swedish",
+			// "mejs.tagalog": "Tagalog",
+			// "mejs.thai": "Thai",
+			// "mejs.turkish": "Turkish",
+			// "mejs.ukrainian": "Ukrainian",
+			// "mejs.vietnamese": "Vietnamese",
+			// "mejs.welsh": "Welsh",
+			// "mejs.yiddish": "Yiddish"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/lang/it.js

@@ -0,0 +1,90 @@
+'use strict';/*!
+ * This is a `i18n` language object.
+ *
+ * Italian
+ *
+ * @author
+ *   Jalios (Twitter: @Jalios)
+ *   Sascha "SoftCreatR" Greuel
+ *
+ * @see core/i18n.js
+ */
+(function (exports) {
+	if (exports.it === undefined) {
+		exports.it = {
+			"mejs.plural-form": 1,			
+			"mejs.download-file": "Scaricare il file",			
+			// "mejs.install-flash": "You are using a browser that does not have Flash player enabled or installed. Please turn on your Flash player plugin or download the latest version from https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "Schermo intero",			
+			"mejs.play": "Eseguire",
+			"mejs.pause": "Pausa",			
+			"mejs.time-slider": "Barra di scorrimento",
+			"mejs.time-help-text": "Utilizzare i tasti Freccia sinistra/Freccia destra per avanzare di un secondo, Freccia Su/Giù per avanzare dieci secondi.",
+			//"mejs.live-broadcast" : "Live Broadcast",			
+			"mejs.volume-help-text": "Utilizzare i tasti Freccia Su/Giù per aumentare o diminuire il volume.",
+			"mejs.unmute": "Disattivare muto",
+			"mejs.mute": "Muto",
+			"mejs.volume-slider": "Barra del volume",			
+			"mejs.video-player": "Lettore Video",
+			"mejs.audio-player": "Lettore Audio",			
+			"mejs.captions-subtitles": "Acquisizioni/sottotitoli",
+			// "mejs.captions-chapters": "Chapters",
+			"mejs.none": "Nessuno"
+			// "mejs.afrikaans": "Afrikaans",
+			// "mejs.albanian": "Albanian",
+			// "mejs.arabic": "Arabic",
+			// "mejs.belarusian": "Belarusian",
+			// "mejs.bulgarian": "Bulgarian",
+			// "mejs.catalan": "Catalan",
+			// "mejs.chinese": "Chinese",
+			// "mejs.chinese-simplified": "Chinese (Simplified)",
+			// "mejs.chinese-traditional": "Chinese (Traditional)",
+			// "mejs.croatian": "Croatian",
+			// "mejs.czech": "Czech",
+			// "mejs.danish": "Danish",
+			// "mejs.dutch": "Dutch",
+			// "mejs.english": "English",
+			// "mejs.estonian": "Estonian",
+			// "mejs.filipino": "Filipino",
+			// "mejs.finnish": "Finnish",
+			// "mejs.french": "French",
+			// "mejs.galician": "Galician",
+			// "mejs.german": "German",
+			// "mejs.greek": "Greek",
+			// "mejs.haitian-creole": "Haitian Creole",
+			// "mejs.hebrew": "Hebrew",
+			// "mejs.hindi": "Hindi",
+			// "mejs.hungarian": "Hungarian",
+			// "mejs.icelandic": "Icelandic",
+			// "mejs.indonesian": "Indonesian",
+			// "mejs.irish": "Irish",
+			// "mejs.italian": "Italian",
+			// "mejs.japanese": "Japanese",
+			// "mejs.korean": "Korean",
+			// "mejs.latvian": "Latvian",
+			// "mejs.lithuanian": "Lithuanian",
+			// "mejs.macedonian": "Macedonian",
+			// "mejs.malay": "Malay",
+			// "mejs.maltese": "Maltese",
+			// "mejs.norwegian": "Norwegian",
+			// "mejs.persian": "Persian",
+			// "mejs.polish": "Polish",
+			// "mejs.portuguese": "Portuguese",
+			// "mejs.romanian": "Romanian",
+			// "mejs.russian": "Russian",
+			// "mejs.serbian": "Serbian",
+			// "mejs.slovak": "Slovak",
+			// "mejs.slovenian": "Slovenian",
+			// "mejs.spanish": "Spanish",
+			// "mejs.swahili": "Swahili",
+			// "mejs.swedish": "Swedish",
+			// "mejs.tagalog": "Tagalog",
+			// "mejs.thai": "Thai",
+			// "mejs.turkish": "Turkish",
+			// "mejs.ukrainian": "Ukrainian",
+			// "mejs.vietnamese": "Vietnamese",
+			// "mejs.welsh": "Welsh",
+			// "mejs.yiddish": "Yiddish"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/lang/ja.js

@@ -0,0 +1,90 @@
+'use strict';/*!
+ * This is a `i18n` language object.
+ *
+ * Japanese
+ *
+ * @author
+ *   Jalios (Twitter: @Jalios)
+ *   Sascha "SoftCreatR" Greuel
+ *
+ * @see core/i18n.js
+ */
+(function (exports) {
+	if (exports.ja === undefined) {
+		exports.ja = {
+			"mejs.plural-form": 0,			
+			"mejs.download-file": "ファイルをダウンロードする",			
+			// "mejs.install-flash": "You are using a browser that does not have Flash player enabled or installed. Please turn on your Flash player plugin or download the latest version from https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "全画面",			
+			"mejs.play": "再生",
+			"mejs.pause": "一時停止",			
+			"mejs.time-slider": "タイムスライダー",
+			"mejs.time-help-text": "1秒進めるには左/右矢印をキーを、10秒進めるには上/下矢印を使います。",
+			//"mejs.live-broadcast" : "Live Broadcast",			
+			"mejs.volume-help-text": "音量を上げたり下げたりするには、上/下矢印を使います。",
+			"mejs.unmute": "ミュートを解除",
+			"mejs.mute": "ミュート",
+			"mejs.volume-slider": "音量スライダー",			
+			"mejs.video-player": "ビデオプレーヤー",
+			"mejs.audio-player": "オーディオプレーヤー",			
+			"mejs.captions-subtitles": "キャプション/字幕",
+			// "mejs.captions-chapters": "Chapters",
+			"mejs.none": "なし"
+			// "mejs.afrikaans": "Afrikaans",
+			// "mejs.albanian": "Albanian",
+			// "mejs.arabic": "Arabic",
+			// "mejs.belarusian": "Belarusian",
+			// "mejs.bulgarian": "Bulgarian",
+			// "mejs.catalan": "Catalan",
+			// "mejs.chinese": "Chinese",
+			// "mejs.chinese-simplified": "Chinese (Simplified)",
+			// "mejs.chinese-traditional": "Chinese (Traditional)",
+			// "mejs.croatian": "Croatian",
+			// "mejs.czech": "Czech",
+			// "mejs.danish": "Danish",
+			// "mejs.dutch": "Dutch",
+			// "mejs.english": "English",
+			// "mejs.estonian": "Estonian",
+			// "mejs.filipino": "Filipino",
+			// "mejs.finnish": "Finnish",
+			// "mejs.french": "French",
+			// "mejs.galician": "Galician",
+			// "mejs.german": "German",
+			// "mejs.greek": "Greek",
+			// "mejs.haitian-creole": "Haitian Creole",
+			// "mejs.hebrew": "Hebrew",
+			// "mejs.hindi": "Hindi",
+			// "mejs.hungarian": "Hungarian",
+			// "mejs.icelandic": "Icelandic",
+			// "mejs.indonesian": "Indonesian",
+			// "mejs.irish": "Irish",
+			// "mejs.italian": "Italian",
+			// "mejs.japanese": "Japanese",
+			// "mejs.korean": "Korean",
+			// "mejs.latvian": "Latvian",
+			// "mejs.lithuanian": "Lithuanian",
+			// "mejs.macedonian": "Macedonian",
+			// "mejs.malay": "Malay",
+			// "mejs.maltese": "Maltese",
+			// "mejs.norwegian": "Norwegian",
+			// "mejs.persian": "Persian",
+			// "mejs.polish": "Polish",
+			// "mejs.portuguese": "Portuguese",
+			// "mejs.romanian": "Romanian",
+			// "mejs.russian": "Russian",
+			// "mejs.serbian": "Serbian",
+			// "mejs.slovak": "Slovak",
+			// "mejs.slovenian": "Slovenian",
+			// "mejs.spanish": "Spanish",
+			// "mejs.swahili": "Swahili",
+			// "mejs.swedish": "Swedish",
+			// "mejs.tagalog": "Tagalog",
+			// "mejs.thai": "Thai",
+			// "mejs.turkish": "Turkish",
+			// "mejs.ukrainian": "Ukrainian",
+			// "mejs.vietnamese": "Vietnamese",
+			// "mejs.welsh": "Welsh",
+			// "mejs.yiddish": "Yiddish"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/lang/ko.js

@@ -0,0 +1,90 @@
+'use strict';/*!
+ * This is a `i18n` language object.
+ *
+ * Korean
+ *
+ * @author
+ *   Jalios (Twitter: @Jalios)
+ *   Sascha "SoftCreatR" Greuel
+ *
+ * @see core/i18n.js
+ */
+(function (exports) {
+	if (exports.ko === undefined) {
+		exports.ko = {
+			"mejs.plural-form": 0,			
+			"mejs.download-file": "파일 다운로드",			
+			// "mejs.install-flash": "You are using a browser that does not have Flash player enabled or installed. Please turn on your Flash player plugin or download the latest version from https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "전체화면",			
+			"mejs.play": "작동",
+			"mejs.pause": "정지",			
+			"mejs.time-slider": "시간 슬라이더",
+			"mejs.time-help-text": "1초 전진하려면 좌/우측 화살표를 사용하시고 10초 전진하려면 위/아래 화살표를 사용하세요.",
+			//"mejs.live-broadcast" : "Live Broadcast",			
+			"mejs.volume-help-text": "볼륨을 높이거나 낮추려면 위/아래 화살표를 이용하세요.",
+			"mejs.unmute": "음소거 해제",
+			"mejs.mute": "말 없는",
+			"mejs.volume-slider": "볼륨 슬라이더",			
+			"mejs.video-player": "비디오 플레이어",
+			"mejs.audio-player": "오디오 플레이어",			
+			"mejs.captions-subtitles": "캡션/자막",
+			// "mejs.captions-chapters": "Chapters",
+			"mejs.none": "없음"
+			// "mejs.afrikaans": "Afrikaans",
+			// "mejs.albanian": "Albanian",
+			// "mejs.arabic": "Arabic",
+			// "mejs.belarusian": "Belarusian",
+			// "mejs.bulgarian": "Bulgarian",
+			// "mejs.catalan": "Catalan",
+			// "mejs.chinese": "Chinese",
+			// "mejs.chinese-simplified": "Chinese (Simplified)",
+			// "mejs.chinese-traditional": "Chinese (Traditional)",
+			// "mejs.croatian": "Croatian",
+			// "mejs.czech": "Czech",
+			// "mejs.danish": "Danish",
+			// "mejs.dutch": "Dutch",
+			// "mejs.english": "English",
+			// "mejs.estonian": "Estonian",
+			// "mejs.filipino": "Filipino",
+			// "mejs.finnish": "Finnish",
+			// "mejs.french": "French",
+			// "mejs.galician": "Galician",
+			// "mejs.german": "German",
+			// "mejs.greek": "Greek",
+			// "mejs.haitian-creole": "Haitian Creole",
+			// "mejs.hebrew": "Hebrew",
+			// "mejs.hindi": "Hindi",
+			// "mejs.hungarian": "Hungarian",
+			// "mejs.icelandic": "Icelandic",
+			// "mejs.indonesian": "Indonesian",
+			// "mejs.irish": "Irish",
+			// "mejs.italian": "Italian",
+			// "mejs.japanese": "Japanese",
+			// "mejs.korean": "Korean",
+			// "mejs.latvian": "Latvian",
+			// "mejs.lithuanian": "Lithuanian",
+			// "mejs.macedonian": "Macedonian",
+			// "mejs.malay": "Malay",
+			// "mejs.maltese": "Maltese",
+			// "mejs.norwegian": "Norwegian",
+			// "mejs.persian": "Persian",
+			// "mejs.polish": "Polish",
+			// "mejs.portuguese": "Portuguese",
+			// "mejs.romanian": "Romanian",
+			// "mejs.russian": "Russian",
+			// "mejs.serbian": "Serbian",
+			// "mejs.slovak": "Slovak",
+			// "mejs.slovenian": "Slovenian",
+			// "mejs.spanish": "Spanish",
+			// "mejs.swahili": "Swahili",
+			// "mejs.swedish": "Swedish",
+			// "mejs.tagalog": "Tagalog",
+			// "mejs.thai": "Thai",
+			// "mejs.turkish": "Turkish",
+			// "mejs.ukrainian": "Ukrainian",
+			// "mejs.vietnamese": "Vietnamese",
+			// "mejs.welsh": "Welsh",
+			// "mejs.yiddish": "Yiddish"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/lang/nl.js

@@ -0,0 +1,91 @@
+'use strict';/*!
+ * This is a `i18n` language object.
+ *
+ * Dutch
+ *
+ * @author
+ *   Leonard de Ruijter, Twitter: @LeonarddR
+ *   Jalios (Twitter: @Jalios)
+ *   Sascha "SoftCreatR" Greuel
+ *
+ * @see core/i18n.js
+ */
+(function (exports) {
+	if (exports.nl === undefined) {
+		exports.nl = {
+			"mejs.plural-form": 1,			
+			"mejs.download-file": "Bestand downloaden",			
+			// "mejs.install-flash": "You are using a browser that does not have Flash player enabled or installed. Please turn on your Flash player plugin or download the latest version from https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "Volledig scherm",			
+			"mejs.play": "Afspelen",
+			"mejs.pause": "Pauzeren",			
+			"mejs.time-slider": "Tijd schuifbalk",
+			"mejs.time-help-text": "Gebruik pijl naar links/rechts om per seconde te springen, pijl omhoog/omlaag om per tien seconden te springen.",
+			//"mejs.live-broadcast" : "Live Broadcast",			
+			"mejs.volume-help-text": "Gebruik pijl omhoog/omlaag om het volume te verhogen/verlagen.",
+			"mejs.unmute": "Dempen opheffen",
+			"mejs.mute": "Dempen",
+			"mejs.volume-slider": "Volume schuifbalk",			
+			"mejs.video-player": "Videospeler",
+			"mejs.audio-player": "Audiospeler",			
+			"mejs.captions-subtitles": "Bijschriften/ondertiteling",
+			// "mejs.captions-chapters": "Chapters",
+			"mejs.none": "Geen"
+			// "mejs.afrikaans": "Afrikaans",
+			// "mejs.albanian": "Albanian",
+			// "mejs.arabic": "Arabic",
+			// "mejs.belarusian": "Belarusian",
+			// "mejs.bulgarian": "Bulgarian",
+			// "mejs.catalan": "Catalan",
+			// "mejs.chinese": "Chinese",
+			// "mejs.chinese-simplified": "Chinese (Simplified)",
+			// "mejs.chinese-traditional": "Chinese (Traditional)",
+			// "mejs.croatian": "Croatian",
+			// "mejs.czech": "Czech",
+			// "mejs.danish": "Danish",
+			// "mejs.dutch": "Dutch",
+			// "mejs.english": "English",
+			// "mejs.estonian": "Estonian",
+			// "mejs.filipino": "Filipino",
+			// "mejs.finnish": "Finnish",
+			// "mejs.french": "French",
+			// "mejs.galician": "Galician",
+			// "mejs.german": "German",
+			// "mejs.greek": "Greek",
+			// "mejs.haitian-creole": "Haitian Creole",
+			// "mejs.hebrew": "Hebrew",
+			// "mejs.hindi": "Hindi",
+			// "mejs.hungarian": "Hungarian",
+			// "mejs.icelandic": "Icelandic",
+			// "mejs.indonesian": "Indonesian",
+			// "mejs.irish": "Irish",
+			// "mejs.italian": "Italian",
+			// "mejs.japanese": "Japanese",
+			// "mejs.korean": "Korean",
+			// "mejs.latvian": "Latvian",
+			// "mejs.lithuanian": "Lithuanian",
+			// "mejs.macedonian": "Macedonian",
+			// "mejs.malay": "Malay",
+			// "mejs.maltese": "Maltese",
+			// "mejs.norwegian": "Norwegian",
+			// "mejs.persian": "Persian",
+			// "mejs.polish": "Polish",
+			// "mejs.portuguese": "Portuguese",
+			// "mejs.romanian": "Romanian",
+			// "mejs.russian": "Russian",
+			// "mejs.serbian": "Serbian",
+			// "mejs.slovak": "Slovak",
+			// "mejs.slovenian": "Slovenian",
+			// "mejs.spanish": "Spanish",
+			// "mejs.swahili": "Swahili",
+			// "mejs.swedish": "Swedish",
+			// "mejs.tagalog": "Tagalog",
+			// "mejs.thai": "Thai",
+			// "mejs.turkish": "Turkish",
+			// "mejs.ukrainian": "Ukrainian",
+			// "mejs.vietnamese": "Vietnamese",
+			// "mejs.welsh": "Welsh",
+			// "mejs.yiddish": "Yiddish"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/lang/pl.js

@@ -0,0 +1,90 @@
+'use strict';/*!
+ * This is a `i18n` language object.
+ *
+ * Polish
+ *
+ * @author
+ *   Jalios (Twitter: @Jalios)
+ *   Sascha Greuel (Twitter: @SoftCreatR)
+ *
+ * @see core/i18n.js
+ */
+(function (exports) {
+	if (exports.pl === undefined) {
+		exports.pl = {
+			"mejs.plural-form": 9,			
+			"mejs.download-file": "Pobierz plik",			
+			"mejs.install-flash": "Twoja przeglądarka nie ma włączonej lub zainstalowanej wtyczki Flash Player. Prosimy ją włączyć lub pobrać najnowszą wersję ze strony https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "Pełny ekran",			
+			"mejs.play": "Odtwarzaj",
+			"mejs.pause": "Wstrzymaj",			
+			"mejs.time-slider": "Suwak czasu",
+			"mejs.time-help-text": "Strzałki w lewo/w prawo powodują przewijanie o sekundę, strzałki w górę/w dół o dziesięć sekund.",
+			"mejs.live-broadcast": "Transmisja na żywo",			
+			"mejs.volume-help-text": "Aby zwiększyć lub zmniejszyć głośność, użyj strzałek w górę/w dół.",
+			"mejs.unmute": "Wyłącz wyciszenie",
+			"mejs.mute": "Wycisz",
+			"mejs.volume-slider": "Suwak głośności",			
+			"mejs.video-player": "Odtwarzacz wideo",
+			"mejs.audio-player": "Odtwarzacz audio",			
+			"mejs.captions-subtitles": "Podpisy/napisy",
+			"mejs.captions-chapters": "Rozdziały",
+			"mejs.none": "Brak",
+			"mejs.afrikaans": "Afrykański",
+			"mejs.albanian": "Albański",
+			"mejs.arabic": "Arabski",
+			"mejs.belarusian": "Białoruski",
+			"mejs.bulgarian": "Bułgarski",
+			"mejs.catalan": "Kataloński",
+			"mejs.chinese": "Chiński",
+			"mejs.chinese-simplified": "Chiński (uproszczony)",
+			"mejs.chinese-traditional": "Chiński (tradycyjny)",
+			"mejs.croatian": "Chorwacki",
+			"mejs.czech": "Czeski",
+			"mejs.danish": "Duński",
+			"mejs.dutch": "Holenderski",
+			"mejs.english": "Angielski",
+			"mejs.estonian": "Estoński",
+			"mejs.filipino": "Filipiński",
+			"mejs.finnish": "Fiński",
+			"mejs.french": "Francuski",
+			"mejs.galician": "Galicyjski",
+			"mejs.german": "Niemiecki",
+			"mejs.greek": "Grecki",
+			"mejs.haitian-creole": "Haitański",
+			"mejs.hebrew": "Hebrajski",
+			"mejs.hindi": "Hinduski",
+			"mejs.hungarian": "Węgierski",
+			"mejs.icelandic": "Islandzki",
+			"mejs.indonesian": "Indonezyjski",
+			"mejs.irish": "Irlandzki",
+			"mejs.italian": "Włoski",
+			"mejs.japanese": "Japoński",
+			"mejs.korean": "Koreański",
+			"mejs.latvian": "Łotewski",
+			"mejs.lithuanian": "Litewski",
+			"mejs.macedonian": "Macedoński",
+			"mejs.malay": "Malajski",
+			"mejs.maltese": "Maltański",
+			"mejs.norwegian": "Norweski",
+			"mejs.persian": "Perski",
+			"mejs.polish": "Polski",
+			"mejs.portuguese": "Portugalski",
+			"mejs.romanian": "Rumuński",
+			"mejs.russian": "Rosyjski",
+			"mejs.serbian": "Serbski",
+			"mejs.slovak": "Słowacki",
+			"mejs.slovenian": "Słoweński",
+			"mejs.spanish": "Hiszpański",
+			"mejs.swahili": "Suahili",
+			"mejs.swedish": "Szwedzki",
+			"mejs.tagalog": "Tagalski",
+			"mejs.thai": "Tajski",
+			"mejs.turkish": "Turecki",
+			"mejs.ukrainian": "Ukraiński",
+			"mejs.vietnamese": "Wietnamski",
+			"mejs.welsh": "Walijski",
+			"mejs.yiddish": "Jidysz"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/lang/pt-br.js

@@ -0,0 +1,91 @@
+'use strict';/*!
+ * This is a `i18n` language object.
+ *
+ * Brazilian (Portuguese)
+ *
+ * @author
+ *   Armando Meziat (Twitter: @odnamrataizem)
+ *   Sascha Greuel (Twitter: @SoftCreatR)
+ *
+ * @see core/i18n.js
+ */
+(function (exports) {
+	if (exports['pt-BR'] === undefined) {
+		exports['pt-BR'] = {
+			"mejs.plural-form": 2,			
+			"mejs.download-file": "Baixar arquivo",			
+			// "mejs.install-flash": "You are using a browser that does not have Flash player enabled or installed. Please turn on your Flash player plugin or download the latest version from https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "Tela inteira",			
+			//"mejs.play": "Play",
+			//"mejs.pause": "Pause",			
+			//"mejs.time-slider": "Time Slider",
+			//"mejs.time-help-text": "Use Left/Right Arrow keys to advance one second, Up/Down arrows to advance ten seconds.",
+			//"mejs.live-broadcast" : "Live Broadcast",			
+			//"mejs.time-skip-back": "Skip back %1 second(s)",			
+			//"mejs.volume-help-text": "Use Up/Down Arrow keys to increase or decrease volume.",
+			"mejs.unmute": "Tirar silêncio",
+			"mejs.mute": "Silenciar",
+			//"mejs.volume-slider": "Volume Slider",			
+			//"mejs.video-player": "Video Player",
+			//"mejs.audio-player": "Audio Player",			
+			"mejs.captions-subtitles": "Legendas",
+			// "mejs.captions-chapters": "Chapters",
+			"mejs.none": "Sem legendas"
+			// "mejs.afrikaans": "Afrikaans",
+			// "mejs.albanian": "Albanian",
+			// "mejs.arabic": "Arabic",
+			// "mejs.belarusian": "Belarusian",
+			// "mejs.bulgarian": "Bulgarian",
+			// "mejs.catalan": "Catalan",
+			// "mejs.chinese": "Chinese",
+			// "mejs.chinese-simplified": "Chinese (Simplified)",
+			// "mejs.chinese-traditional": "Chinese (Traditional)",
+			// "mejs.croatian": "Croatian",
+			// "mejs.czech": "Czech",
+			// "mejs.danish": "Danish",
+			// "mejs.dutch": "Dutch",
+			// "mejs.english": "English",
+			// "mejs.estonian": "Estonian",
+			// "mejs.filipino": "Filipino",
+			// "mejs.finnish": "Finnish",
+			// "mejs.french": "French",
+			// "mejs.galician": "Galician",
+			// "mejs.german": "German",
+			// "mejs.greek": "Greek",
+			// "mejs.haitian-creole": "Haitian Creole",
+			// "mejs.hebrew": "Hebrew",
+			// "mejs.hindi": "Hindi",
+			// "mejs.hungarian": "Hungarian",
+			// "mejs.icelandic": "Icelandic",
+			// "mejs.indonesian": "Indonesian",
+			// "mejs.irish": "Irish",
+			// "mejs.italian": "Italian",
+			// "mejs.japanese": "Japanese",
+			// "mejs.korean": "Korean",
+			// "mejs.latvian": "Latvian",
+			// "mejs.lithuanian": "Lithuanian",
+			// "mejs.macedonian": "Macedonian",
+			// "mejs.malay": "Malay",
+			// "mejs.maltese": "Maltese",
+			// "mejs.norwegian": "Norwegian",
+			// "mejs.persian": "Persian",
+			// "mejs.polish": "Polish",
+			// "mejs.portuguese": "Portuguese",
+			// "mejs.romanian": "Romanian",
+			// "mejs.russian": "Russian",
+			// "mejs.serbian": "Serbian",
+			// "mejs.slovak": "Slovak",
+			// "mejs.slovenian": "Slovenian",
+			// "mejs.spanish": "Spanish",
+			// "mejs.swahili": "Swahili",
+			// "mejs.swedish": "Swedish",
+			// "mejs.tagalog": "Tagalog",
+			// "mejs.thai": "Thai",
+			// "mejs.turkish": "Turkish",
+			// "mejs.ukrainian": "Ukrainian",
+			// "mejs.vietnamese": "Vietnamese",
+			// "mejs.welsh": "Welsh",
+			// "mejs.yiddish": "Yiddish"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/lang/pt.js

@@ -0,0 +1,92 @@
+'use strict';/*!
+ * This is a `i18n` language object.
+ *
+ * Portuguese
+ *
+ * @author
+ *   Jalios (Twitter: @Jalios)
+ *   Sascha Greuel (Twitter: @SoftCreatR)
+ *
+ * @see core/i18n.js
+ */
+(function (exports) {
+	if (exports.pt === undefined) {
+		exports.pt = {
+			"mejs.plural-form": 1,			
+			"mejs.download-file": "Descarregar o ficheiro",			
+			// "mejs.install-flash": "You are using a browser that does not have Flash player enabled or installed. Please turn on your Flash player plugin or download the latest version from https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "Ecrã completo",			
+			"mejs.play": "Reprodução",
+			"mejs.pause": "Pausa",			
+			"mejs.time-slider": "Deslizador do tempo",
+			"mejs.time-help-text": "Use as teclas das setas para a esquerda/direita para avançar um segundo, e as setas para cima/baixo para avançar dez segundos.",
+			//"mejs.live-broadcast" : "Live Broadcast",
+			
+			
+			"mejs.volume-help-text": "Use as teclas das setas para cima/baixo para aumentar ou diminuir o volume.",
+			"mejs.unmute": "Voltar ao som",
+			"mejs.mute": "Silêncio",
+			"mejs.volume-slider": "Deslizador do volume",			
+			"mejs.video-player": "Leitor de vídeo",
+			"mejs.audio-player": "Leitor de áudio",			
+			"mejs.captions-subtitles": "Legendas",
+			// "mejs.captions-chapters": "Chapters",
+			"mejs.none": "Nenhum"
+			// "mejs.afrikaans": "Afrikaans",
+			// "mejs.albanian": "Albanian",
+			// "mejs.arabic": "Arabic",
+			// "mejs.belarusian": "Belarusian",
+			// "mejs.bulgarian": "Bulgarian",
+			// "mejs.catalan": "Catalan",
+			// "mejs.chinese": "Chinese",
+			// "mejs.chinese-simplified": "Chinese (Simplified)",
+			// "mejs.chinese-traditional": "Chinese (Traditional)",
+			// "mejs.croatian": "Croatian",
+			// "mejs.czech": "Czech",
+			// "mejs.danish": "Danish",
+			// "mejs.dutch": "Dutch",
+			// "mejs.english": "English",
+			// "mejs.estonian": "Estonian",
+			// "mejs.filipino": "Filipino",
+			// "mejs.finnish": "Finnish",
+			// "mejs.french": "French",
+			// "mejs.galician": "Galician",
+			// "mejs.german": "German",
+			// "mejs.greek": "Greek",
+			// "mejs.haitian-creole": "Haitian Creole",
+			// "mejs.hebrew": "Hebrew",
+			// "mejs.hindi": "Hindi",
+			// "mejs.hungarian": "Hungarian",
+			// "mejs.icelandic": "Icelandic",
+			// "mejs.indonesian": "Indonesian",
+			// "mejs.irish": "Irish",
+			// "mejs.italian": "Italian",
+			// "mejs.japanese": "Japanese",
+			// "mejs.korean": "Korean",
+			// "mejs.latvian": "Latvian",
+			// "mejs.lithuanian": "Lithuanian",
+			// "mejs.macedonian": "Macedonian",
+			// "mejs.malay": "Malay",
+			// "mejs.maltese": "Maltese",
+			// "mejs.norwegian": "Norwegian",
+			// "mejs.persian": "Persian",
+			// "mejs.polish": "Polish",
+			// "mejs.portuguese": "Portuguese",
+			// "mejs.romanian": "Romanian",
+			// "mejs.russian": "Russian",
+			// "mejs.serbian": "Serbian",
+			// "mejs.slovak": "Slovak",
+			// "mejs.slovenian": "Slovenian",
+			// "mejs.spanish": "Spanish",
+			// "mejs.swahili": "Swahili",
+			// "mejs.swedish": "Swedish",
+			// "mejs.tagalog": "Tagalog",
+			// "mejs.thai": "Thai",
+			// "mejs.turkish": "Turkish",
+			// "mejs.ukrainian": "Ukrainian",
+			// "mejs.vietnamese": "Vietnamese",
+			// "mejs.welsh": "Welsh",
+			// "mejs.yiddish": "Yiddish"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/lang/ro.js

@@ -0,0 +1,90 @@
+'use strict';/*!
+ * This is a `i18n` language object.
+ *
+ * Romanian
+ *
+ * @author
+ *   Jalios (Twitter: @Jalios)
+ *   Sascha Greuel (Twitter: @SoftCreatR)
+ *
+ * @see core/i18n.js
+ */
+(function (exports) {
+	if (exports.ro === undefined) {
+		exports.ro = {
+			"mejs.plural-form": 5,			
+			"mejs.download-file": "Descarcă fişierul",			
+			// "mejs.install-flash": "You are using a browser that does not have Flash player enabled or installed. Please turn on your Flash player plugin or download the latest version from https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "Ecran complet",			
+			"mejs.play": "Redare",
+			"mejs.pause": "Pauză",			
+			"mejs.time-slider": "Cursor timp",
+			"mejs.time-help-text": "Utilizează tastele săgeată Stânga/Dreapta pentru a avansa o secundă şi săgeţile Sus/Jos pentru a avansa zece secunde.",
+			//"mejs.live-broadcast" : "Live Broadcast",			
+			"mejs.volume-help-text": "Utilizează tastele de săgeată Sus/Jos pentru a creşte/micşora volumul",
+			"mejs.unmute": "Cu sunet",
+			"mejs.mute": "Fără sunet",
+			"mejs.volume-slider": "Cursor volum",			
+			"mejs.video-player": "Player video",
+			"mejs.audio-player": "Player audio",			
+			"mejs.captions-subtitles": "Legende/Subtitrări",
+			// "mejs.captions-chapters": "Chapters",
+			"mejs.none": "Niciunul"
+			// "mejs.afrikaans": "Afrikaans",
+			// "mejs.albanian": "Albanian",
+			// "mejs.arabic": "Arabic",
+			// "mejs.belarusian": "Belarusian",
+			// "mejs.bulgarian": "Bulgarian",
+			// "mejs.catalan": "Catalan",
+			// "mejs.chinese": "Chinese",
+			// "mejs.chinese-simplified": "Chinese (Simplified)",
+			// "mejs.chinese-traditional": "Chinese (Traditional)",
+			// "mejs.croatian": "Croatian",
+			// "mejs.czech": "Czech",
+			// "mejs.danish": "Danish",
+			// "mejs.dutch": "Dutch",
+			// "mejs.english": "English",
+			// "mejs.estonian": "Estonian",
+			// "mejs.filipino": "Filipino",
+			// "mejs.finnish": "Finnish",
+			// "mejs.french": "French",
+			// "mejs.galician": "Galician",
+			// "mejs.german": "German",
+			// "mejs.greek": "Greek",
+			// "mejs.haitian-creole": "Haitian Creole",
+			// "mejs.hebrew": "Hebrew",
+			// "mejs.hindi": "Hindi",
+			// "mejs.hungarian": "Hungarian",
+			// "mejs.icelandic": "Icelandic",
+			// "mejs.indonesian": "Indonesian",
+			// "mejs.irish": "Irish",
+			// "mejs.italian": "Italian",
+			// "mejs.japanese": "Japanese",
+			// "mejs.korean": "Korean",
+			// "mejs.latvian": "Latvian",
+			// "mejs.lithuanian": "Lithuanian",
+			// "mejs.macedonian": "Macedonian",
+			// "mejs.malay": "Malay",
+			// "mejs.maltese": "Maltese",
+			// "mejs.norwegian": "Norwegian",
+			// "mejs.persian": "Persian",
+			// "mejs.polish": "Polish",
+			// "mejs.portuguese": "Portuguese",
+			// "mejs.romanian": "Romanian",
+			// "mejs.russian": "Russian",
+			// "mejs.serbian": "Serbian",
+			// "mejs.slovak": "Slovak",
+			// "mejs.slovenian": "Slovenian",
+			// "mejs.spanish": "Spanish",
+			// "mejs.swahili": "Swahili",
+			// "mejs.swedish": "Swedish",
+			// "mejs.tagalog": "Tagalog",
+			// "mejs.thai": "Thai",
+			// "mejs.turkish": "Turkish",
+			// "mejs.ukrainian": "Ukrainian",
+			// "mejs.vietnamese": "Vietnamese",
+			// "mejs.welsh": "Welsh",
+			// "mejs.yiddish": "Yiddish"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/lang/ru.js

@@ -0,0 +1,90 @@
+'use strict';/*!
+ * This is a `i18n` language object.
+ *
+ * Russian
+ *
+ * @author
+ *   Jalios (Twitter: @Jalios)
+ *   Sascha Greuel (Twitter: @SoftCreatR)
+ *
+ * @see core/i18n.js
+ */
+(function (exports) {
+	if (exports.ru === undefined) {
+		exports.ru = {
+			"mejs.plural-form": 7,			
+			"mejs.download-file": "Скачать файл",			
+			"mejs.install-flash": "Flash player в вашем браузере не установлен или отключен. Пожалуйста включите ваш Flash player или скачайте последнюю версию с https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "Полноэкранный режим",			
+			"mejs.play": "Воспроизвести",
+			"mejs.pause": "Пауза",			
+			"mejs.time-slider": "Слайдер времени",
+			"mejs.time-help-text": "Используйте Левую/Правую клавиши со стрелками, чтобы продвинуться на одну секунду, клавиши со стрелками Вверх/Вниз, чтобы продвинуться на десять секунд.",
+			"mejs.live-broadcast" : "Прямая трансляция",			
+			"mejs.volume-help-text": "Используйте клавиши со стрелками Вверх/Вниз, чтобы увеличить или уменьшить громкость.",
+			"mejs.unmute": "Включить звук",
+			"mejs.mute": "Отключить звук",
+			"mejs.volume-slider": "Слайдер громкости",			
+			"mejs.video-player": "Видеоплеер",
+			"mejs.audio-player": "Аудиоплеер",			
+			"mejs.captions-subtitles": "Титры/Субтитры",
+			"mejs.captions-chapters": "Главы",
+			"mejs.none": "Нет",
+			"mejs.afrikaans": "Африканский",
+			"mejs.albanian": "Албанский",
+			"mejs.arabic": "Арабский",
+			"mejs.belarusian": "Белорусский",
+			"mejs.bulgarian": "Болгарский",
+			"mejs.catalan": "Каталонский",
+			"mejs.chinese": "Китайский",
+			"mejs.chinese-simplified": "Китайский (упрощенный)",
+			"mejs.chinese-traditional": "Chinese (традиционный)",
+			"mejs.croatian": "Хорватский",
+			"mejs.czech": "Чешский",
+			"mejs.danish": "Датский",
+			"mejs.dutch": "Голландский",
+			"mejs.english": "Английский",
+			"mejs.estonian": "Эстонский",
+			"mejs.filipino": "Филиппинский",
+			"mejs.finnish": "Финский",
+			"mejs.french": "Французский",
+			"mejs.galician": "Галисийский",
+			"mejs.german": "Немецкий",
+			"mejs.greek": "Греческий",
+			"mejs.haitian-creole": "Гаитянский креольский",
+			"mejs.hebrew": "Иврит",
+			"mejs.hindi": "Хинди",
+			"mejs.hungarian": "Венгерский",
+			"mejs.icelandic": "Исландский",
+			"mejs.indonesian": "Индонезийский",
+			"mejs.irish": "Ирландский",
+			"mejs.italian": "Итальянский",
+			"mejs.japanese": "Японский",
+			"mejs.korean": "Корейский",
+			"mejs.latvian": "Латышский",
+			"mejs.lithuanian": "Литовский",
+			"mejs.macedonian": "Македонский",
+			"mejs.malay": "Малайский",
+			"mejs.maltese": "Мальтийский",
+			"mejs.norwegian": "Норвежский",
+			"mejs.persian": "Персидский",
+			"mejs.polish": "Польский",
+			"mejs.portuguese": "Португальский",
+			"mejs.romanian": "Румынский",
+			"mejs.russian": "Русский",
+			"mejs.serbian": "Сербский",
+			"mejs.slovak": "Словацкий",
+			"mejs.slovenian": "Словенский",
+			"mejs.spanish": "Испанский",
+			"mejs.swahili": "Суахили",
+			"mejs.swedish": "Шведский",
+			"mejs.tagalog": "Тагальский",
+			"mejs.thai": "Тайский",
+			"mejs.turkish": "Турецкий",
+			"mejs.ukrainian": "Украинский",
+			"mejs.vietnamese": "Вьетнамский",
+			"mejs.welsh": "Валлийский",
+			"mejs.yiddish": "Идиш"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/lang/sk.js

@@ -0,0 +1,90 @@
+'use strict';/*!
+ * This is a `i18n` language object.
+ *
+ * Slovak
+ *
+ * @author
+ *   Jalios (Twitter: @Jalios)
+ *   Sascha Greuel (Twitter: @SoftCreatR)
+ *
+ * @see core/i18n.js
+ */
+(function (exports) {
+	if (exports.sk === undefined) {
+		exports.sk = {
+			"mejs.plural-form": 8,			
+			"mejs.download-file": "Prevziať súbor",			
+			// "mejs.install-flash": "You are using a browser that does not have Flash player enabled or installed. Please turn on your Flash player plugin or download the latest version from https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "Celá obrazovka",			
+			"mejs.play": "Prehrať",
+			"mejs.pause": "Pozastaviť",			
+			"mejs.time-slider": "Posúvač času",
+			"mejs.time-help-text": "Klávesmi so šípkou doľava/doprava posuniete o jednu sekundu, šípkami nahor/ nadol posuniete o desať sekúnd.",
+			//"mejs.live-broadcast" : "Live Broadcast",			
+			"mejs.volume-help-text": "Klávesmi so šípkou nahor/nadol zvýšite alebo znížite hlasitosť.",
+			"mejs.unmute": "Zrušiť stlmenie",
+			"mejs.mute": "Stlmiť",
+			"mejs.volume-slider": "Posúvač hlasitosti",			
+			"mejs.video-player": "Prehrávač videa",
+			"mejs.audio-player": "Prehrávač zvuku",			
+			"mejs.captions-subtitles": "Skryté titulky/Titulky",
+			// "mejs.captions-chapters": "Chapters",
+			"mejs.none": "Žiadne"
+			// "mejs.afrikaans": "Afrikaans",
+			// "mejs.albanian": "Albanian",
+			// "mejs.arabic": "Arabic",
+			// "mejs.belarusian": "Belarusian",
+			// "mejs.bulgarian": "Bulgarian",
+			// "mejs.catalan": "Catalan",
+			// "mejs.chinese": "Chinese",
+			// "mejs.chinese-simplified": "Chinese (Simplified)",
+			// "mejs.chinese-traditional": "Chinese (Traditional)",
+			// "mejs.croatian": "Croatian",
+			// "mejs.czech": "Czech",
+			// "mejs.danish": "Danish",
+			// "mejs.dutch": "Dutch",
+			// "mejs.english": "English",
+			// "mejs.estonian": "Estonian",
+			// "mejs.filipino": "Filipino",
+			// "mejs.finnish": "Finnish",
+			// "mejs.french": "French",
+			// "mejs.galician": "Galician",
+			// "mejs.german": "German",
+			// "mejs.greek": "Greek",
+			// "mejs.haitian-creole": "Haitian Creole",
+			// "mejs.hebrew": "Hebrew",
+			// "mejs.hindi": "Hindi",
+			// "mejs.hungarian": "Hungarian",
+			// "mejs.icelandic": "Icelandic",
+			// "mejs.indonesian": "Indonesian",
+			// "mejs.irish": "Irish",
+			// "mejs.italian": "Italian",
+			// "mejs.japanese": "Japanese",
+			// "mejs.korean": "Korean",
+			// "mejs.latvian": "Latvian",
+			// "mejs.lithuanian": "Lithuanian",
+			// "mejs.macedonian": "Macedonian",
+			// "mejs.malay": "Malay",
+			// "mejs.maltese": "Maltese",
+			// "mejs.norwegian": "Norwegian",
+			// "mejs.persian": "Persian",
+			// "mejs.polish": "Polish",
+			// "mejs.portuguese": "Portuguese",
+			// "mejs.romanian": "Romanian",
+			// "mejs.russian": "Russian",
+			// "mejs.serbian": "Serbian",
+			// "mejs.slovak": "Slovak",
+			// "mejs.slovenian": "Slovenian",
+			// "mejs.spanish": "Spanish",
+			// "mejs.swahili": "Swahili",
+			// "mejs.swedish": "Swedish",
+			// "mejs.tagalog": "Tagalog",
+			// "mejs.thai": "Thai",
+			// "mejs.turkish": "Turkish",
+			// "mejs.ukrainian": "Ukrainian",
+			// "mejs.vietnamese": "Vietnamese",
+			// "mejs.welsh": "Welsh",
+			// "mejs.yiddish": "Yiddish"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/lang/sv.js

@@ -0,0 +1,89 @@
+'use strict';/*!
+ * This is a `i18n` language object.
+ *
+ * Swedish
+ *
+ * @author
+ *   Petter (Twitter: @petter_j)
+ *
+ * @see core/i18n.js
+ */
+(function (exports) {
+	if (exports.sv === undefined) {
+		exports.sv = {
+			"mejs.plural-form": 1,			
+			"mejs.download-file": "Ladda ner fil",			
+			"mejs.install-flash": "Du använder en webbläsare som inte har Flash Player aktiverat eller installerad. Aktivera Flash Player eller hämta den senaste versionen från https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "Fullskärm",			
+			"mejs.play": "Spela",
+			"mejs.pause": "Pausa",			
+			"mejs.time-slider": "Tidslinje",
+			"mejs.time-help-text": "Använd Vänster/Höger piltangent för att spola en sekund, Upp/Ner piltangent spola tio sekunder.",
+			"mejs.live-broadcast": "Livesändning",			
+			"mejs.volume-help-text": "Använd Upp/Ner piltangent för att öka eller minska volymen.",
+			"mejs.unmute": "Ljud på",
+			"mejs.mute": "Ljud av",
+			"mejs.volume-slider": "Volymkontroll",			
+			"mejs.video-player": "Videospelare",
+			"mejs.audio-player": "Ljudspelare",			
+			"mejs.captions-subtitles": "Textning/Undertexter",
+			"mejs.captions-chapters": "Kapitel",
+			"mejs.none": "Ingen",
+			"mejs.afrikaans": "Afrikaans",
+			"mejs.albanian": "Albanska",
+			"mejs.arabic": "Arabiska",
+			"mejs.belarusian": "Nederländska",
+			"mejs.bulgarian": "Bulgariska",
+			"mejs.catalan": "Katalanska",
+			"mejs.chinese": "Kinesiska",
+			"mejs.chinese-simplified": "Kinesiska (Förenklad)",
+			"mejs.chinese-traditional": "Kinesiska (Traditionell)",
+			"mejs.croatian": "Kroatiska",
+			"mejs.czech": "Tjeckiska",
+			"mejs.danish": "Danska",
+			"mejs.dutch": "Holländska",
+			"mejs.english": "Engelska",
+			"mejs.estonian": "Estniska",
+			"mejs.filipino": "Filipinska",
+			"mejs.finnish": "Finska",
+			"mejs.french": "Franska",
+			"mejs.galician": "Galiciska",
+			"mejs.german": "Tyska",
+			"mejs.greek": "Grekiska",
+			"mejs.haitian-creole": "Haitisk kreolsk",
+			"mejs.hebrew": "Hebreiska",
+			"mejs.hindi": "Hindi",
+			"mejs.hungarian": "Ungerska",
+			"mejs.icelandic": "Isländska",
+			"mejs.indonesian": "Indonesiska",
+			"mejs.irish": "Irländska",
+			"mejs.italian": "Italienska",
+			"mejs.japanese": "Japanska",
+			"mejs.korean": "Koreanska",
+			"mejs.latvian": "Lettiska",
+			"mejs.lithuanian": "Litauiska",
+			"mejs.macedonian": "Makedonska",
+			"mejs.malay": "Malaysiska",
+			"mejs.maltese": "Maltesiska",
+			"mejs.norwegian": "Norska",
+			"mejs.persian": "Persiska",
+			"mejs.polish": "Polska",
+			"mejs.portuguese": "Portugisiska",
+			"mejs.romanian": "Romänska",
+			"mejs.russian": "Ryska",
+			"mejs.serbian": "Serbiska",
+			"mejs.slovak": "Slovakiska",
+			"mejs.slovenian": "Slovenska",
+			"mejs.spanish": "Spanska",
+			"mejs.swahili": "Swahiliska",
+			"mejs.swedish": "Svenska",
+			"mejs.tagalog": "Tagalogiska",
+			"mejs.thai": "Thailänska",
+			"mejs.turkish": "Turkiska",
+			"mejs.ukrainian": "Ukrainska",
+			"mejs.vietnamese": "Vietnamesiska",
+			"mejs.welsh": "Skotska",
+			"mejs.yiddish": "Jiddisch"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/lang/uk.js

@@ -0,0 +1,89 @@
+'use strict';/*!
+ * This is a `i18n` language object.
+ *
+ * Ukrainian
+ *
+ * @author
+ *   Dmitry Krekota (dmitry.krekota@gmail.com)
+ *
+ * @see core/i18n.js
+ */
+(function (exports) {
+	if (exports.uk === undefined) {
+		exports.uk = {
+			"mejs.plural-form": 7,			
+			// "mejs.download-file": "Download File",			
+			"mejs.install-flash": "Flash Player у вашому браузері не встановлений або відключений. Будь ласка включіть Flash Player або скачайте останню версію із https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "Повноекранний режим",			
+			"mejs.play": "Пуск",
+			"mejs.pause": "Пауза",			
+			"mejs.time-slider": "Повзунок часу",
+			"mejs.time-help-text": "Використовуйте ліву/праву клавіші зі стрілками, щоб переміститися на одну секунду, або клавіші вверх/вниз, щоб переміститися на десять секунд.",
+			"mejs.live-broadcast" : "Пряма трансляція",			
+			"mejs.volume-help-text": "Використовуйте клавіші зі стрілками вверх/вниз, щоб збільшити або зменшити звук.",
+			"mejs.unmute": "Включити звук",
+			"mejs.mute": "Відключити звук",
+			"mejs.volume-slider": "Повзунок звуку",			
+			"mejs.video-player": "Відеоплеєр",
+			"mejs.audio-player": "Аудіоплеєр",			
+			"mejs.captions-subtitles": "Титри/Субтитри",
+			"mejs.captions-chapters": "Глави",
+			"mejs.none": "Немає",
+			"mejs.afrikaans": "Африкаанс",
+			"mejs.albanian": "Албанська",
+			"mejs.arabic": "Арабська",
+			"mejs.belarusian": "Білоруська",
+			"mejs.bulgarian": "Болгарська",
+			"mejs.catalan": "Каталонська",
+			"mejs.chinese": "Китайська",
+			"mejs.chinese-simplified": "Китайська (спрощена)",
+			"mejs.chinese-traditional": "Китайська (традиційна)",
+			"mejs.croatian": "Хорватска",
+			"mejs.czech": "Чеська",
+			"mejs.danish": "Дацька",
+			"mejs.dutch": "Голландська",
+			"mejs.english": "Английська",
+			"mejs.estonian": "Естонська",
+			"mejs.filipino": "Філіппінська",
+			"mejs.finnish": "Фінська",
+			"mejs.french": "Французька",
+			"mejs.galician": "Галісійська",
+			"mejs.german": "Німецька",
+			"mejs.greek": "Грецька",
+			"mejs.haitian-creole": "Гаїтянська креольська",
+			"mejs.hebrew": "Іврит",
+			"mejs.hindi": "Хінді",
+			"mejs.hungarian": "Угорська",
+			"mejs.icelandic": "Ісландська",
+			"mejs.indonesian": "Індонезійська",
+			"mejs.irish": "Ірландська",
+			"mejs.italian": "Італійська",
+			"mejs.japanese": "Японська",
+			"mejs.korean": "Корейська",
+			"mejs.latvian": "Латвійська",
+			"mejs.lithuanian": "Литовська",
+			"mejs.macedonian": "Македонська",
+			"mejs.malay": "Малайська",
+			"mejs.maltese": "Мальтійська",
+			"mejs.norwegian": "Норвезька",
+			"mejs.persian": "Перська",
+			"mejs.polish": "Польська",
+			"mejs.portuguese": "Португальська",
+			"mejs.romanian": "Румунська",
+			"mejs.russian": "Російська",
+			"mejs.serbian": "Сербська",
+			"mejs.slovak": "Словацька",
+			"mejs.slovenian": "Словенська",
+			"mejs.spanish": "Іспанська",
+			"mejs.swahili": "Суахілі",
+			"mejs.swedish": "Шведська",
+			"mejs.tagalog": "Тагальська",
+			"mejs.thai": "Тайська",
+			"mejs.turkish": "Турецька",
+			"mejs.ukrainian": "Українська",
+			"mejs.vietnamese": "В'єтнамська",
+			"mejs.welsh": "Валлійська",
+			"mejs.yiddish": "Ідиш"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/lang/zh-cn.js

@@ -0,0 +1,90 @@
+'use strict';/*!
+ * This is a `i18n` language object.
+ *
+ * Chinese (Simplified)
+ *
+ * @author
+ *   Jalios (Twitter: @Jalios)
+ *   Sascha Greuel (Twitter: @SoftCreatR)
+ *
+ * @see core/i18n.js
+ */
+(function (exports) {
+	if (exports['zh-CN'] === undefined) {
+		exports['zh-CN'] = {
+			"mejs.plural-form": 0,			
+			"mejs.download-file": "下载文件",			
+			// "mejs.install-flash": "You are using a browser that does not have Flash player enabled or installed. Please turn on your Flash player plugin or download the latest version from https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "全屏",			
+			"mejs.play": "播放",
+			"mejs.pause": "暂停",			
+			"mejs.time-slider": "时间滑动棒",
+			"mejs.time-help-text": "使用作/右箭头快进1秒，使用上/下箭头快进10秒。",
+			//"mejs.live-broadcast" : "Live Broadcast",			
+			"mejs.volume-help-text": "使用上/下箭头提高或降低音量。",
+			"mejs.unmute": "取消静音",
+			"mejs.mute": "静音",
+			"mejs.volume-slider": "音量选择键",			
+			"mejs.video-player": "视频播放器",
+			"mejs.audio-player": "音频播放器",			
+			"mejs.captions-subtitles": "字幕/标题",
+			// "mejs.captions-chapters": "Chapters",
+			"mejs.none": "无"
+			// "mejs.afrikaans": "Afrikaans",
+			// "mejs.albanian": "Albanian",
+			// "mejs.arabic": "Arabic",
+			// "mejs.belarusian": "Belarusian",
+			// "mejs.bulgarian": "Bulgarian",
+			// "mejs.catalan": "Catalan",
+			// "mejs.chinese": "Chinese",
+			// "mejs.chinese-simplified": "Chinese (Simplified)",
+			// "mejs.chinese-traditional": "Chinese (Traditional)",
+			// "mejs.croatian": "Croatian",
+			// "mejs.czech": "Czech",
+			// "mejs.danish": "Danish",
+			// "mejs.dutch": "Dutch",
+			// "mejs.english": "English",
+			// "mejs.estonian": "Estonian",
+			// "mejs.filipino": "Filipino",
+			// "mejs.finnish": "Finnish",
+			// "mejs.french": "French",
+			// "mejs.galician": "Galician",
+			// "mejs.german": "German",
+			// "mejs.greek": "Greek",
+			// "mejs.haitian-creole": "Haitian Creole",
+			// "mejs.hebrew": "Hebrew",
+			// "mejs.hindi": "Hindi",
+			// "mejs.hungarian": "Hungarian",
+			// "mejs.icelandic": "Icelandic",
+			// "mejs.indonesian": "Indonesian",
+			// "mejs.irish": "Irish",
+			// "mejs.italian": "Italian",
+			// "mejs.japanese": "Japanese",
+			// "mejs.korean": "Korean",
+			// "mejs.latvian": "Latvian",
+			// "mejs.lithuanian": "Lithuanian",
+			// "mejs.macedonian": "Macedonian",
+			// "mejs.malay": "Malay",
+			// "mejs.maltese": "Maltese",
+			// "mejs.norwegian": "Norwegian",
+			// "mejs.persian": "Persian",
+			// "mejs.polish": "Polish",
+			// "mejs.portuguese": "Portuguese",
+			// "mejs.romanian": "Romanian",
+			// "mejs.russian": "Russian",
+			// "mejs.serbian": "Serbian",
+			// "mejs.slovak": "Slovak",
+			// "mejs.slovenian": "Slovenian",
+			// "mejs.spanish": "Spanish",
+			// "mejs.swahili": "Swahili",
+			// "mejs.swedish": "Swedish",
+			// "mejs.tagalog": "Tagalog",
+			// "mejs.thai": "Thai",
+			// "mejs.turkish": "Turkish",
+			// "mejs.ukrainian": "Ukrainian",
+			// "mejs.vietnamese": "Vietnamese",
+			// "mejs.welsh": "Welsh",
+			// "mejs.yiddish": "Yiddish"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/lang/zh.js

@@ -0,0 +1,90 @@
+'use strict';/*!
+ * This is a `i18n` language object.
+ *
+ * Chinese (Traditional)
+ *
+ * @author
+ *   Jalios (Twitter: @Jalios)
+ *   Sascha Greuel (Twitter: @SoftCreatR)
+ *
+ * @see core/i18n.js
+ */
+(function (exports) {
+	if (exports.zh === undefined) {
+		exports.zh = {
+			"mejs.plural-form": 0,			
+			"mejs.download-file": "下載文件",			
+			// "mejs.install-flash": "You are using a browser that does not have Flash player enabled or installed. Please turn on your Flash player plugin or download the latest version from https://get.adobe.com/flashplayer/",			
+			"mejs.fullscreen": "全屏",			
+			"mejs.play": "播放",
+			"mejs.pause": "暫停",			
+			"mejs.time-slider": "時間滑動棒",
+			"mejs.time-help-text": "使用左/右箭頭快進1秒，上/下箭頭快進10秒。",
+			//"mejs.live-broadcast" : "Live Broadcast",			
+			"mejs.volume-help-text": "使用上/下箭頭提高或降低音量。",
+			"mejs.unmute": "取消靜音",
+			"mejs.mute": "靜音",
+			"mejs.volume-slider": "音量控制鍵",			
+			"mejs.video-player": "視頻播放器",
+			"mejs.audio-player": "音頻播放器",			
+			"mejs.captions-subtitles": "字幕/標題",
+			// "mejs.captions-chapters": "Chapters",
+			"mejs.none": "沒有"
+			// "mejs.afrikaans": "Afrikaans",
+			// "mejs.albanian": "Albanian",
+			// "mejs.arabic": "Arabic",
+			// "mejs.belarusian": "Belarusian",
+			// "mejs.bulgarian": "Bulgarian",
+			// "mejs.catalan": "Catalan",
+			// "mejs.chinese": "Chinese",
+			// "mejs.chinese-simplified": "Chinese (Simplified)",
+			// "mejs.chinese-traditional": "Chinese (Traditional)",
+			// "mejs.croatian": "Croatian",
+			// "mejs.czech": "Czech",
+			// "mejs.danish": "Danish",
+			// "mejs.dutch": "Dutch",
+			// "mejs.english": "English",
+			// "mejs.estonian": "Estonian",
+			// "mejs.filipino": "Filipino",
+			// "mejs.finnish": "Finnish",
+			// "mejs.french": "French",
+			// "mejs.galician": "Galician",
+			// "mejs.german": "German",
+			// "mejs.greek": "Greek",
+			// "mejs.haitian-creole": "Haitian Creole",
+			// "mejs.hebrew": "Hebrew",
+			// "mejs.hindi": "Hindi",
+			// "mejs.hungarian": "Hungarian",
+			// "mejs.icelandic": "Icelandic",
+			// "mejs.indonesian": "Indonesian",
+			// "mejs.irish": "Irish",
+			// "mejs.italian": "Italian",
+			// "mejs.japanese": "Japanese",
+			// "mejs.korean": "Korean",
+			// "mejs.latvian": "Latvian",
+			// "mejs.lithuanian": "Lithuanian",
+			// "mejs.macedonian": "Macedonian",
+			// "mejs.malay": "Malay",
+			// "mejs.maltese": "Maltese",
+			// "mejs.norwegian": "Norwegian",
+			// "mejs.persian": "Persian",
+			// "mejs.polish": "Polish",
+			// "mejs.portuguese": "Portuguese",
+			// "mejs.romanian": "Romanian",
+			// "mejs.russian": "Russian",
+			// "mejs.serbian": "Serbian",
+			// "mejs.slovak": "Slovak",
+			// "mejs.slovenian": "Slovenian",
+			// "mejs.spanish": "Spanish",
+			// "mejs.swahili": "Swahili",
+			// "mejs.swedish": "Swedish",
+			// "mejs.tagalog": "Tagalog",
+			// "mejs.thai": "Thai",
+			// "mejs.turkish": "Turkish",
+			// "mejs.ukrainian": "Ukrainian",
+			// "mejs.vietnamese": "Vietnamese",
+			// "mejs.welsh": "Welsh",
+			// "mejs.yiddish": "Yiddish"
+		};
+	}
+})(mejs.i18n);

libresonic-main/src/main/webapp/script/mediaelement/mediaelementplayer-legacy.css

@@ -0,0 +1,716 @@
+/* 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 {
+    clip: rect(1px, 1px, 1px, 1px); /* IE8-IE11 - no support for clip-path */
+    clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+}
+
+.mejs-container {
+    position: relative;
+    background: #000;
+    font-family: "Helvetica", Arial, serif;
+    text-align: left;
+    vertical-align: top;
+    text-indent: 0;
+    box-sizing: border-box;
+    min-width: 250px;
+}
+
+.mejs-container .mejs-video {
+    min-height: 140px;
+}
+
+.mejs-container * {
+    box-sizing: border-box;
+}
+
+/* Hide native play button from iOS to favor plugin button */
+.mejs-container video::-webkit-media-controls-start-playback-button {
+    display: none !important;
+    -webkit-appearance: none;
+}
+
+.mejs-fill-container,
+.mejs-fill-container .mejs-container {
+    width: 100%;
+    height: 100%;
+}
+
+.mejs-fill-container {
+    overflow: hidden;
+    position: relative;
+    margin: 0 auto;
+    background: transparent;
+}
+
+.mejs-container:focus {
+    outline: none;
+}
+
+.mejs-iframe-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.mejs-embed,
+.mejs-embed body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background: #000;
+    overflow: hidden;
+}
+
+.mejs-fullscreen {
+    overflow: hidden !important;
+}
+
+.mejs-container-fullscreen {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    z-index: 1000;
+}
+
+.mejs-container-fullscreen .mejs-mediaelement,
+.mejs-container-fullscreen video {
+    width: 100% !important;
+    height: 100% !important;
+}
+
+.mejs-clear {
+    clear: both;
+}
+
+/* Start: LAYERS */
+.mejs-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.mejs-mediaelement {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+}
+
+.mejs-poster {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-size: contain;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    z-index: 1;
+}
+
+:root .mejs-poster-img {
+    display: none;
+}
+
+.mejs-poster-img {
+    border: 0;
+    padding: 0;
+}
+
+.mejs-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+}
+
+.mejs-layer {
+    z-index: 1;
+}
+
+.mejs-overlay-play {
+    cursor: pointer;
+}
+
+.mejs-overlay-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 80px;
+    height: 80px;
+    margin: -40px 0 0 -40px;
+    background: url("mejs-controls.svg") no-repeat;
+    background-position: 0 -39px;
+    overflow: hidden;
+    z-index: 1;
+}
+
+.mejs-overlay:hover > .mejs-overlay-button {
+    background-position: -80px -39px;
+}
+
+.mejs-overlay-loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 80px;
+    height: 80px;
+    margin: -40px 0 0 -40px;
+}
+
+.mejs-overlay-loading-bg-img {
+    display: block;
+    width: 80px;
+    height: 80px;
+    background: transparent url("mejs-controls.svg") -160px -40px no-repeat;
+    -webkit-animation: mejs-loading-spinner 1s linear infinite;
+    -moz-animation: mejs-loading-spinner 1s linear infinite;
+    animation: mejs-loading-spinner 1s linear infinite;
+    z-index: 1;
+}
+
+@-moz-keyframes mejs-loading-spinner {
+    100% {
+        -moz-transform: rotate(360deg);
+    }
+}
+
+@-webkit-keyframes mejs-loading-spinner {
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+@keyframes mejs-loading-spinner {
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+/* End: LAYERS */
+
+/* Start: CONTROL BAR */
+.mejs-controls {
+    position: absolute;
+    list-style-type: none;
+    margin: 0;
+    padding: 0 10px;
+    bottom: 0;
+    left: 0;
+    height: 40px;
+    width: 100%;
+    z-index: 1;
+}
+
+.mejs-controls:not([style*="display: none"]) {
+    background: rgba(255, 0, 0, 0.7);
+    background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.35));
+}
+
+.mejs-button,
+.mejs-time,
+.mejs-time-rail {
+    float: left;
+    margin: 0;
+    width: 32px;
+    height: 40px;
+    font-size: 10px;
+    line-height: 10px;
+}
+
+.mejs-button > button {
+    cursor: pointer;
+    display: block;
+    font-size: 0;
+    line-height: 0;
+    text-decoration: none;
+    margin: 10px 6px;
+    padding: 0;
+    position: absolute;
+    height: 20px;
+    width: 20px;
+    border: 0;
+    background: transparent url("mejs-controls.svg");
+    overflow: hidden;
+}
+
+/* :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 {
+    color: #fff;
+    display: block;
+    height: 24px;
+    width: auto;
+    font-weight: bold;
+    font-size: 11px;
+    padding: 16px 6px 0 6px;
+    overflow: hidden;
+    text-align: center;
+    box-sizing: content-box;
+}
+
+/* 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;
+    width: 200px;
+    padding-top: 10px;
+    height: 40px;
+    position: relative;
+    margin: 0 10px;
+}
+
+.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 {
+    cursor: pointer;
+    display: block;
+    position: absolute;
+    height: 10px;
+    border-radius: 2px;
+}
+
+.mejs-time-total {
+    margin: 5px 0 0 0;
+    background: rgba(255, 255, 255, 0.3);
+    width: 100%;
+}
+
+.mejs-time-buffering {
+    width: 100%;
+    background: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-size: 15px 15px;
+    animation: buffering-stripes 2s linear infinite;
+}
+
+@keyframes buffering-stripes {
+    from {
+        background-position: 0 0;
+    }
+    to {
+        background-position: 30px 0;
+    }
+}
+
+.mejs-time-loaded {
+    background: rgba(255, 255, 255, .3);
+}
+
+.mejs-time-current, .mejs-time-handle-content {
+    background: rgba(255, 255, 255, 0.9);
+}
+
+.mejs-time-hovered {
+    background: rgba(255, 255, 255, .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 {
+    width: 100%;
+    left: 0;
+    -ms-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -ms-transform: scaleX(0);
+    transform: scaleX(0);
+    transition: .15s ease-in all;
+}
+
+.mejs-time-hovered {
+    transition: height .1s cubic-bezier(0.44, 0.0, 1, 1);
+}
+
+.mejs-time-hovered.no-hover {
+    -ms-transform: scaleX(0) !important;
+    transform: scaleX(0) !important;
+}
+
+.mejs-time-handle, .mejs-time-handle-content {
+    position: absolute;
+    cursor: pointer;
+    width: 10px;
+    height: 10px;
+    border: 4px solid transparent;
+    z-index: 11;
+    left: 0;
+    -ms-transform: translateX(0px);
+    transform: translateX(0px);
+}
+
+.mejs-time-handle-content {
+    left: -4px;
+    border: 4px solid rgba(255, 255, 255, 0.9);
+    -ms-transform: scale(0);
+    transform: scale(0);
+    top: -4px;
+    border-radius: 50%;
+}
+
+.mejs-time-rail:hover .mejs-time-handle-content, .mejs-time-rail .mejs-time-handle-content:focus, .mejs-time-rail .mejs-time-handle-content:active {
+    -ms-transform: scale(1);
+    transform: scale(1);
+}
+
+.mejs-time-float {
+    position: absolute;
+    display: none;
+    background: #eee;
+    width: 36px;
+    height: 17px;
+    border: solid 1px #333;
+    top: -26px;
+    margin-left: -18px;
+    text-align: center;
+    color: #111;
+}
+
+.mejs-time-float-current {
+    margin: 2px;
+    width: 30px;
+    display: block;
+    text-align: center;
+    left: 0;
+}
+
+.mejs-time-float-corner {
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    line-height: 0;
+    border: solid 5px #eee;
+    border-color: #eee transparent transparent transparent;
+    border-radius: 0;
+    top: 15px;
+    left: 13px;
+}
+
+.mejs-long-video .mejs-time-float {
+    width: 64px;
+    margin-left: -23px;
+}
+
+.mejs-long-video .mejs-time-float-current {
+    width: 60px;
+}
+
+.mejs-long-video .mejs-time-float-corner {
+    left: 18px;
+}
+
+.mejs-broadcast {
+    color: #fff;
+    position: absolute;
+    width: 100%;
+    height: 10px;
+    top: 15px;
+}
+
+/* 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 {
+    display: none;
+    height: 115px;
+    width: 25px;
+    background: rgba(50, 50, 50, 0.7);
+    border-radius: 0;
+    top: -115px;
+    left: 5px;
+    z-index: 1;
+    position: absolute;
+    margin: 0;
+}
+
+.mejs-volume-button:hover {
+    border-radius: 0 0 4px 4px;
+}
+
+.mejs-volume-total {
+    position: absolute;
+    left: 11px;
+    top: 8px;
+    width: 2px;
+    height: 100px;
+    background: rgba(255, 255, 255, 0.5);
+    margin: 0;
+}
+
+.mejs-volume-current {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.9);
+    margin: 0;
+}
+
+.mejs-volume-handle {
+    position: absolute;
+    left: 0;
+    bottom: 100%;
+    width: 16px;
+    height: 6px;
+    margin: 0 0 -3px -7px;
+    background: rgba(255, 255, 255, 0.9);
+    cursor: ns-resize;
+    border-radius: 1px;
+}
+
+.mejs-horizontal-volume-slider {
+    height: 36px;
+    width: 56px;
+    position: relative;
+    display: block;
+    float: left;
+    vertical-align: middle;
+}
+
+.mejs-horizontal-volume-total {
+    position: absolute;
+    left: 0;
+    top: 16px;
+    width: 50px;
+    height: 8px;
+    margin: 0;
+    padding: 0;
+    font-size: 1px;
+    border-radius: 2px;
+    background: rgba(50, 50, 50, 0.8);
+}
+
+.mejs-horizontal-volume-current {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-size: 1px;
+    border-radius: 2px;
+    background: rgba(255, 255, 255, 0.8);
+}
+
+.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 {
+    visibility: hidden;
+    position: absolute;
+    bottom: 40px;
+    right: -51px;
+    width: 85px;
+    background: rgba(50, 50, 50, 0.7);
+    border: solid 1px transparent;
+    padding: 0;
+    overflow: hidden;
+    border-radius: 0;
+}
+
+.mejs-chapters-button > .mejs-chapters-selector {
+    width: 110px;
+}
+
+.mejs-captions-button > .mejs-captions-selector, .mejs-chapters-button > .mejs-chapters-selector {
+    visibility: visible;
+}
+
+.mejs-captions-selector-list, .mejs-chapters-selector-list {
+    margin: 0;
+    padding: 0;
+    display: block;
+    list-style-type: none !important;
+    overflow: hidden;
+}
+
+.mejs-captions-selector-list-item, .mejs-chapters-selector-list-item {
+    margin: 0 0 6px 0;
+    padding: 0 10px;
+    list-style-type: none !important;
+    display: block;
+    color: #fff;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.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;
+    margin: 3px 3px 0 5px;
+    position: absolute;
+    left: -1000px;
+}
+
+.mejs-captions-selector-label, .mejs-chapters-selector-label {
+    width: 55px;
+    float: left;
+    padding: 4px 0 0 0;
+    line-height: 15px;
+    font-size: 10px;
+    cursor: pointer;
+}
+
+.mejs-captions-selected, .mejs-chapters-selected {
+    color: rgba(33, 248, 248, 1);
+}
+
+.mejs-captions-translations {
+    font-size: 10px;
+    margin: 0 0 5px 0;
+}
+
+.mejs-captions-layer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    text-align: center;
+    line-height: 20px;
+    font-size: 16px;
+    color: #fff;
+}
+
+.mejs-captions-layer a {
+    color: #fff;
+    text-decoration: underline;
+}
+
+.mejs-captions-layer[lang=ar] {
+    font-size: 20px;
+    font-weight: normal;
+}
+
+.mejs-captions-position {
+    position: absolute;
+    width: 100%;
+    bottom: 15px;
+    left: 0;
+}
+
+.mejs-captions-position-hover {
+    bottom: 35px;
+}
+
+.mejs-captions-text, .mejs-captions-text * {
+    padding: 0;
+    background: rgba(20, 20, 20, 0.5);
+    white-space: pre-wrap;
+    box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5);
+}
+
+.mejs-container.mejs-hide-cues video::-webkit-media-text-track-container {
+    display: none;
+}
+
+/* End: Track (Captions and Chapters) */
+
+/* Start: Error */
+.me_cannotplay a {
+    font-weight: bold;
+}
+
+.mejs-container .me_cannotplay a {
+    color: #fff;
+}
+
+.me_cannotplay span {
+    padding: 15px;
+    display: block;
+}
+
+/* End: Error */

libresonic-main/src/main/webapp/script/mediaelement/mediaelementplayer.css

@@ -0,0 +1,716 @@
+/* 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 {
+    clip: rect(1px, 1px, 1px, 1px); /* IE8-IE11 - no support for clip-path */
+    clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+}
+
+.mejs__container {
+    position: relative;
+    background: #000;
+    font-family: "Helvetica", Arial, serif;
+    text-align: left;
+    vertical-align: top;
+    text-indent: 0;
+    box-sizing: border-box;
+    min-width: 250px;
+}
+
+.mejs__container .mejs__video {
+    min-height: 140px;
+}
+
+.mejs__container * {
+    box-sizing: border-box;
+}
+
+/* Hide native play button from iOS to favor plugin button */
+.mejs__container video::-webkit-media-controls-start-playback-button {
+    display: none !important;
+    -webkit-appearance: none;
+}
+
+.mejs__fill-container,
+.mejs__fill-container .mejs__container {
+    width: 100%;
+    height: 100%;
+}
+
+.mejs__fill-container {
+    overflow: hidden;
+    position: relative;
+    margin: 0 auto;
+    background: transparent;
+}
+
+.mejs__container:focus {
+    outline: none;
+}
+
+.mejs__iframe-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.mejs__embed,
+.mejs__embed body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background: #000;
+    overflow: hidden;
+}
+
+.mejs__fullscreen {
+    overflow: hidden !important;
+}
+
+.mejs__container-fullscreen {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    z-index: 1000;
+}
+
+.mejs__container-fullscreen .mejs__mediaelement,
+.mejs__container-fullscreen video {
+    width: 100% !important;
+    height: 100% !important;
+}
+
+.mejs__clear {
+    clear: both;
+}
+
+/* Start: LAYERS */
+.mejs__background {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.mejs__mediaelement {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+}
+
+.mejs__poster {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-size: contain;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    z-index: 1;
+}
+
+:root .mejs__poster-img {
+    display: none;
+}
+
+.mejs__poster-img {
+    border: 0;
+    padding: 0;
+}
+
+.mejs__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+}
+
+.mejs__layer {
+    z-index: 1;
+}
+
+.mejs__overlay-play {
+    cursor: pointer;
+}
+
+.mejs__overlay-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 80px;
+    height: 80px;
+    margin: -40px 0 0 -40px;
+    background: url("mejs-controls.svg") no-repeat;
+    background-position: 0 -39px;
+    overflow: hidden;
+    z-index: 1;
+}
+
+.mejs__overlay:hover > .mejs__overlay-button {
+    background-position: -80px -39px;
+}
+
+.mejs__overlay-loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 80px;
+    height: 80px;
+    margin: -40px 0 0 -40px;
+}
+
+.mejs__overlay-loading-bg-img {
+    display: block;
+    width: 80px;
+    height: 80px;
+    background: transparent url("mejs-controls.svg") -160px -40px no-repeat;
+    -webkit-animation: mejs-loading-spinner 1s linear infinite;
+    -moz-animation: mejs-loading-spinner 1s linear infinite;
+    animation: mejs-loading-spinner 1s linear infinite;
+    z-index: 1;
+}
+
+@-moz-keyframes mejs-loading-spinner {
+    100% {
+        -moz-transform: rotate(360deg);
+    }
+}
+
+@-webkit-keyframes mejs-loading-spinner {
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+@keyframes mejs-loading-spinner {
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+/* End: LAYERS */
+
+/* Start: CONTROL BAR */
+.mejs__controls {
+    position: absolute;
+    list-style-type: none;
+    margin: 0;
+    padding: 0 10px;
+    bottom: 0;
+    left: 0;
+    height: 40px;
+    width: 100%;
+    z-index: 1;
+}
+
+.mejs__controls:not([style*="display: none"]) {
+    background: rgba(255, 0, 0, 0.7);
+    background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.35));
+}
+
+.mejs__button,
+.mejs__time,
+.mejs__time-rail {
+    float: left;
+    margin: 0;
+    width: 32px;
+    height: 40px;
+    font-size: 10px;
+    line-height: 10px;
+}
+
+.mejs__button > button {
+    cursor: pointer;
+    display: block;
+    font-size: 0;
+    line-height: 0;
+    text-decoration: none;
+    margin: 10px 6px;
+    padding: 0;
+    position: absolute;
+    height: 20px;
+    width: 20px;
+    border: 0;
+    background: transparent url("mejs-controls.svg");
+    overflow: hidden;
+}
+
+/* :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 {
+    color: #fff;
+    display: block;
+    height: 24px;
+    width: auto;
+    font-weight: bold;
+    font-size: 11px;
+    padding: 16px 6px 0 6px;
+    overflow: hidden;
+    text-align: center;
+    box-sizing: content-box;
+}
+
+/* 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;
+    width: 200px;
+    padding-top: 10px;
+    height: 40px;
+    position: relative;
+    margin: 0 10px;
+}
+
+.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 {
+    cursor: pointer;
+    display: block;
+    position: absolute;
+    height: 10px;
+    border-radius: 2px;
+}
+
+.mejs__time-total {
+    margin: 5px 0 0 0;
+    background: rgba(255, 255, 255, 0.3);
+    width: 100%;
+}
+
+.mejs__time-buffering {
+    width: 100%;
+    background: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-size: 15px 15px;
+    animation: buffering-stripes 2s linear infinite;
+}
+
+@keyframes buffering-stripes {
+    from {
+        background-position: 0 0;
+    }
+    to {
+        background-position: 30px 0;
+    }
+}
+
+.mejs__time-loaded {
+    background: rgba(255, 255, 255, .3);
+}
+
+.mejs__time-current, .mejs__time-handle-content {
+    background: rgba(255, 255, 255, 0.9);
+}
+
+.mejs__time-hovered {
+    background: rgba(255, 255, 255, .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 {
+    width: 100%;
+    left: 0;
+    -ms-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -ms-transform: scaleX(0);
+    transform: scaleX(0);
+    transition: .15s ease-in all;
+}
+
+.mejs__time-hovered {
+    transition: height .1s cubic-bezier(0.44, 0.0, 1, 1);
+}
+
+.mejs__time-hovered.no-hover {
+    -ms-transform: scaleX(0) !important;
+    transform: scaleX(0) !important;
+}
+
+.mejs__time-handle, .mejs__time-handle-content {
+    position: absolute;
+    cursor: pointer;
+    width: 10px;
+    height: 10px;
+    border: 4px solid transparent;
+    z-index: 11;
+    left: 0;
+    -ms-transform: translateX(0px);
+    transform: translateX(0px);
+}
+
+.mejs__time-handle-content {
+    left: -4px;
+    border: 4px solid rgba(255, 255, 255, 0.9);
+    -ms-transform: scale(0);
+    transform: scale(0);
+    top: -4px;
+    border-radius: 50%;
+}
+
+.mejs__time-rail:hover .mejs__time-handle-content, .mejs__time-rail .mejs__time-handle-content:focus, .mejs__time-rail .mejs__time-handle-content:active {
+    -ms-transform: scale(1);
+    transform: scale(1);
+}
+
+.mejs__time-float {
+    position: absolute;
+    display: none;
+    background: #eee;
+    width: 36px;
+    height: 17px;
+    border: solid 1px #333;
+    top: -26px;
+    margin-left: -18px;
+    text-align: center;
+    color: #111;
+}
+
+.mejs__time-float-current {
+    margin: 2px;
+    width: 30px;
+    display: block;
+    text-align: center;
+    left: 0;
+}
+
+.mejs__time-float-corner {
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    line-height: 0;
+    border: solid 5px #eee;
+    border-color: #eee transparent transparent transparent;
+    border-radius: 0;
+    top: 15px;
+    left: 13px;
+}
+
+.mejs__long-video .mejs__time-float {
+    width: 64px;
+    margin-left: -23px;
+}
+
+.mejs__long-video .mejs__time-float-current {
+    width: 60px;
+}
+
+.mejs__long-video .mejs__time-float-corner {
+    left: 18px;
+}
+
+.mejs__broadcast {
+    color: #fff;
+    position: absolute;
+    width: 100%;
+    height: 10px;
+    top: 15px;
+}
+
+/* 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 {
+    display: none;
+    height: 115px;
+    width: 25px;
+    background: rgba(50, 50, 50, 0.7);
+    border-radius: 0;
+    top: -115px;
+    left: 5px;
+    z-index: 1;
+    position: absolute;
+    margin: 0;
+}
+
+.mejs__volume-button:hover {
+    border-radius: 0 0 4px 4px;
+}
+
+.mejs__volume-total {
+    position: absolute;
+    left: 11px;
+    top: 8px;
+    width: 2px;
+    height: 100px;
+    background: rgba(255, 255, 255, 0.5);
+    margin: 0;
+}
+
+.mejs__volume-current {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.9);
+    margin: 0;
+}
+
+.mejs__volume-handle {
+    position: absolute;
+    left: 0;
+    bottom: 100%;
+    width: 16px;
+    height: 6px;
+    margin: 0 0 -3px -7px;
+    background: rgba(255, 255, 255, 0.9);
+    cursor: ns-resize;
+    border-radius: 1px;
+}
+
+.mejs__horizontal-volume-slider {
+    height: 36px;
+    width: 56px;
+    position: relative;
+    display: block;
+    float: left;
+    vertical-align: middle;
+}
+
+.mejs__horizontal-volume-total {
+    position: absolute;
+    left: 0;
+    top: 16px;
+    width: 50px;
+    height: 8px;
+    margin: 0;
+    padding: 0;
+    font-size: 1px;
+    border-radius: 2px;
+    background: rgba(50, 50, 50, 0.8);
+}
+
+.mejs__horizontal-volume-current {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-size: 1px;
+    border-radius: 2px;
+    background: rgba(255, 255, 255, 0.8);
+}
+
+.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 {
+    visibility: hidden;
+    position: absolute;
+    bottom: 40px;
+    right: -51px;
+    width: 85px;
+    background: rgba(50, 50, 50, 0.7);
+    border: solid 1px transparent;
+    padding: 0;
+    overflow: hidden;
+    border-radius: 0;
+}
+
+.mejs__chapters-button > .mejs__chapters-selector {
+    width: 110px;
+}
+
+.mejs__captions-button > .mejs__captions-selector, .mejs__chapters-button > .mejs__chapters-selector {
+    visibility: visible;
+}
+
+.mejs__captions-selector-list, .mejs__chapters-selector-list {
+    margin: 0;
+    padding: 0;
+    display: block;
+    list-style-type: none !important;
+    overflow: hidden;
+}
+
+.mejs__captions-selector-list-item, .mejs__chapters-selector-list-item {
+    margin: 0 0 6px 0;
+    padding: 0 10px;
+    list-style-type: none !important;
+    display: block;
+    color: #fff;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.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;
+    margin: 3px 3px 0 5px;
+    position: absolute;
+    left: -1000px;
+}
+
+.mejs__captions-selector-label, .mejs__chapters-selector-label {
+    width: 55px;
+    float: left;
+    padding: 4px 0 0 0;
+    line-height: 15px;
+    font-size: 10px;
+    cursor: pointer;
+}
+
+.mejs__captions-selected, .mejs__chapters-selected {
+    color: rgba(33, 248, 248, 1);
+}
+
+.mejs__captions-translations {
+    font-size: 10px;
+    margin: 0 0 5px 0;
+}
+
+.mejs__captions-layer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    text-align: center;
+    line-height: 20px;
+    font-size: 16px;
+    color: #fff;
+}
+
+.mejs__captions-layer a {
+    color: #fff;
+    text-decoration: underline;
+}
+
+.mejs__captions-layer[lang=ar] {
+    font-size: 20px;
+    font-weight: normal;
+}
+
+.mejs__captions-position {
+    position: absolute;
+    width: 100%;
+    bottom: 15px;
+    left: 0;
+}
+
+.mejs__captions-position-hover {
+    bottom: 35px;
+}
+
+.mejs__captions-text, .mejs__captions-text * {
+    padding: 0;
+    background: rgba(20, 20, 20, 0.5);
+    white-space: pre-wrap;
+    box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5);
+}
+
+.mejs__container.mejs__hide-cues video::-webkit-media-text-track-container {
+    display: none;
+}
+
+/* End: Track (Captions and Chapters) */
+
+/* Start: Error */
+.me_cannotplay a {
+    font-weight: bold;
+}
+
+.mejs__container .me_cannotplay a {
+    color: #fff;
+}
+
+.me_cannotplay span {
+    padding: 15px;
+    display: block;
+}
+
+/* End: Error */

libresonic-main/src/main/webapp/script/mediaelement/mejs-controls.svg

@@ -0,0 +1,122 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="400px" height="120px" viewBox="0 0 400 120" style="enable-background:new 0 0 400 120;" xml:space="preserve">
+<style type="text/css">
+	.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>
+<g id="controls">
+	<g id="play">
+		<path class="st0" d="M16.5,8.5c0.3,0.1,0.4,0.5,0.2,0.8c-0.1,0.1-0.1,0.2-0.2,0.2l-11.4,7c-0.5,0.3-0.8,0.1-0.8-0.5V2
+			c0-0.5,0.4-0.8,0.8-0.5L16.5,8.5z"/>
+	</g>
+	<g id="pause">
+		<g>
+			<path class="st0" d="M24,1h2.2c0.6,0,1,0.4,1,1v14c0,0.6-0.4,1-1,1H24c-0.6,0-1-0.4-1-1V2C23,1.5,23.4,1,24,1z"/>
+			<path class="st0" d="M33.8,1H36c0.6,0,1,0.4,1,1v14c0,0.6-0.4,1-1,1h-2.2c-0.6,0-1-0.4-1-1V2C32.8,1.5,33.2,1,33.8,1z"/>
+		</g>
+	</g>
+	<g id="fullscreen">
+		<g id="enter">
+			<path class="st0" d="M81,1.4c0-0.6,0.4-1,1-1h5.4c0.6,0,0.7,0.3,0.3,0.7l-6,6C81.3,7.5,81,7.4,81,6.8V1.4z"/>
+			<path class="st0" d="M81,17.2c0,0.6,0.4,1,1,1h5.4c0.6,0,0.7-0.3,0.3-0.7l-6-6c-0.4-0.4-0.7-0.3-0.7,0.3L81,17.2z"/>
+			<path class="st0" d="M98.8,1.4c0-0.6-0.4-1-1-1h-5.4c-0.6,0-0.7,0.3-0.3,0.7l6,6c0.4,0.4,0.7,0.3,0.7-0.3
+				C98.8,6.8,98.8,1.4,98.8,1.4z"/>
+			<path class="st0" d="M98.8,17.2c0,0.6-0.4,1-1,1h-5.4c-0.6,0-0.7-0.3-0.3-0.7l6-6c0.4-0.4,0.7-0.3,0.7,0.3
+				C98.8,11.8,98.8,17.2,98.8,17.2z"/>
+		</g>
+		<g id="exit">
+			<g>
+				<path class="st0" d="M112.7,5c0,0.6,0.4,1,1,1h4.1c0.6,0,0.7-0.3,0.3-0.7l-4.7-4.7c-0.4-0.4-0.7-0.3-0.7,0.3
+					C112.7,0.9,112.7,5,112.7,5z"/>
+				<path class="st0" d="M105.6,6c0.6,0,1-0.4,1-1V0.9c0-0.6-0.3-0.7-0.7-0.3l-4.7,4.7c-0.4,0.4-0.3,0.7,0.3,0.7L105.6,6z"/>
+				<path class="st0" d="M106.6,13.1c0-0.6-0.4-1-1-1h-4.1c-0.6,0-0.7,0.3-0.3,0.7l4.7,4.7c0.4,0.4,0.7,0.3,0.7-0.3
+					C106.6,17.2,106.6,13.1,106.6,13.1z"/>
+				<path class="st0" d="M113.7,12.1c-0.6,0-1,0.4-1,1v4.1c0,0.5,0.3,0.7,0.7,0.3l4.7-4.7c0.4-0.4,0.3-0.7-0.3-0.7H113.7z"/>
+			</g>
+		</g>
+	</g>
+	<g id="volume">
+		<g id="unmuted">
+			<path class="st0" d="M67,5.8c-0.5,0.4-1.2,0.6-1.8,0.6H62c-0.6,0-1,0.4-1,1v5.7c0,0.6,0.4,1,1,1h3.2c0.3,0,0.7,0,1,0
+				c0.3,0.2,0.5,0.4,0.8,0.6l3.5,2.6c0.4,0.3,0.8,0.1,0.8-0.4V3.5c0-0.5-0.4-0.7-0.8-0.4L67,5.8z"/>
+			<path class="st1" d="M73.9,2.5c0,0,3.9-0.8,3.9,7.7S73.9,18,73.9,18"/>
+			<path class="st1" d="M72.6,6.4c0,0,2.6-0.4,2.6,3.8s-2.6,3.9-2.6,3.9"/>
+		</g>
+		<g id="muted">
+			<path class="st0" d="M47,5.8c-0.5,0.4-1.2,0.6-1.8,0.6H42c-0.6,0-1,0.4-1,1v5.7c0,0.6,0.4,1,1,1h3.2c0.3,0,0.7,0,1,0
+				c0.3,0.2,0.5,0.4,0.8,0.6l3.5,2.6c0.4,0.3,0.8,0.1,0.8-0.4V3.5c0-0.5-0.4-0.7-0.8-0.4L47,5.8z"/>
+			<line class="st2" x1="52.8" y1="7" x2="58.2" y2="12.4"/>
+			<line class="st2" x1="52.8" y1="12.4" x2="58.2" y2="7"/>
+		</g>
+	</g>
+	<g id="closed_captions">
+		<path class="st3" d="M128.7,8.6c-6.2-4.2-6.5,7.8,0,3.9"/>
+		<path class="st3" d="M135.2,8.6c-6.2-4.2-6.5,7.8,0,3.9"/>
+		<path class="st0" d="M122.2,3.4h15.7v13.1h-15.7V3.4z M120.8,2v15.7h18.3V2H120.8z"/>
+	</g>
+	<g>
+		<path class="st0" d="M143.2,3h14c1.1,0,2,0.9,2,2v10c0,1.1-0.9,2-2,2h-14c-1.1,0-2-0.9-2-2V5C141.2,3.9,142.1,3,143.2,3z"/>
+		<path class="st4" d="M146.4,13.8c-0.8,0-1.6-0.4-2.1-1c-1.1-1.4-1-3.4,0.1-4.8c0.5-0.6,2-1.7,4.6,0.2L148.4,9
+			c-1.4-1-2.6-1.1-3.3-0.3c-0.8,1-0.8,2.4-0.1,3.5c0.7,0.9,1.9,0.8,3.4-0.1l0.5,0.9C148.2,13.5,147.3,13.7,146.4,13.8z"/>
+		<path class="st4" d="M153.9,13.8c-0.8,0-1.6-0.4-2.1-1c-1.1-1.4-1-3.4,0.1-4.8c0.5-0.6,2-1.7,4.6,0.2L156,9
+			c-1.4-1-2.6-1.1-3.3-0.3c-0.8,1-0.8,2.4-0.1,3.5c0.7,0.9,1.9,0.8,3.4-0.1l0.5,0.9C155.7,13.5,154.8,13.7,153.9,13.8z"/>
+	</g>
+</g>
+<g id="big_play">
+	<g id="big_play_opaque">
+		<path class="st0" d="M60.3,77c0.6,0.2,0.8,0.8,0.6,1.4c-0.1,0.3-0.3,0.5-0.6,0.6L30,96.5c-1,0.6-1.7,0.1-1.7-1v-35
+			c0-1.1,0.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,79S60.7,116.5,40,116.5S2.5,99.7,2.5,79L2.5,79z"/>
+	</g>
+	<g id="big_play_hover">
+		<path class="st0" d="M140.3,77c0.6,0.2,0.8,0.8,0.6,1.4c-0.1,0.3-0.3,0.5-0.6,0.6L110,96.5c-1,0.6-1.7,0.1-1.7-1v-35
+			c0-1.1,0.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.5s-16.8,37.5-37.5,37.5S82.5,99.7,82.5,79z"/>
+	</g>
+	<g id="loading">
+		<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"/>
+	</g>
+</g>
+<g id="replay">
+	<path class="st0" d="M178,9.4c0,0.4-0.4,0.7-0.9,0.7c-0.1,0-0.2,0-0.2-0.1l-4.9-1.8c-0.5-0.2-0.6-0.6-0.1-0.8l6.2-3.6
+		c0.5-0.3,0.8-0.1,0.7,0.5L178,9.4z"/>
+	<path class="st0" d="M169.4,15.9c-1,0-2-0.2-2.9-0.7c-2-1-3.2-3-3.2-5.2c0.1-3.4,2.9-6,6.3-6c2.5,0.1,4.8,1.7,5.6,4.1l0.1-0.1
+		l2.1,1.1c-0.6-4.4-4.7-7.5-9.1-6.9c-3.9,0.6-6.9,3.9-7,7.9c0,2.9,1.7,5.6,4.3,7c1.2,0.6,2.5,0.9,3.8,1c2.6,0,5-1.2,6.6-3.3
+		l-1.8-0.9C173,15.1,171.2,15.9,169.4,15.9z"/>
+</g>
+<g id="chapters">
+	<path class="st0" d="M183.4,3.2L183.4,3.2c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5l0,0c-0.8,0-1.5-0.7-1.5-1.5l0,0
+		C181.9,3.8,182.6,3.2,183.4,3.2z"/>
+	<path class="st0" d="M188.5,3.2h8.5c0.9,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-8.5c-0.9,0-1.5-0.7-1.5-1.5l0,0
+		C186.9,3.8,187.6,3.2,188.5,3.2z"/>
+	<path class="st0" d="M183.4,8.2L183.4,8.2c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5l0,0c-0.8,0-1.5-0.7-1.5-1.5l0,0
+		C181.9,8.8,182.6,8.2,183.4,8.2z"/>
+	<path class="st0" d="M188.5,8.2h8.5c0.9,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-8.5c-0.9,0-1.5-0.7-1.5-1.5l0,0
+		C186.9,8.8,187.6,8.2,188.5,8.2z"/>
+	<path class="st0" d="M183.4,13.2L183.4,13.2c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5l0,0c-0.8,0-1.5-0.7-1.5-1.5l0,0
+		C181.9,13.8,182.6,13.2,183.4,13.2z"/>
+	<path class="st0" d="M188.5,13.2h8.5c0.9,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-8.5c-0.9,0-1.5-0.7-1.5-1.5l0,0
+		C186.9,13.8,187.6,13.2,188.5,13.2z"/>
+</g>
+</svg>

libresonic-main/src/main/webapp/script/mediaelement/renderers/dailymotion.js

@@ -0,0 +1,489 @@
+/*!
+ * 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 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})({1:[function(_dereq_,module,exports){
+'use strict';
+
+/**
+ * DailyMotion renderer
+ *
+ * Uses <iframe> approach and uses DailyMotion API to manipulate it.
+ * @see https://developer.dailymotion.com/player
+ *
+ */
+
+var DailyMotionApi = {
+	/**
+  * @type {Boolean}
+  */
+	isSDKStarted: false,
+	/**
+  * @type {Boolean}
+  */
+	isSDKLoaded: false,
+	/**
+  * @type {Array}
+  */
+	iframeQueue: [],
+
+	/**
+  * Create a queue to prepare the creation of <iframe>
+  *
+  * @param {Object} settings - an object with settings needed to create <iframe>
+  */
+	enqueueIframe: function enqueueIframe(settings) {
+
+		if (DailyMotionApi.isLoaded) {
+			DailyMotionApi.createIframe(settings);
+		} else {
+			DailyMotionApi.loadIframeApi();
+			DailyMotionApi.iframeQueue.push(settings);
+		}
+	},
+
+	/**
+  * Load DailyMotion API script on the header of the document
+  *
+  */
+	loadIframeApi: function loadIframeApi() {
+		if (!DailyMotionApi.isSDKStarted) {
+			var e = document.createElement('script');
+			e.async = true;
+			e.src = 'https://api.dmcdn.net/all.js';
+			var s = document.getElementsByTagName('script')[0];
+			s.parentNode.insertBefore(e, s);
+			DailyMotionApi.isSDKStarted = true;
+		}
+	},
+
+	/**
+  * Process queue of DailyMotion <iframe> element creation
+  *
+  */
+	apiReady: function apiReady() {
+
+		DailyMotionApi.isLoaded = true;
+		DailyMotionApi.isSDKLoaded = true;
+
+		while (DailyMotionApi.iframeQueue.length > 0) {
+			var settings = DailyMotionApi.iframeQueue.pop();
+			DailyMotionApi.createIframe(settings);
+		}
+	},
+
+	/**
+  * Create a new instance of DailyMotion API player and trigger a custom event to initialize it
+  *
+  * @param {Object} settings - an object with settings needed to create <iframe>
+  */
+	createIframe: function createIframe(settings) {
+
+		var player = DM.player(settings.container, {
+			height: settings.height || '100%',
+			width: settings.width || '100%',
+			video: settings.videoId,
+			params: Object.assign({ api: true }, settings.params),
+			origin: location.host
+		});
+
+		player.addEventListener('apiready', function () {
+			window['__ready__' + settings.id](player, { paused: true, ended: false });
+		});
+	},
+
+	/**
+  * Extract ID from DailyMotion's URL to be loaded through API
+  * Valid URL format(s):
+  * - http://www.dailymotion.com/embed/video/x35yawy
+  * - http://dai.ly/x35yawy
+  *
+  * @param {String} url
+  * @return {String}
+  */
+	getDailyMotionId: function getDailyMotionId(url) {
+		var parts = url.split('/'),
+		    lastPart = parts[parts.length - 1],
+		    dashParts = lastPart.split('_');
+
+		return dashParts[0];
+	}
+};
+
+var DailyMotionIframeRenderer = {
+	name: 'dailymotion_iframe',
+
+	options: {
+		prefix: 'dailymotion_iframe',
+
+		dailymotion: {
+			width: '100%',
+			height: '100%',
+			params: {
+				autoplay: false,
+				chromeless: 1,
+				info: 0,
+				logo: 0,
+				related: 0
+			}
+		}
+	},
+
+	/**
+  * Determine if a specific element type can be played with this render
+  *
+  * @param {String} type
+  * @return {Boolean}
+  */
+	canPlayType: function canPlayType(type) {
+		return ~['video/dailymotion', 'video/x-dailymotion'].indexOf(type.toLowerCase());
+	},
+
+	/**
+  * Create the player instance and add all native events/methods/properties as possible
+  *
+  * @param {MediaElement} mediaElement Instance of mejs.MediaElement already created
+  * @param {Object} options All the player configuration options passed through constructor
+  * @param {Object[]} mediaFiles List of sources with format: {src: url, type: x/y-z}
+  * @return {Object}
+  */
+	create: function create(mediaElement, options, mediaFiles) {
+
+		var dm = {},
+		    apiStack = [],
+		    readyState = 4;
+
+		var events = void 0,
+		    dmPlayer = null,
+		    dmIframe = null;
+
+		dm.options = options;
+		dm.id = mediaElement.id + '_' + options.prefix;
+		dm.mediaElement = mediaElement;
+
+		// wrappers for get/set
+		var props = mejs.html5media.properties,
+		    assignGettersSetters = function assignGettersSetters(propName) {
+
+			// add to flash state that we will store
+
+			var capName = '' + propName.substring(0, 1).toUpperCase() + propName.substring(1);
+
+			dm['get' + capName] = function () {
+				if (dmPlayer !== null) {
+					var value = null;
+
+					// figure out how to get dm dta here
+					switch (propName) {
+						case 'currentTime':
+							return dmPlayer.currentTime;
+
+						case 'duration':
+							return isNaN(dmPlayer.duration) ? 0 : dmPlayer.duration;
+
+						case 'volume':
+							return dmPlayer.volume;
+
+						case 'paused':
+							return dmPlayer.paused;
+
+						case 'ended':
+							return dmPlayer.ended;
+
+						case 'muted':
+							return dmPlayer.muted;
+
+						case 'buffered':
+							var percentLoaded = dmPlayer.bufferedTime,
+							    duration = dmPlayer.duration;
+							return {
+								start: function start() {
+									return 0;
+								},
+								end: function end() {
+									return percentLoaded / duration;
+								},
+								length: 1
+							};
+						case 'src':
+							return mediaElement.originalNode.getAttribute('src');
+
+						case 'readyState':
+							return readyState;
+					}
+
+					return value;
+				} else {
+					return null;
+				}
+			};
+
+			dm['set' + capName] = function (value) {
+				if (dmPlayer !== null) {
+
+					switch (propName) {
+
+						case 'src':
+							var url = typeof value === 'string' ? value : value[0].src;
+
+							dmPlayer.load(DailyMotionApi.getDailyMotionId(url));
+							break;
+
+						case 'currentTime':
+							dmPlayer.seek(value);
+							break;
+
+						case 'muted':
+							if (value) {
+								dmPlayer.setMuted(true);
+							} else {
+								dmPlayer.setMuted(false);
+							}
+							setTimeout(function () {
+								var event = mejs.Utils.createEvent('volumechange', dm);
+								mediaElement.dispatchEvent(event);
+							}, 50);
+							break;
+
+						case 'volume':
+							dmPlayer.setVolume(value);
+							setTimeout(function () {
+								var event = mejs.Utils.createEvent('volumechange', dm);
+								mediaElement.dispatchEvent(event);
+							}, 50);
+							break;
+
+						case 'readyState':
+							var event = mejs.Utils.createEvent('canplay', dm);
+							mediaElement.dispatchEvent(event);
+							break;
+
+						default:
+							
+							break;
+					}
+				} else {
+					// store for after "READY" event fires
+					apiStack.push({ type: 'set', propName: propName, value: value });
+				}
+			};
+		};
+
+		for (var i = 0, total = props.length; i < total; i++) {
+			assignGettersSetters(props[i]);
+		}
+
+		// add wrappers for native methods
+		var methods = mejs.html5media.methods,
+		    assignMethods = function assignMethods(methodName) {
+
+			// run the method on the native HTMLMediaElement
+			dm[methodName] = function () {
+				if (dmPlayer !== null) {
+
+					// DO method
+					switch (methodName) {
+						case 'play':
+							return dmPlayer.play();
+						case 'pause':
+							return dmPlayer.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]);
+		}
+
+		// Initial method to register all DailyMotion events when initializing <iframe>
+		window['__ready__' + dm.id] = function (_dmPlayer) {
+
+			mediaElement.dmPlayer = dmPlayer = _dmPlayer;
+
+			// do call stack
+			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);
+
+						dm['set' + capName](stackItem.value);
+					} else if (stackItem.type === 'call') {
+						dm[stackItem.methodName]();
+					}
+				}
+			}
+
+			dmIframe = document.getElementById(dm.id);
+
+			// a few more events
+			events = ['mouseover', 'mouseout'];
+			var assignEvents = function assignEvents(e) {
+				var event = mejs.Utils.createEvent(e.type, dm);
+				mediaElement.dispatchEvent(event);
+			};
+
+			for (var _i3 = 0, _total3 = events.length; _i3 < _total3; _i3++) {
+				dmIframe.addEventListener(events[_i3], assignEvents, false);
+			}
+
+			// BUBBLE EVENTS up
+			events = mejs.html5media.events;
+			events = events.concat(['click', 'mouseover', 'mouseout']);
+			var assignNativeEvents = function assignNativeEvents(eventName) {
+
+				// Deprecated event; not consider it
+				if (eventName !== 'ended') {
+
+					dmPlayer.addEventListener(eventName, function (e) {
+						var event = mejs.Utils.createEvent(e.type, dmPlayer);
+						mediaElement.dispatchEvent(event);
+					});
+				}
+			};
+
+			for (var _i4 = 0, _total4 = events.length; _i4 < _total4; _i4++) {
+				assignNativeEvents(events[_i4]);
+			}
+
+			// Custom DailyMotion events
+			dmPlayer.addEventListener('ad_start', function () {
+				var event = mejs.Utils.createEvent('play', dmPlayer);
+				mediaElement.dispatchEvent(event);
+
+				event = mejs.Utils.createEvent('progress', dmPlayer);
+				mediaElement.dispatchEvent(event);
+
+				event = mejs.Utils.createEvent('timeupdate', dmPlayer);
+				mediaElement.dispatchEvent(event);
+			});
+			dmPlayer.addEventListener('ad_timeupdate', function () {
+				var event = mejs.Utils.createEvent('timeupdate', dmPlayer);
+				mediaElement.dispatchEvent(event);
+			});
+			dmPlayer.addEventListener('ad_pause', function () {
+				var event = mejs.Utils.createEvent('pause', dmPlayer);
+				mediaElement.dispatchEvent(event);
+			});
+			dmPlayer.addEventListener('ad_end', function () {
+				var event = mejs.Utils.createEvent('ended', dmPlayer);
+				mediaElement.dispatchEvent(event);
+			});
+			dmPlayer.addEventListener('video_start', function () {
+				var event = mejs.Utils.createEvent('play', dmPlayer);
+				mediaElement.dispatchEvent(event);
+
+				event = mejs.Utils.createEvent('timeupdate', dmPlayer);
+				mediaElement.dispatchEvent(event);
+			});
+			dmPlayer.addEventListener('video_end', function () {
+				var event = mejs.Utils.createEvent('ended', dmPlayer);
+				mediaElement.dispatchEvent(event);
+			});
+			dmPlayer.addEventListener('progress', function () {
+				var event = mejs.Utils.createEvent('timeupdate', dmPlayer);
+				mediaElement.dispatchEvent(event);
+			});
+			dmPlayer.addEventListener('durationchange', function () {
+				var event = mejs.Utils.createEvent('timeupdate', dmPlayer);
+				mediaElement.dispatchEvent(event);
+			});
+
+			// give initial events
+			var initEvents = ['rendererready', 'loadeddata', 'loadedmetadata', 'canplay'];
+
+			for (var _i5 = 0, _total5 = initEvents.length; _i5 < _total5; _i5++) {
+				var event = mejs.Utils.createEvent(initEvents[_i5], dm);
+				mediaElement.dispatchEvent(event);
+			}
+		};
+
+		var dmContainer = document.createElement('div');
+		dmContainer.id = dm.id;
+		mediaElement.appendChild(dmContainer);
+		if (mediaElement.originalNode) {
+			dmContainer.style.width = mediaElement.originalNode.style.width;
+			dmContainer.style.height = mediaElement.originalNode.style.height;
+		}
+		mediaElement.originalNode.style.display = 'none';
+
+		var videoId = DailyMotionApi.getDailyMotionId(mediaFiles[0].src),
+		    dmSettings = Object.assign({
+			id: dm.id,
+			container: dmContainer,
+			videoId: videoId,
+			autoplay: mediaElement.originalNode.autoplay
+		}, dm.options.dailymotion);
+
+		DailyMotionApi.enqueueIframe(dmSettings);
+
+		dm.hide = function () {
+			dm.stopInterval();
+			dm.pause();
+			if (dmIframe) {
+				dmIframe.style.display = 'none';
+			}
+		};
+		dm.show = function () {
+			if (dmIframe) {
+				dmIframe.style.display = '';
+			}
+		};
+		dm.setSize = function (width, height) {
+			dmIframe.width = width;
+			dmIframe.height = height;
+		};
+		dm.destroy = function () {
+			dmPlayer.destroy();
+		};
+		dm.interval = null;
+
+		dm.startInterval = function () {
+			dm.interval = setInterval(function () {
+				DailyMotionApi.sendEvent(dm.id, dmPlayer, 'timeupdate', {
+					paused: false,
+					ended: false
+				});
+			}, 250);
+		};
+		dm.stopInterval = function () {
+			if (dm.interval) {
+				clearInterval(dm.interval);
+			}
+		};
+
+		return dm;
+	}
+};
+
+/*
+ * Register DailyMotion event globally
+ *
+ */
+mejs.Utils.typeChecks.push(function (url) {
+	return (/\/\/((www\.)?dailymotion\.com|dai\.ly)/i.test(url) ? 'video/x-dailymotion' : null
+	);
+});
+
+window.dmAsyncInit = function () {
+	DailyMotionApi.apiReady();
+};
+
+mejs.Renderers.add(DailyMotionIframeRenderer);
+
+},{}]},{},[1]);

libresonic-main/src/main/webapp/script/mediaelement/renderers/facebook.js

@@ -0,0 +1,426 @@
+/*!
+ * 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 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})({1:[function(_dereq_,module,exports){
+'use strict';
+
+/**
+ * Facebook renderer
+ *
+ * It creates an <iframe> from a <div> with specific configuration.
+ * @see https://developers.facebook.com/docs/plugins/embedded-video-player
+ */
+
+var FacebookRenderer = {
+	name: 'facebook',
+
+	options: {
+		prefix: 'facebook',
+		facebook: {
+			appId: '{your-app-id}',
+			xfbml: true,
+			version: 'v2.6'
+		}
+	},
+
+	/**
+  * Determine if a specific element type can be played with this render
+  *
+  * @param {String} type
+  * @return {Boolean}
+  */
+	canPlayType: function canPlayType(type) {
+		return ~['video/facebook', 'video/x-facebook'].indexOf(type.toLowerCase());
+	},
+
+	/**
+  * Create the player instance and add all native events/methods/properties as possible
+  *
+  * @param {MediaElement} mediaElement Instance of mejs.MediaElement already created
+  * @param {Object} options All the player configuration options passed through constructor
+  * @param {Object[]} mediaFiles List of sources with format: {src: url, type: x/y-z}
+  * @return {Object}
+  */
+	create: function create(mediaElement, options, mediaFiles) {
+
+		var fbWrapper = {},
+		    apiStack = [],
+		    eventHandler = {},
+		    readyState = 4,
+		    autoplay = mediaElement.originalNode.autoplay;
+
+		var src = '',
+		    paused = true,
+		    ended = false,
+		    hasStartedPlaying = false,
+		    fbApi = null,
+		    fbDiv = null;
+
+		options = Object.assign(options, mediaElement.options);
+		fbWrapper.options = options;
+		fbWrapper.id = mediaElement.id + '_' + options.prefix;
+		fbWrapper.mediaElement = mediaElement;
+
+		// wrappers for get/set
+		var props = mejs.html5media.properties,
+		    assignGettersSetters = function assignGettersSetters(propName) {
+
+			var capName = '' + propName.substring(0, 1).toUpperCase() + propName.substring(1);
+
+			fbWrapper['get' + capName] = function () {
+
+				if (fbApi !== null) {
+					var value = null;
+
+					// figure out how to get youtube dta here
+					switch (propName) {
+						case 'currentTime':
+							return fbApi.getCurrentPosition();
+
+						case 'duration':
+							return fbApi.getDuration();
+
+						case 'volume':
+							return fbApi.getVolume();
+
+						case 'paused':
+							return paused;
+
+						case 'ended':
+							return ended;
+
+						case 'muted':
+							return fbApi.isMuted();
+
+						case 'buffered':
+							return {
+								start: function start() {
+									return 0;
+								},
+								end: function end() {
+									return 0;
+								},
+								length: 1
+							};
+						case 'src':
+							return src;
+
+						case 'readyState':
+							return readyState;
+					}
+
+					return value;
+				} else {
+					return null;
+				}
+			};
+
+			fbWrapper['set' + capName] = function (value) {
+
+				if (fbApi !== null) {
+
+					switch (propName) {
+
+						case 'src':
+							var url = typeof value === 'string' ? value : value[0].src;
+
+							// Only way is to destroy instance and all the events fired,
+							// and create new one
+							fbDiv.remove();
+							createFacebookEmbed(url, options.facebook);
+
+							// This method reloads video on-demand
+							FB.XFBML.parse();
+
+							if (autoplay) {
+								fbApi.play();
+							}
+
+							break;
+
+						case 'currentTime':
+							fbApi.seek(value);
+							break;
+
+						case 'muted':
+							if (value) {
+								fbApi.mute();
+							} else {
+								fbApi.unmute();
+							}
+							setTimeout(function () {
+								var event = mejs.Utils.createEvent('volumechange', fbWrapper);
+								mediaElement.dispatchEvent(event);
+							}, 50);
+							break;
+
+						case 'volume':
+							fbApi.setVolume(value);
+							setTimeout(function () {
+								var event = mejs.Utils.createEvent('volumechange', fbWrapper);
+								mediaElement.dispatchEvent(event);
+							}, 50);
+							break;
+
+						case 'readyState':
+							var event = mejs.Utils.createEvent('canplay', fbWrapper);
+							mediaElement.dispatchEvent(event);
+							break;
+
+						default:
+							
+							break;
+					}
+				} else {
+					// store for after "READY" event fires
+					apiStack.push({ type: 'set', propName: propName, value: value });
+				}
+			};
+		};
+
+		for (var i = 0, total = props.length; i < total; i++) {
+			assignGettersSetters(props[i]);
+		}
+
+		// add wrappers for native methods
+		var methods = mejs.html5media.methods,
+		    assignMethods = function assignMethods(methodName) {
+
+			// run the method on the native HTMLMediaElement
+			fbWrapper[methodName] = function () {
+
+				if (fbApi !== null) {
+
+					// DO method
+					switch (methodName) {
+						case 'play':
+							return fbApi.play();
+						case 'pause':
+							return fbApi.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]);
+		}
+
+		/**
+   * Dispatch a list of events
+   *
+   * @private
+   * @param {Array} events
+   */
+		function sendEvents(events) {
+			for (var _i2 = 0, _total2 = events.length; _i2 < _total2; _i2++) {
+				var event = mejs.Utils.createEvent(events[_i2], fbWrapper);
+				mediaElement.dispatchEvent(event);
+			}
+		}
+
+		/**
+   * Create a new Facebook player and attach all its events
+   *
+   * This method creates a <div> element that, once the API is available, will generate an <iframe>.
+   * Valid URL format(s):
+   *  - https://www.facebook.com/johndyer/videos/10107816243681884/
+   *
+   * @param {String} url
+   * @param {Object} config
+   */
+		function createFacebookEmbed(url, config) {
+
+			// Append width and height if not detected
+			src = url;
+
+			fbDiv = document.createElement('div');
+			fbDiv.id = fbWrapper.id;
+			fbDiv.className = "fb-video";
+			fbDiv.setAttribute("data-href", url);
+			fbDiv.setAttribute("data-allowfullscreen", "true");
+			fbDiv.setAttribute("data-controls", "false");
+
+			mediaElement.originalNode.parentNode.insertBefore(fbDiv, mediaElement.originalNode);
+			mediaElement.originalNode.style.display = 'none';
+
+			/*
+    * Register Facebook API event globally
+    *
+    */
+			window.fbAsyncInit = function () {
+
+				FB.init(config);
+
+				FB.Event.subscribe('xfbml.ready', function (msg) {
+
+					if (msg.type === 'video') {
+
+						fbApi = msg.instance;
+
+						// Set proper size since player dimensions are unknown before this event
+						var fbIframe = fbDiv.getElementsByTagName('iframe')[0],
+						    width = fbIframe.offsetWidth,
+						    height = fbIframe.offsetHeight,
+						    events = ['mouseover', 'mouseout'],
+						    assignEvents = function assignEvents(e) {
+							var event = mejs.Utils.createEvent(e.type, fbWrapper);
+							mediaElement.dispatchEvent(event);
+						};
+
+						fbWrapper.setSize(width, height);
+
+						if (autoplay) {
+							fbApi.play();
+						}
+
+						for (var _i3 = 0, _total3 = events.length; _i3 < _total3; _i3++) {
+							fbIframe.addEventListener(events[_i3], assignEvents, false);
+						}
+
+						// remove previous listeners
+						var fbEvents = ['startedPlaying', 'paused', 'finishedPlaying', 'startedBuffering', 'finishedBuffering'];
+						for (var _i4 = 0, _total4 = fbEvents.length; _i4 < _total4; _i4++) {
+							var event = fbEvents[_i4],
+							    handler = eventHandler[event];
+							if (handler !== undefined && handler !== null && !mejs.Utils.isObjectEmpty(handler) && typeof handler.removeListener === 'function') {
+								handler.removeListener(event);
+							}
+						}
+
+						// do call stack
+						if (apiStack.length) {
+							for (var _i5 = 0, _total5 = apiStack.length; _i5 < _total5; _i5++) {
+
+								var stackItem = apiStack[_i5];
+
+								if (stackItem.type === 'set') {
+									var propName = stackItem.propName,
+									    capName = '' + propName.substring(0, 1).toUpperCase() + propName.substring(1);
+
+									fbWrapper['set' + capName](stackItem.value);
+								} else if (stackItem.type === 'call') {
+									fbWrapper[stackItem.methodName]();
+								}
+							}
+						}
+
+						sendEvents(['rendererready', 'loadeddata', 'canplay', 'progress', 'loadedmetadata', 'timeupdate']);
+
+						var timer = void 0;
+
+						// Custom Facebook events
+						eventHandler.startedPlaying = fbApi.subscribe('startedPlaying', function () {
+							if (!hasStartedPlaying) {
+								hasStartedPlaying = true;
+							}
+							paused = false;
+							ended = false;
+							sendEvents(['play', 'playing', 'timeupdate']);
+
+							// Workaround to update progress bar
+							timer = setInterval(function () {
+								fbApi.getCurrentPosition();
+								sendEvents(['timeupdate']);
+							}, 250);
+						});
+						eventHandler.paused = fbApi.subscribe('paused', function () {
+							paused = true;
+							ended = false;
+							sendEvents(['pause']);
+						});
+						eventHandler.finishedPlaying = fbApi.subscribe('finishedPlaying', function () {
+							paused = true;
+							ended = true;
+
+							sendEvents(['ended']);
+							clearInterval(timer);
+							timer = null;
+						});
+						eventHandler.startedBuffering = fbApi.subscribe('startedBuffering', function () {
+							sendEvents(['progress', 'timeupdate']);
+						});
+						eventHandler.finishedBuffering = fbApi.subscribe('finishedBuffering', function () {
+							sendEvents(['progress', 'timeupdate']);
+						});
+					}
+				});
+			};
+
+			(function (d, s, id) {
+				var fjs = d.getElementsByTagName(s)[0];
+				if (d.getElementById(id)) {
+					return;
+				}
+				var js = d.createElement(s);
+				js.id = id;
+				js.src = 'https://connect.facebook.net/en_US/sdk.js';
+				fjs.parentNode.insertBefore(js, fjs);
+			})(document, 'script', 'facebook-jssdk');
+		}
+
+		if (mediaFiles.length > 0) {
+			createFacebookEmbed(mediaFiles[0].src, fbWrapper.options.facebook);
+		}
+
+		fbWrapper.hide = function () {
+			fbWrapper.stopInterval();
+			fbWrapper.pause();
+			if (fbDiv) {
+				fbDiv.style.display = 'none';
+			}
+		};
+		fbWrapper.show = function () {
+			if (fbDiv) {
+				fbDiv.style.display = '';
+			}
+		};
+		fbWrapper.setSize = function (width, height) {
+			if (fbApi !== null && !isNaN(width) && !isNaN(height)) {
+				fbDiv.style.width = width;
+				fbDiv.style.height = height;
+			}
+		};
+		fbWrapper.destroy = function () {};
+		fbWrapper.interval = null;
+
+		fbWrapper.startInterval = function () {
+			// create timer
+			fbWrapper.interval = setInterval(function () {
+				var event = mejs.Utils.createEvent('timeupdate', fbWrapper);
+				mediaElement.dispatchEvent(event);
+			}, 250);
+		};
+		fbWrapper.stopInterval = function () {
+			if (fbWrapper.interval) {
+				clearInterval(fbWrapper.interval);
+			}
+		};
+
+		return fbWrapper;
+	}
+};
+
+/**
+ * Register Facebook type based on URL structure
+ *
+ */
+mejs.Utils.typeChecks.push(function (url) {
+	return ~url.toLowerCase().indexOf('//www.facebook') ? 'video/x-facebook' : null;
+});
+
+mejs.Renderers.add(FacebookRenderer);
+
+},{}]},{},[1]);

libresonic-main/src/main/webapp/script/mediaelement/renderers/facebook.min.js

@@ -0,0 +1,22 @@
+/*!
+ * 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
+ *
+ *//*!
+ * 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 a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){"use strict";var d={name:"facebook",options:{prefix:"facebook",facebook:{appId:"{your-app-id}",xfbml:!0,version:"v2.6"}},canPlayType:function(a){return~["video/facebook","video/x-facebook"].indexOf(a.toLowerCase())},create:function(a,b,c){function d(b){for(var c=0,d=b.length;d>c;c++){var e=mejs.Utils.createEvent(b[c],f);a.dispatchEvent(e)}}function e(b,c){k=b,p=document.createElement("div"),p.id=f.id,p.className="fb-video",p.setAttribute("data-href",b),p.setAttribute("data-allowfullscreen","true"),p.setAttribute("data-controls","false"),a.originalNode.parentNode.insertBefore(p,a.originalNode),a.originalNode.style.display="none",window.fbAsyncInit=function(){FB.init(c),FB.Event.subscribe("xfbml.ready",function(b){if("video"===b.type){o=b.instance;var c=p.getElementsByTagName("iframe")[0],e=c.offsetWidth,i=c.offsetHeight,k=["mouseover","mouseout"],q=function(b){var c=mejs.Utils.createEvent(b.type,f);a.dispatchEvent(c)};f.setSize(e,i),j&&o.play();for(var r=0,s=k.length;s>r;r++)c.addEventListener(k[r],q,!1);for(var t=["startedPlaying","paused","finishedPlaying","startedBuffering","finishedBuffering"],u=0,v=t.length;v>u;u++){var w=t[u],x=h[w];void 0===x||null===x||mejs.Utils.isObjectEmpty(x)||"function"!=typeof x.removeListener||x.removeListener(w)}if(g.length)for(var y=0,z=g.length;z>y;y++){var A=g[y];if("set"===A.type){var B=A.propName,C=""+B.substring(0,1).toUpperCase()+B.substring(1);f["set"+C](A.value)}else"call"===A.type&&f[A.methodName]()}d(["rendererready","loadeddata","canplay","progress","loadedmetadata","timeupdate"]);var D=void 0;h.startedPlaying=o.subscribe("startedPlaying",function(){n||(n=!0),l=!1,m=!1,d(["play","playing","timeupdate"]),D=setInterval(function(){o.getCurrentPosition(),d(["timeupdate"])},250)}),h.paused=o.subscribe("paused",function(){l=!0,m=!1,d(["pause"])}),h.finishedPlaying=o.subscribe("finishedPlaying",function(){l=!0,m=!0,d(["ended"]),clearInterval(D),D=null}),h.startedBuffering=o.subscribe("startedBuffering",function(){d(["progress","timeupdate"])}),h.finishedBuffering=o.subscribe("finishedBuffering",function(){d(["progress","timeupdate"])})}})},function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){var e=a.createElement(b);e.id=c,e.src="https://connect.facebook.net/en_US/sdk.js",d.parentNode.insertBefore(e,d)}}(document,"script","facebook-jssdk")}var f={},g=[],h={},i=4,j=a.originalNode.autoplay,k="",l=!0,m=!1,n=!1,o=null,p=null;b=Object.assign(b,a.options),f.options=b,f.id=a.id+"_"+b.prefix,f.mediaElement=a;for(var q=mejs.html5media.properties,r=function(c){var d=""+c.substring(0,1).toUpperCase()+c.substring(1);f["get"+d]=function(){if(null!==o){var a=null;switch(c){case"currentTime":return o.getCurrentPosition();case"duration":return o.getDuration();case"volume":return o.getVolume();case"paused":return l;case"ended":return m;case"muted":return o.isMuted();case"buffered":return{start:function(){return 0},end:function(){return 0},length:1};case"src":return k;case"readyState":return i}return a}return null},f["set"+d]=function(d){if(null!==o)switch(c){case"src":var h="string"==typeof d?d:d[0].src;p.remove(),e(h,b.facebook),FB.XFBML.parse(),j&&o.play();break;case"currentTime":o.seek(d);break;case"muted":d?o.mute():o.unmute(),setTimeout(function(){var b=mejs.Utils.createEvent("volumechange",f);a.dispatchEvent(b)},50);break;case"volume":o.setVolume(d),setTimeout(function(){var b=mejs.Utils.createEvent("volumechange",f);a.dispatchEvent(b)},50);break;case"readyState":var i=mejs.Utils.createEvent("canplay",f);a.dispatchEvent(i)}else g.push({type:"set",propName:c,value:d})}},s=0,t=q.length;t>s;s++)r(q[s]);for(var u=mejs.html5media.methods,v=function(a){f[a]=function(){if(null!==o)switch(a){case"play":return o.play();case"pause":return o.pause();case"load":return null}else g.push({type:"call",methodName:a})}},w=0,x=u.length;x>w;w++)v(u[w]);return c.length>0&&e(c[0].src,f.options.facebook),f.hide=function(){f.stopInterval(),f.pause(),p&&(p.style.display="none")},f.show=function(){p&&(p.style.display="")},f.setSize=function(a,b){null===o||isNaN(a)||isNaN(b)||(p.style.width=a,p.style.height=b)},f.destroy=function(){},f.interval=null,f.startInterval=function(){f.interval=setInterval(function(){var b=mejs.Utils.createEvent("timeupdate",f);a.dispatchEvent(b)},250)},f.stopInterval=function(){f.interval&&clearInterval(f.interval)},f}};mejs.Utils.typeChecks.push(function(a){return~a.toLowerCase().indexOf("//www.facebook")?"video/x-facebook":null}),mejs.Renderers.add(d)},{}]},{},[1]);

libresonic-main/src/main/webapp/script/mediaelement/renderers/soundcloud.js

@@ -0,0 +1,442 @@
+/*!
+ * 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 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})({1:[function(_dereq_,module,exports){
+'use strict';
+
+/**
+ * SoundCloud renderer
+ *
+ * Uses <iframe> approach and uses SoundCloud Widget API to manipulate it.
+ * @see https://developers.soundcloud.com/docs/api/html5-widget
+ */
+
+var SoundCloudApi = {
+	/**
+  * @type {Boolean}
+  */
+	isSDKStarted: false,
+	/**
+  * @type {Boolean}
+  */
+	isSDKLoaded: false,
+	/**
+  * @type {Array}
+  */
+	iframeQueue: [],
+
+	/**
+  * Create a queue to prepare the creation of <iframe>
+  *
+  * @param {Object} settings - an object with settings needed to create <iframe>
+  */
+	enqueueIframe: function enqueueIframe(settings) {
+
+		if (SoundCloudApi.isLoaded) {
+			SoundCloudApi.createIframe(settings);
+		} else {
+			SoundCloudApi.loadIframeApi();
+			SoundCloudApi.iframeQueue.push(settings);
+		}
+	},
+
+	/**
+  * Load SoundCloud API script on the header of the document
+  *
+  */
+	loadIframeApi: function loadIframeApi() {
+		if (!SoundCloudApi.isSDKStarted) {
+
+			var head = document.getElementsByTagName("head")[0] || document.documentElement,
+			    script = document.createElement("script");
+
+			var done = false;
+
+			script.src = 'https://w.soundcloud.com/player/api.js';
+
+			// Attach handlers for all browsers
+			// Is onload enough now? do IE9 support it?
+			script.onload = script.onreadystatechange = function () {
+				if (!done && (!SoundCloudApi.readyState || SoundCloudApi.readyState === "loaded" || SoundCloudApi.readyState === "complete")) {
+					done = true;
+					SoundCloudApi.apiReady();
+
+					// Handle memory leak in IE
+					script.onload = script.onreadystatechange = null;
+					script.remove();
+				}
+			};
+			head.appendChild(script);
+			SoundCloudApi.isSDKStarted = true;
+		}
+	},
+
+	/**
+  * Process queue of SoundCloud <iframe> element creation
+  *
+  */
+	apiReady: function apiReady() {
+		SoundCloudApi.isLoaded = true;
+		SoundCloudApi.isSDKLoaded = true;
+
+		while (SoundCloudApi.iframeQueue.length > 0) {
+			var settings = SoundCloudApi.iframeQueue.pop();
+			SoundCloudApi.createIframe(settings);
+		}
+	},
+
+	/**
+  * Create a new instance of SoundCloud Widget player and trigger a custom event to initialize it
+  *
+  * @param {Object} settings - an object with settings needed to create <iframe>
+  */
+	createIframe: function createIframe(settings) {
+		var player = SC.Widget(settings.iframe);
+		window['__ready__' + settings.id](player);
+	}
+};
+
+var SoundCloudIframeRenderer = {
+	name: 'soundcloud_iframe',
+
+	options: {
+		prefix: 'soundcloud_iframe'
+	},
+
+	/**
+  * Determine if a specific element type can be played with this render
+  *
+  * @param {String} type
+  * @return {Boolean}
+  */
+	canPlayType: function canPlayType(type) {
+		return ~['video/soundcloud', 'video/x-soundcloud'].indexOf(type.toLowerCase());
+	},
+
+	/**
+  * Create the player instance and add all native events/methods/properties as possible
+  *
+  * @param {MediaElement} mediaElement Instance of mejs.MediaElement already created
+  * @param {Object} options All the player configuration options passed through constructor
+  * @param {Object[]} mediaFiles List of sources with format: {src: url, type: x/y-z}
+  * @return {Object}
+  */
+	create: function create(mediaElement, options, mediaFiles) {
+
+		// create our fake element that allows events and such to work
+		var sc = {},
+		    apiStack = [],
+		    readyState = 4,
+		    autoplay = mediaElement.originalNode.autoplay;
+
+		var duration = 0,
+		    currentTime = 0,
+		    bufferedTime = 0,
+		    volume = 1,
+		    muted = false,
+		    paused = true,
+		    ended = false,
+		    scPlayer = null,
+		    scIframe = null;
+
+		// store main variable
+		sc.options = options;
+		sc.id = mediaElement.id + '_' + options.prefix;
+		sc.mediaElement = mediaElement;
+
+		// wrappers for get/set
+		var props = mejs.html5media.properties,
+		    assignGettersSetters = function assignGettersSetters(propName) {
+
+			// add to flash state that we will store
+
+			var capName = "" + propName.substring(0, 1).toUpperCase() + propName.substring(1);
+
+			sc["get" + capName] = function () {
+				if (scPlayer !== null) {
+					var value = null;
+
+					// figure out how to get dm dta here
+					switch (propName) {
+						case 'currentTime':
+							return currentTime;
+
+						case 'duration':
+							return duration;
+
+						case 'volume':
+							return volume;
+
+						case 'paused':
+							return paused;
+
+						case 'ended':
+							return ended;
+
+						case 'muted':
+							return muted; // ?
+
+						case 'buffered':
+							return {
+								start: function start() {
+									return 0;
+								},
+								end: function end() {
+									return bufferedTime * duration;
+								},
+								length: 1
+							};
+						case 'src':
+							return scIframe ? scIframe.src : '';
+
+						case 'readyState':
+							return readyState;
+					}
+
+					return value;
+				} else {
+					return null;
+				}
+			};
+
+			sc["set" + capName] = function (value) {
+
+				if (scPlayer !== null) {
+
+					// do something
+					switch (propName) {
+
+						case 'src':
+							var url = typeof value === 'string' ? value : value[0].src;
+
+							scPlayer.load(url);
+
+							if (autoplay) {
+								scPlayer.play();
+							}
+							break;
+
+						case 'currentTime':
+							scPlayer.seekTo(value * 1000);
+							break;
+
+						case 'muted':
+							if (value) {
+								scPlayer.setVolume(0); // ?
+							} else {
+								scPlayer.setVolume(1); // ?
+							}
+							setTimeout(function () {
+								var event = mejs.Utils.createEvent('volumechange', sc);
+								mediaElement.dispatchEvent(event);
+							}, 50);
+							break;
+
+						case 'volume':
+							scPlayer.setVolume(value);
+							setTimeout(function () {
+								var event = mejs.Utils.createEvent('volumechange', sc);
+								mediaElement.dispatchEvent(event);
+							}, 50);
+							break;
+
+						case 'readyState':
+							var event = mejs.Utils.createEvent('canplay', sc);
+							mediaElement.dispatchEvent(event);
+							break;
+
+						default:
+							
+							break;
+					}
+				} else {
+					// store for after "READY" event fires
+					apiStack.push({ type: 'set', propName: propName, value: value });
+				}
+			};
+		};
+
+		for (var i = 0, total = props.length; i < total; i++) {
+			assignGettersSetters(props[i]);
+		}
+
+		// add wrappers for native methods
+		var methods = mejs.html5media.methods,
+		    assignMethods = function assignMethods(methodName) {
+
+			// run the method on the Soundcloud API
+			sc[methodName] = function () {
+
+				if (scPlayer !== null) {
+
+					// DO method
+					switch (methodName) {
+						case 'play':
+							return scPlayer.play();
+						case 'pause':
+							return scPlayer.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]);
+		}
+
+		// add a ready method that SC can fire
+		window['__ready__' + sc.id] = function (_scPlayer) {
+
+			mediaElement.scPlayer = scPlayer = _scPlayer;
+
+			if (autoplay) {
+				scPlayer.play();
+			}
+
+			// do call stack
+			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);
+
+						sc["set" + capName](stackItem.value);
+					} else if (stackItem.type === 'call') {
+						sc[stackItem.methodName]();
+					}
+				}
+			}
+
+			// SoundCloud properties are async, so we don't fire the event until the property callback fires
+			scPlayer.bind(SC.Widget.Events.PLAY_PROGRESS, function () {
+				paused = false;
+				ended = false;
+
+				scPlayer.getPosition(function (_currentTime) {
+					currentTime = _currentTime / 1000;
+					var event = mejs.Utils.createEvent('timeupdate', sc);
+					mediaElement.dispatchEvent(event);
+				});
+			});
+
+			scPlayer.bind(SC.Widget.Events.PAUSE, function () {
+				paused = true;
+
+				var event = mejs.Utils.createEvent('pause', sc);
+				mediaElement.dispatchEvent(event);
+			});
+			scPlayer.bind(SC.Widget.Events.PLAY, function () {
+				paused = false;
+				ended = false;
+
+				var event = mejs.Utils.createEvent('play', sc);
+				mediaElement.dispatchEvent(event);
+			});
+			scPlayer.bind(SC.Widget.Events.FINISHED, function () {
+				paused = false;
+				ended = true;
+
+				var event = mejs.Utils.createEvent('ended', sc);
+				mediaElement.dispatchEvent(event);
+			});
+			scPlayer.bind(SC.Widget.Events.READY, function () {
+				scPlayer.getDuration(function (_duration) {
+					duration = _duration / 1000;
+
+					var event = mejs.Utils.createEvent('loadedmetadata', sc);
+					mediaElement.dispatchEvent(event);
+				});
+			});
+			scPlayer.bind(SC.Widget.Events.LOAD_PROGRESS, function () {
+				scPlayer.getDuration(function (loadProgress) {
+					if (duration > 0) {
+						bufferedTime = duration * loadProgress;
+
+						var event = mejs.Utils.createEvent('progress', sc);
+						mediaElement.dispatchEvent(event);
+					}
+				});
+				scPlayer.getDuration(function (_duration) {
+					duration = _duration;
+
+					var event = mejs.Utils.createEvent('loadedmetadata', sc);
+					mediaElement.dispatchEvent(event);
+				});
+			});
+
+			// give initial events
+			var initEvents = ['rendererready', 'loadeddata', 'loadedmetadata', 'canplay'];
+
+			for (var _i3 = 0, _total3 = initEvents.length; _i3 < _total3; _i3++) {
+				var event = mejs.Utils.createEvent(initEvents[_i3], sc);
+				mediaElement.dispatchEvent(event);
+			}
+		};
+
+		// container for API API
+		scIframe = document.createElement('iframe');
+		scIframe.id = sc.id;
+		scIframe.width = 10;
+		scIframe.height = 10;
+		scIframe.frameBorder = 0;
+		scIframe.style.visibility = 'hidden';
+		scIframe.src = mediaFiles[0].src;
+		scIframe.scrolling = 'no';
+
+		mediaElement.appendChild(scIframe);
+		mediaElement.originalNode.style.display = 'none';
+
+		var scSettings = {
+			iframe: scIframe,
+			id: sc.id
+		};
+
+		SoundCloudApi.enqueueIframe(scSettings);
+
+		sc.setSize = function () {};
+		sc.hide = function () {
+			sc.pause();
+			if (scIframe) {
+				scIframe.style.display = 'none';
+			}
+		};
+		sc.show = function () {
+			if (scIframe) {
+				scIframe.style.display = '';
+			}
+		};
+		sc.destroy = function () {
+			scPlayer.destroy();
+		};
+
+		return sc;
+	}
+};
+
+/**
+ * Register SoundCloud type based on URL structure
+ *
+ */
+mejs.Utils.typeChecks.push(function (url) {
+	return (/\/\/(w\.)?soundcloud.com/i.test(url) ? 'video/x-soundcloud' : null
+	);
+});
+
+mejs.Renderers.add(SoundCloudIframeRenderer);
+
+},{}]},{},[1]);

libresonic-main/src/main/webapp/script/mediaelement/renderers/soundcloud.min.js

@@ -0,0 +1,22 @@
+/*!
+ * 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
+ *
+ *//*!
+ * 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 a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){"use strict";var d={isSDKStarted:!1,isSDKLoaded:!1,iframeQueue:[],enqueueIframe:function(a){d.isLoaded?d.createIframe(a):(d.loadIframeApi(),d.iframeQueue.push(a))},loadIframeApi:function(){if(!d.isSDKStarted){var a=document.getElementsByTagName("head")[0]||document.documentElement,b=document.createElement("script"),c=!1;b.src="https://w.soundcloud.com/player/api.js",b.onload=b.onreadystatechange=function(){c||d.readyState&&"loaded"!==d.readyState&&"complete"!==d.readyState||(c=!0,d.apiReady(),b.onload=b.onreadystatechange=null,b.remove())},a.appendChild(b),d.isSDKStarted=!0}},apiReady:function(){for(d.isLoaded=!0,d.isSDKLoaded=!0;d.iframeQueue.length>0;){var a=d.iframeQueue.pop();d.createIframe(a)}},createIframe:function(a){var b=SC.Widget(a.iframe);window["__ready__"+a.id](b)}},e={name:"soundcloud_iframe",options:{prefix:"soundcloud_iframe"},canPlayType:function(a){return~["video/soundcloud","video/x-soundcloud"].indexOf(a.toLowerCase())},create:function(a,b,c){var e={},f=[],g=4,h=a.originalNode.autoplay,i=0,j=0,k=0,l=1,m=!1,n=!0,o=!1,p=null,q=null;e.options=b,e.id=a.id+"_"+b.prefix,e.mediaElement=a;for(var r=mejs.html5media.properties,s=function(b){var c=""+b.substring(0,1).toUpperCase()+b.substring(1);e["get"+c]=function(){if(null!==p){var a=null;switch(b){case"currentTime":return j;case"duration":return i;case"volume":return l;case"paused":return n;case"ended":return o;case"muted":return m;case"buffered":return{start:function(){return 0},end:function(){return k*i},length:1};case"src":return q?q.src:"";case"readyState":return g}return a}return null},e["set"+c]=function(c){if(null!==p)switch(b){case"src":var d="string"==typeof c?c:c[0].src;p.load(d),h&&p.play();break;case"currentTime":p.seekTo(1e3*c);break;case"muted":c?p.setVolume(0):p.setVolume(1),setTimeout(function(){var b=mejs.Utils.createEvent("volumechange",e);a.dispatchEvent(b)},50);break;case"volume":p.setVolume(c),setTimeout(function(){var b=mejs.Utils.createEvent("volumechange",e);a.dispatchEvent(b)},50);break;case"readyState":var g=mejs.Utils.createEvent("canplay",e);a.dispatchEvent(g)}else f.push({type:"set",propName:b,value:c})}},t=0,u=r.length;u>t;t++)s(r[t]);for(var v=mejs.html5media.methods,w=function(a){e[a]=function(){if(null!==p)switch(a){case"play":return p.play();case"pause":return p.pause();case"load":return null}else f.push({type:"call",methodName:a})}},x=0,y=v.length;y>x;x++)w(v[x]);window["__ready__"+e.id]=function(b){if(a.scPlayer=p=b,h&&p.play(),f.length)for(var c=0,d=f.length;d>c;c++){var g=f[c];if("set"===g.type){var l=g.propName,m=""+l.substring(0,1).toUpperCase()+l.substring(1);e["set"+m](g.value)}else"call"===g.type&&e[g.methodName]()}p.bind(SC.Widget.Events.PLAY_PROGRESS,function(){n=!1,o=!1,p.getPosition(function(b){j=b/1e3;var c=mejs.Utils.createEvent("timeupdate",e);a.dispatchEvent(c)})}),p.bind(SC.Widget.Events.PAUSE,function(){n=!0;var b=mejs.Utils.createEvent("pause",e);a.dispatchEvent(b)}),p.bind(SC.Widget.Events.PLAY,function(){n=!1,o=!1;var b=mejs.Utils.createEvent("play",e);a.dispatchEvent(b)}),p.bind(SC.Widget.Events.FINISHED,function(){n=!1,o=!0;var b=mejs.Utils.createEvent("ended",e);a.dispatchEvent(b)}),p.bind(SC.Widget.Events.READY,function(){p.getDuration(function(b){i=b/1e3;var c=mejs.Utils.createEvent("loadedmetadata",e);a.dispatchEvent(c)})}),p.bind(SC.Widget.Events.LOAD_PROGRESS,function(){p.getDuration(function(b){if(i>0){k=i*b;var c=mejs.Utils.createEvent("progress",e);a.dispatchEvent(c)}}),p.getDuration(function(b){i=b;var c=mejs.Utils.createEvent("loadedmetadata",e);a.dispatchEvent(c)})});for(var q=["rendererready","loadeddata","loadedmetadata","canplay"],r=0,s=q.length;s>r;r++){var t=mejs.Utils.createEvent(q[r],e);a.dispatchEvent(t)}},q=document.createElement("iframe"),q.id=e.id,q.width=10,q.height=10,q.frameBorder=0,q.style.visibility="hidden",q.src=c[0].src,q.scrolling="no",a.appendChild(q),a.originalNode.style.display="none";var z={iframe:q,id:e.id};return d.enqueueIframe(z),e.setSize=function(){},e.hide=function(){e.pause(),q&&(q.style.display="none")},e.show=function(){q&&(q.style.display="")},e.destroy=function(){p.destroy()},e}};mejs.Utils.typeChecks.push(function(a){return/\/\/(w\.)?soundcloud.com/i.test(a)?"video/x-soundcloud":null}),mejs.Renderers.add(e)},{}]},{},[1]);

libresonic-main/src/main/webapp/script/mediaelement/renderers/twitch.js

@@ -0,0 +1,539 @@
+/*!
+ * 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 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})({1:[function(_dereq_,module,exports){
+'use strict';
+
+/**
+ * Twitch renderer
+ *
+ * Uses <iframe> approach and uses Twitch API to manipulate it.
+ * @see https://github.com/justintv/Twitch-API/blob/master/embed-video.md
+ */
+
+var twitchApi = {
+	/**
+  * @type {Boolean}
+  */
+	isIframeStarted: false,
+	/**
+  * @type {Boolean}
+  */
+	isIframeLoaded: false,
+	/**
+  * @type {Array}
+  */
+	iframeQueue: [],
+
+	/**
+  * Create a queue to prepare the creation of <iframe>
+  *
+  * @param {Object} settings - an object with settings needed to create <iframe>
+  */
+	enqueueIframe: function enqueueIframe(settings) {
+
+		// Check whether Twitch API is already loaded.
+		twitchApi.isLoaded = typeof Twitch !== 'undefined';
+
+		if (twitchApi.isLoaded) {
+			twitchApi.createIframe(settings);
+		} else {
+			twitchApi.loadIframeApi();
+			twitchApi.iframeQueue.push(settings);
+		}
+	},
+
+	/**
+  * Load Twitch API script on the header of the document
+  *
+  */
+	loadIframeApi: function loadIframeApi() {
+		if (!twitchApi.isIframeStarted) {
+
+			var script = document.createElement('script'),
+			    firstScriptTag = document.getElementsByTagName('script')[0];
+
+			var done = false;
+
+			script.src = 'https://player.twitch.tv/js/embed/v1.js';
+
+			// Attach handlers for all browsers
+			script.onload = script.onreadystatechange = function () {
+				if (!done && (!this.readyState || this.readyState === undefined || this.readyState === 'loaded' || this.readyState === 'complete')) {
+					done = true;
+					twitchApi.iFrameReady();
+					script.onload = script.onreadystatechange = null;
+				}
+			};
+			firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
+			twitchApi.isIframeStarted = true;
+		}
+	},
+
+	/**
+  * Process queue of Twitch <iframe> element creation
+  *
+  */
+	iFrameReady: function iFrameReady() {
+
+		twitchApi.isLoaded = true;
+		twitchApi.isIframeLoaded = true;
+
+		while (twitchApi.iframeQueue.length > 0) {
+			var settings = twitchApi.iframeQueue.pop();
+			twitchApi.createIframe(settings);
+		}
+	},
+
+	/**
+  * Create a new instance of Twitch API player and trigger a custom event to initialize it
+  *
+  * @param {Object} settings - an object with settings needed to create <iframe>
+  */
+	createIframe: function createIframe(settings) {
+		var player = new Twitch.Player(settings.id, settings);
+		window['__ready__' + settings.id](player);
+	},
+
+	/**
+  * Extract ID from Twitch to be loaded through API
+  * Valid URL format(s):
+  *  - https://player.twitch.tv/?video=40464143
+  *  - https://www.twitch.tv/40464143
+  *  - https://player.twitch.tv/?channel=monserrat
+  *  - https://www.twitch.tv/monserrat
+  *
+  * @param {String} url - Twitch full URL to grab the number Id of the source
+  * @return {int}
+  */
+	getTwitchId: function getTwitchId(url) {
+
+		var twitchId = '';
+
+		if (url.indexOf('?') > 0) {
+			twitchId = twitchApi.getTwitchIdFromParam(url);
+			if (twitchId === '') {
+				twitchId = twitchApi.getTwitchIdFromUrl(url);
+			}
+		} else {
+			twitchId = twitchApi.getTwitchIdFromUrl(url);
+		}
+
+		return twitchId;
+	},
+
+	/**
+  * Get ID from URL with format:
+  *  - https://player.twitch.tv/?channel=monserrat
+  *  - https://player.twitch.tv/?video=40464143
+  *
+  * @param {String} url
+  * @returns {string}
+  */
+	getTwitchIdFromParam: function getTwitchIdFromParam(url) {
+
+		if (url === undefined || url === null || !url.trim().length) {
+			return null;
+		}
+
+		var parts = url.split('?'),
+		    parameters = parts[1].split('&');
+
+		var twitchId = '';
+
+		for (var i = 0, total = parameters.length; i < total; i++) {
+			var paramParts = parameters[i].split('=');
+			if (~paramParts[0].indexOf('channel=')) {
+				twitchId = paramParts[1];
+				break;
+			} else if (~paramParts[0].indexOf('video=')) {
+				twitchId = 'v' + paramParts[1];
+				break;
+			}
+		}
+
+		return twitchId;
+	},
+
+	/**
+  * Get ID from URL with formats:
+  *  - https://www.twitch.tv/40464143
+  *  - https://www.twitch.tv/monserrat
+  *
+  * @param {String} url
+  * @return {?String}
+  */
+	getTwitchIdFromUrl: function getTwitchIdFromUrl(url) {
+
+		if (url === undefined || url === null || !url.trim().length) {
+			return null;
+		}
+
+		var parts = url.split('?');
+		url = parts[0];
+		var id = url.substring(url.lastIndexOf('/') + 1);
+		return (/^\d+$/i.test(id) !== null ? 'v' + id : id
+		);
+	},
+
+	/**
+  * Determine whether media is channel or video based on Twitch ID
+  *
+  * @see getTwitchId()
+  * @param {String} id
+  * @returns {String}
+  */
+	getTwitchType: function getTwitchType(id) {
+		return (/^v\d+/i.test(id) !== null ? 'video' : 'channel'
+		);
+	}
+};
+
+var TwitchIframeRenderer = {
+	name: 'twitch_iframe',
+
+	options: {
+		prefix: 'twitch_iframe'
+	},
+
+	/**
+  * Determine if a specific element type can be played with this render
+  *
+  * @param {String} type
+  * @return {Boolean}
+  */
+	canPlayType: function canPlayType(type) {
+		return ~['video/twitch', 'video/x-twitch'].indexOf(type.toLowerCase());
+	},
+
+	/**
+  * Create the player instance and add all native events/methods/properties as possible
+  *
+  * @param {MediaElement} mediaElement Instance of mejs.MediaElement already created
+  * @param {Object} options All the player configuration options passed through constructor
+  * @param {Object[]} mediaFiles List of sources with format: {src: url, type: x/y-z}
+  * @return {Object}
+  */
+	create: function create(mediaElement, options, mediaFiles) {
+
+		// API objects
+		var twitch = {},
+		    apiStack = [],
+		    readyState = 4,
+		    twitchId = twitchApi.getTwitchId(mediaFiles[0].src);
+
+		var twitchPlayer = null,
+		    paused = true,
+		    ended = false,
+		    hasStartedPlaying = false,
+		    volume = 1,
+		    duration = Infinity,
+		    time = 0;
+
+		twitch.options = options;
+		twitch.id = mediaElement.id + '_' + options.prefix;
+		twitch.mediaElement = mediaElement;
+
+		// wrappers for get/set
+		var props = mejs.html5media.properties,
+		    assignGettersSetters = function assignGettersSetters(propName) {
+
+			// add to flash state that we will store
+
+			var capName = '' + propName.substring(0, 1).toUpperCase() + propName.substring(1);
+
+			twitch['get' + capName] = function () {
+				if (twitchPlayer !== null) {
+					var value = null;
+
+					// figure out how to get Twitch dta here
+					switch (propName) {
+						case 'currentTime':
+							time = twitchPlayer.getCurrentTime();
+							return time;
+
+						case 'duration':
+							duration = twitchPlayer.getDuration();
+							return duration;
+
+						case 'volume':
+							volume = twitchPlayer.getVolume();
+							return volume;
+
+						case 'paused':
+							paused = twitchPlayer.isPaused();
+							return paused;
+
+						case 'ended':
+							ended = twitchPlayer.getEnded();
+							return ended;
+
+						case 'muted':
+							return twitchPlayer.getMuted();
+
+						case 'buffered':
+							return {
+								start: function start() {
+									return 0;
+								},
+								end: function end() {
+									return 0;
+								},
+								length: 1
+							};
+						case 'src':
+
+							return twitchApi.getTwitchType(twitchId) === 'channel' ? twitchPlayer.getChannel() : twitchPlayer.getVideo();
+
+						case 'readyState':
+							return readyState;
+					}
+
+					return value;
+				} else {
+					return null;
+				}
+			};
+
+			twitch['set' + capName] = function (value) {
+
+				if (twitchPlayer !== null) {
+
+					// do something
+					switch (propName) {
+
+						case 'src':
+							var url = typeof value === 'string' ? value : value[0].src,
+							    videoId = twitchApi.getTwitchId(url);
+
+							if (twitchApi.getTwitchType(twitchId) === 'channel') {
+								twitchPlayer.setChannel(videoId);
+							} else {
+								twitchPlayer.setVideo(videoId);
+							}
+							break;
+
+						case 'currentTime':
+							twitchPlayer.seek(value);
+							setTimeout(function () {
+								var event = mejs.Utils.createEvent('timeupdate', twitch);
+								mediaElement.dispatchEvent(event);
+							}, 50);
+							break;
+
+						case 'muted':
+							twitchPlayer.setMuted(value);
+							setTimeout(function () {
+								var event = mejs.Utils.createEvent('volumechange', twitch);
+								mediaElement.dispatchEvent(event);
+							}, 50);
+							break;
+
+						case 'volume':
+							volume = value;
+							twitchPlayer.setVolume(value);
+							setTimeout(function () {
+								var event = mejs.Utils.createEvent('volumechange', twitch);
+								mediaElement.dispatchEvent(event);
+							}, 50);
+							break;
+						case 'readyState':
+							var event = mejs.Utils.createEvent('canplay', twitch);
+							mediaElement.dispatchEvent(event);
+							break;
+
+						default:
+							
+							break;
+					}
+				} else {
+					// store for after "READY" event fires
+					apiStack.push({ type: 'set', propName: propName, value: value });
+				}
+			};
+		};
+
+		for (var i = 0, total = props.length; i < total; i++) {
+			assignGettersSetters(props[i]);
+		}
+
+		// add wrappers for native methods
+		var methods = mejs.html5media.methods,
+		    assignMethods = function assignMethods(methodName) {
+
+			// run the method on the native HTMLMediaElement
+			twitch[methodName] = function () {
+
+				if (twitchPlayer !== null) {
+
+					// DO method
+					switch (methodName) {
+						case 'play':
+							paused = false;
+							return twitchPlayer.play();
+						case 'pause':
+							paused = true;
+							return twitchPlayer.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]);
+		}
+
+		/**
+   * Dispatch a list of events
+   *
+   * @private
+   * @param {Array} events
+   */
+		function sendEvents(events) {
+			for (var _i2 = 0, _total2 = events.length; _i2 < _total2; _i2++) {
+				var event = mejs.Utils.createEvent(events[_i2], twitch);
+				mediaElement.dispatchEvent(event);
+			}
+		}
+
+		// Initial method to register all Twitch events when initializing <iframe>
+		window['__ready__' + twitch.id] = function (_twitchPlayer) {
+
+			mediaElement.twitchPlayer = twitchPlayer = _twitchPlayer;
+
+			// do call stack
+			if (apiStack.length) {
+				for (var _i3 = 0, _total3 = apiStack.length; _i3 < _total3; _i3++) {
+
+					var stackItem = apiStack[_i3];
+
+					if (stackItem.type === 'set') {
+						var propName = stackItem.propName,
+						    capName = '' + propName.substring(0, 1).toUpperCase() + propName.substring(1);
+
+						twitch['set' + capName](stackItem.value);
+					} else if (stackItem.type === 'call') {
+						twitch[stackItem.methodName]();
+					}
+				}
+			}
+
+			var twitchIframe = document.getElementById(twitch.id).firstChild;
+			twitchIframe.style.width = '100%';
+			twitchIframe.style.height = '100%';
+
+			// a few more events
+			var events = ['mouseover', 'mouseout'];
+
+			var assignEvents = function assignEvents(e) {
+				var event = createEvent(e.type, twitch);
+				mediaElement.dispatchEvent(event);
+			};
+
+			for (var _i4 = 0, _total4 = events.length; _i4 < _total4; _i4++) {
+				twitchIframe.addEventListener(events[_i4], assignEvents, false);
+			}
+
+			var timer = void 0;
+
+			// Twitch events
+			twitchPlayer.addEventListener('ready', function () {
+				paused = false;
+				ended = false;
+				sendEvents(['rendererready', 'loadedmetadata', 'loadeddata', 'canplay']);
+			});
+			twitchPlayer.addEventListener('play', function () {
+				if (!hasStartedPlaying) {
+					hasStartedPlaying = true;
+				}
+				paused = false;
+				ended = false;
+				sendEvents(['play', 'playing', 'progress']);
+
+				// Workaround to update progress bar
+				timer = setInterval(function () {
+					twitchPlayer.getCurrentTime();
+					sendEvents(['timeupdate']);
+				}, 250);
+			});
+			twitchPlayer.addEventListener('pause', function () {
+				paused = true;
+				ended = false;
+				if (!twitchPlayer.getEnded()) {
+					sendEvents(['pause']);
+				}
+			});
+			twitchPlayer.addEventListener('ended', function () {
+				paused = true;
+				ended = true;
+				sendEvents(['ended']);
+				clearInterval(timer);
+				hasStartedPlaying = false;
+				timer = null;
+			});
+		};
+
+		// CREATE Twitch
+		var height = mediaElement.originalNode.height,
+		    width = mediaElement.originalNode.width,
+		    twitchContainer = document.createElement('div'),
+		    type = twitchApi.getTwitchType(twitchId),
+		    twitchSettings = {
+			id: twitch.id,
+			width: width,
+			height: height,
+			playsinline: false,
+			autoplay: mediaElement.originalNode.autoplay
+		};
+
+		twitchSettings[type] = twitchId;
+		twitchContainer.id = twitch.id;
+		twitchContainer.style.width = '100%';
+		twitchContainer.style.height = '100%';
+
+		mediaElement.originalNode.parentNode.insertBefore(twitchContainer, mediaElement.originalNode);
+		mediaElement.originalNode.style.display = 'none';
+		mediaElement.originalNode.autoplay = false;
+
+		// send it off for async loading and creation
+		twitchApi.enqueueIframe(twitchSettings);
+
+		twitch.setSize = function (width, height) {
+			if (twitchApi !== null && !isNaN(width) && !isNaN(height)) {
+				twitchContainer.setAttribute('width', width);
+				twitchContainer.setAttribute('height', height);
+			}
+		};
+		twitch.hide = function () {
+			twitch.pause();
+			twitchContainer.style.display = 'none';
+		};
+		twitch.show = function () {
+			twitchContainer.style.display = '';
+		};
+		twitch.destroy = function () {};
+
+		return twitch;
+	}
+};
+
+mejs.Utils.typeChecks.push(function (url) {
+	return (/\/\/(www|player).twitch.tv/i.test(url) ? 'video/x-twitch' : null
+	);
+});
+
+mejs.Renderers.add(TwitchIframeRenderer);
+
+},{}]},{},[1]);

libresonic-main/src/main/webapp/script/mediaelement/renderers/vimeo.js

@@ -0,0 +1,529 @@
+/*!
+ * 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 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})({1:[function(_dereq_,module,exports){
+'use strict';
+
+/**
+ * Vimeo renderer
+ *
+ * Uses <iframe> approach and uses Vimeo API to manipulate it.
+ * All Vimeo calls return a Promise so this renderer accounts for that
+ * to update all the necessary values to interact with MediaElement player.
+ * Note: IE8 implements ECMAScript 3 that does not allow bare keywords in dot notation;
+ * that's why instead of using .catch ['catch'] is being used.
+ * @see https://github.com/vimeo/player.js
+ *
+ */
+
+var vimeoApi = {
+
+	/**
+  * @type {Boolean}
+  */
+	isIframeStarted: false,
+	/**
+  * @type {Boolean}
+  */
+	isIframeLoaded: false,
+	/**
+  * @type {Array}
+  */
+	iframeQueue: [],
+
+	/**
+  * Create a queue to prepare the creation of <iframe>
+  *
+  * @param {Object} settings - an object with settings needed to create <iframe>
+  */
+	enqueueIframe: function enqueueIframe(settings) {
+
+		if (vimeoApi.isLoaded) {
+			vimeoApi.createIframe(settings);
+		} else {
+			vimeoApi.loadIframeApi();
+			vimeoApi.iframeQueue.push(settings);
+		}
+	},
+
+	/**
+  * Load Vimeo API script on the header of the document
+  *
+  */
+	loadIframeApi: function loadIframeApi() {
+
+		if (!vimeoApi.isIframeStarted) {
+
+			var script = document.createElement('script'),
+			    firstScriptTag = document.getElementsByTagName('script')[0];
+
+			var done = false;
+
+			script.src = 'https://player.vimeo.com/api/player.js';
+
+			// Attach handlers for all browsers
+			script.onload = script.onreadystatechange = function () {
+				if (!done && (!this.readyState || this.readyState === undefined || this.readyState === 'loaded' || this.readyState === 'complete')) {
+					done = true;
+					vimeoApi.iFrameReady();
+					script.onload = script.onreadystatechange = null;
+				}
+			};
+			firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
+			vimeoApi.isIframeStarted = true;
+		}
+	},
+
+	/**
+  * Process queue of Vimeo <iframe> element creation
+  *
+  */
+	iFrameReady: function iFrameReady() {
+
+		vimeoApi.isLoaded = true;
+		vimeoApi.isIframeLoaded = true;
+
+		while (vimeoApi.iframeQueue.length > 0) {
+			var settings = vimeoApi.iframeQueue.pop();
+			vimeoApi.createIframe(settings);
+		}
+	},
+
+	/**
+  * Create a new instance of Vimeo API player and trigger a custom event to initialize it
+  *
+  * @param {Object} settings - an object with settings needed to create <iframe>
+  */
+	createIframe: function createIframe(settings) {
+		var player = new Vimeo.Player(settings.iframe);
+		window['__ready__' + settings.id](player);
+	},
+
+	/**
+  * Extract numeric value from Vimeo to be loaded through API
+  * Valid URL format(s):
+  *  - https://player.vimeo.com/video/59777392
+  *  - https://vimeo.com/59777392
+  *
+  * @param {String} url - Vimeo full URL to grab the number Id of the source
+  * @return {int}
+  */
+	getVimeoId: function getVimeoId(url) {
+		if (url === undefined || url === null) {
+			return null;
+		}
+
+		var parts = url.split('?');
+
+		url = parts[0];
+
+		return parseInt(url.substring(url.lastIndexOf('/') + 1));
+	}
+};
+
+var vimeoIframeRenderer = {
+
+	name: 'vimeo_iframe',
+
+	options: {
+		prefix: 'vimeo_iframe'
+	},
+	/**
+  * Determine if a specific element type can be played with this render
+  *
+  * @param {String} type
+  * @return {Boolean}
+  */
+	canPlayType: function canPlayType(type) {
+		return ~['video/vimeo', 'video/x-vimeo'].indexOf(type.toLowerCase());
+	},
+
+	/**
+  * Create the player instance and add all native events/methods/properties as possible
+  *
+  * @param {MediaElement} mediaElement Instance of mejs.MediaElement already created
+  * @param {Object} options All the player configuration options passed through constructor
+  * @param {Object[]} mediaFiles List of sources with format: {src: url, type: x/y-z}
+  * @return {Object}
+  */
+	create: function create(mediaElement, options, mediaFiles) {
+
+		// exposed object
+		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;
+
+		/**
+   * Generate custom errors for Vimeo based on the API specifications
+   *
+   * @see https://github.com/vimeo/player.js#error
+   * @param {Object} error
+   * @param {Object} target
+   */
+		var errorHandler = function errorHandler(error, target) {
+			var event = mejs.Utils.createEvent('error', target);
+			event.message = error.name + ': ' + error.message;
+			mediaElement.dispatchEvent(event);
+		};
+
+		// wrappers for get/set
+		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;
+							});
+
+							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) {
+
+					// do something
+					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) {
+								errorHandler(error, vimeo);
+							});
+							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) {
+								errorHandler(error, vimeo);
+							});
+							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) {
+								errorHandler(error, vimeo);
+							});
+							break;
+
+						case 'loop':
+							vimeoPlayer.setLoop(value)['catch'](function (error) {
+								errorHandler(error, vimeo);
+							});
+							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) {
+									errorHandler(error, vimeo);
+								});
+							} else {
+								vimeoPlayer.setVolume(oldVolume).then(function () {
+									volume = oldVolume;
+									setTimeout(function () {
+										var event = mejs.Utils.createEvent('volumechange', vimeo);
+										mediaElement.dispatchEvent(event);
+									}, 50);
+								})['catch'](function (error) {
+									errorHandler(error, vimeo);
+								});
+							}
+							break;
+						case 'readyState':
+							var event = mejs.Utils.createEvent('canplay', vimeo);
+							mediaElement.dispatchEvent(event);
+							break;
+						default:
+							
+							break;
+					}
+				} else {
+					// store for after "READY" event fires
+					apiStack.push({ type: 'set', propName: propName, value: value });
+				}
+			};
+		};
+
+		for (var i = 0, total = props.length; i < total; i++) {
+			assignGettersSetters(props[i]);
+		}
+
+		// add wrappers for native methods
+		var methods = mejs.html5media.methods,
+		    assignMethods = function assignMethods(methodName) {
+			vimeo[methodName] = function () {
+
+				if (vimeoPlayer !== null) {
+
+					// DO method
+					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]);
+		}
+
+		// Initial method to register all Vimeo events when initializing <iframe>
+		window['__ready__' + vimeo.id] = function (_vimeoPlayer) {
+
+			mediaElement.vimeoPlayer = vimeoPlayer = _vimeoPlayer;
+
+			// do call stack
+			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]();
+					}
+				}
+			}
+
+			var vimeoIframe = document.getElementById(vimeo.id);
+			var events = void 0;
+
+			// a few more events
+			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);
+			}
+
+			// Vimeo events
+			vimeoPlayer.on('loaded', function () {
+
+				vimeoPlayer.getDuration().then(function (loadProgress) {
+
+					duration = loadProgress;
+
+					if (duration > 0) {
+						bufferedTime = duration * loadProgress;
+					}
+
+					var event = mejs.Utils.createEvent('loadedmetadata', 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;
+					}
+
+					var event = mejs.Utils.createEvent('progress', vimeo);
+					mediaElement.dispatchEvent(event);
+				})['catch'](function (error) {
+					errorHandler(error, vimeo);
+				});
+			});
+			vimeoPlayer.on('timeupdate', function () {
+				vimeoPlayer.getCurrentTime().then(function (seconds) {
+					currentTime = seconds;
+
+					var event = mejs.Utils.createEvent('timeupdate', vimeo);
+					mediaElement.dispatchEvent(event);
+				})['catch'](function (error) {
+					errorHandler(error, vimeo);
+				});
+			});
+			vimeoPlayer.on('play', function () {
+				paused = false;
+				ended = false;
+				var event = mejs.Utils.createEvent('play', vimeo);
+				mediaElement.dispatchEvent(event);
+			});
+			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);
+			});
+
+			// give initial events
+			events = ['rendererready', 'loadeddata', 'loadedmetadata', '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 = '//player.vimeo.com/video/' + vimeoApi.getVimeoId(mediaFiles[0].src),
+		    queryArgs = ~mediaFiles[0].src.indexOf('?') ? '?' + mediaFiles[0].src.slice(mediaFiles[0].src.indexOf('?') + 1) : '';
+
+		// Create Vimeo <iframe> markup
+		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', '');
+		vimeoContainer.setAttribute('mozallowfullscreen', '');
+		vimeoContainer.setAttribute('allowfullscreen', '');
+
+		mediaElement.originalNode.parentNode.insertBefore(vimeoContainer, mediaElement.originalNode);
+		mediaElement.originalNode.style.display = 'none';
+
+		vimeoApi.enqueueIframe({
+			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 = '';
+			}
+		};
+
+		return vimeo;
+	}
+
+};
+
+/**
+ * Register Vimeo type based on URL structure
+ *
+ */
+mejs.Utils.typeChecks.push(function (url) {
+	return (/(\/\/player\.vimeo|vimeo\.com)/i.test(url) ? 'video/x-vimeo' : null
+	);
+});
+
+mejs.Renderers.add(vimeoIframeRenderer);
+
+},{}]},{},[1]);