player embeds mejs-controls.svg with document; patch mediaelement to use inlined iconSprite
This commit is contained in:
parent
ef9a5b70d3
commit
acd6a2f475
42
Makefile
42
Makefile
@ -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
|
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:
|
css:
|
||||||
|
@echo "Building CSS ..."
|
||||||
css/build.sh
|
css/build.sh
|
||||||
|
|
||||||
src:
|
src:
|
||||||
|
@echo "Building Javascript ..."
|
||||||
src/build.sh
|
src/build.sh
|
||||||
|
|
||||||
|
test:
|
||||||
|
@echo "Performing tests ..."
|
||||||
|
npm test
|
||||||
|
|||||||
20
css/build.sh
20
css/build.sh
@ -24,17 +24,13 @@ else
|
|||||||
|
|
||||||
echo "INFO: Minimized CSS to $cssdir/myplayer.min.css" >&2
|
echo "INFO: Minimized CSS to $cssdir/myplayer.min.css" >&2
|
||||||
|
|
||||||
for svg in \
|
svg=../mediaelement-plugins/dist/playlist/playlist-controls.svg
|
||||||
../mediaelement-plugins/dist/playlist/playlist-controls.svg \
|
svg_out="$cssdir/$(basename "$svg")"
|
||||||
../mediaelement/build/mejs-controls.svg
|
|
||||||
do
|
|
||||||
svg_out="$cssdir/$(basename "$svg")"
|
|
||||||
|
|
||||||
if ! cp "$svg" "$svg_out" ; then
|
if ! cp "$svg" "$svg_out" ; then
|
||||||
echo "ERROR: Copying controls SVG $svg failed; aborted." >&2
|
echo "ERROR: Copying controls SVG $svg failed; aborted." >&2
|
||||||
exit 1
|
exit 1
|
||||||
else
|
else
|
||||||
echo "INFO: Copied controls SVG to $svg_out" >&2
|
echo "INFO: Copied controls SVG to $svg_out" >&2
|
||||||
fi
|
fi
|
||||||
done
|
|
||||||
fi
|
fi
|
||||||
|
|||||||
9
patches/mediaelement/01-iconsprite.diff
Normal file
9
patches/mediaelement/01-iconsprite.diff
Normal 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>
|
||||||
|
` })
|
||||||
@ -181,7 +181,7 @@ var MyPlayer = function(_args) {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
createPlayer = function() {
|
createPlayer = function() {
|
||||||
player = new MediaElementPlayer(
|
player = new MediaElementPlayer(
|
||||||
"myplayer", {
|
"myplayer", {
|
||||||
success: playerCreated,
|
success: playerCreated,
|
||||||
features: [
|
features: [
|
||||||
@ -196,13 +196,16 @@ var MyPlayer = function(_args) {
|
|||||||
'shuffle',
|
'shuffle',
|
||||||
'loop'
|
'loop'
|
||||||
]
|
]
|
||||||
});
|
}
|
||||||
|
);
|
||||||
|
|
||||||
$(args.element).append(
|
$(args.element).append(
|
||||||
'<p class="playerDetached" style="display: none;">'+
|
'<p class="playerDetached" style="display: none;">'+
|
||||||
'The player is currently detached.'+
|
'The player is currently detached.'+
|
||||||
'</p>'
|
'</p>'
|
||||||
);
|
);
|
||||||
|
|
||||||
|
$(args.element).append(iconSprite);
|
||||||
},
|
},
|
||||||
param = function(name) {
|
param = function(name) {
|
||||||
var query = window.location.search.substring(1);
|
var query = window.location.search.substring(1);
|
||||||
@ -443,5 +446,74 @@ var MyPlayer = function(_args) {
|
|||||||
$(args.element).append(`<p>Unsupported mode ${args.mode}"</p>`);
|
$(args.element).append(`<p>Unsupported mode ${args.mode}"</p>`);
|
||||||
failed = true;
|
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>`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user