Korbs/zorn-js
Archived
1
Fork 0
Code Issues Pull requests Activity

update

Browse source
This commit is contained in:
Korbs 2024-05-27 16:00:04 -04:00
parent b6f9b30e43
commit da2a8c3555
4 changed files with 153 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/themes/default.js
View file

@ -55,11 +55,14 @@ export var Controls = `
</div>
<style>
:root {
--zorn-progress-bar-bg: rgba(100, 100, 100, 0.5);
--zorn-progress-bar: rgba(255, 0, 0, 0.5);
--zorn-progress-bar-bg: rgba(255, 0, 0, 0.5);
--zorn-progress-bar: rgba(100, 100, 100, 0.5);
--zorn-thumb: red;
--zorn-rounded-corners: 4px;
}
.video-container video {
border-radius: 10px;
}
.zorn-context-menu {
background: linear-gradient(45deg, #0a141c 0%, rgba(10, 20, 28, 1) 100%);
border-radius: 6px;
@ -181,6 +184,7 @@ export var Controls = `
transition: all 0.2s ease;
background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));
flex-direction: inherit;
border-radius: 0px 0px 10px 10px;
}
.video-container .zorn-player-controls .row-1 {
display: flex;
@ -246,7 +250,7 @@ export var Controls = `
}
.video-container .zorn-player-controls progress::-webkit-progress-bar {
border-radius: 1rem;
background: var(--zorn-progress-bar-bg);
background: var(--zorn-progress-bar);
}
.video-container .zorn-player-controls progress::-webkit-progress-value {
background: var(--zorn-progress-bar);
@ -349,7 +353,7 @@ export var Controls = `
pointer-events: none;
}
.video-container .zorn-player-controls #progress-bar {
background: var(--zorn-progress-bar-bg);
background: var(--zorn-progress-bar);
border: none;
border-radius: 10px;
}

9
test/css/index.css
View file

@ -1,9 +1,14 @@
body {
background-color: #111111;
color: white;
max-width: 1200px;
margin: auto;
margin-top: 64px;
display: grid;
grid-template-columns: 75% 25%;
grid-gap: 24px;
}
video {
height: 100%
border-radius: 12px;
}

135
test/index.html
View file

@ -4,17 +4,134 @@
<meta charset="UTF-8">
<title>Zorn</title>
<link rel="stylesheet" href="./css/index.css"/>
<link rel="stylesheet" media="(prefers-color-scheme:light)" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.1/cdn/themes/light.css"/>
<link rel="stylesheet" media="(prefers-color-scheme:dark)" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.1/cdn/themes/dark.css" onload="document.documentElement.classList.add('sl-theme-dark');"/>
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.1/cdn/shoelace-autoloader.js"></script>
</head>
<body>
<div class="video-container">
<video class="zorn-player" layout="default">
<!-- Quality changer support has not been worked on yet -->
<source label="720p" src="./media/Ennie-and-Yoyki-Ungirly-Games.mp4" type="video/mp4">
<!-- Subtitles -->
<track src="./media/subtitles/English.vtt" kind="subtitles" srclang="en" label="English">
<track src="./media/subtitles/Russian.vtt" kind="subtitles" srclang="ru" label="Russian">
</video>
<div>
<div class="video-container">
<video class="zorn-player" layout="default">
<!-- Quality changer support has not been worked on yet -->
<source label="720p" src="./media/Ennie-and-Yoyki-Ungirly-Games.mp4" type="video/mp4">
<!-- Subtitles -->
<track src="./media/subtitles/English.vtt" kind="subtitles" srclang="en" label="English">
<track src="./media/subtitles/Russian.vtt" kind="subtitles" srclang="ru" label="Russian">
</video>
</div>
<br/>
<div class="skeleton-overview">
<header>
<sl-skeleton effect="sheen"></sl-skeleton>
<sl-skeleton effect="sheen"></sl-skeleton>
</header>
<sl-skeleton effect="sheen"></sl-skeleton>
<sl-skeleton effect="sheen"></sl-skeleton>
<sl-skeleton effect="sheen"></sl-skeleton>
</div>
<style>
.skeleton-overview header {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.skeleton-overview header sl-skeleton:last-child {
flex: 0 0 auto;
width: 30%;
}
.skeleton-overview sl-skeleton {
margin-bottom: 1rem;
}
.skeleton-overview sl-skeleton:nth-child(1) {
float: left;
width: 3rem;
height: 3rem;
margin-right: 1rem;
vertical-align: middle;
}
.skeleton-overview sl-skeleton:nth-child(3) {
width: 95%;
}
.skeleton-overview sl-skeleton:nth-child(4) {
width: 80%;
}
.skeleton__indicator:nth-child(1) {
--border-radius: 0;
}
</style>
<style>
.skeleton-shapes sl-skeleton {
display: inline-flex;
width: 50px;
height: 50px;
}
.skeleton-shapes .square::part(indicator) {
--border-radius: var(--sl-border-radius-medium);
}
</style>
</div>
<div>
<div class="skeleton-overview">
<header class="skeleton-shapes">
<sl-skeleton class="square" style="width: 100%; height: 100px; border-radius: 6px;" effect="sheen"></sl-skeleton>
<div style="display: flex; flex-direction: column; width: 100%;">
<sl-skeleton style="width: 75%; height: 10px;" effect="sheen"></sl-skeleton>
<sl-skeleton style="width: 75%; height: 10px" effect="sheen"></sl-skeleton>
</div>
</header>
</div>
<div class="skeleton-overview">
<header class="skeleton-shapes">
<sl-skeleton class="square" style="width: 100%; height: 100px; border-radius: 6px;" effect="sheen"></sl-skeleton>
<div style="display: flex; flex-direction: column; width: 100%;">
<sl-skeleton style="width: 75%; height: 10px;" effect="sheen"></sl-skeleton>
<sl-skeleton style="width: 75%; height: 10px" effect="sheen"></sl-skeleton>
</div>
</header>
</div>
<div class="skeleton-overview">
<header class="skeleton-shapes">
<sl-skeleton class="square" style="width: 100%; height: 100px; border-radius: 6px;" effect="sheen"></sl-skeleton>
<div style="display: flex; flex-direction: column; width: 100%;">
<sl-skeleton style="width: 75%; height: 10px;" effect="sheen"></sl-skeleton>
<sl-skeleton style="width: 75%; height: 10px" effect="sheen"></sl-skeleton>
</div>
</header>
</div>
<div class="skeleton-overview">
<header class="skeleton-shapes">
<sl-skeleton class="square" style="width: 100%; height: 100px; border-radius: 6px;" effect="sheen"></sl-skeleton>
<div style="display: flex; flex-direction: column; width: 100%;">
<sl-skeleton style="width: 75%; height: 10px;" effect="sheen"></sl-skeleton>
<sl-skeleton style="width: 75%; height: 10px" effect="sheen"></sl-skeleton>
</div>
</header>
</div>
<div class="skeleton-overview">
<header class="skeleton-shapes">
<sl-skeleton class="square" style="width: 100%; height: 100px; border-radius: 6px;" effect="sheen"></sl-skeleton>
<div style="display: flex; flex-direction: column; width: 100%;">
<sl-skeleton style="width: 75%; height: 10px;" effect="sheen"></sl-skeleton>
<sl-skeleton style="width: 75%; height: 10px" effect="sheen"></sl-skeleton>
</div>
</header>
</div>
</div>
</body>
<script src="./js/zorn.js" type="module"></script>
</html>
</html>
<script></script>

20
test/js/zorn.js
View file

File diff suppressed because one or more lines are too long