granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tweak video embed border radius

Browse source
This commit is contained in:
Justin Edmund 2025-12-21 17:38:19 -08:00
parent 37ca687a7d
commit 33b578ec21
3 changed files with 21 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/lib/components/party/edit/YouTubeUrlInput.svelte
View file

@ -19,7 +19,13 @@
label?: string
}
let { value = $bindable(), onchange, disabled = false, contained = false, label }: Props = $props()
let {
value = $bindable(),
onchange,
disabled = false,
contained = false,
label
}: Props = $props()
// YouTube URL regex - matches youtube.com/watch?v= and youtu.be/ formats
const YOUTUBE_REGEX = /(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/
@ -46,7 +52,9 @@
const isValid = $derived(isValidYouTubeUrl(inputValue))
const showError = $derived(touched && !isValid)
const showPreview = $derived(videoId != null && isValid)
const thumbnailUrl = $derived(videoId ? `https://img.youtube.com/vi/${videoId}/mqdefault.jpg` : null)
const thumbnailUrl = $derived(
videoId ? `https://img.youtube.com/vi/${videoId}/mqdefault.jpg` : null
)
// Fetch video metadata when videoId changes
$effect(() => {
@ -59,10 +67,9 @@
isLoadingMetadata = true
const controller = new AbortController()
fetch(
`https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${id}&format=json`,
{ signal: controller.signal }
)
fetch(`https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${id}&format=json`, {
signal: controller.signal
})
.then((res) => (res.ok ? res.json() : null))
.then((data) => {
if (data?.title) {
@ -282,7 +289,7 @@
.preview-card {
background-color: var(--input-bound-bg);
border-radius: $input-corner;
border-radius: $page-corner;
padding: $unit;
}

13
src/lib/components/party/info/VideoTile.svelte
View file

@ -20,9 +20,7 @@
const thumbnailUrl = $derived(
videoId ? `https://img.youtube.com/vi/${videoId}/mqdefault.jpg` : null
)
const embedUrl = $derived(
videoId ? `https://www.youtube.com/embed/${videoId}?autoplay=1` : null
)
const embedUrl = $derived(videoId ? `https://www.youtube.com/embed/${videoId}?autoplay=1` : null)
// Fetch video title when videoId changes
$effect(() => {
@ -34,10 +32,9 @@
const controller = new AbortController()
fetch(
`https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${id}&format=json`,
{ signal: controller.signal }
)
fetch(`https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${id}&format=json`, {
signal: controller.signal
})
.then((res) => (res.ok ? res.json() : null))
.then((data) => {
if (data?.title) {
@ -125,7 +122,7 @@
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: $card-corner;
border-radius: $item-corner;
overflow: hidden;
}

3
src/lib/components/sidebar/DescriptionPane.svelte
View file

@ -86,6 +86,7 @@
@use '$src/themes/spacing' as *;
@use '$src/themes/typography' as *;
@use '$src/themes/effects' as *;
@use '$src/themes/layout' as *;
.description-pane {
display: flex;
@ -96,7 +97,7 @@
.video-embed {
margin-bottom: $unit-2x;
border-radius: $unit;
border-radius: $card-corner;
overflow: hidden;
iframe {