Feature/video updates (#109)

* Revert audio player
* Show media body text
* Add snackbar on upload Video click

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>

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 {

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>