diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index 9638124b..79162e17 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -46,6 +46,15 @@ const MediaView = (props: { media: MediaItem; kind: Shout['layout'] }) => { description={props.media.body} /> + +
+
{props.media.title}
+ +
+
+
) @@ -79,6 +88,7 @@ export const FullArticle = (props: ArticleProps) => { } const body = createMemo(() => props.article.body) + const media = createMemo(() => { const mi = JSON.parse(props.article.media || '[]') console.debug('!!! media items', mi) @@ -169,6 +179,9 @@ export const FullArticle = (props: ArticleProps) => { {(m: MediaItem) => (
+ + +
)} diff --git a/src/components/Editor/VideoUploader/VideoUploader.module.scss b/src/components/Editor/VideoUploader/VideoUploader.module.scss index cb5af33b..57b3a47f 100644 --- a/src/components/Editor/VideoUploader/VideoUploader.module.scss +++ b/src/components/Editor/VideoUploader/VideoUploader.module.scss @@ -11,8 +11,17 @@ font-weight: 500; padding: 24px; transition: background-color 0.3s ease-in-out; + cursor: pointer; + overflow: hidden; + position: relative; - &.active { + .text { + position: relative; + z-index: 1; + } + + &.active, + &:hover { background-color: rgba(#2638d9, 0.3); &::after { diff --git a/src/components/Editor/VideoUploader/VideoUploader.tsx b/src/components/Editor/VideoUploader/VideoUploader.tsx index a2e5fb2f..85725c6a 100644 --- a/src/components/Editor/VideoUploader/VideoUploader.tsx +++ b/src/components/Editor/VideoUploader/VideoUploader.tsx @@ -98,10 +98,17 @@ export const VideoUploader = (props: Props) => { onDragEnter={handleDrag} onDragLeave={handleDrag} onDragOver={handleDrag} + onClick={() => + showSnackbar({ + body: t( + 'This functionality is currently not available, we would like to work on this issue. Use the download link.' + ) + }) + } ref={dropzoneRef} class={clsx(styles.dropArea, { [styles.active]: dragActive() })} > - {t('Upload video')} +
{t('Upload video')}
{dragError()}