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

This commit is contained in:
Tilman Kranz 2024-11-10 06:58:04 +01:00 committed by Tilman Kranz
parent 5f95d9cef6
commit eeeb9a9559
21 changed files with 8900 additions and 400 deletions

3
.gitignore vendored Normal file
View File

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

6
.gitmodules vendored Normal file
View File

@ -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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 166 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 KiB

View File

@ -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>

Before

Width:  |  Height:  |  Size: 3.4 KiB

35
css/build.sh Executable file
View File

@ -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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 10 KiB

View File

View File

@ -1,69 +1,4 @@
html {
overflow: hidden;
height: 100%
}
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;
.mejs__playlist-selector-list-item, .mejs-playlist-selector-list-item {
margin-top: -5px;
border-bottom: none;
}

View File

@ -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*/

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 744 B

8673
js/myplayer.js Normal file

File diff suppressed because it is too large Load Diff

252
js/myplayer.min.js vendored

File diff suppressed because one or more lines are too long

1
mediaelement Submodule

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

1
mediaelement-plugins Submodule

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

69
src/build.sh Normal file → Executable file
View File

@ -1,8 +1,15 @@
#!/bin/sh
# MyPlayer - Copyright 2014 tilt@linuxfoo.de GPLv3
#!/bin/bash
# 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
*/' > ../js/myplayer.min.js
Copyright (c) 2014 - 2024 tilt@linuxfoo.de MIT License
*/' > "$jsdir"/myplayer.min.js
# https://developers.google.com/closure/compiler/
java \
-jar /usr/local/lib/closure-compiler/compiler.jar \
--js mediaelement-and-player.min.js \
--js mep-feature-playlist.js \
--js id3-minimized.js \
--js player.js \
>> ../js/myplayer.min.js
type yui-compressor > /dev/null || {
echo "ERROR: Executable \"yui-compressor\" not found in PATH; aborted." >&2 ;
exit 1 ;
}
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

View File

@ -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,
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/'
features: ['playpause', 'current', 'progress', 'duration', 'volume', 'playlist', 'prevtrack', 'nexttrack', 'shuffle', 'loop']
});
$(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();