Blurhashes

components/ItemGrid/GridItem.bs

@@ -37,7 +37,11 @@ sub itemContentChanged()
 
     ' Set Random background colors from pallet
     posterBackgrounds = m.global.constants.poster_bg_pallet
-    m.backdrop.blendColor = posterBackgrounds[rnd(posterBackgrounds.count()) - 1]
+    if isValidAndNotEmpty(m.top.itemContent.posterBlurhashUrl):
+        m.backdrop.uri = m.top.itemContent.posterBlurhashUrl
+    else
+        m.backdrop.blendColor = posterBackgrounds[rnd(posterBackgrounds.count()) - 1]
+    end if
 
     itemData = m.top.itemContent
 

components/ItemGrid/GridItemSmall.bs

@@ -1,5 +1,6 @@
 import "pkg:/source/utils/misc.bs"
 import "pkg:/source/utils/config.bs"
+import "pkg:/source/utils/fakeBlurhash.bs"
 
 sub init()
     m.itemPoster = m.top.findNode("itemPoster")
@@ -23,7 +24,11 @@ sub init()
 end sub
 
 sub itemContentChanged()
-    m.backdrop.blendColor = "#101010"
+    if isValidAndNotEmpty(m.top.itemContent.posterBlurhashUrl):
+        m.backdrop.uri = m.top.itemContent.posterBlurhashUrl
+    else
+        m.backdrop.blendColor = "#101010"
+    end if
 
     m.title.visible = false
 

components/data/ChannelData.bs

@@ -1,6 +1,7 @@
 import "pkg:/source/api/Image.bs"
 import "pkg:/source/api/baserequest.bs"
 import "pkg:/source/utils/config.bs"
+import "pkg:/source/utils/fakeBlurhash.bs"
 
 sub setFields()
     json = m.top.json
@@ -20,5 +21,13 @@ sub setPoster()
 
         imgParams = { "maxHeight": 440, "maxWidth": 295, "Tag": m.top.json.ImageTags.Primary }
         m.top.posterURL = ImageURL(m.top.json.id, "Primary", imgParams)
+        if isValidAndNotEmpty(m.top.json.ImageBlurHashes.Primary)
+            blurhash = m.top.json.ImageBlurHashes.Primary[m.top.json.ImageTags.Primary]
+            if get_user_setting("ui.design.renderblurhashes") = "true" and isValidAndNotEmpty(blurhash)
+                timer = CreateObject("roTimeSpan")
+                m.top.posterBlurHashUrl = renderFakeBlurhash(blurhash, imgParams.maxWidth, imgParams.maxHeight)
+                print "Took " + Str(timer.totalMilliseconds()) + " milliseconds to render a blurhash in ChannelData."
+            end if
+        end if
     end if
 end sub

components/data/CollectionData.bs

@@ -1,6 +1,8 @@
 import "pkg:/source/api/Image.bs"
 import "pkg:/source/api/baserequest.bs"
 import "pkg:/source/utils/config.bs"
+import "pkg:/source/utils/fakeBlurhash.bs"
+
 
 sub setFields()
     json = m.top.json
@@ -24,6 +26,14 @@ sub setPoster()
         if m.top.json.ImageTags.Primary <> invalid
             imgParams = { "maxHeight": 440, "maxWidth": 295, "Tag": m.top.json.ImageTags.Primary }
             m.top.posterURL = ImageURL(m.top.json.id, "Primary", imgParams)
+            if isValidAndNotEmpty(m.top.json.ImageBlurHashes.Primary)
+                blurhash = m.top.json.ImageBlurHashes.Primary[m.top.json.ImageTags.Primary]
+                if get_user_setting("ui.design.renderblurhashes") = "true" and isValidAndNotEmpty(blurhash)
+                    timer = CreateObject("roTimeSpan")
+                    m.top.posterBlurHashUrl = renderFakeBlurhash(blurhash, imgParams.maxWidth, imgParams.maxHeight)
+                    print "Took " + Str(timer.totalMilliseconds()) + " milliseconds to render a blurhash in CollectionData."
+                end if
+            end if
         else if m.top.json.BackdropImageTags <> invalid
             imgParams = { "maxHeight": 440, "Tag": m.top.json.BackdropImageTags[0] }
             m.top.posterURL = ImageURL(m.top.json.id, "Backdrop", imgParams)

components/data/FolderData.bs

@@ -1,6 +1,7 @@
 import "pkg:/source/api/Image.bs"
 import "pkg:/source/api/baserequest.bs"
 import "pkg:/source/utils/config.bs"
+import "pkg:/source/utils/fakeBlurhash.bs"
 
 sub setFields()
     json = m.top.json
@@ -27,6 +28,14 @@ sub setPoster()
     else if m.top.json.ImageTags.Primary <> invalid
         imgParams = { "maxHeight": 440, "maxWidth": 295, "Tag": m.top.json.ImageTags.Primary }
         m.top.posterURL = ImageURL(m.top.json.id, "Primary", imgParams)
+        if isValidAndNotEmpty(m.top.json.ImageBlurHashes.Primary)
+            blurhash = m.top.json.ImageBlurHashes.Primary[m.top.json.ImageTags.Primary]
+            if get_user_setting("ui.design.renderblurhashes") = "true" and isValidAndNotEmpty(blurhash)
+                timer = CreateObject("roTimeSpan")
+                m.top.posterBlurHashUrl = renderFakeBlurhash(blurhash, imgParams.maxWidth, imgParams.maxHeight)
+                print "Took " + Str(timer.totalMilliseconds()) + " milliseconds to render a blurhash in FolderData."
+            end if
+        end if
     end if
 end sub
 

components/data/JFContentItem.xml

@@ -4,6 +4,7 @@
         <field id="favorite" type="boolean" />
         <field id="watched" type="boolean" />
         <field id="posterUrl" type="string" />
+        <field id="posterBlurhashUrl" type="string" />
         <field id="backdropUrl" type="string" />
         <field id="SubTitle" type="string" value="" />
         <field id="iconUrl" type="string" value="" />

components/data/MovieData.bs

@@ -2,6 +2,7 @@ import "pkg:/source/api/Image.bs"
 import "pkg:/source/api/baserequest.bs"
 import "pkg:/source/utils/config.bs"
 import "pkg:/source/utils/misc.bs"
+import "pkg:/source/utils/fakeBlurhash.bs"
 
 sub setFields()
     json = m.top.json
@@ -47,6 +48,14 @@ sub setPoster()
             if isValid(m.top.json.ImageTags) and isValid(m.top.json.ImageTags.Primary)
                 imgParams = { "maxHeight": 440, "maxWidth": 295, "Tag": m.top.json.ImageTags.Primary }
                 m.top.posterURL = ImageURL(m.top.json.id, "Primary", imgParams)
+                if isValidAndNotEmpty(m.top.json.ImageBlurHashes.Primary)
+                    blurhash = m.top.json.ImageBlurHashes.Primary[m.top.json.ImageTags.Primary]
+                    if get_user_setting("ui.design.renderblurhashes") = "true" and isValidAndNotEmpty(blurhash)
+                        timer = CreateObject("roTimeSpan")
+                        m.top.posterBlurHashUrl = renderFakeBlurhash(blurhash, imgParams.maxWidth, imgParams.maxHeight)
+                        print "Took " + Str(timer.totalMilliseconds()) + " milliseconds to render a blurhash in MoviesData."
+                    end if
+                end if
             else if isValid(m.top.json.BackdropImageTags) and isValid(m.top.json.BackdropImageTags[0])
                 imgParams = { "maxHeight": 440, "Tag": m.top.json.BackdropImageTags[0] }
                 m.top.posterURL = ImageURL(m.top.json.id, "Backdrop", imgParams)

components/data/MusicAlbumSongListData.bs

@@ -1,6 +1,7 @@
 import "pkg:/source/api/Image.bs"
 import "pkg:/source/api/baserequest.bs"
 import "pkg:/source/utils/config.bs"
+import "pkg:/source/utils/fakeBlurhash.bs"
 
 sub setFields()
     json = m.top.json
@@ -18,6 +19,14 @@ sub setPoster()
         if m.top.json.ImageTags.Primary <> invalid
             imgParams = { "maxHeight": 440, "maxWidth": 295 }
             m.top.posterURL = ImageURL(m.top.json.id, "Primary", imgParams)
+            if isValidAndNotEmpty(m.top.json.ImageBlurHashes.Primary)
+                blurhash = m.top.json.ImageBlurHashes.Primary[m.top.json.ImageTags.Primary]
+                if get_user_setting("ui.design.renderblurhashes") = "true" and isValidAndNotEmpty(blurhash)
+                    timer = CreateObject("roTimeSpan")
+                    m.top.posterBlurHashUrl = renderFakeBlurhash(blurhash, imgParams.maxWidth, imgParams.maxHeight)
+                    print "Took " + Str(timer.totalMilliseconds()) + " milliseconds to render a blurhash in MusicAlbumSongListData."
+                end if
+            end if
         else if m.top.json.BackdropImageTags[0] <> invalid
             imgParams = { "maxHeight": 440 }
             m.top.posterURL = ImageURL(m.top.json.id, "Backdrop", imgParams)

components/data/MusicArtistData.bs

@@ -1,6 +1,7 @@
 import "pkg:/source/api/Image.bs"
 import "pkg:/source/api/baserequest.bs"
 import "pkg:/source/utils/config.bs"
+import "pkg:/source/utils/fakeBlurhash.bs"
 
 sub setFields()
     json = m.top.json
@@ -21,6 +22,14 @@ sub setPoster()
         if m.top.json.ImageTags.Primary <> invalid
             imgParams = { "maxHeight": 440, "maxWidth": 440 }
             m.top.posterURL = ImageURL(m.top.json.id, "Primary", imgParams)
+            if isValidAndNotEmpty(m.top.json.ImageBlurHashes.Primary)
+                blurhash = m.top.json.ImageBlurHashes.Primary[m.top.json.ImageTags.Primary]
+                if get_user_setting("ui.design.renderblurhashes") = "true" and isValidAndNotEmpty(blurhash)
+                    timer = CreateObject("roTimeSpan")
+                    m.top.posterBlurHashUrl = renderFakeBlurhash(blurhash, imgParams.maxWidth, imgParams.maxHeight)
+                    print "Took " + Str(timer.totalMilliseconds()) + " milliseconds to render a blurhash in MusicArtistData."
+                end if
+            end if
         else if m.top.json.BackdropImageTags[0] <> invalid
             imgParams = { "maxHeight": 440 }
             m.top.posterURL = ImageURL(m.top.json.id, "Backdrop", imgParams)

components/data/PersonData.bs

@@ -1,6 +1,7 @@
 import "pkg:/source/api/Image.bs"
 import "pkg:/source/api/baserequest.bs"
 import "pkg:/source/utils/config.bs"
+import "pkg:/source/utils/fakeBlurhash.bs"
 
 sub setFields()
     json = m.top.json
@@ -18,6 +19,14 @@ sub setPoster()
         if m.top.json.ImageTags.Primary <> invalid
             imgParams = { "maxHeight": 440, "maxWidth": 295, "Tag": m.top.json.ImageTags.Primary }
             m.top.posterURL = ImageURL(m.top.json.id, "Primary", imgParams)
+            if isValidAndNotEmpty(m.top.json.ImageBlurHashes.Primary)
+                blurhash = m.top.json.ImageBlurHashes.Primary[m.top.json.ImageTags.Primary]
+                if get_user_setting("ui.design.renderblurhashes") = "true" and isValidAndNotEmpty(blurhash)
+                    timer = CreateObject("roTimeSpan")
+                    m.top.posterBlurHashUrl = renderFakeBlurhash(blurhash, imgParams.maxWidth, imgParams.maxHeight)
+                    print "Took " + Str(timer.totalMilliseconds()) + " milliseconds to render a blurhash in PersonData."
+                end if
+            end if
         else if m.top.json.BackdropImageTags[0] <> invalid
             imgParams = { "maxHeight": 440, "Tag": m.top.json.BackdropImageTags[0] }
             m.top.posterURL = ImageURL(m.top.json.id, "Backdrop", imgParams)

components/data/PhotoData.bs

@@ -1,6 +1,7 @@
 import "pkg:/source/api/Image.bs"
 import "pkg:/source/api/baserequest.bs"
 import "pkg:/source/utils/config.bs"
+import "pkg:/source/utils/fakeBlurhash.bs"
 
 sub setFields()
     json = m.top.json
@@ -20,6 +21,14 @@ sub setPoster()
         if m.top.json.ImageTags.Primary <> invalid
             imgParams = { "maxHeight": 440, "maxWidth": 295, "Tag": m.top.json.ImageTags.Primary }
             m.top.posterURL = ImageURL(m.top.json.id, "Primary", imgParams)
+            if isValidAndNotEmpty(m.top.json.ImageBlurHashes.Primary)
+                blurhash = m.top.json.ImageBlurHashes.Primary[m.top.json.ImageTags.Primary]
+                if get_user_setting("ui.design.renderblurhashes") = "true" and isValidAndNotEmpty(blurhash)
+                    timer = CreateObject("roTimeSpan")
+                    m.top.posterBlurHashUrl = renderFakeBlurhash(blurhash, imgParams.maxWidth, imgParams.maxHeight)
+                    print "Took " + Str(timer.totalMilliseconds()) + " milliseconds to render a blurhash in PhotoData."
+                end if
+            end if
         else if m.top.json.BackdropImageTags[0] <> invalid
             imgParams = { "maxHeight": 440, "Tag": m.top.json.BackdropImageTags[0] }
             m.top.posterURL = ImageURL(m.top.json.id, "Backdrop", imgParams)

components/data/ScheduleProgramData.bs

@@ -1,6 +1,7 @@
 import "pkg:/source/api/Image.bs"
 import "pkg:/source/api/baserequest.bs"
 import "pkg:/source/utils/config.bs"
+import "pkg:/source/utils/fakeBlurhash.bs"
 
 sub setFields()
     json = m.top.json
@@ -42,6 +43,14 @@ sub setPoster()
         if m.top.json.ImageTags <> invalid and m.top.json.ImageTags.Thumb <> invalid
             imgParams = { "maxHeight": 500, "maxWidth": 500, "Tag": m.top.json.ImageTags.Thumb }
             m.top.posterURL = ImageURL(m.top.json.id, "Thumb", imgParams)
+            if isValidAndNotEmpty(m.top.json.ImageBlurHashes.Primary)
+                blurhash = m.top.json.ImageBlurHashes.Primary[m.top.json.ImageTags.Primary]
+                if get_user_setting("ui.design.renderblurhashes") = "true" and isValidAndNotEmpty(blurhash)
+                    timer = CreateObject("roTimeSpan")
+                    m.top.posterBlurHashUrl = renderFakeBlurhash(blurhash, imgParams.maxWidth, imgParams.maxHeight)
+                    print "Took " + Str(timer.totalMilliseconds()) + " milliseconds to render a blurhash in ScheduleProgramData."
+                end if
+            end if
         end if
     end if
 end sub

components/data/SeriesData.bs

@@ -1,6 +1,7 @@
 import "pkg:/source/api/Image.bs"
 import "pkg:/source/api/baserequest.bs"
 import "pkg:/source/utils/config.bs"
+import "pkg:/source/utils/fakeBlurhash.bs"
 
 sub setFields()
     json = m.top.json
@@ -38,6 +39,14 @@ sub setPoster()
 
             imgParams = { "maxHeight": 440, "maxWidth": 295, "Tag": m.top.json.ImageTags.Primary }
             m.top.posterURL = ImageURL(m.top.json.id, "Primary", imgParams)
+            if isValidAndNotEmpty(m.top.json.ImageBlurHashes.Primary)
+                blurhash = m.top.json.ImageBlurHashes.Primary[m.top.json.ImageTags.Primary]
+                if get_user_setting("ui.design.renderblurhashes") = "true" and isValidAndNotEmpty(blurhash)
+                    timer = CreateObject("roTimeSpan")
+                    m.top.posterBlurHashUrl = renderFakeBlurhash(blurhash, imgParams.maxWidth, imgParams.maxHeight)
+                    print "Took " + Str(timer.totalMilliseconds()) + " milliseconds to render a blurhash in SeriesData."
+                end if
+            end if
         else if m.top.json.BackdropImageTags <> invalid
             imgParams = { "maxHeight": 440, "Tag": m.top.json.BackdropImageTags[0] }
             m.top.posterURL = ImageURL(m.top.json.id, "Backdrop", imgParams)

components/data/TVEpisode.bs

@@ -1,6 +1,7 @@
 import "pkg:/source/api/Image.bs"
 import "pkg:/source/api/baserequest.bs"
 import "pkg:/source/utils/config.bs"
+import "pkg:/source/utils/fakeBlurhash.bs"
 
 sub setFields()
     json = m.top.json
@@ -21,5 +22,13 @@ sub setPoster()
     else if m.top.json.ImageTags.Primary <> invalid
         imgParams = { "maxHeight": 440, "maxWidth": 295 }
         m.top.posterURL = ImageURL(m.top.json.id, "Primary", imgParams)
+        if isValidAndNotEmpty(m.top.json.ImageBlurHashes.Primary)
+            blurhash = m.top.json.ImageBlurHashes.Primary[m.top.json.ImageTags.Primary]
+            if get_user_setting("ui.design.renderblurhashes") = "true" and isValidAndNotEmpty(blurhash)
+                timer = CreateObject("roTimeSpan")
+                m.top.posterBlurHashUrl = renderFakeBlurhash(blurhash, imgParams.maxWidth, imgParams.maxHeight)
+                print "Took " + Str(timer.totalMilliseconds()) + " milliseconds to render a blurhash in TVEpisode.bs."
+            end if
+        end if
     end if
 end sub

components/data/VideoData.bs

@@ -1,6 +1,7 @@
 import "pkg:/source/api/Image.bs"
 import "pkg:/source/api/baserequest.bs"
 import "pkg:/source/utils/config.bs"
+import "pkg:/source/utils/fakeBlurhash.bs"
 
 sub setFields()
     json = m.top.json
@@ -21,5 +22,13 @@ sub setPoster()
     else if m.top.json.ImageTags.Primary <> invalid
         imgParams = { "maxHeight": 440, "maxWidth": 295, "Tag": m.top.json.ImageTags.Primary }
         m.top.posterURL = ImageURL(m.top.json.id, "Primary", imgParams)
+        if isValidAndNotEmpty(m.top.json.ImageBlurHashes.Primary)
+            blurhash = m.top.json.ImageBlurHashes.Primary[m.top.json.ImageTags.Primary]
+            if get_user_setting("ui.design.renderblurhashes") = "true" and isValidAndNotEmpty(blurhash)
+                timer = CreateObject("roTimeSpan")
+                m.top.posterBlurHashUrl = renderFakeBlurhash(blurhash, imgParams.maxWidth, imgParams.maxHeight)
+                print "Took " + Str(timer.totalMilliseconds()) + " milliseconds to render a blurhash in VideoData."
+            end if
+        end if
     end if
 end sub

settings/settings.json

@@ -218,6 +218,13 @@
                         "type": "integer",
                         "default": "365"
                     },
+                    {
+                        "title": "Render blurhashes",
+                        "description": "Use an EXPERIMENTAL algorithm to render image blurhashes. This may slow down page loading and cause the app the crash.",
+                        "settingName": "ui.design.renderblurhashes",
+                        "type": "bool",
+                        "default": "false"
+                    },
                     {
                         "title": "Show What's New Popup",
                         "description": "Show What's New popup when Jellyfin is updated to a new version.",