7 files changed, 75 insertions, 35 deletions

diff --git a/compiler/src/Processors.hs b/compiler/src/Processors.hs
index df7e632..fc719af 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
 
@@ -123,6 +124,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
@@ -162,12 +169,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 599509e..400e18a 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
 
     (\\) :: [Path] -> [Path] -> [Path]
     a \\ b = minusOn orderedForm (sortOn orderedForm a) (sortOn orderedForm b)
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",
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/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/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;