added video and show literature

src/components/Article/FullArticle.tsx

@@ -13,6 +13,7 @@ import RatingControl from './RatingControl'
 import { clsx } from 'clsx'
 import { CommentsTree } from './CommentsTree'
 import { useSession } from '../../context/session'
+import VideoPlayer from './VideoPlayer'
 
 interface ArticleProps {
   article: Shout
@@ -45,9 +46,7 @@ const MediaView = (props: { media: MediaItem; kind: Shout['layout'] }) => {
           </div>
         </Match>
         <Match when={props.kind === 'video'}>
-          <video controls>
-            <source src={props.media.url} />
-          </video>
+          <VideoPlayer url={props.media.url} />
         </Match>
       </Switch>
     </>

src/components/Article/VideoPlayer.tsx

@@ -1,12 +1,24 @@
-export default (props: { youtubeId?: string; vimeoId?: string; title?: string }) => {
-  // TODO: styling
-  return (
-    <video
-      src={
-        props.vimeoId
-          ? `https://vimeo.com/${props.vimeoId}`
-          : `https://youtube.com/?watch=${props.youtubeId}`
-      }
+import { Show } from 'solid-js'
+
+export default (props: { url: string }) => (
+  <>
+    <Show when={props.url.includes('youtube.com')}>
+      <iframe
+        id="ytplayer"
+        width="640"
+        height="360"
+        src={`https://www.youtube.com/embed/${props.url.split('watch=').pop()}`}
+        allowfullscreen
       />
-  )
-}
+    </Show>
+    <Show when={props.url.includes('vimeo.com')}>
+      <iframe
+        src={'https://player.vimeo.com/video/' + props.url.split('video/').pop()}
+        width="420"
+        height="345"
+        allow="autoplay; fullscreen"
+        allowfullscreen
+      />
+    </Show>
+  </>
+)