mirror of
https://gitlab.com/ansol/web-ansol.org.git
synced 2025-01-06 02:40:15 +00:00
4295fc8795
from: https://codeberg.org/_aris/hugo-peertube-shortcode commit hash: 10197c1b4b I don't know if there is a better way to include this as a submodule or something, instead of making a static copy, but this is how I'm doing it for now.
103 lines
6.6 KiB
HTML
103 lines
6.6 KiB
HTML
{{/* 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. */}}
|
||
{{ $videoinfo := dict }}
|
||
{{ $path := path.Join $host "api" "v1" "videos" $id }}
|
||
{{ $endpoint := print "https://" $path }}
|
||
{{ with resources.GetRemote $endpoint }}
|
||
{{ with .Err }}
|
||
{{ errorf "%s" . }}
|
||
{{ else }}
|
||
{{ $videoinfo = . | transform.Unmarshal }}
|
||
{{ end }}
|
||
{{ else }}
|
||
{{ errorf "Unable to get remote resource %q" $endpoint }}
|
||
{{ end }}
|
||
{{ $url := print "https://" $host $videoinfo.previewPath }}
|
||
{{ $img := resources.GetRemote $url }}
|
||
{{ $destination := path.Join (.Page.RelPermalink) (print $id ".jpg") }}
|
||
{{ $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. */}}
|
||
{{ $title := $videoinfo.name }}
|
||
|
||
<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 if eq .Page.Lang "fr" }}
|
||
Après avoir cliqué, la vidéo est chargée depuis le site <a class="privacy-policy-link" href="https://{{ $host }}">{{ $host }}</a>.
|
||
{{ 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 if eq .Page.Lang "fr" }}
|
||
Regarder cette vidéo en ligne peut révéler votre adresse IP à d’autres personnes.
|
||
{{ 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>
|