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

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

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

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

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