gabriel/valor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

media enhancements

Browse source
This commit is contained in:
Gabriel 2022-11-09 15:44:31 -05:00
parent 6508941a0f
commit dcfca7e019
9 changed files with 344 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
layouts/shortcodes/audio.html
View file

@ -1,3 +1,126 @@
<audio controls>
<source src='{{.Site.BaseURL}}{{.Get "src" }}'>
</audio>
<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>

2
layouts/shortcodes/embed.html
View file

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

13
layouts/shortcodes/image.html
View file

@ -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>

2
layouts/shortcodes/link-preview.html
View file

@ -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>

34
layouts/shortcodes/video-player.html Normal file
View file

@ -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>

141
layouts/shortcodes/video.html
View file

@ -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>
<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>

21
layouts/shortcodes/webtorrent-video.html
View file

@ -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>

3
layouts/shortcodes/yesterweb.html Normal file
View file

@ -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>

15
static/css/theme.css
View file

@ -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%;
}