tk-sls.de/myplayer
2
0
Fork 0
Code Issues Pull Requests Releases Activity

player embeds mejs-controls.svg with document; patch mediaelement to use inlined iconSprite

Browse Source
This commit is contained in:
Tilman Kranz 2024-11-12 02:50:31 +01:00 committed by Tilman Kranz
parent ef9a5b70d3
commit acd6a2f475
4 changed files with 130 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
Makefile
View File

@ -1,11 +1,47 @@
.PHONY: all depend css src
.PHONY: \
all \
depend \
depend-mediaelement \
depend-mediaelement-plugins \
depend-node \
css \
src \
test
all: depend css src
all: \
depend \
css \
src
depend:
depend: \
depend-node \
depend-mediaelement \
depend-mediaelement-plugins
depend-mediaelement:
@echo "Preparing dependency \"mediaelement\" ..."
git -C mediaelement reset --hard HEAD
patch -d mediaelement -p1 < patches/mediaelement/01-iconsprite.diff
cd mediaelement && grunt
depend-mediaelement-plugins:
@echo "Preparing dependency \"mediaelement-plugins\" ..."
git -C mediaelement-plugins reset --hard HEAD
patch -d mediaelement-plugins -p1 < patches/mediaelement-plugins/01-playlist.js.diff
cd mediaelement-plugins && grunt
depend-node:
@echo "Installing required NodeJS dependencies ..."
npm install
css:
@echo "Building CSS ..."
css/build.sh
src:
@echo "Building Javascript ..."
src/build.sh
test:
@echo "Performing tests ..."
npm test

20
css/build.sh
View File

@ -24,17 +24,13 @@ else
echo "INFO: Minimized CSS to $cssdir/myplayer.min.css" >&2
for svg in \
../mediaelement-plugins/dist/playlist/playlist-controls.svg \
../mediaelement/build/mejs-controls.svg
do
svg_out="$cssdir/$(basename "$svg")"
svg=../mediaelement-plugins/dist/playlist/playlist-controls.svg
svg_out="$cssdir/$(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
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
fi

9
patches/mediaelement/01-iconsprite.diff Normal file
View File

@ -0,0 +1,9 @@
--- a/src/js/utils/generate.js 2024-11-10 02:15:40.851022011 +0100
+++ b/src/js/utils/generate.js 2024-11-12 02:23:10.833246352 +0100
@@ -48,5 +48,5 @@
const iconHtml = icons.map(icon => {
return `<svg xmlns="http://www.w3.org/2000/svg" id="${playerId}-${icon}" class="${classPrefix}${icon}" aria-hidden="true" focusable="false">
- <use xlink:href="${iconSprite}#${icon}"></use>
+ <use xlink:href="#${icon}"></use>
</svg>
` })

76
src/player.js
View File

@ -181,7 +181,7 @@ var MyPlayer = function(_args) {
}
},
createPlayer = function() {
player = new MediaElementPlayer(
player = new MediaElementPlayer(
"myplayer", {
success: playerCreated,
features: [
@ -196,13 +196,16 @@ var MyPlayer = function(_args) {
'shuffle',
'loop'
]
});
}
);
$(args.element).append(
'<p class="playerDetached" style="display: none;">'+
'The player is currently detached.'+
'</p>'
);
$(args.element).append(iconSprite);
},
param = function(name) {
var query = window.location.search.substring(1);
@ -443,5 +446,74 @@ var MyPlayer = function(_args) {
$(args.element).append(`<p>Unsupported mode ${args.mode}"</p>`);
failed = true;
}
var iconSprite = `
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon-captions" viewBox="0 0 18 14" xmlns="http://www.w3.org/2000/svg">
<g fill="#fff">
<path d="M-.67-4.08h14a2,2,0,0,1,2,2v10a2,2,0,0,1-2,2h-14a2,2,0,0,1-2-2v-10A2,2,0,0,1-.67-4.08Z" transform="translate(2.67 4.08)"/>
</g>
<g fill="#000">
<path d="M2.88,6.67a2.81,2.81,0,0,1-2.1-1A3.91,3.91,0,0,1,.88.87c.5-.6,2-1.7,4.6.2l-.6.8c-1.4-1-2.6-1.1-3.3-.3a3,3,0,0,0-.1,3.5c.7.9,1.9.8,3.4-.1l.5.9a5.28,5.28,0,0,1-2.5.8Zm7.5,0a2.81,2.81,0,0,1-2.1-1,3.91,3.91,0,0,1,.1-4.8c.5-.6,2-1.7,4.6.2l-.5.8c-1.4-1-2.6-1.1-3.3-.3a3,3,0,0,0-.1,3.5c.7.9,1.9.8,3.4-.1l.5.9a6.07,6.07,0,0,1-2.6.8Z" transform="translate(2.67 4.08)"/>
</g>
</symbol>
<symbol id="icon-chapters" viewBox="0 0 16.6 13" xmlns="http://www.w3.org/2000/svg"><path d="M1.5,0A1.54,1.54,0,0,1,3,1.5,1.54,1.54,0,0,1,1.5,3,1.54,1.54,0,0,1,0,1.5,1.47,1.47,0,0,1,1.5,0ZM6.6,0h8.5a1.47,1.47,0,0,1,1.5,1.5A1.54,1.54,0,0,1,15.1,3H6.6A1.47,1.47,0,0,1,5.1,1.5,1.37,1.37,0,0,1,6.6,0ZM1.5,5A1.54,1.54,0,0,1,3,6.5,1.54,1.54,0,0,1,1.5,8,1.54,1.54,0,0,1,0,6.5,1.47,1.47,0,0,1,1.5,5ZM6.6,5h8.5a1.47,1.47,0,0,1,1.5,1.5A1.54,1.54,0,0,1,15.1,8H6.6A1.47,1.47,0,0,1,5.1,6.5,1.37,1.37,0,0,1,6.6,5ZM1.5,10a1.5,1.5,0,0,1,0,3A1.54,1.54,0,0,1,0,11.5,1.47,1.47,0,0,1,1.5,10Zm5.1,0h8.5a1.47,1.47,0,0,1,1.5,1.5A1.54,1.54,0,0,1,15.1,13H6.6a1.47,1.47,0,0,1-1.5-1.5A1.37,1.37,0,0,1,6.6,10Z"/></symbol>
<symbol id="icon-fullscreen" viewBox="0 0 17.8 17.8" xmlns="http://www.w3.org/2000/svg"><path d="M0,1A.94.94,0,0,1,1,0H6.4c.6,0,.7.3.3.7l-6,6C.3,7.1,0,7,0,6.4ZM0,16.8a.94.94,0,0,0,1,1H6.4c.6,0,.7-.3.3-.7l-6-6c-.4-.4-.7-.3-.7.3ZM17.8,1a.94.94,0,0,0-1-1H11.4c-.6,0-.7.3-.3.7l6,6c.4.4.7.3.7-.3Zm0,15.8a.94.94,0,0,1-1,1H11.4c-.6,0-.7-.3-.3-.7l6-6c.4-.4.7-.3.7.3Z"/></symbol>
<symbol id="icon-unfullscreen" viewBox="0 0 17.8 17.8" xmlns="http://www.w3.org/2000/svg"><path d="M11.74,4.64a.94.94,0,0,0,1,1h4.1c.6,0,.7-.3.3-.7L12.44.24c-.4-.4-.7-.3-.7.3Zm-7.1,1a.94.94,0,0,0,1-1V.54c0-.6-.3-.7-.7-.3L.24,4.94c-.4.4-.3.7.3.7Zm1,7.1a.94.94,0,0,0-1-1H.54c-.6,0-.7.3-.3.7l4.7,4.7c.4.4.7.3.7-.3Zm7.1-1a.94.94,0,0,0-1,1v4.1c0,.5.3.7.7.3l4.7-4.7c.4-.4.3-.7-.3-.7Z"/></symbol>
<symbol id="icon-mute" viewBox="0 0 17.55 17.03" xmlns="http://www.w3.org/2000/svg">
<g stroke="none">
<path d="M6.21,4.36a3,3,0,0,1-1.8.6H1.21a.94.94,0,0,0-1,1v5.7a.94.94,0,0,0,1,1h4.2c.3.2.5.4.8.6l3.5,2.6a.47.47,0,0,0,.8-.4V2.06a.47.47,0,0,0-.8-.4Z"/>
</g>
<g fill="none" stroke-linecap="round" stroke-width="1.5px">
<path d="M13.11,1.18S17,.38,17,8.88s-3.9,7.8-3.9,7.8"/>
<path d="M11.81,5.08s2.6-.4,2.6,3.8-2.6,3.9-2.6,3.9"/>
</g>
</symbol>
<symbol id="icon-unmute" viewBox="0 0 18.2 17" xmlns="http://www.w3.org/2000/svg">
<g stroke="none">
<path d="M6.21,4.36a3,3,0,0,1-1.8.6H1.21a.94.94,0,0,0-1,1v5.7a.94.94,0,0,0,1,1h4.2c.3.2.5.4.8.6l3.5,2.6a.47.47,0,0,0,.8-.4V2.06a.47.47,0,0,0-.8-.4Z"/>
</g>
<g fill="none" stroke-linecap="round" stroke-width="2px">
<path d="M12,5.55l5.4,5.4M12,11l5.4-5.4"/>
</g>
</symbol>
<symbol id="icon-play" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 8.5c.3.1.4.5.2.8-.1.1-.1.2-.2.2l-11.4 7c-.5.3-.8.1-.8-.5V2c0-.5.4-.8.8-.5l11.4 7z"/></symbol>
<symbol id="icon-pause" viewBox="0 0 14 16" xmlns="http://www.w3.org/2000/svg"><path d="M1,0H3.2a.94.94,0,0,1,1,1V15a.94.94,0,0,1-1,1H1a.94.94,0,0,1-1-1V1A1,1,0,0,1,1,0Zm9.8,0H13a.94.94,0,0,1,1,1V15a.94.94,0,0,1-1,1H10.8a.94.94,0,0,1-1-1V1A1,1,0,0,1,10.8,0Z"/></symbol>
<symbol id="icon-replay" viewBox="0 0 17.52 15.97" xmlns="http://www.w3.org/2000/svg"><path d="M16.7,7.27a.81.81,0,0,1-.9.7c-.1,0-.2,0-.2-.1l-4.9-1.8c-.5-.2-.6-.6-.1-.8l6.2-3.6c.5-.3.8-.1.7.5l-.8,5.1Z"/><path d="M8.1,13.77a5.92,5.92,0,0,1-2.9-.7A5.77,5.77,0,0,1,2,7.87a6.21,6.21,0,0,1,6.3-6A6.15,6.15,0,0,1,13.9,6l.1-.1L16.1,7A8.1,8.1,0,0,0,7,.07,8.24,8.24,0,0,0,0,8a8.06,8.06,0,0,0,4.3,7,10.21,10.21,0,0,0,3.8,1,8.24,8.24,0,0,0,6.6-3.3l-1.8-.9a7,7,0,0,1-4.8,2Z"/></symbol>
<symbol id="icon-overlay-play" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
<g fill="#333" stroke="#fff" stroke-width="5px">
<path d="M2.5,40A37.5,37.5,0,1,1,40,77.5,37.51,37.51,0,0,1,2.5,40Z"/>
</g>
<g fill="#fff">
<path d="M60.3,38a1,1,0,0,1,.6,1.4.9.9,0,0,1-.6.6L30,57.5c-1,.6-1.7.1-1.7-1v-35c0-1.1.8-1.5,1.7-1Z"/>
</g>
</symbol>
<symbol id="icon-loading-spinner" viewBox="0 0 75.8 77.9" xmlns="http://www.w3.org/2000/svg">
<g fill="#fff">
<circle cx="38.8" cy="8.1" r="8.1"/>
<g opacity="0.4">
<circle cx="70.8" cy="40" r="5"/>
</g>
<g opacity="0.6">
<circle cx="38.8" cy="71.9" r="6"/>
</g>
<g opacity="0.8">
<circle cx="7" cy="40" r="7"/>
</g>
<g opacity="0.9">
<circle cx="15.1" cy="17.3" r="7.5"/>
</g>
<g opacity="0.3">
<circle cx="63.2" cy="17.1" r="4.5"/>
</g>
<g opacity="0.5">
<circle cx="62.7" cy="63.8" r="5.5"/>
</g>
<g opacity="0.7">
<circle cx="15.1" cy="63.8" r="6.5"/>
</g>
</g>
</symbol>
</svg>`;
};