diff --git a/layouts/shortcodes/audio.html b/layouts/shortcodes/audio.html
index 88cb889..876fe4a 100644
--- a/layouts/shortcodes/audio.html
+++ b/layouts/shortcodes/audio.html
@@ -1,3 +1,126 @@
-<audio controls>
- <source src='{{.Site.BaseURL}}{{.Get "src" }}'>
-</audio>
\ No newline at end of file
+<style>
+ .media-container {
+ 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>
\ No newline at end of file
diff --git a/layouts/shortcodes/embed.html b/layouts/shortcodes/embed.html
index 29d1e04..e7b4476 100644
--- a/layouts/shortcodes/embed.html
+++ b/layouts/shortcodes/embed.html
@@ -1,2 +1,2 @@
-<iframe src='{{.Get 0 }}'>
+<iframe src='{{.Get "src" }}'>
</iframe>
\ No newline at end of file
diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html
index 31abec8..1706da7 100644
--- a/layouts/shortcodes/image.html
+++ b/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>
\ No newline at end of file
diff --git a/layouts/shortcodes/link-preview.html b/layouts/shortcodes/link-preview.html
index 79159db..af21b5e 100644
--- a/layouts/shortcodes/link-preview.html
+++ b/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>
diff --git a/layouts/shortcodes/video-player.html b/layouts/shortcodes/video-player.html
new file mode 100644
index 0000000..34f3543
--- /dev/null
+++ b/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>
diff --git a/layouts/shortcodes/video.html b/layouts/shortcodes/video.html
index d35661a..a9aea63 100644
--- a/layouts/shortcodes/video.html
+++ b/layouts/shortcodes/video.html
@@ -1,4 +1,137 @@
-<video {{if .Get "autoplay"}}autoplay muted loop preload="true"{{else}}controls preload="false"{{end}}>
- <source src='{{.Site.BaseURL}}{{.Get "src" }}'>
- <source src='{{.Site.BaseURL}}{{.Get 0}}'>
-</video>
\ No newline at end of file
+<style>
+ .video-player{
+ display: flex;
+ 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>
\ No newline at end of file
diff --git a/layouts/shortcodes/webtorrent-video.html b/layouts/shortcodes/webtorrent-video.html
index 8d1b80c..bab5ad4 100644
--- a/layouts/shortcodes/webtorrent-video.html
+++ b/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"}};
- client.add(magnetURI, function (torrent) {
+ const magnetURI = "{{.Get "magnet"}}";
+ 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()
+ window.setInterval(updateData,250,torrent);
</script>
\ No newline at end of file
diff --git a/layouts/shortcodes/yesterweb.html b/layouts/shortcodes/yesterweb.html
new file mode 100644
index 0000000..fd90118
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/static/css/theme.css b/static/css/theme.css
index 521f410..5a45443 100644
--- a/static/css/theme.css
+++ b/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%;
}
\ No newline at end of file