quickshell-web/src/components/marquee/MarqueeContent.astro

69 lines
2 KiB
Text

---
const videos = [
{
author: '<a href="https://github.com/soramanew">soramane</a>',
source: "https://github.com/caelestia-dots/shell",
path: "/assets/showcase/soramane.mp4",
installable: true,
},
{
author: '<a href="https://github.com/end-4">end_4</a>',
source: "https://github.com/end-4/dots-hyprland",
path: "/assets/showcase/end4.mp4",
installable: true,
},
{
author: '<a href="https://outfoxxed.me">outfoxxed</a>',
source:
"https://git.outfoxxed.me/outfoxxed/nixnew/src/branch/master/modules/user/modules/quickshell",
path: "/assets/showcase/outfoxxed.mp4",
},
{
author:
'<a href="https://github.com/pfaj/">pfaj</a> and <a href="https://github.com/bdebiase">bdebiase</a>',
path: "/assets/showcase/pfaj-bdeblase.mp4",
},
{
author: '<a href="https://github.com/flickowoa">flicko</a>',
source: "https://github.com/flickowoa/zephyr",
path: "/assets/showcase/flicko.mp4",
},
{
author: '<a href="https://vaxry.net">vaxry</a>',
path: "/assets/showcase/vaxry.mp4",
},
];
---
<div
id="marquee-content"
class="marquee-content"
data-scroll="0"
data-media-index="0"
>
{videos.map(({ author, source, installable, path }, index) => {
return (
<div class=`marquee-item`>
<div class="marquee-item-spacing marquee-item-content video-wrapper">
<video
data-media-index={index}
data-media-author={author}
id="showcase-video"
muted
controls
playsinline
preload="metadata"
style="opacity: 0; transition: opacity 0.5s"
onloadeddata="this.style.opacity='1'"
>
<source src={path} type="video/mp4"/>
</video>
</div>
<p>
Configuration by <Fragment set:html={author}/>
{source && !installable && <>(<a href={source}>source code</a>)</>}
{source && installable && <>(<a href={source}>install</a>)</>}
</p>
</div>
)})}
</div>