[Spike] Rich label rendering idea

playlet-lib/src/components/RichLabel/RichLabel.bs

@@ -0,0 +1,51 @@
+import "pkg:/source/utils/ColorUtils.bs"
+import "pkg:/source/utils/StringUtils.bs"
+import "pkg:/source/utils/Types.bs"
+
+function init()
+    m.richLabelImage = m.top.findNode("RichLabelImage")
+    m.richLabelImage.observeField("loadStatus", "OnRichLabelImageLoadStatus")
+end function
+
+function OnRichTextSet()
+    richText = m.top.richText
+    m.top.text = richText
+
+    args = {
+        "text": richText,
+        "color": ColorUtils.IntToHex(m.top.color),
+        "width": m.top.width,
+        "height": m.top.height,
+        "font": m.top.richFont,
+        "maxLines": m.top.maxLines,
+        "lineSpacing": m.top.lineSpacing
+    }
+    uri = GetTextToImageUrl(args)
+    ?uri
+    m.richLabelImage.uri = uri
+end function
+
+function GetTextToImageUrl(args as object) as string
+    url = "http://192.168.1.182:8081/v1/render?"
+    for each arg in args
+        value = args[arg]
+        if isstr(value)
+            value = value.EncodeUriComponent()
+        end if
+        url += `${arg}=${value}&`
+    end for
+    ' TODO: remove this. Adding a random value to disable caching
+    ' url += `_=${Rnd(1000000)}`
+    return url
+end function
+
+function OnRichLabelImageLoadStatus() as void
+    if not m.richLabelImage.loadStatus = "ready"
+        return
+    end if
+
+    m.richLabelImage.width = m.top.width
+    m.richLabelImage.height = m.richLabelImage.width * (m.richLabelImage.bitmapHeight / m.richLabelImage.bitmapWidth)
+
+    m.top.text = ""
+end function

playlet-lib/src/components/RichLabel/RichLabel.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<component name="RichLabel" extends="Label">
+    <interface>
+        <field id="richText" type="string" onChange="OnRichTextSet" />
+        <field id="richFont" type="string" />
+    </interface>
+    <children>
+        <Poster id="RichLabelImage">
+        </Poster>
+    </children>
+</component>

playlet-lib/src/components/VideoRowCell/VideoRowCell.bs

@@ -7,8 +7,8 @@ function OnContentSet() as void
         return
     end if
 
-    m.top.FindNode("titleLabel").text = content.title
-    m.top.FindNode("authorLabel").text = content.author
+    m.top.FindNode("titleLabel").richText = content.title
+    m.top.FindNode("authorLabel").richText = content.author
 
     if IsVideoUpcoming(content)
         m.top.FindNode("viewCountDateLabel").text = `Premeres in ${TimeUtils.GetFormattedTimeLeft(content.premiereTimestamp)}`

playlet-lib/src/components/VideoRowCell/VideoRowCell.xml

@@ -50,18 +50,20 @@
                 </Rectangle>
             </Poster>
 
-            <Label
+            <RichLabel
                 id="titleLabel"
                 width="350"
                 font="font:SmallestBoldSystemFont"
+                richFont="bold 18px NotoSans"
                 maxLines="2"
                 wrap="true"
             />
-            <Label
+            <RichLabel
                 id="authorLabel"
                 width="350"
                 height="25"
                 font="font:SmallestSystemFont"
+                richFont="18px NotoSans"
             />
             <Label
                 id="viewCountDateLabel"

playlet-lib/src/source/utils/ColorUtils.bs

@@ -16,4 +16,15 @@ namespace ColorUtils
 
         return value
     end function
+
+    function IntToHex(color as integer) as string
+        hexDigits = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"]
+        hexString = "#"
+
+        for i = 7 to 0 step -1
+            hexString = hexString + hexDigits[(color >> (i * 4)) and &hF]
+        end for
+
+        return hexString
+    end function
 end namespace