Skip to content

homeRows and detailsSection style changes #116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
RadicalMuffinMan merged 6 commits into from
Jul 7, 2026
Merged

homeRows and detailsSection style changes #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f0fad0b
update focus image, change wide_poster size so cursor only shows on t…
harleykradovill Jun 17, 2026
5f6fb67
adjust played indicator, progress bar
harleykradovill Jun 17, 2026
35e6edf
adjust item text, add poster masks
harleykradovill Jun 17, 2026
822f917
adjust detailsSection spacing and font sizes
harleykradovill Jun 17, 2026
c796273
add mask for music posters
harleykradovill Jun 17, 2026
d71c228
Apply code review suggestions
harleykradovill Jul 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 29 additions & 29 deletions components/home/Home.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,56 +11,56 @@
<Rectangle id="backdropTint" width="1920" height="1080" color="#F2000000" opacity="1.0" />

<!-- Top details section for focused item -->
<Group id="detailsSection" translation="[100, 180]">
<ScrollingText id="itemTitle" translation="[0, 0]" font="font:LargeBoldSystemFont" maxWidth="1720" repeatCount="-1" />
<Group id="detailsSection" translation="[111, 180]">
<ScrollingText id="itemTitle" translation="[0, 0]" font="font:LargeBoldSystemFont" maxWidth="1703" repeatCount="-1" />

<!-- Movie metadata row: Year • Rating • Runtime • ★ Community • 🍅 Critic -->
<LayoutGroup id="movieMetadataRow" translation="[0, 70]" layoutDirection="horiz" horizAlignment="left" vertAlignment="center" itemSpacings="[15]">
<Text id="releaseYear" font="font:MediumSystemFont" color="#CCCCCC" />
<Text id="dot1" font="font:MediumSystemFont" text="•" color="#CCCCCC" visible="false" />
<Text id="officialRating" font="font:MediumBoldSystemFont" color="#CCCCCC" />
<Text id="dot2" font="font:MediumSystemFont" text="•" color="#CCCCCC" visible="false" />
<Text id="runtime" font="font:MediumSystemFont" color="#CCCCCC" />
<Text id="dot3" font="font:MediumSystemFont" text="•" color="#CCCCCC" visible="false" />
<Text id="releaseYear" font="font:SmallestBoldSystemFont" color="#CCCCCC" />
<Text id="dot1" font="font:SmallestSystemFont" text="•" color="#CCCCCC" visible="false" />
<Text id="officialRating" font="font:SmallestBoldSystemFont" color="#CCCCCC" />
<Text id="dot2" font="font:SmallestSystemFont" text="•" color="#CCCCCC" visible="false" />
<Text id="runtime" font="font:SmallestBoldSystemFont" color="#CCCCCC" />
<Text id="dot3" font="font:SmallestSystemFont" text="•" color="#CCCCCC" visible="false" />
<LayoutGroup id="communityRatingGroup" layoutDirection="horiz" itemSpacings="[5]" visible="false">
<Poster id="star" uri="pkg:/images/sharp_star_white_18dp.png" height="28" width="28" blendColor="#FFD700" />
<Text id="communityRating" font="font:MediumSystemFont" color="#CCCCCC" />
<Text id="communityRating" font="font:SmallestBoldSystemFont" color="#CCCCCC" />
</LayoutGroup>
<Text id="dot4" font="font:MediumSystemFont" text="•" color="#CCCCCC" visible="false" />
<Text id="dot4" font="font:SmallestSystemFont" text="•" color="#CCCCCC" visible="false" />
<LayoutGroup id="criticRatingGroup" layoutDirection="horiz" itemSpacings="[5]" visible="false">
<Poster id="criticRatingIcon" height="28" width="28" />
<Text id="criticRatingLabel" font="font:MediumSystemFont" color="#CCCCCC" />
<Text id="criticRatingLabel" font="font:SmallestBoldSystemFont" color="#CCCCCC" />
</LayoutGroup>
<RatingsRow id="moviePluginRatings" visible="false" labelFont="font:MediumSystemFont" ratingSpacing="14" />
<RatingsRow id="moviePluginRatings" visible="false" labelFont="font:SmallestBoldSystemFont" ratingSpacing="14" />
</LayoutGroup>

<!-- TV Show metadata row: Year • Rating • Runtime • ★ Community • Status -->
<LayoutGroup id="showMetadataRow" translation="[0, 70]" layoutDirection="horiz" horizAlignment="left" vertAlignment="center" itemSpacings="[15]">
<Text id="showReleaseYear" font="font:MediumSystemFont" color="#CCCCCC" />
<Text id="showDot1" font="font:MediumSystemFont" text="•" color="#CCCCCC" visible="false" />
<Text id="showOfficialRating" font="font:MediumBoldSystemFont" color="#CCCCCC" />
<Text id="showDot2" font="font:MediumSystemFont" text="•" color="#CCCCCC" visible="false" />
<Text id="showRuntime" font="font:MediumSystemFont" color="#CCCCCC" />
<Text id="showDot3" font="font:MediumSystemFont" text="•" color="#CCCCCC" visible="false" />
<Text id="showReleaseYear" font="font:SmallestBoldSystemFont" color="#CCCCCC" />
<Text id="showDot1" font="font:SmallestSystemFont" text="•" color="#CCCCCC" visible="false" />
<Text id="showOfficialRating" font="font:SmallestBoldSystemFont" color="#CCCCCC" />
<Text id="showDot2" font="font:SmallestSystemFont" text="•" color="#CCCCCC" visible="false" />
<Text id="showRuntime" font="font:SmallestBoldSystemFont" color="#CCCCCC" />
<Text id="showDot3" font="font:SmallestSystemFont" text="•" color="#CCCCCC" visible="false" />
<LayoutGroup id="showCommunityRatingGroup" layoutDirection="horiz" itemSpacings="[5]" visible="false">
<Poster id="showStar" uri="pkg:/images/sharp_star_white_18dp.png" height="28" width="28" blendColor="#FFD700" />
<Text id="showCommunityRating" font="font:MediumSystemFont" color="#CCCCCC" />
<Text id="showCommunityRating" font="font:SmallestBoldSystemFont" color="#CCCCCC" />
</LayoutGroup>
<Text id="showDot4" font="font:MediumSystemFont" text="•" color="#CCCCCC" visible="false" />
<Text id="showStatus" font="font:MediumSystemFont" color="#CCCCCC" />
<RatingsRow id="showPluginRatings" visible="false" labelFont="font:MediumSystemFont" ratingSpacing="14" />
<Text id="showDot4" font="font:SmallestSystemFont" text="•" color="#CCCCCC" visible="false" />
<Text id="showStatus" font="font:SmallestBoldSystemFont" color="#CCCCCC" />
<RatingsRow id="showPluginRatings" visible="false" labelFont="font:SmallestBoldSystemFont" ratingSpacing="14" />
</LayoutGroup>

<!-- Episode metadata row: Air Date • S##E## • Runtime -->
<LayoutGroup id="episodeMetadataRow" translation="[0, 70]" layoutDirection="horiz" horizAlignment="left" vertAlignment="center" itemSpacings="[15]">
<Text id="episodeAirDate" font="font:MediumSystemFont" color="#CCCCCC" />
<Text id="episodeDot1" font="font:MediumSystemFont" text="•" color="#CCCCCC" visible="false" />
<Text id="episodeNumber" font="font:MediumSystemFont" color="#CCCCCC" />
<Text id="episodeDot2" font="font:MediumSystemFont" text="•" color="#CCCCCC" visible="false" />
<Text id="episodeRuntime" font="font:MediumSystemFont" color="#CCCCCC" />
<Text id="episodeAirDate" font="font:SmallestBoldSystemFont" color="#CCCCCC" />
<Text id="episodeDot1" font="font:SmallestSystemFont" text="•" color="#CCCCCC" visible="false" />
<Text id="episodeNumber" font="font:SmallestBoldSystemFont" color="#CCCCCC" />
<Text id="episodeDot2" font="font:SmallestSystemFont" text="•" color="#CCCCCC" visible="false" />
<Text id="episodeRuntime" font="font:SmallestBoldSystemFont" color="#CCCCCC" />
</LayoutGroup>

<Text id="itemOverview" translation="[0, 113]" font="font:SmallSystemFont" width="1720" wrap="true" maxLines="4" lineSpacing="-5" />
<Text id="itemOverview" translation="[0, 95]" font="font:SmallestSystemFont" width="1703" wrap="true" maxLines="4" lineSpacing="6" />
</Group>

<!-- Media carousel bar -->
Expand All @@ -78,7 +78,7 @@
itemComponentName="HomeItem"
numRows="2"
rowLabelOffset="[[0,20]]"
focusBitmapUri="pkg:/images/hd_focus.9.png" />
focusBitmapUri="pkg:/images/posterFocus.9.png" />
<OptionsSlider id="options" />

<Animation id="backdropFadeIn" duration="0.5" repeat="false" easeFunction="inOutQuad">
Expand Down
21 changes: 19 additions & 2 deletions components/home/HomeItem.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ sub findNodes()
m.showProgressBarAnimation = m.top.findNode("showProgressBar")
m.showProgressBarField = m.top.findNode("showProgressBarField")
m.scaleGroup = m.top.findNode("scaleGroup")
m.posterMask = m.top.findNode("posterMask")
end sub

sub initItemText()
Expand Down Expand Up @@ -102,7 +103,7 @@ sub itemContentChanged()

' Reposition played indicator to top-right corner of poster
if isValid(m.playedIndicator)
m.playedIndicator.translation = [itemData.imageWidth - 42, 3]
m.playedIndicator.translation = [itemData.imageWidth - 50, 10]
end if

m.itemText.maxWidth = itemData.imageWidth
Expand Down Expand Up @@ -368,7 +369,7 @@ end sub
sub drawProgressBar(itemData)
if not isValid(itemData.LookupCI("imageWidth")) then return

m.itemProgressBackground.width = itemData.LookupCI("imageWidth")
m.showProgressBarField.keyValue = [0, m.itemProgressBackground.width * (itemData.PlayedPercentage / 100)]
m.itemProgressBackground.visible = true
m.showProgressBarField.keyValue = [0, m.itemPoster.width * (itemData.PlayedPercentage / 100)]
m.showProgressBarAnimation.control = AnimationControl.START
Expand Down Expand Up @@ -481,6 +482,22 @@ sub onPosterLoadStatusChanged()
if m.itemPoster.loadStatus = PosterLoadStatus.READY and m.itemPoster.uri <> string.EMPTY
m.backdrop.visible = false
m.itemIcon.visible = false

posterW = m.itemPoster.width

if posterW = 180
m.posterMask.maskUri = "pkg:/images/posterVertMask.png"
m.posterMask.maskSize = [180, 270]
else if posterW = 464
m.posterMask.maskUri = "pkg:/images/posterWideMask.png"
m.posterMask.maskSize = [464, 270]
else if posterW = 261
m.posterMask.maskUri = "pkg:/images/posterSquareMask.png"
m.posterMask.maskSize = [261, 270]
else
m.posterMask.maskUri = ""
m.posterMask.maskSize = [0, 0]
end if
else
m.backdrop.visible = true
m.itemIcon.visible = true
Expand Down
12 changes: 8 additions & 4 deletions components/home/HomeItem.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,18 @@
<Group id="scaleGroup">
<Rectangle id="backdrop" width="180" height="270" translation="[0,0]" />
<Poster id="itemIcon" width="80" height="80" translation="[50,95]" loadDisplayMode="scaleToFit" />
<Poster id="itemPoster" width="180" height="270" translation="[0,0]" loadDisplayMode="scaleToZoom" />
<PlayedCheckmark id="playedIndicator" translation="[138, 3]" />

<Rectangle id="progressBackground" visible="false" width="180" height="6" translation="[0,264]">
<MaskGroup id="posterMask">
<Poster id="itemPoster" width="180" height="270" translation="[0,0]" loadDisplayMode="scaleToZoom" />
</MaskGroup>

<PlayedCheckmark id="playedIndicator" translation="[130, 10]" />

<Rectangle id="progressBackground" visible="false" width="150" height="6" translation="[15,245]">
<Rectangle id="progress" width="0" height="6" />
</Rectangle>

<ScrollingText id="itemText" horizAlign="center" vertAlign="center" font="font:SmallBoldSystemFont" height="64" maxWidth="172" translation="[8,299]" repeatCount="0" />
<ScrollingText id="itemText" horizAlign="center" vertAlign="center" font="font:SmallSystemFont" height="64" maxWidth="172" translation="[2,275]" repeatCount="0" />
</Group>

<Animation id="showProgressBar" duration="0.5" repeat="false" easeFunction="linear">
Expand Down
2 changes: 1 addition & 1 deletion components/home/HomeRows.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ sub updateSize()
m.top.itemSize = [1703, itemHeight]

' spacing between rows (increased to prevent bottom text from being cut off)
m.top.itemSpacing = [0, 110]
m.top.itemSpacing = [0, 60]

' spacing between items in a row
m.top.rowItemSpacing = [20, 0]
Expand Down
Binary file added images/posterFocus.9.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/posterSquareMask.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/posterVertMask.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/posterWideMask.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed images/postermask.png
View file
Open in desktop
Binary file not shown.
4 changes: 2 additions & 2 deletions source/constants/HomeRowItemSizes.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
' @fileoverview Constants for rowItemSize on the home view

namespace homeRowItemSizes
const WIDE_POSTER = [464, 335]
const WIDE_POSTER = [464, 270]
const MOVIE_POSTER = [180, 270]
const MUSIC_ALBUM = [261, 335]
const MUSIC_ALBUM = [261, 270]
end namespace