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

css/bigplay.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?>

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 {
-   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;
 }

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('mep-feature-playlist.css');
+@import url('../mediaelement/build/mediaelementplayer.css');
+@import url('../mediaelement-plugins/dist/playlist/playlist.css');
 @import url('local.css');