zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add slider preview thumbnails (#935)

Browse Source
This commit is contained in:
Sam Potts
2026-03-14 08:30:51 +11:00
committed by GitHub
parent dc12cc2162
commit e3f438e9f4
51 changed files with 551 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skins/src/default/css/components/buttons.css
+1
View File
@@ -22,6 +22,7 @@
transition-timing-function: ease-out;
cursor: pointer;
user-select: none;
touch-action: manipulation;
&:focus-visible {
outline-color: oklch(62.3% 0.214 259.815);
packages/skins/src/default/css/components/media.css
+1 -1
View File
@@ -24,10 +24,10 @@
inset: 0;
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
transition: opacity 0.25s;
pointer-events: none;
border-radius: inherit;
&:not([data-visible]) {
opacity: 0;
packages/skins/src/default/css/components/popup.css
+3 -3
View File
@@ -9,12 +9,12 @@
color: inherit;
overflow: visible;
transition-property: transform, scale, opacity, filter;
transition-duration: 200ms;
transition-duration: 150ms;
&[data-starting-style],
&[data-ending-style] {
opacity: 0;
transform: scale(0);
transform: scale(0.5);
filter: blur(8px);
}
@@ -49,5 +49,5 @@
border-radius: calc(infinity * 1px);
font-size: 0.75rem;
white-space: nowrap;
--media-tooltip-side-offset: 0.5rem;
--media-tooltip-side-offset: 0.75rem;
}
packages/skins/src/default/css/components/preview.css
+56
View File
@@ -0,0 +1,56 @@
/* ==========================================================================
Media preview
========================================================================== */
.media-default-skin .media-preview {
background-color: oklch(0 0 0 / 0.9);
border-radius: 0.75rem;
& .media-preview__thumbnail {
display: block;
position: relative;
border-radius: inherit;
overflow: clip;
&::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background-image: linear-gradient(to top, oklch(0 0 0 / 0.8), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0));
}
}
& .media-preview__timestamp {
position: absolute;
bottom: 0.5rem;
inset-inline: 0;
text-align: center;
font-variant-numeric: tabular-nums;
}
& .media-overlay {
opacity: 1;
}
& .media-preview__spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
& .media-preview__thumbnail,
& .media-preview__spinner {
transition: opacity 150ms ease-out;
}
&:has(.media-preview__thumbnail[data-loading]) {
& .media-preview__thumbnail {
opacity: 0;
}
& .media-preview__spinner {
opacity: 1;
}
}
}
packages/skins/src/default/css/components/reset.css
-1
View File
@@ -6,7 +6,6 @@
.media-default-skin *::before,
.media-default-skin *::after {
box-sizing: border-box;
margin: 0;
}
.media-default-skin img,
.media-default-skin video,
packages/skins/src/default/css/components/slider.css
+1 -5
View File
@@ -10,6 +10,7 @@
flex: 1;
border-radius: calc(infinity * 1px);
outline: none;
cursor: pointer;
&[data-orientation="horizontal"] {
min-width: 5rem;
@@ -141,8 +142,3 @@
height: var(--media-slider-fill);
}
}
/* Time display within slider */
.media-default-skin .media-slider__time-display {
font-variant-numeric: tabular-nums;
}
packages/skins/src/default/css/components/surface.css
+2 -2
View File
@@ -6,7 +6,7 @@
background-color: var(--media-surface-background-color);
backdrop-filter: var(--media-surface-backdrop-filter);
box-shadow:
inset 0 0 0 1px var(--media-surface-inner-border-color),
0 0 0 1px var(--media-surface-outer-border-color),
0 1px 3px 0 var(--media-surface-shadow-color),
0 1px 2px -1px var(--media-surface-shadow-color);
@@ -17,7 +17,7 @@
inset: 0;
z-index: 10;
border-radius: inherit;
box-shadow: 0 0 0 1px var(--media-surface-outer-border-color);
box-shadow: inset 0 0 0 1px var(--media-surface-inner-border-color);
pointer-events: none;
}
packages/skins/src/default/css/video.css
+27
View File
@@ -11,6 +11,7 @@
@import "./components/time.css";
@import "./components/buttons.css";
@import "./components/icons.css";
@import "./components/preview.css";
@import "./components/slider.css";
@import "./components/popup.css";
@import "./components/captions.css";
@@ -99,3 +100,29 @@
background-color: oklch(1 0 0 / 0.2);
box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);
}
.media-default-skin .media-slider__preview {
position: absolute;
left: var(--media-slider-pointer);
bottom: calc(100% + 1.2rem);
translate: -50%;
opacity: 0;
scale: 0.8;
filter: blur(8px);
transition-property: scale, opacity, filter;
transition-duration: 150ms;
transform-origin: bottom;
& .media-preview__thumbnail {
max-width: 11rem;
}
&:has(.media-preview__thumbnail[data-loading]) {
max-height: 6rem;
}
}
.media-default-skin .media-slider[data-pointing] .media-slider__preview:has([role="img"]:not([data-hidden])) {
opacity: 1;
scale: 1;
filter: blur(0);
}