Peertube shortcode #134

Merged
omarl merged 3 commits from omarl/bglug.it:peertube-shortcode into main 2024-07-22 16:59:26 +00:00
3 changed files with 107 additions and 1 deletions
Showing only changes of commit 9233435be2 - Show all commits

View File

@ -18,7 +18,8 @@ image_alt: Logo Ansible
**Francesco Vigotti**, creatore e gestore di [histats.com](https://www.histats.com) e ...uno che la sa lunga 😉, ci parla delle più recenti tecnologie **opensource** per gestire server: DevOps e Ansible.
{{< youtube ld5UTbOnIc0 >}}
PS:
paspo marked this conversation as resolved Outdated
Outdated
Review
il link dovrebbe essere: https://video.linux.it/w/p/3SUuYCXJqC2M7V35fu7ifX
Outdated
Review

Sì, probabilmente ho copiato il link con l'account peertube aperto. Per trovare l'ID del video da mettere nello shortcode invece bisogna aprirlo non dalla playlist ma dall'elenco video https://video.linux.it/c/bglug.it/videos

Sì, probabilmente ho copiato il link con l'account peertube aperto. Per trovare l'ID del video da mettere nello shortcode invece bisogna aprirlo non dalla playlist ma dall'elenco video https://video.linux.it/c/bglug.it/videos
Outdated
Review

pensavo il link "originale" portasse alla playlist...

effettivamente meglio puntare al video

pensavo il link "originale" portasse alla playlist... effettivamente meglio puntare al video
Outdated
Review
quindi questo: https://video.linux.it/w/dgpsKn9vD98NnxNNWGXFzs
Outdated
Review

Sì però ho messo di proposito il link alla playlist, così per mostrare che ce ne sono anche altri.

Sì però ho messo di proposito il link alla playlist, così per mostrare che ce ne sono anche altri.
[Guarda le slide dell'intervento](Ansible-talk-linuxday.pdf)
{{< peertube video.linux.it 3SUuYCXJqC2M7V35fu7ifX >}}

View File

@ -0,0 +1,92 @@
{{/* Get parameters from shortcode call. */}}
{{ $host := "" }}
{{ $id := "" }}
{{ if .IsNamedParams -}}
{{ $host = (.Get "host") }}
{{ $id = (.Get "id") }}
{{- else -}}
{{ $host = (.Get 0) }}
{{ $id = (.Get 1) }}
{{- end }}
{{/* Fetch a local copy of the videos preview image. */}}
{{ $path := path.Join $host "lazy-static" "previews" $id }}
{{ $url := print "https://" $path ".jpg" }}
{{ $destination := path.Join (.Page.RelPermalink) (print $id ".jpg") }}
{{ $img := resources.GetRemote $url }}
{{ $img := $img.Content | resources.FromString $destination }}
{{ $img := $img.RelPermalink }}
{{/* Generate the videos embed url. */}}
{{ $path := path.Join $host "videos" "embed" $id }}
{{ $url := print "https://" $path }}
{{/* Fetch the videos title via the peertube api. */}}
{{ $path := path.Join $host "api" "v1" "videos" $id }}
{{ $endpoint := print "https://" $path }}
{{ $result := getJSON $endpoint }}
{{ $title := $result.name }}
<!-- https://codeberg.org/linos/hugo-peertube-shortcode/src/branch/privacy/peertube.html# -->
<div id="{{ $id }}" data-video-id="{{ $id }}" class="peertube-wrapper" data-new-window="" data-peertube-parameters="">
<iframe class="peertube-video" src ="" data-src="{{ $url }}?autoplay=1" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" frameborder="0" height="0"></iframe>
<div class="iframe-placeholder" onclick="loadPeerTubeVideo('{{ $id }}')">
<picture class="peertube-thumbnail">
<img src="{{ $img }}">
</picture>
<button class="peertube-big-play-button" type="button" title="Video abspielen" aria-disabled="false">
<span class="peertube-icon-placeholder" aria-hidden="true"></span>
<span class="peertube-control-text" aria-live="polite">Video abspielen</span>
</button>
<div class="peertube-notice">
{{ if eq .Page.Lang "de" }}
Wenn angeklickt wird dieses Video von <a class="privacy-policy-link" href="https://{{ $host }}">{{ $host }}</a> geladen.
{{ else }}
When clicked, this video is loaded from <a class="privacy-policy-link" href="https://{{ $host }}">{{ $host }}</a>
{{ end }}
</div>
<div class="peertube-dock">
<div class="peertube-dock-title-description">
<div class="peertube-dock-title" title="{{ $title }}">{{ $title }}</div>
<div class="peertube-dock-description">
{{ if eq .Page.Lang "de" }}
Beim Ansehen dieses Videos wird möglicherweise Ihre IP-Adresse an Dritte weitergegeben.
{{ else }}
Watching this video may reveal your IP address to others.
{{ end }}
</div>
</div>
</div>
</div>
</div>
<script>
function loadPeerTubeVideo(id) {
let container = document.getElementById(id);
container.children[1].style.display = 'none';
container.children[0].src = container.children[0].dataset.src;
}
</script>
<style id="peertube-style">
.peertube-iframe-placeholder {display: flex}
.peertube-wrapper {position:relative; display:flex; margin: 0.5em 0 1em 0; width:100%; height:56.25%; padding-top:56.25%;}
.peertube-video {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; cursor:pointer;}
.peertube-thumbnail {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; cursor:pointer;}
.peertube-thumbnail img {width:100%; height:100%; object-fit:cover; object-position:50% 50%; margin: 0}
.peertube-button {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:70px; height:70px; cursor:pointer; color:white;}
.peertube-button.button-circle {filter:drop-shadow(0px 0px 4px darkgray);}
.peertube-notice {position:absolute; width:100%; left:0; right:0; bottom:0; max-width:100%; text-align:center; font-size:0.8em; background-color:rgba(255,255,255,.8); padding:.2em .5em; color: black}
.privacy-policy-link {color: black}
.peertube-title {position:absolute; width:100%; top:1em; padding:0 1em; color:white; text-shadow: black 1px 1px 2px;}
.peertube-dock {--avatarSize: 48px; transition: opacity .1s; display: flex; align-items: center; pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; font-size: 23px; padding: 20px; background: linear-gradient(to bottom, rgba(20, 20, 20, 0.7) 0, rgba(20, 20, 20, 0));}
.peertube-dock-title {color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.5); font-weight: 600; letter-spacing: 1px; line-height: normal; min-width: 0; font-size: 1rem;}
.peertube-icon-placeholder {display: block; position: relative;}
.peertube-icon-placeholder:before {display: block; position: relative; width: 27px; height: 27px; top: calc(50% - 13.5px); left: calc(53% - 13.5px); content: ""; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0NjAuMTE0IDQ2MC4xMTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ2MC4xMTQgNDYwLjExNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zOTMuNTM4LDIwMy42MjlMMTAyLjU1Nyw1LjU0M2MtOS43OTMtNi42NjYtMjIuNDY4LTcuMzcyLTMyLjk0LTEuODMyYy0xMC40NzIsNS41MzgtMTcuMDIyLDE2LjQxMy0xNy4wMjIsMjguMjZ2Mzk2LjE3MwoJCQljMCwxMS44NDYsNi41NSwyMi43MjEsMTcuMDIyLDI4LjI2YzEwLjQ3MSw1LjUzOSwyMy4xNDcsNC44MzQsMzIuOTQtMS44MzJsMjkwLjk4MS0xOTguMDg3CgkJCWM4Ljc0Ni01Ljk1NCwxMy45OC0xNS44NDgsMTMuOTgtMjYuNDI4QzQwNy41MTksMjE5LjQ3Nyw0MDIuMjg1LDIwOS41ODIsMzkzLjUzOCwyMDMuNjI5eiIvPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=);}
.peertube-big-play-button {border: 2px solid #fff; display: block; position: absolute; border-radius: 100%; left: 50%; top: 50%; width: 1.2em; height: 1.2em; line-height: 1.2em; margin-top: -0.6em; transition: .2s background-color; margin-inline-start: -0.6em; background-color: rgba(0, 0, 0, 0.8); font-size: 4.5em; border-width: 2.5px;}
.peertube-big-play-button:hover {background-color:#696969}
.peertube-control-text {border: 0; clip: rect(0 0 0 0); height: 1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
.peertube-dock-description {text-shadow: 0 0 2px rgba(0,0,0,.5); font-size: 9px; color: #fff}
</style>

View File

@ -0,0 +1,13 @@
{{ if .IsNamedParams -}}
<div style="position: relative; padding-bottom: 56.25%; margin-bottom: 1rem; height: 0; overflow: hidden;">
<iframe sandbox="allow-scripts allow-popups" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"
src="https://{{ .Get "host" }}/videos/embed/{{ .Get "id" }}?{{ with .Get "title" }}title={{ . }}{{ else }}title=0{{ end }}&{{ with .Get "warning" }}warningTitle={{ . }}{{ else }}warningTitle=0{{ end }}{{ with .Get "subtitle" }}&subtitle={{ . }}{{ end }}&peertubeLink=0" allowfullscreen>
</iframe>
</div>
{{- else -}}
<div style="position: relative; padding-bottom: 56.25%; margin-bottom: 1rem; height: 0; overflow: hidden;">
<iframe sandbox="allow-scripts allow-popups" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"
src="https://{{ .Get 0 }}/videos/embed/{{ .Get 1 }}?title=0&warningTitle=0&peertubeLink=0" title="Peertube Video" allowfullscreen>
</iframe>
</div>
{{- end }}