From 7dde692101a7e36e0a431aeb864cbf3a0c0e96f8 Mon Sep 17 00:00:00 2001
From: pacien
Date: Fri, 31 Jan 2020 19:43:24 +0100
Subject: compiler: add thumbnail size to index

---
 compiler/src/Processors.hs | 21 +++++++++++++++------
 compiler/src/Resource.hs   | 28 ++++++++++++++++++++++------
 design-notes.md            |  9 ++++++++-
 3 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/compiler/src/Processors.hs b/compiler/src/Processors.hs
index f2ade63..9ddc6ee 100644
--- a/compiler/src/Processors.hs
+++ b/compiler/src/Processors.hs
@@ -27,16 +27,17 @@ module Processors
 import Control.Exception (Exception)
 import Data.Function ((&))
 import Data.Char (toLower)
+import Data.List (break)
 
 import System.Directory hiding (copyFile)
 import qualified System.Directory
 import System.FilePath
 
-import System.Process (callProcess)
+import System.Process (callProcess, readProcess)
 
 import Resource
   ( ItemProcessor, ThumbnailProcessor
-  , GalleryItemProps(..), Resolution(..), Resource(..) )
+  , GalleryItemProps(..), Resolution(..), Resource(..), Thumbnail(..) )
 
 import Files
 
@@ -119,6 +120,12 @@ withCached processor inputPath outputPath =
 resourceAt :: FilePath -> Path -> IO Resource
 resourceAt fsPath resPath = getModificationTime fsPath >>= return . Resource resPath
 
+getImageResolution :: FilePath -> IO Resolution
+getImageResolution fsPath =
+  readProcess "identify" ["-format", "%w %h", fsPath] []
+  >>= return . break (== ' ')
+  >>= return . \(w, h) -> Resolution (read w) (read h)
+
 
 type ItemFileProcessor =
      FileName        -- ^ Input base path
@@ -158,12 +165,14 @@ thumbnailFileProcessor maxRes cached inputBase outputBase resClass inputRes =
     inPath = localPath $ inputBase /> inputRes
     outPath = localPath $ outputBase /> relOutPath
 
-    process :: Maybe FileProcessor -> IO (Maybe Resource)
+    process :: Maybe FileProcessor -> IO (Maybe Thumbnail)
     process Nothing = return Nothing
     process (Just proc) =
-      proc inPath outPath
-      >> resourceAt outPath relOutPath
-      >>= return . Just
+      do
+        proc inPath outPath
+        resource <- resourceAt outPath relOutPath
+        resolution <- getImageResolution outPath
+        return $ Just $ Thumbnail resource resolution
 
     processorFor :: Format -> Maybe FileProcessor
     processorFor PictureFormat = Just $ resizePictureUpTo maxRes
diff --git a/compiler/src/Resource.hs b/compiler/src/Resource.hs
index c0ef317..33f3cf0 100644
--- a/compiler/src/Resource.hs
+++ b/compiler/src/Resource.hs
@@ -18,7 +18,7 @@
 
 module Resource
   ( ItemProcessor, ThumbnailProcessor
-  , GalleryItem(..), GalleryItemProps(..), Resolution(..), Resource(..)
+  , GalleryItem(..), GalleryItemProps(..), Resolution(..), Resource(..), Thumbnail(..)
   , buildGalleryTree, galleryCleanupResourceDir
   ) where
 
@@ -90,13 +90,23 @@ instance ToJSON GalleryItemProps where
   toEncoding = genericToEncoding encodingOptions
 
 
+data Thumbnail = Thumbnail
+  { resource :: Resource
+  , resolution :: Resolution
+  } deriving (Generic, Show)
+
+instance ToJSON Thumbnail where
+  toJSON = genericToJSON encodingOptions
+  toEncoding = genericToEncoding encodingOptions
+
+
 data GalleryItem = GalleryItem
   { title :: String
   , datetime :: ZonedTime
   , description :: String
   , tags :: [Tag]
   , path :: Path
-  , thumbnail :: Maybe Resource
+  , thumbnail :: Maybe Thumbnail
   , properties :: GalleryItemProps
   } deriving (Generic, Show)
 
@@ -106,7 +116,7 @@ instance ToJSON GalleryItem where
 
 
 type ItemProcessor = Path -> IO GalleryItemProps
-type ThumbnailProcessor = Path -> IO (Maybe Resource)
+type ThumbnailProcessor = Path -> IO (Maybe Thumbnail)
 
 
 buildGalleryTree ::
@@ -150,7 +160,7 @@ buildGalleryTree processItem processThumbnail tagsFromDirectories galleryName in
         subItemsParents :: [String]
         subItemsParents = (maybeToList $ fileName path) ++ parentTitles
 
-    maybeThumbnail :: Maybe Path -> IO (Maybe Resource)
+    maybeThumbnail :: Maybe Path -> IO (Maybe Thumbnail)
     maybeThumbnail Nothing = return Nothing
     maybeThumbnail (Just thumbnailPath) = processThumbnail thumbnailPath
 
@@ -197,10 +207,16 @@ galleryOutputDiff resources ref =
 
     resPath :: GalleryItemProps -> Maybe Path
     resPath Directory{} = Nothing
-    resPath resourceProps = Just (resourcePath $ resource resourceProps)
+    resPath resourceProps =
+        Just
+      $ resourcePath
+      $ (resource :: (GalleryItemProps -> Resource)) resourceProps
 
     thumbnailPaths :: [GalleryItem] -> [Path]
-    thumbnailPaths = (map resourcePath) . (mapMaybe thumbnail)
+    thumbnailPaths =
+        map resourcePath
+      . map (resource :: (Thumbnail -> Resource))
+      . mapMaybe thumbnail
 
 
 galleryCleanupResourceDir :: GalleryItem -> FileName -> IO ()
diff --git a/design-notes.md b/design-notes.md
index 91764cc..d59f511 100644
--- a/design-notes.md
+++ b/design-notes.md
@@ -143,7 +143,14 @@ Serialised item structure:
   ],
 
   "path": "[resource path]",
-  "thumbnail": "[resource path | null]",
+
+  "thumbnail": null | {
+    "resource": "[resource path]",
+    "resolution": {
+      "width": 400,
+      "height": 200
+    }
+  },
 
 
   "_comment": "type-dependent",
-- 
cgit v1.2.3


From 0697693934c700f50bcc45ad58ab0b8f0370561c Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sun, 2 Feb 2020 05:01:17 +0100
Subject: viewer: adaptation to the thumbnail's new structure

---
 viewer/src/@types/gallery.d.ts        |  9 ++++++++-
 viewer/src/components/LdPicture.vue   | 18 +++++++++++-------
 viewer/src/components/LdThumbnail.vue |  2 +-
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts
index b112b6d..1987416 100644
--- a/viewer/src/@types/gallery.d.ts
+++ b/viewer/src/@types/gallery.d.ts
@@ -33,7 +33,7 @@ declare namespace Gallery {
         description: string,
         tags: RawTag[],
         path: string,
-        thumbnail?: string,
+        thumbnail?: Thumbnail
         properties: OtherProperties | PictureProperties | DirectoryProperties,
     }
     interface OtherProperties {
@@ -47,6 +47,13 @@ declare namespace Gallery {
         type: "directory",
         items: Item[]
     }
+    interface Thumbnail {
+        resource: string,
+        resolution: {
+            width: number,
+            height: number,
+        }
+    }
     type RawTag = string;
     type ItemType = "other" | "picture" | "directory";
 }
\ No newline at end of file
diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
index 5425a00..154c4bd 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/LdPicture.vue
@@ -29,9 +29,9 @@
       :src="pictureSrc()"
       :class="{'slow-loading': Boolean(slowLoadingStyle)}"
       :style="slowLoadingStyle"
-      @load="clearTimer"
+      @load="clearSlowLoading"
     />
-    <b-loading :active="Boolean(slowLoadingStyle)" :is-full-page="false" class="ld-picture-loader" />
+    <b-loading :active="loader" :is-full-page="false" class="ld-picture-loader" />
   </div>
 </template>
 
@@ -46,20 +46,22 @@ export default class LdPicture extends Vue {
 
   dragging: boolean = false;
   slowLoadingStyle: string | null = null;
+  loader: boolean = false;
   timer: NodeJS.Timeout | null = null;
 
   mounted() {
-    if (this.picture.thumbnail) this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS);
+    this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS);
   }
 
   destroyed() {
-    this.clearTimer();
+    this.clearSlowLoading();
   }
 
-  clearTimer() {
+  clearSlowLoading() {
     if (this.timer) clearTimeout(this.timer);
     this.timer = null;
     this.slowLoadingStyle = null;
+    this.loader = false;
   }
 
   pictureSrc() {
@@ -67,8 +69,10 @@ export default class LdPicture extends Vue {
   }
 
   generateSlowLoadingStyle() {
-    this.clearTimer();
-    this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail}');`;
+    this.clearSlowLoading();
+    this.loader = true;
+    if (this.picture.thumbnail)
+      this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail.resource}');`;
   }
 
   onClick() {
diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue
index 44a4c00..d9343dd 100644
--- a/viewer/src/components/LdThumbnail.vue
+++ b/viewer/src/components/LdThumbnail.vue
@@ -45,7 +45,7 @@ export default class LdThumbnail extends Vue {
   loading: boolean = false;
 
   pictureSrc() {
-    return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail}`;
+    if (this.item.thumbnail) return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail.resource}`;
   }
 
   getIcon() {
-- 
cgit v1.2.3


From 73e2dc5b39a5cd12c52b99ee076c1a1ad86a2ace Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sun, 2 Feb 2020 19:29:12 +0100
Subject: viewer: implemented thumbnail size usage

---
 viewer/src/assets/scss/global.scss    |  1 +
 viewer/src/components/LdThumbnail.vue | 24 ++++++++++--------------
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index 5de5946..1a5761e 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -97,6 +97,7 @@ img {
 // === Effect to apply on lazy-image loading
 
 img {
+  display: block;
   &.v-lazy-image {
     opacity: 0;
     transition: opacity 0.4s;
diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue
index d9343dd..d5c0b3c 100644
--- a/viewer/src/components/LdThumbnail.vue
+++ b/viewer/src/components/LdThumbnail.vue
@@ -18,12 +18,12 @@
 -->
 
 <template>
-  <div class="forcedsize" :class="{'preload': loading}">
+  <div :class="{'preload': loading}">
     <v-lazy-image
       v-if="item.thumbnail"
-      class="thumbnail"
       :src="pictureSrc()"
-      :title="item.path"
+      :style="pictureStyle()"
+      :title="item.title"
       @intersect="loading=true"
       @load="loading=false"
     />
@@ -45,7 +45,13 @@ export default class LdThumbnail extends Vue {
   loading: boolean = false;
 
   pictureSrc() {
-    if (this.item.thumbnail) return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail.resource}`;
+    const resource = this.item.thumbnail!.resource;
+    return `${process.env.VUE_APP_DATA_URL}${resource}`;
+  }
+
+  pictureStyle() {
+    const resolution = this.item.thumbnail!.resolution;
+    return { width: `${resolution.width}px`, height: `${resolution.height}px` };
   }
 
   getIcon() {
@@ -57,10 +63,6 @@ export default class LdThumbnail extends Vue {
 <style lang="scss">
 @import "@/assets/scss/theme.scss";
 
-.thumbnail {
-  max-width: 250px;
-  max-height: 250px;
-}
 .preload {
   animation: preloadAnimation 1s infinite ease-in-out alternate;
 }
@@ -72,10 +74,4 @@ export default class LdThumbnail extends Vue {
     background-color: $loader-color;
   }
 }
-// Temporary size until we get the true thumbnail size
-.forcedsize {
-  width: 250px;
-  height: 250px;
-  text-align: center;
-}
 </style>
-- 
cgit v1.2.3