Video support.

src/components/PlayCircleOutline.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export default function PlayCircleOutline(props) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height={props.height}
+            viewBox={props.viewBox}
+            width={props.width}
+        >
+            <path d="M0 0h24v24H0z" fill="none"/>
+            <path d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
+        </svg>
+    );
+}
+
+PlayCircleOutline.defaultProps = {
+    height: 24,
+    width: 24,
+    viewBox: '0 0 24 24',
+}

src/pages/_app.tsx

@@ -43,6 +43,29 @@ const GlobalStyles = createGlobalStyle`
         vertical-align: middle;
         margin: 8px;
     }
+    
+    .pswp__item video {
+        width: 100%;
+        height: 100%;
+    }
+
+    .video-loading {
+        width: 100%;
+        height: 100%;
+        position: relative;
+    }
+
+    .video-loading > img {
+        object-fit: contain;
+        width: 100%;
+        height: 100%;
+    }
+
+    .video-loading > div {
+        position: relative;
+        top: -50vh;
+        left: 50vw;
+    }
 
     :root {
         --primary: #e26f99,

src/pages/gallery/components/PreviewCard.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { file, getPreview } from 'services/fileService';
 import { getData, LS_KEYS } from 'utils/storage/localStorage';
 import styled from 'styled-components';
+import PlayCircleOutline from 'components/PlayCircleOutline';
 
 interface IProps {
     data: file,
@@ -16,6 +17,7 @@ const Cont = styled.div<{ disabled: boolean }>`
     width: 192px;
     height: 192px;
     overflow: hidden;
+    position: relative;
     cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
 
     & > img {
@@ -23,6 +25,18 @@ const Cont = styled.div<{ disabled: boolean }>`
         max-width: 100%;
         min-height: 100%;
     }
+
+    & > svg {
+        position: absolute;
+        color: white;
+        width: 50px;
+        height: 50px;
+        margin-left: 50%;
+        margin-top: 50%;
+        top: -25px;
+        left: -25px;
+        filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
+    }
 `;
 
 export default function PreviewCard(props: IProps) {
@@ -50,5 +64,6 @@ export default function PreviewCard(props: IProps) {
 
     return <Cont onClick={handleClick} disabled={!data?.msrc && !imgSrc}>
         <img src={data?.msrc || imgSrc} />
+        {data.metadata.fileType === 1 && <PlayCircleOutline />}
     </Cont>;
 }

src/pages/gallery/index.tsx

@@ -77,7 +77,18 @@ export default function Gallery() {
             w: window.innerWidth,
             h: window.innerHeight,
         }
-        if (!data[index].src) {
+        if (data[index].metadata.fileType === 1 && !data[index].html) {
+            data[index].html = `
+                <div class="video-loading">
+                    <img src="${url}" />
+                    <div class="spinner-border text-light" role="status">
+                        <span class="sr-only">Loading...</span>
+                    </div>
+                </div>
+            `;
+            delete data[index].src;
+        }
+        if (data[index].metadata.fileType === 0 && !data[index].src) {
             data[index].src = url;
         }
         setData(data);
@@ -90,6 +101,15 @@ export default function Gallery() {
             w: window.innerWidth,
             h: window.innerHeight,
         }
+        if (data[index].metadata.fileType === 1) {
+            data[index].html = `
+                <video controls>
+                    <source src="${url}" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+            `;
+            delete data[index].src;
+        }
         setData(data);
     }
 
@@ -136,8 +156,16 @@ export default function Gallery() {
             fetching[index] = true;
             const url = await getFile(token, item);
             updateSrcUrl(index, url);
-            item.src = url;
-            item.w = window.innerWidth;
+            if (item.metadata.fileType === 1) {
+                item.html = `
+                    <video width="320" height="240" controls>
+                        <source src="${url}" type="video/mp4">
+                        Your browser does not support the video tag.
+                    </video>
+                `;
+                delete item.src;
+                item.w = window.innerWidth;
+            }
             item.h = window.innerHeight;
             try {
                 instance.invalidateCurrItems();

src/services/fileService.ts

@@ -19,6 +19,7 @@ export interface fileAttribute {
     encryptedData: string;
     decryptionHeader: string;
     creationTime: number;
+    fileType: number;
 };
 
 export interface user {