wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update component

Browse source
This commit is contained in:
madrilene 2025-03-13 16:03:42 +01:00
parent 3724a12ad1
commit 67a04b04f5
1 changed files with 35 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/_includes/webc/custom-peertube.webc
View file

@ -3,29 +3,52 @@
return `https://${instance}/w/${slug}${start ? `?start=${start}s` : ''}`; return `https://${instance}/w/${slug}${start ? `?start=${start}s` : ''}`;
} }
function getEmbedLinkUrl(instance, embedSlug, start) { function getEmbedLinkUrl(instance, embedSlug, start) {
return `https://${instance}/videos/embed/${embedSlug}${start ? `?start=${start}s&` : `?`}` + `title=0&warningTitle=0`; const startParam = start ? `start=${start}s&` : '';
return `https://${instance}/videos/embed/${embedSlug}?${startParam}title=0&warningTitle=0`;
} }
</script> </script>
<style> <style>
custom-peertube div { /* Hide without JS */
position: relative; is-land:not(:defined).video-wrapper {
overflow: hidden; display: none;
padding-top: 56.25%;
border-radius: 1rem;
} }
is-land.video-wrapper {
display: block;
}
custom-peertube iframe { custom-peertube iframe {
position: absolute; position: absolute;
inset: 0px; inset: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
custom-peertube .video-wrapper {
overflow: hidden;
position: relative;
aspect-ratio: 16 / 9;
width: 100%;
border-radius: 0.2em;
}
</style> </style>
<custom-peertube webc:root class="flow"> <custom-peertube webc:root class="flow">
<div> <is-land on:visible class="video-wrapper relative">
<iframe :title="label" :src="getEmbedLinkUrl(instance,embedSlug,start)" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"> <iframe
</iframe> :title="label"
</div> :src="getEmbedLinkUrl(instance,embedSlug,start)"
frameborder="0"
allowfullscreen
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
>
</iframe>
</is-land>
</custom-peertube> </custom-peertube>
<custom-peertube-link @raw="label" :label="label" :href="getLinkUrl(instance,slug, start)"></custom-peertube-link> <custom-peertube-link
@raw="label"
:label="label"
:href="getLinkUrl(instance,slug, start)"
></custom-peertube-link>