From 53fbce70e951705bfa2fef9df2f2f09c73a8d895 Mon Sep 17 00:00:00 2001
From: Sander Vocke <sandervocke@gmail.com>
Date: Fri, 14 Feb 2020 19:05:44 +0059
Subject: [PATCH] Add video support.

---
 src/gallery/gallery.js | 30 +++++++++++++++++++++++++++---
 src/media.js           | 11 +++++++----
 src/queries.js         |  6 ++++--
 3 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/src/gallery/gallery.js b/src/gallery/gallery.js
index f1f564a..bdc4caa 100644
--- a/src/gallery/gallery.js
+++ b/src/gallery/gallery.js
@@ -35,7 +35,7 @@ export function GalleryImageRender(props) {
     );
 }
 
-export function GalleryImage(props) {
+export function GalleryPhoto(props) {
     const { photo } = props;
 
     // First show the fast (thumbnail) image.
@@ -52,10 +52,34 @@ export function GalleryImage(props) {
     }, []);
 
     return (
-        <GalleryImageRender src={src}/>
+        <GalleryImageRender src={src} />
     );
 }
 
+export function GalleryVideo(props) {
+    const { video } = props;
+    const classes = useStyles();
+
+    return (
+        <>
+            <video controls className={classes.image}>
+                <source src={video.state.path} type="video/mp4" />
+                Your browser does not support HTML5 video.
+            </video>
+        </>
+    );
+}
+
+export function GalleryItem(props) {
+    const { item } = props;
+
+    if (item.state.is_video) {
+        return <GalleryVideo video={item} />;
+    } else {
+        return <GalleryPhoto photo={item} />;
+    }
+}
+
 export function Gallery(props) {
     const { onClose, items, current_item } = props;
     const classes = useStyles();
@@ -73,7 +97,7 @@ export function Gallery(props) {
                 <Box className={classes.image_container}>
                     {
                         maybe_photo &&
-                        <GalleryImage photo={maybe_photo} />
+                        <GalleryItem item={maybe_photo} />
                     }
                 </Box>
             </Box>
diff --git a/src/media.js b/src/media.js
index 8b54922..561184f 100644
--- a/src/media.js
+++ b/src/media.js
@@ -3,13 +3,14 @@ import './TableLine.css';
 
 export class Media { }
 
-export class Photo extends Media {
+export class PhotoOrVideo extends Media {
   state = {
     id: false,
     name: false,
     path: false,
     thumbnailpath: false,
     fullsize: false,
+    is_video: false,
   }
 }
 
@@ -34,13 +35,15 @@ export function create_photo(
   maybe_name,
   maybe_path,
   maybe_thumbnail_path,
-  maybe_fullsize) {
-  var p = new Photo();
+  maybe_fullsize,
+  maybe_is_video) {
+  var p = new PhotoOrVideo();
   if (maybe_id) { p.state.id = maybe_id; }
   if (maybe_name) { p.state.name = maybe_name; }
   if (maybe_path) { p.state.path = maybe_path; }
   if (maybe_thumbnail_path) { p.state.thumbnailpath = maybe_thumbnail_path; }
   if (maybe_fullsize) { p.state.fullsize = maybe_fullsize; }
+  p.state.is_video = maybe_is_video;
   return p;
 }
 
@@ -97,7 +100,7 @@ export const MediaTableLine = ({ media }) => (
   <>
     {
       (() => {
-        if (media instanceof Photo) {
+        if (media instanceof PhotoOrVideo) {
           return <PhotoTableLine photo={media} />;
         } else if (media instanceof Album) {
           return <AlbumTableLine album={media} />;
diff --git a/src/queries.js b/src/queries.js
index 08be155..044266f 100644
--- a/src/queries.js
+++ b/src/queries.js
@@ -9,6 +9,7 @@ export function escape_regex(s) {
 };
 
 export function do_image_query(query, database, collection_path, collection_thumbs_path) {
+    const category_video = 2;
     return new Promise(function (resolve, reject) {
         var queries = [];
         queries.push(query);
@@ -28,7 +29,8 @@ export function do_image_query(query, database, collection_path, collection_thum
                             imagepath,
                             thumbpath,
                             [row[cols.indexOf("width")],
-                            row[cols.indexOf("height")]]
+                            row[cols.indexOf("height")]],
+                            row[cols.indexOf("category")] == category_video,
                         ));
                 });
             }
@@ -347,7 +349,7 @@ export class UserQuery {
 // This query will return database entries with the fields "id", "uniqueHash", "relativePath" (of the album) and "name" for each matching image.
 export function image_query_with_where(maybe_where) {
     return "SELECT Images.id, Images.name, Images.uniqueHash, Albums.relativePath, "
-        + "ImageInformation.width, ImageInformation.height "
+        + "ImageInformation.width, ImageInformation.height, Images.category "
         + "FROM Images INNER JOIN Albums ON Images.album=Albums.id "
         + "LEFT JOIN ImageTags ON Images.id=ImageTags.imageid "
         + "LEFT JOIN ImageInformation ON Images.id=ImageInformation.imageid "