update to latest mediaelement; use playlist from mediaelement-plugins; css build script

.gitignore

@@ -0,0 +1,3 @@
+css/mejs-controls.svg
+css/myplayer.min.css
+css/playlist-controls.svg

.gitmodules

@@ -0,0 +1,6 @@
+[submodule "mediaelement"]
+	path = mediaelement
+	url = https://github.com/mediaelement/mediaelement.git
+[submodule "mediaelement-plugins"]
+	path = mediaelement-plugins
+	url = https://github.com/mediaelement/mediaelement-plugins.git

css/bigplay.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?>
<!-- Generator: Adobe Fireworks CS6, Export SVG Extension by Aaron Beall (http://fireworks.abeall.com) . Version: 0.6.1  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="bigplay-gradient.fw-Page%201" viewBox="0 0 100 200" style="background-color:#ffffff00" version="1.1"
	xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
	x="0px" y="0px" width="100px" height="200px"
>
	<defs>
		<radialGradient id="gradient1" cx="50%" cy="50%" r="50%">
			<stop stop-color="#222222" stop-opacity="0" offset="70%"/>
			<stop stop-color="#222222" stop-opacity="0.0118" offset="70.202%"/>
			<stop stop-color="#333333" stop-opacity="1" offset="85%"/>
			<stop stop-color="#333333" stop-opacity="0" offset="100%"/>
		</radialGradient>
		<radialGradient id="gradient2" cx="50%" cy="50%" r="50%">
			<stop stop-color="#bbbbbb" stop-opacity="0" offset="70%"/>
			<stop stop-color="#bbbbbb" stop-opacity="0.0118" offset="70.202%"/>
			<stop stop-color="#bbbbbb" stop-opacity="1" offset="85%"/>
			<stop stop-color="#bbbbbb" stop-opacity="0" offset="100%"/>
		</radialGradient>
		<filter id="filter1" x="-100%" y="-100%" width="300%" height="300%">
			<!-- Glow -->
			<feColorMatrix result="out" in="SourceGraphic" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.251 0"/>
			<feMorphology result="out" in="out" operator="dilate" radius="3"/>
			<feGaussianBlur result="out" in="out" stdDeviation="1.5"/>
			<feBlend in="SourceGraphic" in2="out" mode="normal" result="Glow1"/>
		</filter>
		<filter id="filter2" x="-100%" y="-100%" width="300%" height="300%">
			<!-- Glow -->
			<feColorMatrix result="out" in="SourceGraphic" type="matrix" values="0 0 0 0.8667 0  0 0 0 0.8667 0  0 0 0 0.8667 0  0 0 0 0.251 0"/>
			<feMorphology result="out" in="out" operator="dilate" radius="3"/>
			<feGaussianBlur result="out" in="out" stdDeviation="1.5"/>
			<feBlend in="SourceGraphic" in2="out" mode="normal" result="Glow2"/>
		</filter>
	</defs>
	<g id="Background">
	</g>
	<g id="dark%20shadow">
		<path d="M 22 50 C 22 34.5358 34.5358 22 50 22 C 65.4642 22 78 34.5358 78 50 C 78 65.4642 65.4642 78 50 78 C 34.5358 78 22 65.4642 22 50 ZM 5 50 C 5 74.8531 25.1469 95 50 95 C 74.8531 95 95 74.8531 95 50 C 95 25.1469 74.8531 5 50 5 C 25.1469 5 5 25.1469 5 50 Z" fill="url(#gradient1)"/>
		<path d="M 22 150 C 22 134.5358 34.5358 122 50 122 C 65.4642 122 78 134.5358 78 150 C 78 165.4642 65.4642 178 50 178 C 34.5358 178 22 165.4642 22 150 ZM 5 150 C 5 174.8531 25.1469 195 50 195 C 74.8531 195 95 174.8531 95 150 C 95 125.1469 74.8531 105 50 105 C 25.1469 105 5 125.1469 5 150 Z" fill="url(#gradient2)"/>
	</g>
	<g id="dark">
		<path id="Polygon" filter="url(#filter1)" d="M 72.5 49.5 L 38.75 68.9856 L 38.75 30.0144 L 72.5 49.5 Z" fill="#ffffff"/>
		<path id="Ellipse" d="M 13 50.5 C 13 29.7891 29.7891 13 50.5 13 C 71.2109 13 88 29.7891 88 50.5 C 88 71.2109 71.2109 88 50.5 88 C 29.7891 88 13 71.2109 13 50.5 Z" stroke="#ffffff" stroke-width="5" fill="none"/>
	</g>
	<g id="light">
		<path id="Polygon2" filter="url(#filter2)" d="M 72.5 149.5 L 38.75 168.9856 L 38.75 130.0144 L 72.5 149.5 Z" fill="#ffffff"/>
		<path id="Ellipse2" d="M 13 150.5 C 13 129.7891 29.7891 113 50.5 113 C 71.2109 113 88 129.7891 88 150.5 C 88 171.211 71.2109 188 50.5 188 C 29.7891 188 13 171.211 13 150.5 Z" stroke="#ffffff" stroke-width="5" fill="none"/>
	</g>
</svg>

css/build.sh

@@ -0,0 +1,35 @@
+#!/bin/bash
+# MyPlayer - Copyright 2014 - 2024 tilt@linuxfoo.de GPLv3
+# Build Script; generates a minified collective CSS file
+
+dir=$(readlink -f "$(dirname "$0")")
+
+if ! cd "$dir" ; then
+    echo "ERROR: Could not change working directory; aborted." >&2 ;
+    exit 1 ;
+elif [[ -z $(type -p r.js) ]] ; then
+    echo "ERROR: r.js optimizer not found; install it using 'npm install -g requirejs'." >&2
+    exit 1
+elif ! r.js -o cssIn=myplayer.css out=myplayer.min.css optimizeCss=standard.keepComments.keepLines ; then
+    echo "ERROR: r.js failed; aborted." >&2
+    exit 1
+else
+    sed -i -e 's|../mediaelement-plugins/dist/playlist/||' myplayer.min.css
+    chmod 0644 myplayer.min.css
+
+    echo "INFO: Minimized CSS to $dir/myplayer.min.css" >&2
+
+    for svg in \
+        ../mediaelement-plugins/dist/playlist/playlist-controls.svg  \
+        ../mediaelement/build/mejs-controls.svg
+    do
+        svg_out="$dir/$(basename "$svg")"
+
+        if ! cp "$svg" "$svg_out" ; then
+            echo "ERROR: Copying controls SVG $svg failed; aborted." >&2
+            exit 1
+        else
+            echo "INFO: Copied controls SVG to $svg_out" >&2
+        fi
+    done
+fi

css/local.css

@@ -1,69 +1,4 @@
-html {
+.mejs__playlist-selector-list-item, .mejs-playlist-selector-list-item {
-   overflow: hidden;
+    margin-top: -5px;
-   height: 100%
+    border-bottom: none;
-}
-body { 
-   background: black;
-}
-.mejs-audio {
-}
-.mejs-controls {
-   top: 0!important;
-   padding: 3px 0 0 0;
-   height: 2em!important;
-   background: none!important; 
-   border-top: 2em!important;
-}
-.mejs-controls .mejs-time-rail .mejs-time-loaded {
-   background: #5a1a7a!important;
-}
-.mejs-controls .mejs-time-rail .mejs-time-float {
-   top: 2.5em!important;
-}
-.mejs-controls .mejs-time-rail .mejs-time-float .mejs-time-float-corner {
-   display: none!important;
-}
-.mejs li {
-   font-size: 0.8em!important;
-   line-height: 1em!important;
-   color: #ccddff;
-}
-.mejs-playlist {
-   width: 430px!important;
-   height: 265px!important;
-}
-.popupButton {
-   display: inline-block!important;
-   position: absolute;
-   top: 2px;
-}
-.popupButton button {
-   overflow: hidden;
-   width: 25px;
-   height: 22px;
-   padding: 0;
-   margin: 0;
-   border: 0;
-   background: url(popup.png);
-   cursor: pointer;
-}
-.playerDetached {
-   margin: 0;
-   padding: 0;
-   height: 100%;
-   width: 100%;
-   text-align: center;
-   font-size: small;
-   font-family: sans-serif;
-   color: #cacaca;
-}
-.ajaxLoader {
-   width: 16px;
-   height: 16px;
-   display: inline-block;
-   background: url(ajax-loader.gif);
-}
-noscript {
-   color: white;
-   font-family: sans-serif;
 }

css/mep-feature-playlist.css

@@ -1,68 +0,0 @@
-/*
-    Document        : mep-feature-playlist.css
-    Author          : Andrew Berezovsky <andrew.berezovsky@gmail.com>
-    Original Author : Junaid Qadir Baloch <shekhanzai.baloch@gmail.com>
-*/
-
-/* Start: Show/Hide Playlist*/
-.mejs-controls .mejs-show-playlist button {
-  background: transparent url(controls-playlist.png) no-repeat;
-  background-position: -16px -16px;
-}
-.mejs-controls .mejs-hide-playlist button {
-  background: transparent url(controls-playlist.png) no-repeat;
-  background-position: -16px 0;
-}
-/* End: Show/Hide Playlist */
-
-/* Start: Previous */
-.mejs-controls .mejs-prevtrack button {
-  background: transparent url(controls-playlist.png) no-repeat;
-  background-position: 0 -16px;
-}
-/* End: Previous */
-
-/* Start: Next */
-.mejs-controls .mejs-nexttrack button {
-  background: transparent url(controls-playlist.png) no-repeat;
-}
-/* End: Next */
-
-/* Start: Shuffle */
-.mejs-controls .mejs-shuffle-on button {
-  background: transparent url(controls-playlist.png) no-repeat;
-  background-position: -32px 0;
-}
-.mejs-controls .mejs-shuffle-off button {
-  background: transparent url(controls-playlist.png) no-repeat;
-  background-position: -32px -16px;
-}
-/* End: Shuffle */
-
-/*Start: Playlist*/
-.mejs-playlist {
-  position: absolute;
-  left: 0;
-  height: 200px!important;
-  overflow-y: auto;
-}
-.mejs-playlist ul {
-  margin: 0;
-  padding: 5px;
-}
-.mejs-playlist li {
-  color: white;
-  font-size: 11px;
-  height: 16px;
-  overflow: hidden;
-  margin: 2px;
-  cursor: pointer;
-}
-.mejs-playlist li:hover {
-  color: #a8a8a8;
-}
-.mejs-playlist li.current {
-  color: white;
-  font-weight: bold;
-}
-/*End: Playlist*/

css/myplayer.css

@@ -1,3 +1,3 @@
-@import url('mediaelementplayer.css');
+@import url('../mediaelement/build/mediaelementplayer.css');
-@import url('mep-feature-playlist.css');
+@import url('../mediaelement-plugins/dist/playlist/playlist.css');
 @import url('local.css');

mediaelement

@@ -0,0 +1 @@
+Subproject commit 0026d050783e7ce03389632e586839d350efac3b

mediaelement-plugins

@@ -0,0 +1 @@
+Subproject commit 6b5de466fd9676c1287fc0c34111843813bc2a77

src/build.sh

@@ -1,8 +1,15 @@
-#!/bin/sh
+#!/bin/bash
-# MyPlayer - Copyright 2014 tilt@linuxfoo.de GPLv3
+# MyPlayer - Copyright 2014 - 2024 tilt@linuxfoo.de GPLv3
 # Build Script; recompiles the MyPlayer JavaScript from source.
 
-cd $(dirname $0)
+dir=$(readlink -f "$(dirname "$0")")
+
+jsdir=$(readlink -f "$dir/../js")
+
+if ! cd "$dir" ; then
+    echo "ERROR: Could not change working directory; aborted." >&2 ;
+    exit 1 ;
+fi
 
 echo '/*
 jQuery
@@ -16,19 +23,51 @@ MediaElement Playlist Feature (plugin) -
 JavaScript-ID3-Reader
    Copyright (c) 2008 Jacob Seidelin, http://blog.nihilogic.dk/ BSD License
    Copyright (c) 2009 Opera Software ASA BSD License
-   Copyright (c) 2010 António Afonso BSD License
+   Copyright (c) 2010 Antonio Afonso BSD License
    Copyright (c) 2010 Joshua Kifer BSD License
 MyPlayer
-   Copyright (c) 2014 tilt@linuxfoo.de MIT License
+   Copyright (c) 2014 - 2024 tilt@linuxfoo.de MIT License
-*/' > ../js/myplayer.min.js
+*/' > "$jsdir"/myplayer.min.js
 
-# https://developers.google.com/closure/compiler/
+type yui-compressor > /dev/null || {
-java \
+    echo "ERROR: Executable \"yui-compressor\" not found in PATH; aborted." >&2 ;
-   -jar /usr/local/lib/closure-compiler/compiler.jar \
+    exit 1 ;
-   --js mediaelement-and-player.min.js \
+}
-   --js mep-feature-playlist.js \
-   --js id3-minimized.js \
-   --js player.js \
-   >> ../js/myplayer.min.js
 
-echo "Done: Javascript source has compiled into ../js/myplayer.min.js"
+rm -f "$jsdir"/myplayer.min.js
+
+for js in \
+    ../mediaelement/build/mediaelement-and-player.min.js \
+    ../mediaelement-plugins/dist/playlist/playlist.min.js
+do
+    echo "INFO: Appending $js ..." >&2
+    cat $js >> "$jsdir"/myplayer.min.js
+done
+
+for js in \
+    id3-minimized.js \
+    player.js
+do
+    echo "INFO: Compressing $js ..." >&2
+    yui-compressor "$js" >> "$jsdir"/myplayer.min.js
+done
+
+chmod 644 "$jsdir"/myplayer.min.js
+
+echo "INFO: Javascript source was minimized to $jsdir/myplayer.min.js" >&2
+
+rm -f ../js/myplayer.js
+
+for js in \
+    ../mediaelement/build/mediaelement-and-player.js \
+    ../mediaelement-plugins/dist/playlist/playlist.js \
+    id3-minimized.js \
+    player.js
+do
+    echo "INFO: Appending $js ..." >&2
+    cat $js >> "$jsdir"/myplayer.js
+done
+
+chmod 644 "$jsdir"/myplayer.js
+
+echo "INFO: Uncompressed javascript source was collected in $jsdir/myplayer.js" >&2

src/player.js

@@ -37,6 +37,89 @@ var MyPlayer = function(_args) {
       list: []
    };
 
+   var mimeTypeFromSrc = function(src) {
+      var extension = src.split('.').pop().toLowerCase();
+
+      return {
+         "aac": "audio/aac",
+         "abw": "application/x-abiword",
+         "arc": "application/x-freearc",
+         "avi": "video/x-msvideo",
+         "azw": "application/vnd.amazon.ebook",
+         "bin": "application/octet-stream",
+         "bmp": "image/bmp",
+         "bz": "application/x-bzip",
+         "bz2": "application/x-bzip2",
+         "cda": "application/x-cdf",
+         "csh": "application/x-csh",
+         "css": "text/css",
+         "csv": "text/csv",
+         "doc": "application/msword",
+         "docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+         "eot": "application/vnd.ms-fontobject",
+         "epub": "application/epub+zip",
+         "gz": "application/gzip",
+         "gif": "image/gif",
+         "htm": "text/html",
+         "html": "text/html",
+         "ico": "image/vnd.microsoft.icon",
+         "ics": "text/calendar",
+         "jar": "application/java-archive",
+         "jpeg": "image/jpeg",
+         "jpg": "image/jpeg",
+         "js": "text/javascript",
+         "json": "application/json",
+         "jsonld": "application/ld+json",
+         "mid": "audio/midi audio/x-midi",
+         "midi": "audio/midi audio/x-midi",
+         "mjs": "text/javascript",
+         "mp3": "audio/mpeg",
+         "mp4": "video/mp4",
+         "mpeg": "video/mpeg",
+         "mpkg": "application/vnd.apple.installer+xml",
+         "odp": "application/vnd.oasis.opendocument.presentation",
+         "ods": "application/vnd.oasis.opendocument.spreadsheet",
+         "odt": "application/vnd.oasis.opendocument.text",
+         "oga": "audio/ogg",
+         "ogv": "video/ogg",
+         "ogx": "application/ogg",
+         "opus": "audio/opus",
+         "otf": "font/otf",
+         "png": "image/png",
+         "pdf": "application/pdf",
+         "php": "application/x-httpd-php",
+         "ppt": "application/vnd.ms-powerpoint",
+         "pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+         "rar": "application/vnd.rar",
+         "rtf": "application/rtf",
+         "sh": "application/x-sh",
+         "svg": "image/svg+xml",
+         "swf": "application/x-shockwave-flash",
+         "tar": "application/x-tar",
+         "tif": "image/tiff",
+         "tiff": "image/tiff",
+         "ts": "video/mp2t",
+         "ttf": "font/ttf",
+         "txt": "text/plain",
+         "vsd": "application/vnd.visio",
+         "wav": "audio/wav",
+         "weba": "audio/webm",
+         "webm": "video/webm",
+         "webp": "image/webp",
+         "woff": "font/woff",
+         "woff2": "font/woff2",
+         "xhtml": "application/xhtml+xml",
+         "xls": "application/vnd.ms-excel",
+         "xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+         "xml": "application/xml",
+         "xul": "application/vnd.mozilla.xul+xml",
+         "zip": "application/zip",
+         "3gp": "video/3gpp",
+         "3g2": "video/3gpp2",
+         "7z": "application/x-7z-compressed"
+      }[extension] || "application/octet-stream";
+   }
+
    var args = (typeof(_args)==='undefined') 
       ? defaultArgs 
       : $.extend({}, defaultArgs, _args);   
@@ -45,7 +128,7 @@ var MyPlayer = function(_args) {
       var autoplay = args.autoplay ? 'autoplay="true"' : '';
 
       $(args.element).append(
-         '<audio controls="controls" ' + autoplay + '>'+
+         '<audio id="myplayer" controls="controls" ' + autoplay + '>'+
             '<p>'+
                'Your browser does not understand '+
                'the &lt;audio&gt; tag. '+
@@ -54,6 +137,10 @@ var MyPlayer = function(_args) {
       );
 
       args.audio = args.element + ' audio';
+
+      $(args.audio).css({
+        'height': '500px',
+      });
    }
 
    var readId3 = function() {
@@ -89,17 +176,9 @@ var MyPlayer = function(_args) {
 
    var createPlayer = function() {
       player = new MediaElementPlayer(
-         $(args.audio), {
+         "myplayer", {
             success: playerCreated,
-            loop: args.loop, 
+            features: ['playpause', 'current', 'progress', 'duration', 'volume', 'playlist', 'prevtrack', 'nexttrack', 'shuffle', 'loop']
-            shuffle: args.shuffle, 
-            playlist: true,
-            audioHeight: 32, 
-            playlistposition: 'bottom',
-            features: ['playlistfeature', 'prevtrack', 'playpause',
-               'nexttrack', 'loop', 'shuffle', 'current', 'progress',
-               'duration', 'volume'],
-            pluginPath: mejs.Utility.getScriptPath(['myplayer.min.js'])+'../plugins/'
       });
 
       $(args.element).append(
@@ -247,8 +326,9 @@ var MyPlayer = function(_args) {
                if(src.match(/\.mp3$/)) {
                   var url = mp3url+'/'+src;
                   var title = item.innerHTML;
+                  var type = "audio/mpeg";
 
-                  $(args.audio).append('<source src="'+url+'" title="'+title+'"/>');
+                  $(args.audio).append('<source src="'+url+'" type="' + type + '"  title="'+title+'"/>');
                 }
             });
    
@@ -271,10 +351,13 @@ var MyPlayer = function(_args) {
             if(!lines[i].match(/^[ \t]*#/) && lines[i].match(/\.mp3$/)) {
                 var mp3 = lines[i];
                 var title = unescape(mp3.split('/').pop());
+                var type = "audio/mpeg";
 
-                $(args.audio).append('<source src="'+mp3+'" title="'+title+'"/>');
+                $(args.audio).append('<source src="'+mp3+'" type="' + type + '"  title="'+title+'"/>');
             }
 
+         console.log("DEBUG: mode==m3u audio=",$(args.audio));
+
          createPlayer();
          setupDetach();
       }); 
@@ -318,7 +401,9 @@ var MyPlayer = function(_args) {
              continue;
           }
 
-          $(args.audio).append('<source src="'+src+'" title="'+title+'"/>');
+          var type = mimeTypeFromSrc(src);
+
+          $(args.audio).append('<source src="'+src+'" type="' + type + '" title="'+title+'"/>');
       }
 
       createPlayer();