add media bar modes

components/JFOverhang.bs

@@ -673,7 +673,10 @@ function handleDownKey() as boolean
             mediaBar.visible = true
             mediaBar.hasFocus = true
             mediaBar.setFocus(true)
-            homeRows.visible = false
+            mediaBarMode = m.global.session.user.settings["ui.home.mediaBarMode"] ?? "moonfin"
+            if mediaBarMode <> "banner"
+                homeRows.visible = false
+            end if
             mediaBar.callFunc("refreshCurrentDisplay")
             return true
         end if

components/home/BookshelfItem.bs

@@ -0,0 +1,33 @@
+import "pkg:/source/utils/misc.bs"
+
+sub init()
+    m.itemNumber = m.top.findNode("itemNumber")
+    m.narrowContent = m.top.findNode("narrowContent")
+    m.narrowTitle = m.top.findNode("narrowTitle")
+    m.wideContent = m.top.findNode("wideContent")
+    m.itemPoster = m.top.findNode("itemPoster")
+    m.narrowSpine = m.top.findNode("narrowSpine")
+    m.wideSpine = m.top.findNode("wideSpine")
+end sub
+
+sub contentChanged()
+    data = m.top.itemContent
+    if not isValid(data) then return
+
+    blendColor = data.blendColor <> invalid ? data.blendColor : "0x7A5334FF"
+
+    m.narrowSpine.blendColor = blendColor
+    m.wideSpine.blendColor = blendColor
+
+    isActive = data.isActive <> invalid ? data.isActive : false
+    title = data.title <> invalid ? data.title : ""
+
+    m.itemNumber.text = data.itemNumber <> invalid ? right("0" + data.itemNumber.toStr(), 2) : ""
+
+    m.narrowContent.visible = not isActive
+    m.wideContent.visible = isActive
+
+    m.narrowTitle.text = title
+
+    if isActive then m.itemPoster.uri = data.backdropUrl
+end sub

components/home/BookshelfItem.xml

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<component name="BookshelfItem" extends="Group">
+    <interface>
+        <field id="itemContent" type="node" onChange="contentChanged" />
+    </interface>
+    <children>
+        <Group id="narrowContent">
+            <Poster
+                id="narrowSpine"
+                translation="[0, 60]"
+                width="60"
+                height="740"
+                uri="pkg:/images/bookSpine.png"
+            />
+            <Label id="itemNumber"
+                translation="[14, 75]"
+                width="30"
+                height="30"
+                font="font:TinyBoldSystemFont"
+                text="01"
+                color="0xE5D9C3FF"
+                horizAlign="center"
+                vertAlign="top" />
+            <Label
+                id="narrowTitle"
+                translation="[15, 765]"
+                width="650"
+                height="30"
+                font="font:TinyBoldSystemFont"
+                color="0xE5D9C3FF"
+                rotation="1.5708"
+                text=""
+                horizAlign="center"
+                vertAlign="top"
+            />
+        </Group>
+
+        <Group id="wideContent" visible="false">
+            <Poster
+                id="wideSpine"
+                translation="[30, 0]"
+                width="620"
+                height="850"
+                uri="pkg:/images/bookWide.png"
+            />
+            <Poster
+                id="itemPoster"
+                translation="[98, 0]"
+                width="560"
+                height="800"
+                loadDisplayMode="scaleToZoom"
+                uri=""
+            />
+        </Group>
+    </children>
+</component>

components/home/GalleryItem.bs

@@ -0,0 +1,130 @@
+import "pkg:/source/utils/misc.bs"
+
+sub init()
+    m.itemNumber = m.top.findNode("itemNumber")
+    m.narrowContent = m.top.findNode("narrowContent")
+    m.wideContent = m.top.findNode("wideContent")
+    m.narrowTitle = m.top.findNode("narrowTitle")
+    m.narrowPoster = m.top.findNode("narrowPoster")
+    m.itemBackdrop = m.top.findNode("itemBackdrop")
+    m.itemTitle = m.top.findNode("itemTitle")
+    m.gYear = m.top.findNode("gYear")
+    m.gSep1 = m.top.findNode("gSep1")
+    m.gRating = m.top.findNode("gRating")
+    m.gRatingBg = m.top.findNode("gRatingBg")
+    m.gRatingGroup = m.top.findNode("gRatingGroup")
+    m.gSep2 = m.top.findNode("gSep2")
+    m.gRuntime = m.top.findNode("gRuntime")
+    m.gSep3 = m.top.findNode("gSep3")
+    m.gStar = m.top.findNode("gStar")
+    m.gCommunityRating = m.top.findNode("gCommunityRating")
+    m.gSep4 = m.top.findNode("gSep4")
+    m.gGenres = m.top.findNode("gGenres")
+    m.gOverview = m.top.findNode("gOverview")
+    m.gStarring = m.top.findNode("gStarring")
+    m.galleryMetaRow = m.top.findNode("galleryMetaRow")
+end sub
+
+sub contentChanged()
+    data = m.top.itemContent
+    if not isValid(data) then return
+
+    isActive = data.isActive <> invalid ? data.isActive : false
+    title = data.title <> invalid ? data.title : ""
+
+    m.itemNumber.text = data.itemNumber <> invalid ? right("0" + data.itemNumber.toStr(), 2) : ""
+
+    ' Narrow content
+    m.narrowTitle.text = title
+
+    posterUrl = data.backdropUrl
+    hasPoster = isValid(posterUrl) and posterUrl <> ""
+
+    m.narrowPoster.uri = ""
+    m.narrowPoster.visible = false
+    m.itemBackdrop.uri = ""
+    if isActive and hasPoster
+        m.itemBackdrop.uri = posterUrl
+    else if hasPoster
+        m.narrowPoster.uri = posterUrl
+        m.narrowPoster.visible = true
+    end if
+
+    m.itemTitle.text = title
+
+    hasYear = false
+    hasRating = false
+    hasRuntime = false
+    hasStarRating = false
+
+    year = data.year
+    if year <> invalid and year > 0
+        m.gYear.text = year.toStr()
+        hasYear = true
+    else
+        m.gYear.text = ""
+    end if
+
+    rating = data.rating
+    if rating <> invalid and rating <> ""
+        m.gRating.text = rating
+        hasRating = true
+        labelRect = m.gRating.boundingRect()
+        if isValid(labelRect)
+            m.gRatingBg.width = labelRect.width + 16
+            m.gRatingBg.height = labelRect.height + 4
+            m.gRatingBg.translation = [labelRect.x - 16 / 2, labelRect.y - 4 / 2 - 2]
+            m.gRatingBg.visible = true
+        end if
+    else
+        m.gRating.text = ""
+        m.gRatingBg.visible = false
+    end if
+
+    runtimeDisplay = data.runtimeDisplay
+    itemType = data.itemType
+    if itemType = "Movie" and runtimeDisplay <> "" and runtimeDisplay <> invalid
+        m.gRuntime.text = runtimeDisplay
+        hasRuntime = true
+    else
+        m.gRuntime.text = ""
+    end if
+
+    communityRatingDisplay = data.communityRatingDisplay
+    if isValid(communityRatingDisplay) and communityRatingDisplay <> ""
+        m.gStar.text = "★ "
+        m.gStar.visible = true
+        m.gCommunityRating.text = communityRatingDisplay
+        hasStarRating = true
+    else
+        m.gStar.text = ""
+        m.gStar.visible = false
+        m.gCommunityRating.text = ""
+    end if
+
+    m.gSep1.text = (hasYear and hasRating) ? "  •  " : ""
+    m.gSep1.visible = (hasYear and hasRating)
+    m.gSep2.text = (hasRating) ? "  •  " : ""
+    m.gSep2.visible = hasRating
+
+    m.gSep3.text = (hasRuntime and hasStarRating) ? "  •  " : ""
+    m.gSep3.visible = (hasRuntime and hasStarRating)
+
+    genresDisplay = data.genresDisplay
+    hasGenres = isValid(genresDisplay) and genresDisplay <> ""
+    m.gGenres.text = genresDisplay
+    m.gSep4.text = ((hasYear or hasRating or hasRuntime or hasStarRating) and hasGenres) ? "  •  " : ""
+    m.gSep4.visible = ((hasYear or hasRating or hasRuntime or hasStarRating) and hasGenres)
+
+    overview = data.overview
+    if overview <> invalid and overview <> ""
+        m.gOverview.text = overview
+    else
+        m.gOverview.text = ""
+    end if
+
+    m.gStarring.text = data.starring
+
+    m.wideContent.visible = isActive
+    m.narrowContent.visible = not isActive
+end sub

components/home/GalleryItem.xml

@@ -0,0 +1,137 @@
+<?xml version="1.0" encoding="utf-8"?>
+<component name="GalleryItem" extends="Group">
+    <interface>
+        <field id="itemContent" type="node" onChange="contentChanged" />
+    </interface>
+    <children>
+        <Group id="narrowContent">
+            <Label id="itemNumber"
+                translation="[38, 0]"
+                width="30"
+                height="30"
+                font="font:TinyBoldSystemFont"
+                text="01"
+                color="0xFFFFFFFF"
+                horizAlign="center"
+                vertAlign="top" />
+            <Poster
+                id="narrowPoster"
+                width="110"
+                height="850"
+                translation="[0, 40]"
+                loadDisplayMode="scaleToZoom"
+                uri=""
+                opacity="0.6"
+            />
+            <Rectangle
+                id="itemTintNarrow"
+                translation="[0, 40]"
+                width="110"
+                height="850"
+                color="#F2000000"
+            />
+            <Label
+                id="narrowTitle"
+                translation="[38, 865]"
+                width="800"
+                height="30"
+                font="font:SmallBoldSystemFont"
+                color="0xFFFFFFFF"
+                rotation="1.5708"
+                text=""
+                horizAlign="center"
+                vertAlign="top"
+            />
+        </Group>
+
+        <Group id="wideContent" visible="false">
+            <Poster
+                id="itemBackdrop"
+                translation="[0, 40]"
+                width="1400"
+                height="850"
+                loadDisplayMode="scaleToZoom"
+                uri=""
+                opacity="0.45"
+            />
+            <Rectangle
+                id="itemTintWide"
+                translation="[0, 40]"
+                width="1400"
+                height="850"
+                color="#F2000000"
+            />
+            <Label
+                id="itemTitle"
+                translation="[50, 90]"
+                width="1300"
+                height="70"
+                font="font:ExtraLargeBoldSystemFont"
+                color="0xFFFFFFFF"
+                text=""
+            />
+
+            <LayoutGroup
+                id="galleryMetaRow"
+                translation="[50, 170]"
+                layoutDirection="horiz"
+                itemSpacings="[0]"
+            >
+                <Label id="gYear" font="font:SmallestBoldSystemFont" color="0xFFFFFFFF" text="" />
+                <Label id="gSep1" font="font:SmallestSystemFont" color="0xFFFFFFFF" text="" visible="false" />
+                <Group id="gRatingGroup">
+                    <Poster id="gRatingBg" uri="pkg:/images/hd_focus.9.png" loadDisplayMode="scaleToFit" blendColor="#888888" opacity="1.0" visible="false" />
+                    <Label id="gRating" font="font:SmallestBoldSystemFont" color="0xFFFFFFFF" text="" />
+                </Group>
+                <Label id="gSep2" font="font:SmallestSystemFont" color="0xFFFFFFFF" text="" visible="false" />
+                <Label id="gRuntime" font="font:SmallestBoldSystemFont" color="0xFFFFFFFF" text="" />
+                <Label id="gSep3" font="font:SmallestSystemFont" color="0xFFFFFFFF" text="" visible="false" />
+                <Label id="gStar" font="font:SmallestBoldSystemFont" color="0xFFD700FF" text="" visible="false" />
+                <Label id="gCommunityRating" font="font:SmallestBoldSystemFont" color="0xFFFFFFFF" text="" />
+                <Label id="gSep4" font="font:SmallestSystemFont" color="0xFFFFFFFF" text="" visible="false" />
+                <Label id="gGenres" font="font:SmallestBoldSystemFont" color="0xFFFFFFFF" text="" />
+            </LayoutGroup>
+            <Label
+                id="gOverview"
+                translation="[50, 235]"
+                width="1300"
+                height="500"
+                font="font:MediumSystemFont"
+                color="0xFFFFFFFF"
+                wrap="true"
+                numLines="5"
+                text=""
+            />
+
+            <Rectangle
+                id="gStarringBg"
+                translation="[50, 770]"
+                width="1300"
+                height="80"
+                color="0x00000080"
+            >
+                <Label
+                    translation="[10, 10]"
+                    width="1300"
+                    height="40"
+                    font="font:TinyBoldSystemFont"
+                    color="0xCCCCCCFF"
+                    wrap="true"
+                    numLines="3"
+                    text="STARRING"
+                />
+                <Label
+                    id="gStarring"
+                    translation="[10, 40]"
+                    width="1280"
+                    height="40"
+                    font="font:SmallerSystemFont"
+                    color="0xFFFFFFFF"
+                    wrap="true"
+                    numLines="3"
+                    text=""
+                />
+            </Rectangle>
+        </Group>
+    </children>
+</component>