media enhancements

layouts/shortcodes/audio.html

@@ -1,3 +1,126 @@
-<audio controls>
+<style>
-    <source src='{{.Site.BaseURL}}{{.Get "src" }}'>
+    .media-container {
-</audio>
+        width: 90%;
+    }
+
+    .audio-player {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+    }
+    .audio-player p{
+        width: fit-content;
+    }
+
+    .media-seek {
+        width: 100%;
+    }
+</style>
+<div class="media-container">
+    <div class="audio-player">
+        <audio onloadedmetadata="setup_audio_metadata(event)" ontimeupdate="setup_audio_metadata(event)">
+            <source src='{{.Site.BaseURL}}{{.Get "src" }}'>
+        </audio>
+        <button onclick="toggle_play_audio(event)">Play</button>
+        <input class="media-seek" type="range" onchange="update_audio_time(event)" value="0">
+        <select onchange="update_audio_speed(event)">
+            <option value="1" selected>1x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+            <option value="2.5">2.5x</option>
+            <option value="3">3x</option>
+        </select>
+        <div class="audio-preview">
+        </div>
+        <p><span class="audio-currentTime"></span><span class="audio-duration"></span></p>
+        <button onclick="toggle_loop_audio(event)">Loop</button>
+        <script>
+            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;
+            }
+            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 = event.target.parentElement.children[0];
+                speed = el.parentElement.children[3].value;
+                audio.playbackRate = speed;
+
+                if (audio.paused) {
+                    audio.play();
+                    el.innerHTML = "Pause";
+                }
+                else {
+                    audio.pause();
+                    el.innerHTML = "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>
+            .audio-player {
+                display: none;
+            }
+        </style>
+        <audio controls preload="false">
+            <source src='{{.Site.BaseURL}}{{.Get "src" }}'>
+        </audio>
+    </noscript>
+</div>

layouts/shortcodes/embed.html

@@ -1,2 +1,2 @@
-<iframe src='{{.Get 0 }}'>
+<iframe src='{{.Get "src" }}'>
 </iframe>

layouts/shortcodes/image.html

@@ -1,7 +1,8 @@
-{{ if .Get "href"}}
+<div class="image-container">
+    {{ if .Get "href"}}
 <a href='{{.Get "href"}}'>
 {{end}}
-<img  loading="lazy" 
+<img loading="lazy"
 src='{{.Get "src"}}' 
 {{if .Get "alt"}}
  alt='{{.Get "alt"}}'
@@ -12,3 +13,11 @@ style='float:{{.Get "float"}}'
 {{ if .Get "href"}}
 </a>
 {{end}}
+{{if .Get "caption"}}
+<p class="caption">
+    {{.Get "caption"}} {{if .Get "source"}}<a href='{{.Get "source"}}'>Source</a>{{end}}
+
+</p>
+{{end}}
+
+</div>

layouts/shortcodes/link-preview.html

@@ -1,5 +1,7 @@
 <a href="{{ .Get 0 }}" class="link-preview">
+    {{if .Get 3}}
     <img src='{{.Get 3}}'>
+    {{end}}
     <div>
     <h3>{{ .Get 1 }}</h3>
     <p>{{.Get 2 }}</p>

layouts/shortcodes/video-player.html

@@ -0,0 +1,34 @@
+<style>
+   body{
+    background-color: black;
+   }
+   header,footer{
+    display:none;
+   }
+   #main{
+        position: absolute;
+        top:0;
+        left: 0;
+        width:100vw;
+        height: 100vh;
+        max-height: 100vh;
+        max-width: initial;
+    }
+</style>
+<video controls id="main" class="video-player">
+        <source src="">
+    </video>
+    
+    <script>
+        //https://davidwalsh.name/query-string-javascript
+    function getUrlParameter(name) {
+        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+        var results = regex.exec(location.search);
+        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+    };
+    
+    var source = document.createElement('source')
+        source.src = ''+getUrlParameter('v');
+        document.getElementById('main').appendChild(source);
+    </script>

layouts/shortcodes/video.html

@@ -1,4 +1,137 @@
-<video {{if .Get "autoplay"}}autoplay muted loop preload="true"{{else}}controls preload="false"{{end}}>
+<style>
-    <source src='{{.Site.BaseURL}}{{.Get "src" }}'>
+    .video-player{
-    <source src='{{.Site.BaseURL}}{{.Get 0}}'>
+        display: flex;
-</video>
+        flex-direction: column;
+        align-items: center;
+    }
+    .media-container{
+        width:fit-content;
+    }
+.video-controls{
+    display:flex;
+    flex-direction: row;
+    width:100%;
+}
+.video-controls p{
+    width:min-content;
+}
+.media-seek{
+    width:100%;
+}
+</style>
+<div class="media-container">
+    <div class="video-player">
+        <video preload="metadata" onclick="playthis(event)" onloadedmetadata="setup_video_metadata(event)" ontimeupdate="setup_video_metadata(event)">
+            <source src='{{.Site.BaseURL}}{{.Get "src" }}'>
+        </video>
+        <div class="video-controls">
+            <button onclick="toggle_video_play(event)">Play</button>
+            <input class="media-seek" type="range" onchange="update_video_time(event)" value="0">
+            <select onchange="update_video_speed(event)">
+                <option value="1" selected>1x</option>
+                <option value="1.5">1.5x</option>
+                <option value="2">2x</option>
+                <option value="2.5">2.5x</option>
+                <option value="3">3x</option>
+            </select>
+            <p><span class="audio-currentTime"></span><span class="audio-duration"></span></p>
+        </div>
+        <script>
+            function setup_video_metadata(event){
+                video = event.target;
+                var seek = video.parentElement.children[1].children[1];
+                seek.min = 0;
+                seek.max = video.duration;
+                seek.value = video.currentTime;
+                details = video.parentElement.children[1].children[3].children;
+                details[0].innerHTML = timeToText(video.currentTime)+"/";
+                details[1].innerHTML = timeToText(video.duration);
+
+            }
+            function playthis(event){
+                if (event.target.paused){
+                    event.target.playbackRate = video.parentElement.children[1].children[2].value;
+                    event.target.play();
+                    video.parentElement.children[1].children[0].innerHTML="Pause";
+                }
+                else{
+                    event.target.pause();
+                    video.parentElement.children[1].children[0].innerHTML="Play";
+                }
+            }
+            function toggle_video_play(event){
+                video = event.target.parentElement.parentElement.children[0];
+                if (video.paused){
+                    video.playbackRate = video.parentElement.children[1].children[2].value;
+                    video.play();
+                    video.parentElement.children[1].children[0].innerHTML="Pause";
+                }
+                else{
+                    video.pause();
+                    video.parentElement.children[1].children[0].innerHTML="Play";
+                }
+            }
+            function update_video_speed(event){
+                video = event.target.parentElement.parentElement.children[0];
+                video.playbackRate=event.target.value;
+            }
+            function update_video_time(event){
+                video = event.target.parentElement.parentElement.children[0];
+                video.currentTime = event.target.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>
+            .video-player {
+                display: none;
+            }
+        </style>
+        <video preload="false">
+            <source src='{{.Site.BaseURL}}{{.Get "src" }}'>
+        </video>
+    </noscript>
+    <p class="caption">
+        {{.Get "caption"}} {{if .Get "source"}}<a href='{{.Get "source"}}'>Source</a>{{end}}
+
+    </p>
+</div>

layouts/shortcodes/webtorrent-video.html

@@ -16,22 +16,31 @@
     <div id="wtmedia">
     </div>
     <div>
-        Peers:<span id="Peers"></span>
+        <span id="torrent-info">Waiting for peers.</span>
+        <span id="torrent-peers"></span>
+        <span id="torrent-progress"></span>
     </div>
 </div>
 <script>
+    function updateData(torrent) {
+        if (torrent.numPeers > 0) {
+            document.getElementById('torrent-info').innerHTML="This video is being served with webtorrent";
+            document.getElementById('torrent-peers').innerHTML="Peers:"+torrent.numPeers;
+        }
+    }    
     const client = new WebTorrent();
-    const magnetURI = {{.Get "magnet"}};
+    const magnetURI = "{{.Get "magnet"}}";
-    client.add(magnetURI, function (torrent) {
+    torrent = client.add(magnetURI, function (torrent) {
         // Got torrent metadata!
-        torrent.addWebSeed({{.Get "source"}});
+        torrent.addWebSeed("{{.Get "source"}}");
+        console.log("Torrent Peers: "+torrent.numPeers);
         console.log('Client is downloading:', torrent.infoHash);
         torrent.files.forEach(function (file) {
             // Display the file by appending it to the DOM. Supports video, audio, images, and
             // more. Specify a container element (CSS selector or reference to DOM node).
             file.appendTo('#wtmedia');
         })
+        
     });
-    function updateData(torrent);
+    window.setInterval(updateData,250,torrent);
-    window.setInterval()
 </script>

layouts/shortcodes/yesterweb.html

@@ -0,0 +1,3 @@
+<a href="https://webring.yesterweb.org/noJS/index.php?d=prev&url=https://yesterweb.org/">Previous</a>
+                        <a href="https://webring.yesterweb.org/noJS/index.php?d=rand&url=https://yesterweb.org/">Random</a>
+                        <a href="https://webring.yesterweb.org/noJS/index.php?d=next&url=https://yesterweb.org/">Next</a>

static/css/theme.css

@@ -143,6 +143,9 @@ article,main > div,main>nav{
     margin-bottom:1.5rem;
     width:90%;
 }
+aside {
+    min-width:40vw;
+}
 
 article p,
 article h3,
@@ -250,4 +253,16 @@ audio{
 .link-preview>div>p{
     text-decoration: none !important;
     color: var(--theme-color-secondary);
+}
+
+.image-container{
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 95%;
+}
+.caption{
+    padding-left:10%;
+    padding-right:10%;
+    max-width: 90%;
 }