update audio player to properly use spritesheet

audio.html

@@ -1,3 +1,99 @@
+
+<script>
+    function audio_end(event){
+        p = event.target.parentElement;
+        if (!event.target.loop){
+            p.children[1].innerHTML=icons['play'];
+        }
+    }
+    function setup_display(event){
+        el = event.target.children[0];
+        el.style.display="flex";
+        console.log("Display audio")
+    }
+    function setup_audio_metadata(event) {
+        audio=event.target;
+        var seek = audio.parentElement.children[2];
+        seek.min = 0;
+        seek.max = audio.duration;
+        seek.value = audio.currentTime;
+        audio.parentElement.children[3].style.display="block";
+        audio.parentElement.children[5].children[0].innerHTML = "" + timeToText(audio.currentTime) + "/";
+        audio.parentElement.children[5].children[1].innerHTML = "" + timeToText(audio.duration);
+    }
+    function toggle_loop_audio(event) {
+        audio = event.target.parentElement.children[0];
+        audio.loop = !audio.loop;
+        if (audio.loop){
+            event.target.children[0].classList.add("spin");
+        }
+        else{
+            event.target.children[0].classList.remove("spin");
+        }
+    }
+    function update_audio_time(event) {
+        audio = event.target.parentElement.children[0];
+        audio.currentTime = event.target.value;
+    }
+    function toggle_play_audio(event) {
+        el = event.target;
+        audio = el.parentElement.children[0];
+        speed = el.parentElement.children[3].value;
+        audio.playbackRate = speed;
+        if (audio.paused) {
+            audio.play();
+            el.children[0].children[0].setAttribute("href","#pause");
+        }
+        else {
+            audio.pause();
+            el.children[0].children[0].setAttribute("href","#play")
+        }
+    }
+    function update_audio_speed(event) {
+        el = event.target;
+        audio = event.target.parentElement.children[0];
+        audio.playbackRate = el.value;
+
+    }
+    function timeToText(t) {
+        hours = 0;
+        minutes = 0;
+        seconds = 0;
+        if (t > 60 * 60) {
+            hours = Math.floor(t / 60 / 60);
+            t = t - hours * 60 * 60;
+        }
+        if (t > 60) {
+            minutes = Math.floor(t / 60);
+            t = t - minutes * 60
+
+        }
+        if (t > 1) {
+            seconds = Math.floor(t);
+        }
+        text = "";
+        if (hours > 0) {
+            text += hours + ":";
+        }
+        if (minutes > 0 || hours > 0) {
+            if (minutes == 0) {
+                minutes = "00"
+            }
+            if (minutes < 10) {
+                text += "0"
+            }
+            text += minutes + ":"
+        }
+        if (seconds == 0 && (minutes > 0 || hours > 0)) {
+            seconds = "00";
+        }
+        if (seconds < 10) {
+            text += "0";
+        }
+        text += seconds
+        return text;
+    }
+</script>
 <style>
     .audio-player {
         display: flex;
@@ -7,8 +103,9 @@
         width: 100%;
     }
     .audio-player>*{
-        height:fit-content;
+        margin:2px;
-        padding:0.25rem;
+        margin-right:5px;
+        margin-left:5px;
     }
     .audio-player p{
         width: fit-content;
@@ -62,16 +159,18 @@
     animation:spin-icon 3s linear infinite;
 }
 </style>
-<div class="media-container">
+<div class="media-container" onload="setup_display(event)">
     <div class="audio-player">
         <audio onended="audio_end(event)" onloadedmetadata="setup_audio_metadata(event)" ontimeupdate="setup_audio_metadata(event)">
             <source src='{{.Site.BaseURL}}{{.Get "src" }}'>
         </audio>
         <div class="icon" onclick="toggle_play_audio(event)">
-            <svg  viewBox="0 0 120 120"><circle style="opacity:0.99;fill-opacity:0;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1" id="path2040" cx="60.062084" cy="62.077591" r="52.403164" /><path style="opacity:0.99;fill-opacity:1; stroke-width:4;stroke-dasharray:none;stroke-opacity:1" d="m 36.961917,29.902848 c 3.596357,-1.826163 63.333473,26.918008 63.449063,32.530093 0.1386,6.729203 -61.229407,35.615675 -63.254766,33.796117 -1.971501,-1.557746 -3.672784,-64.52183 -0.194297,-66.32621 z" id="path1060"> </svg>
+            <svg>
+                <use href="#play"></use>
+            </svg>
         </div>
         <input class="media-seek" type="range" onchange="update_audio_time(event)" value="0">
-        <select onchange="update_audio_speed(event)">
+        <select onchange="update_audio_speed(event)" style="display:none;">
             <option value="1" selected>1x</option>
             <option value="1.5">1.5x</option>
             <option value="2">2x</option>
@@ -82,98 +181,10 @@
         </div>
         <p><span class="audio-currentTime"></span><span class="audio-duration"></span></p>
         <div class="icon" onclick="toggle_loop_audio(event)">
-            <svg  viewBox="0 0 120 120" version="1.1"> <circle style="opacity:0.99;fill-opacity:0;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1" id="path2040" cx="60.062084" cy="62.077591" r="52.403164" /> <path style="opacity:0.99;fill-opacity:1;stroke-width:1.1;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" d="M 49.086093,104.69797 53.85938,96.982017 C -0.70319734,64.562086 46.019709,40.176232 48.130402,38.442953 c 0,0 4.487934,4.354976 5.546329,5.309403 1.84557,1.664276 5.129158,-20.199369 5.129158,-20.199369 l -22.368136,0.483004 5.548034,5.713299 c 0,0 -56.905236,37.386495 7.100306,74.94868 z" id="path4435"  /> <path style="opacity:0.99;fill-opacity:1;stroke-width:1.1;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" d="m 72.493272,21.303543 -4.773287,7.715948 c 54.562575,32.419931 7.839671,56.805785 5.728978,58.539064 0,0 -4.487934,-4.354976 -5.546329,-5.309403 -1.845568,-1.664276 -5.129158,20.199368 -5.129158,20.199368 l 22.368136,-0.483 -5.548034,-5.713302 c 0,0 56.905242,-37.386495 -7.100306,-74.948675 z" id="path4435-7"   /></svg>
+            <svg>
+                <use href="#loop"></use>
+            </svg>
         </div>
-        <script src="/js/icons.js"></script>
-        <script>
-            function audio_end(event){
-                p = event.target.parentElement;
-                if (!event.target.loop){
-                    p.children[1].innerHTML=icons['play'];
-                }
-            }
-            function setup_audio_metadata(event) {
-                audio = event.target;
-                var seek = audio.parentElement.children[2];
-                seek.min = 0;
-                seek.max = audio.duration;
-                seek.value = audio.currentTime;
-                audio.parentElement.children[5].children[0].innerHTML = "" + timeToText(audio.currentTime) + "/";
-                audio.parentElement.children[5].children[1].innerHTML = "" + timeToText(audio.duration);
-            }
-            function toggle_loop_audio(event) {
-                audio = event.target.parentElement.children[0];
-                audio.loop = !audio.loop;
-                if (audio.loop){
-                    event.target.children[0].classList.add("spin");
-                }
-                else{
-                    event.target.children[0].classList.remove("spin");
-                }
-            }
-            function update_audio_time(event) {
-                audio = event.target.parentElement.children[0];
-                audio.currentTime = event.target.value;
-            }
-            function toggle_play_audio(event) {
-                el = event.target;
-                audio = el.parentElement.children[0];
-                speed = el.parentElement.children[3].value;
-                audio.playbackRate = speed;
-                if (audio.paused) {
-                    audio.play();
-                    el.innerHTML = icons['pause'];
-                }
-                else {
-                    audio.pause();
-                    el.innerHTML = icons['play'];
-                }
-            }
-            function update_audio_speed(event) {
-                el = event.target;
-                audio = event.target.parentElement.children[0];
-                audio.playbackRate = el.value;
-
-            }
-            function timeToText(t) {
-                hours = 0;
-                minutes = 0;
-                seconds = 0;
-                if (t > 60 * 60) {
-                    hours = Math.floor(t / 60 / 60);
-                    t = t - hours * 60 * 60;
-                }
-                if (t > 60) {
-                    minutes = Math.floor(t / 60);
-                    t = t - minutes * 60
-
-                }
-                if (t > 1) {
-                    seconds = Math.floor(t);
-                }
-                text = "";
-                if (hours > 0) {
-                    text += hours + ":";
-                }
-                if (minutes > 0 || hours > 0) {
-                    if (minutes == 0) {
-                        minutes = "00"
-                    }
-                    if (minutes < 10) {
-                        text += "0"
-                    }
-                    text += minutes + ":"
-                }
-                if (seconds == 0 && (minutes > 0 || hours > 0)) {
-                    seconds = "00";
-                }
-                if (seconds < 10) {
-                    text += "0";
-                }
-                text += seconds
-                return text;
-            }
-        </script>
     </div>
     <noscript>
         <style>
@@ -181,7 +192,7 @@
                 display: none;
             }
         </style>
-        <audio controls preload="false">
+        <audio controls preload="false" style="width:100%;min-width:40vw;">
             <source src='{{.Site.BaseURL}}{{.Get "src" }}'>
         </audio>
     </noscript>

readme.md

@@ -1,6 +1,8 @@
 # Shortcodes
 
 My hugo shortcodes for all my themes 
+More work is needed for them to be portable!
+Currently tehy rely on [this svg spritesheet](https://code.gabe.rocks/gabriel/freedom/raw/branch/main/layouts/partials/spritesheet.html)
 
 
 ## Themes
@@ -42,3 +44,4 @@ Embeds a pdf
 
 A video player with controls
 
+(This needs improvements)

video.html

@@ -64,7 +64,6 @@
         width: 100vw;
     }
 </style>
-<script src="/js/icons.js"></script>
 <div class="video-container">
     <div class="video-player">
         <video preload="metadata" onclick="playthis(event)" onloadedmetadata="setup_video_metadata(event)"

webtorrent-video.html

@@ -1,3 +1,5 @@
+<h1> Was unable to get this to work </h1> 
+<p>Review needed</p>
 <style>
     #wtmedia{
         width:100%;