Commit 7dcd0f98 authored by Stefan Probst's avatar Stefan Probst
Browse files

fix: fix iframe sandbox and media preview controls css

parent b17cbf51
Pipeline #303298 passed with stages
in 10 minutes and 58 seconds
......@@ -10,11 +10,10 @@
.media-container {
position: relative;
display: grid;
grid-template-rows: 1fr auto;
gap: var(--space-4);
height: var(--size-64);
padding: var(--space-8) var(--space-10);
place-items: center;
place-content: center;
@media (/* --screen-md */ min-width: 48rem) {
height: var(--size-96);
......@@ -32,6 +31,11 @@
min-height: 0;
max-height: 100%;
}
& > :first-child {
width: 100%;
height: 100%;
}
}
.carousel-controls {
......@@ -43,13 +47,14 @@
& > li {
display: grid;
justify-items: center;
&[data-direction='next'] {
justify-items: center;
border-left: 1px solid var(--color-border);
}
&[data-direction='prev'] {
justify-items: center;
border-right: 1px solid var(--color-border);
& svg {
......@@ -57,7 +62,7 @@
}
}
& > .button {
& > button {
display: grid;
width: 100%;
padding: 0;
......@@ -76,6 +81,7 @@
color: var(--color-link-text-hover);
}
/* stylelint-disable-next-line no-descending-specificity */
& svg {
width: var(--size-2-5);
height: var(--size-2-5);
......@@ -84,6 +90,7 @@
& .thumbnails {
display: flex;
justify-content: center;
overflow-x: auto;
min-height: 0;
column-gap: var(--space-1);
......@@ -96,11 +103,18 @@
& > .button {
display: grid;
width: 100%;
padding: 0;
border: none;
background: none;
color: var(--color-link-text);
place-items: center;
&:hover {
background-color: var(--color-background-muted);
color: var(--color-link-text-hover);
}
& > * {
min-height: 0;
max-height: 100%;
......
......@@ -64,36 +64,12 @@ export function ItemMedia(props: ItemMediaProps): JSX.Element {
</Button>
</li>
<li>
<ol role="list" className={css['thumbnails']}>
{media.map((m, index) => {
const hasThumbnail = m.info.hasThumbnail
return (
<li key={m.info.mediaId}>
<Button
onPress={() => {
setCurrentMediaIndex(index)
}}
// TODO: should label use caption?
aria-label={t(['common', 'item', 'go-to-media'], {
values: { media: String(index) },
})}
>
{hasThumbnail ? (
/* eslint-disable-next-line @next/next/no-img-element */
<img
loading="lazy"
src={String(getMediaThumbnailUrl({ mediaId: m.info.mediaId }))}
alt=""
/>
) : (
<Icon icon={DocumentIcon} />
)}
</Button>
</li>
)
})}
</ol>
<ItemMediaPreviews
media={media}
onSelect={(index) => {
setCurrentMediaIndex(index)
}}
/>
</li>
<li data-direction="next">
<Button onPress={onNextMedia} isDisabled={!hasNext}>
......@@ -108,6 +84,50 @@ export function ItemMedia(props: ItemMediaProps): JSX.Element {
)
}
interface ItemMediaPreviewsProps {
media: Item['media']
onSelect: (index: number) => void
}
function ItemMediaPreviews(props: ItemMediaPreviewsProps): JSX.Element {
const { media, onSelect } = props
const { t } = useI18n<'common'>()
return (
<ol role="list" className={css['thumbnails']}>
{media.map((m, index) => {
const hasThumbnail = m.info.hasThumbnail
return (
<li key={m.info.mediaId}>
<Button
onPress={() => {
onSelect(index)
}}
// TODO: should label use caption?
aria-label={t(['common', 'item', 'go-to-media'], {
values: { media: String(index) },
})}
>
{hasThumbnail ? (
/* eslint-disable-next-line @next/next/no-img-element */
<img
loading="lazy"
src={String(getMediaThumbnailUrl({ mediaId: m.info.mediaId }))}
alt=""
/>
) : (
<Icon icon={DocumentIcon} />
)}
</Button>
</li>
)
})}
</ol>
)
}
interface MediaProps {
media: Item['media'][number]
}
......@@ -126,7 +146,8 @@ function Media(props: MediaProps): JSX.Element {
return (
<iframe
src={url}
sandbox=""
// TODO:
// sandbox="allow-popups; allow-same-origin; allow-scripts"
loading="lazy"
title={caption ?? t(['common', 'item', 'embedded-content'])}
allow="fullscreen; picture-in-picture"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment