update to latest mediaelement; use playlist from mediaelement-plugins; css build script
Before Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 166 B |
BIN
css/bigplay.png
Before Width: | Height: | Size: 2.9 KiB |
|
@ -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
|
@ -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
|
Before Width: | Height: | Size: 1.1 KiB |
BIN
css/controls.png
Before Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 10 KiB |
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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*/
|
|
@ -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');
|
||||
|
|
BIN
css/popup.png
Before Width: | Height: | Size: 744 B |