mirror of
https://gitlab.com/ansol/web-ansol.org.git
synced 2024-12-26 22:00:21 +00:00
add hugo-peertube-shortcode
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.
This commit is contained in:
Marcos Marado
parent
d4f7d4cf57
commit
4295fc8795
@ -11,6 +11,7 @@ O tema do website foi baseado no [Academic](https://themes.gohugo.io/themes/hugo
|
||||
Utilizamos as seguintes bibliotecas:
|
||||
- [fuse.js](https://fusejs.io), disponível sob a [licença Apache 2.0](https://github.com/krisk/Fuse/blob/master/LICENSE)
|
||||
- [mark.js](https://markjs.io), disponível sob a [licença MIT](https://github.com/julmot/mark.js/blob/master/LICENSE)
|
||||
- [hugo-peertube-shortcode](https://codeberg.org/_aris/hugo-peertube-shortcode), disponível sob a [licença MIT](https://codeberg.org/_aris/hugo-peertube-shortcode/src/commit/10197c1b4bc15c375d51a5c9da76c6b2ee7055da/LICENSE)
|
||||
|
||||
|
||||
## Ícones
|
||||
|
||||
102
themes/academic/layouts/shortcodes/peertube.html
Normal file
102
themes/academic/layouts/shortcodes/peertube.html
Normal file
@ -0,0 +1,102 @@
|
||||
{{/* 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>
|
||||
Loading…
Reference in New Issue
Block a user