peertube shortcode

This commit is contained in:
omar 2024-07-22 13:38:55 +02:00
parent 1d827eae76
commit 9233435be2
3 changed files with 107 additions and 1 deletions

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:
[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 }}