From 387e7d1b47d97fc222437efbd9e56ca66b3a078f Mon Sep 17 00:00:00 2001 From: Emi Simpson Date: Wed, 9 Nov 2022 17:44:35 -0500 Subject: [PATCH] Predict the correct size of full images --- format.proto | 2 ++ index.html | 2 ++ src/Logic.purs | 7 ++++- src/Model.purs | 15 +++-------- src/UI.purs | 50 +++++++++++++++++++++++++----------- src/format.AviaryFormat.purs | 14 ++++++++++ 6 files changed, 62 insertions(+), 28 deletions(-) diff --git a/format.proto b/format.proto index 4ffbce2..e38f736 100644 --- a/format.proto +++ b/format.proto @@ -16,6 +16,8 @@ message Image { string thumb_url = 3; string blurhash = 4; Format format = 5; + uint32 width = 6; + uint32 height = 7; } message Index { diff --git a/index.html b/index.html index 6ccef1e..65583d6 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,8 @@ body { .thumbnail-card { height: 400px; width: 400px; +} +.blurhash-frame { background-size: cover; display: grid; align-items: center; diff --git a/src/Logic.purs b/src/Logic.purs index e0d3b71..29b6e8e 100644 --- a/src/Logic.purs +++ b/src/Logic.purs @@ -23,6 +23,7 @@ import Data.ArrayBuffer.Types (ArrayBuffer) import Data.Filterable (partitionMap) import Data.String (drop) import Parsing (runParserT) +import Protobuf.Internal.Prelude (toInt) import Web.File.Url (createObjectURL) import Web.HTML (window) as HTML import Web.HTML.Window (location) @@ -60,11 +61,15 @@ convertImageFromProtobuf protoimage = let protoimage' = unwrap protoimage in do thumbUrl <- note (IndexMissingField "images[].thumb_url") protoimage'.thumb_url blurhash <- note (IndexMissingField "images[].blurhash") protoimage'.blurhash format <- note (IndexMissingField "images[].format") protoimage'.format + width' <- note (IndexMissingField "images[].width") protoimage'.width + height' <- note (IndexMissingField "images[].height") protoimage'.height let blurhashUrl = decodeBlurhash32 blurhash let key = hush <$> (importKey =<< liftEffect (databuffToBuffer $ unwrap rawKey)) let thumb = Unloaded thumbUrl let full = Unloaded fullUrl - pure { key, blurhashUrl, format, thumb, full } + let width = toInt width' + let height = toInt height' + pure { key, blurhashUrl, format, thumb, full, width, height } convertIndexFromProtobuf :: Format.Index -> Model convertIndexFromProtobuf protoindex = diff --git a/src/Model.purs b/src/Model.purs index c04521f..0e873c5 100644 --- a/src/Model.purs +++ b/src/Model.purs @@ -5,7 +5,7 @@ import Prelude import AviaryFormat.Format (Format(..)) as Format import Crypto.Subtle.Key.Types (CryptoKey) -import Data.Maybe (Maybe(..)) +import Data.Maybe (Maybe) import Effect.Aff (Aff) data GalleryError @@ -45,6 +45,8 @@ type Image = , format :: Format.Format , thumb :: ImageData , full :: ImageData + , width :: Int + , height :: Int } type LoadedGallery = @@ -58,17 +60,6 @@ data Model = GError GalleryError | GLoaded LoadedGallery -imgOrBlurhash :: (Image -> ImageData) -> Image -> Maybe String -imgOrBlurhash idealData image = case idealData image of - ILoaded url -> Just url - _ -> image.blurhashUrl - -thumbOrBlurhash :: Image -> Maybe String -thumbOrBlurhash = imgOrBlurhash _.thumb - -fullOrBlurhash :: Image -> Maybe String -fullOrBlurhash = imgOrBlurhash _.full - instance showGalleryError :: Show GalleryError where show (UnexpectedError message) = "Something that should be impossible just happened! Please open up a new issue " diff --git a/src/UI.purs b/src/UI.purs index 29c9f5b..809dc70 100644 --- a/src/UI.purs +++ b/src/UI.purs @@ -3,12 +3,10 @@ module Aviary.UI where import Prelude import Aviary.Logic (fetchFull, fetchThumb) -import Aviary.Model ( fullOrBlurhash - , GalleryError(..) +import Aviary.Model ( GalleryError(..) , Image , ImageData(..) , Model(..) - , thumbOrBlurhash ) import Control.Parallel (parSequence_) @@ -34,18 +32,21 @@ component initialState = H.mkComponent , eval: H.mkEval $ H.defaultEval { handleAction = update, initialize = Just LoadThumbs } } -backgroundUrl :: forall r i. String -> HP.IProp (style :: String | r) i -backgroundUrl url = HP.style $ "background-image: url(" <> url <> ");" +backgroundUrl :: String -> String +backgroundUrl url = "background-image: url(" <> url <> ");" + +widthHeight :: Int -> Int -> String +widthHeight w h = "width:" <> (show w) <> "px;height:" <> (show h) <> "px;" renderThumbnail :: forall m. Int -> Image -> H.ComponentHTML Event () m renderThumbnail pos image = HH.div ( - [ HP.class_ $ ClassName "thumbnail-card" + [ HP.classes $ ClassName <$> ["thumbnail-card", "blurhash-frame"] , HE.onClick \_ -> Focus pos ] <> - maybe [] (backgroundUrl >>> pure) (image.blurhashUrl) + maybe [] (backgroundUrl >>> HP.style >>> pure) (image.blurhashUrl) ) case image.thumb of Unloaded _ -> @@ -69,16 +70,35 @@ renderThumbnail pos image = renderFocused :: forall m. Image -> H.ComponentHTML Event () m renderFocused image = HH.div - [ HP.id $ "focused-panel" + [ HP.id "focused-panel" , HE.onClick \_ -> Unfocus ] - ( [ HH.img $ - maybe [] (HP.src >>> pure) (fullOrBlurhash image) - ] <> case image.full of - Unloaded _ -> [HH.p_ [HH.text "Loading..."]] - IError e -> [HH.p_ [HH.text $ "Error! " <> (show e)]] - _ -> [] - ) + [ HH.div + [ HP.style + ( widthHeight image.width image.height + <> maybe "" backgroundUrl (image.blurhashUrl) + ) + , HP.class_ $ ClassName "blurhash-frame" + ] + case image.full of + Unloaded _ -> + [ HH.span + [ HP.class_ $ ClassName "loading-msg" + ] + [ HH.text "Loading..." + ] + ] + IError e -> + [ HH.span + [ HP.class_ $ ClassName "error-msg" + ] + [ HH.text $ "Error! " <> (show e) + ] + ] + ILoaded url -> + [ HH.img [HP.src url] + ] + ] setImage :: (Image -> Image) -> Int -> Model -> Model setImage _ _ (GError e) = (GError e) diff --git a/src/format.AviaryFormat.purs b/src/format.AviaryFormat.purs index fac5c13..b02e046 100644 --- a/src/format.AviaryFormat.purs +++ b/src/format.AviaryFormat.purs @@ -19,6 +19,8 @@ type ImageRow = , thumb_url :: Prelude.Maybe String , blurhash :: Prelude.Maybe String , format :: Prelude.Maybe Format + , width :: Prelude.Maybe Prelude.UInt + , height :: Prelude.Maybe Prelude.UInt , __unknown_fields :: Array Prelude.UnknownField ) type ImageR = Record ImageRow @@ -34,6 +36,8 @@ putImage (Image r) = do Prelude.putOptional 3 r.thumb_url Prelude.isDefault Prelude.encodeStringField Prelude.putOptional 4 r.blurhash Prelude.isDefault Prelude.encodeStringField Prelude.putOptional 5 r.format Prelude.isDefault Prelude.putEnumField + Prelude.putOptional 6 r.width Prelude.isDefault Prelude.encodeUint32Field + Prelude.putOptional 7 r.height Prelude.isDefault Prelude.encodeUint32Field Prelude.traverse_ Prelude.putFieldUnknown r.__unknown_fields parseImage :: forall m. Prelude.MonadEffect m => Prelude.MonadRec m => Prelude.ByteLength -> Prelude.ParserT Prelude.DataView m Image @@ -59,6 +63,12 @@ parseImage length = Prelude.label "Image / " $ parseField 5 Prelude.VarInt = Prelude.label "format / " $ do x <- Prelude.parseEnum pure $ Prelude.modify (Prelude.Proxy :: Prelude.Proxy "format") $ \_ -> Prelude.Just x + parseField 6 Prelude.VarInt = Prelude.label "width / " $ do + x <- Prelude.decodeUint32 + pure $ Prelude.modify (Prelude.Proxy :: Prelude.Proxy "width") $ \_ -> Prelude.Just x + parseField 7 Prelude.VarInt = Prelude.label "height / " $ do + x <- Prelude.decodeUint32 + pure $ Prelude.modify (Prelude.Proxy :: Prelude.Proxy "height") $ \_ -> Prelude.Just x parseField fieldNumber wireType = Prelude.parseFieldUnknown fieldNumber wireType defaultImage :: ImageR @@ -68,6 +78,8 @@ defaultImage = , thumb_url: Prelude.Nothing , blurhash: Prelude.Nothing , format: Prelude.Nothing + , width: Prelude.Nothing + , height: Prelude.Nothing , __unknown_fields: [] } @@ -81,6 +93,8 @@ mergeImage (Image l) (Image r) = Image , thumb_url: Prelude.alt l.thumb_url r.thumb_url , blurhash: Prelude.alt l.blurhash r.blurhash , format: Prelude.alt l.format r.format + , width: Prelude.alt l.width r.width + , height: Prelude.alt l.height r.height , __unknown_fields: r.__unknown_fields <> l.__unknown_fields }