MinPluto/Polestar
1
Fork 0
Code Issues Pull requests Activity

Add skeleton for videos

Browse source
This commit is contained in:
Korbs 2024-09-05 15:56:50 -04:00
parent 5a94203168
commit cf579e0508
1 changed files with 45 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
test/src/pages/index.astro
View file

@ -1,7 +1,12 @@
--- ---
// Information
import {
version
} from '../../../package.json'
// Components // Components
import Comment from '../../../src/Comment.astro' import Comment from '../../../src/Comment.astro'
import Creator from '../../../src/Creator.astro' import SidebarCreator from '../../../src/SidebarCreator.astro'
import Dialog from '../../../src/Dialog.astro' import Dialog from '../../../src/Dialog.astro'
import Sidebar from '../../../src/Sidebar.astro' import Sidebar from '../../../src/Sidebar.astro'
import Video from '../../../src/VideoItem.astro' import Video from '../../../src/VideoItem.astro'
@ -10,9 +15,6 @@ import Video from '../../../src/VideoItem.astro'
import { import {
InputSearch, InputSearch,
ProfileCircle, ProfileCircle,
Group,
Circle,
GitFork,
GraphUp, GraphUp,
Movie, Movie,
MusicDoubleNote, MusicDoubleNote,
@ -22,8 +24,8 @@ import {
PlanetAlt, PlanetAlt,
Settings, Settings,
MediaVideoList, MediaVideoList,
LogOut, LogOut,
OpenInBrowser OpenInBrowser
} from '@iconoir/vue' } from '@iconoir/vue'
--- ---
@ -47,6 +49,7 @@ OpenInBrowser
LogoPath="https://ark.sudovanilla.org/avatars/984c733421da0eca64a9ec4f55305f739d748f0f50e5a91890a3372c544aa119?size=200" LogoPath="https://ark.sudovanilla.org/avatars/984c733421da0eca64a9ec4f55305f739d748f0f50e5a91890a3372c544aa119?size=200"
ShowVersion ShowVersion
FooterLinks FooterLinks
Version={version}
> >
<slot slot="header-items"> <slot slot="header-items">
<a href="#"><InputSearch/></a> <a href="#"><InputSearch/></a>
@ -67,7 +70,7 @@ OpenInBrowser
<h2>Project Demo</h2> <h2>Project Demo</h2>
<a href="#" onclick="OpenExampleDialog()"><OpenInBrowser/> Open Dialog</a> <a href="#" onclick="OpenExampleDialog()"><OpenInBrowser/> Open Dialog</a>
<h2>Creators</h2> <h2>Creators</h2>
<Creator <SidebarCreator
Avatar="https://ipx.sudovanilla.org/https://invidious.private.coffee/ggpht/ytc/AIdro_lAKf-vZLoTI-gZUoP5Y3gbdGd07E4eDHUhTee6aOzDCnU=s900-c-k-c0x00ffffff-no-rj" Avatar="https://ipx.sudovanilla.org/https://invidious.private.coffee/ggpht/ytc/AIdro_lAKf-vZLoTI-gZUoP5Y3gbdGd07E4eDHUhTee6aOzDCnU=s900-c-k-c0x00ffffff-no-rj"
Name="The Linux Experiment" Name="The Linux Experiment"
Link="#" Link="#"
@ -78,7 +81,7 @@ OpenInBrowser
<div class="fl-sk-circle"></div> <div class="fl-sk-circle"></div>
<div class="fl-sk-text"></div> <div class="fl-sk-text"></div>
</div> </div>
</Creator> </SidebarCreator>
</slot> </slot>
<slot slot="bottom-items"> <slot slot="bottom-items">
@ -95,32 +98,50 @@ OpenInBrowser
VideoId="PuGeR075MkE" VideoId="PuGeR075MkE"
CreatorId="UC5UAwBUum7CPN5buc-_N1Fw" CreatorId="UC5UAwBUum7CPN5buc-_N1Fw"
Title="Immutable Linux, without the hassle? Vanilla OS 2 Orchid" Title="Immutable Linux, without the hassle? Vanilla OS 2 Orchid"
Thumbnail="https://ipx.sudovanilla.org/https://inv.tux.pizza/vi/PuGeR075MkE/mqdefault.jpg" Thumbnail="https://ipx.sudovanilla.org/https://yt.sudovanilla.org/vi/PuGeR075MkE/mqdefault.jpg"
Date="2 weeks ago" Date="2 weeks ago"
Views="71K" Views="71K"
Length="16:10" Length="16:10"
Platform="YouTube" Platform="YouTube"
/> server:defer
>
<div style="display: flex; flex-direction: column; align-items: left; gap: 12px; padding: 0px 12px;" slot="fallback">
<div class="fl-sk-video"></div>
<div class="fl-sk-text"></div>
</div>
</Video>
<Video <Video
VideoId="urC7PKlM3Qo" VideoId="urC7PKlM3Qo"
CreatorId="UC5UAwBUum7CPN5buc-_N1Fw" CreatorId="UC5UAwBUum7CPN5buc-_N1Fw"
Title="Nvidia pilfers Youtube for AI, GNOME HDR, Immutable Manjaro: Linux & Open Source News" Title="Nvidia pilfers Youtube for AI, GNOME HDR, Immutable Manjaro: Linux & Open Source News"
Thumbnail="https://ipx.sudovanilla.org/https://inv.tux.pizza/vi/urC7PKlM3Qo/mqdefault.jpg" Thumbnail="https://ipx.sudovanilla.org/https://yt.sudovanilla.org/vi/urC7PKlM3Qo/mqdefault.jpg"
Date="1 weeks ago" Date="1 weeks ago"
Views="43K" Views="43K"
Length="19:57" Length="19:57"
Platform="YouTube" Platform="YouTube"
/> server:defer
>
<div style="display: flex; flex-direction: column; align-items: left; gap: 12px; padding: 0px 12px;" slot="fallback">
<div class="fl-sk-video"></div>
<div class="fl-sk-text"></div>
</div>
</Video>
<Video <Video
VideoId="YFr5E2C5ex8" VideoId="YFr5E2C5ex8"
CreatorId="UC5UAwBUum7CPN5buc-_N1Fw" CreatorId="UC5UAwBUum7CPN5buc-_N1Fw"
Title="COSMIC Desktop ALPHA: a unique & important project for Linux!" Title="COSMIC Desktop ALPHA: a unique & important project for Linux!"
Thumbnail="https://ipx.sudovanilla.org/https://inv.tux.pizza/vi/YFr5E2C5ex8/mqdefault.jpg" Thumbnail="https://ipx.sudovanilla.org/https://yt.sudovanilla.org/vi/YFr5E2C5ex8/mqdefault.jpg"
Date="2 weeks ago" Date="2 weeks ago"
Views="101K" Views="101K"
Length="31:18" Length="31:18"
Platform="YouTube" Platform="YouTube"
/> server:defer
>
<div style="display: flex; flex-direction: column; align-items: left; gap: 12px; padding: 0px 12px;" slot="fallback">
<div class="fl-sk-video"></div>
<div class="fl-sk-text"></div>
</div>
</Video>
</div> </div>
<br/> <br/>
@ -145,11 +166,20 @@ body {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
.content { .content {
margin-left: 300px; margin-left: 260px;
padding: 12px;
} }
</style> </style>
<style is:global> <style is:global>
.fl-sk-video {
height: 183px;
width: 100%;
background-image: linear-gradient(90deg, #323232 0px, #4c4c4c 40px, #323232 80px);
background-size: 600px;
animation: load 2s linear infinite;
border-radius: 6px;
}
.fl-sk-circle { .fl-sk-circle {
height: 32px; height: 32px;
width: 32px; width: 32px;