From 06c3740db20bdb557f90d9de6f7432cff51f27b7 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Tue, 13 Jun 2023 10:26:50 +0300
Subject: [PATCH] Feature/video updates (#109)

* Revert audio player
* Show media body text
* Add snackbar on upload Video click
---
 src/components/Article/FullArticle.tsx              | 13 +++++++++++++
 .../Editor/VideoUploader/VideoUploader.module.scss  | 11 ++++++++++-
 .../Editor/VideoUploader/VideoUploader.tsx          |  9 ++++++++-
 3 files changed, 31 insertions(+), 2 deletions(-)

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}
           />
         </Match>
+        <Match when={props.kind === 'audio'}>
+          <div>
+            <h5>{props.media.title}</h5>
+            <audio controls>
+              <source src={props.media.url} />
+            </audio>
+            <hr />
+          </div>
+        </Match>
       </Switch>
     </>
   )
@@ -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) => (
                     <div class={styles.shoutMediaBody}>
                       <MediaView media={m} kind={props.article.layout} />
+                      <Show when={m?.body}>
+                        <MD body={m.body} />
+                      </Show>
                     </div>
                   )}
                 </For>
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')}
+              <div class={styles.text}>{t('Upload video')}</div>
             </div>
             <Show when={dragError()}>
               <div class={styles.error}>{dragError()}</div>