New position for arrow buttons in Spotlight #951
Replies: 2 comments 21 replies
-
The arrows will then overlap with the sidemenu when set to Never, Library, or Media. The one on the right could also be difficult to see depending on the fanart on display. |
Beta Was this translation helpful? Give feedback.
-
Hey guys! So I know I said I'm giving up on this idea (I may have lied haha 😂) but I think I have a cool solution to this! I was inspired by the navigation in the 'Fullscreen Widget' in Arctic Horizon 2 (damn I wish I could meet the guy that keeps making these awesome skins!). The gist of it is removing the two arrow buttons and having the leftmost button (play button) and the rightmost button (context menu button) have a onleft and onright condition along with their default onclick function to move the Spotlight carousel. So for the last couple of days I tried editing the Actions, Expressions and Spotlight xml files and I think I got it to work! (super janky code though, needs a lot of cleanup) I have tried every scenario I could possibly think of (Sidemenu set to Never, Always and Topbar along with Menu Left set to None and Options) and nothing seems to break yet (famous last words). As a visual hint, I have also used 2 small chevron icons (similar to the designs I posted previously but not as buttons, just indicators) that appear when either the play button (left chevron appears) or context menu button (right chevron appears) is highlighted to let the users know that these buttons have an additional function apart from their default onlick one. I should have probably added a fade animation to make it look sweeter but it's alright for the time being. Here's how the navigation works: Clicking right from the sidemenu (or down from Topbar) will take you the Spotlight buttons Once the Play button is focused, you can left click to move the carousel one item behind. Similarly having the rightmost button (context menu button) highlighted and right clicking will move the carousel forward. Clicking back will take you the sidemenu for both cases (minimzed never and always). In case of Topbar clicking up will do the same. This doesn't affect the navigation in any other part of the skin (using a separate Action for the Spotlight buttons). Like having Menu Left set to Options or None will still apply to all your widgets and other elements. But when the Spotlight buttons are in focus, only back will take you to the sidemenu (i.e. there is no 'wrap' function or a 'bump' animation for obvious reasons) But once the sidemenu is in focus it'll respect your Menu Left skin setting (Options or None) The biggest breakthrough was getting the auto trailer to work properly. A few days ago, Jurial pushed a commit that made all of this possible! The AutoTrailer OnClick Action with the pos param is what keeps everything running smoothly! I am standing on the shoulder of a true giant! While a trailer is playing you can move the focus from any of the spotlight buttons by clicking left or right to stop the playback. Clicking down to move into the widgets will also also stop trailer playback. I think all widgets refreshing when a video starts/stops playback maybe a Kodi limitation and not something that can be controlled in the skin. I have tried to be as comprehensive as possible so I apologize for the extremely long post. Let me know what you guys think! |
Beta Was this translation helpful? Give feedback.
-
Skin section
Widgets
Feature description
I was thinking if we could have the arrow buttons from the bottom of the Info line to beside the fanart of the movie displayed in the Spotlight. Something similar to what other streaming platforms use?
Maybe even use
usealttexture
to toggle between the chevron textures (smaller for default and larger/brighter for selected) and skip the button highlight overlay?I have attached a few mockups below. Let me know what you think!
Why is this feature needed? Please justify and explain.
More modern and minimalistic like a lot of other streaming platforms
Screenshots and Additional Info
2.a. Right Chevron Highlighted (minimalistic)
![Spotlight_chevron_highlighted](https://private-user-images.githubusercontent.com/167294806/338966029-0f09af8b-ba36-4742-82b0-ad8c1bd7f09b.jpg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEwNjk4NDIsIm5iZiI6MTcyMTA2OTU0MiwicGF0aCI6Ii8xNjcyOTQ4MDYvMzM4OTY2MDI5LTBmMDlhZjhiLWJhMzYtNDc0Mi04MmIwLWFkOGMxYmQ3ZjA5Yi5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxNVQxODUyMjJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00ZDUyZDk5ZWMzNGVjNTYyZWI1MGY3ZjY0MmY5M2JkNDQ0MGYzMTkzZmFlOWEyODcyMDQ0ZTg0MmZlMmYzMTU4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.SdjQtkK30gkEjydUjk8fAvhiRCnLNsWLs-htwP1vJ3g)
OR
2.b. Right Chevron Highlighted with Overlay
![Spotlight_chevron_highlighted2](https://private-user-images.githubusercontent.com/167294806/338967613-eab82131-f16b-4690-a870-4bc415eee626.jpg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEwNjk4NDIsIm5iZiI6MTcyMTA2OTU0MiwicGF0aCI6Ii8xNjcyOTQ4MDYvMzM4OTY3NjEzLWVhYjgyMTMxLWYxNmItNDY5MC1hODcwLTRiYzQxNWVlZTYyNi5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxNVQxODUyMjJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kMTIwNWQxNmFiMjZkODNjMDE2NzA0OWM3YjFjOWEzMDk3OWFmNWE2MWZmYTNlMDI0YzUyOGQ1MzRmODU4MDUwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.5iF_QqvOpHFEQD4976ybLrhEug2S_xL3e8BaPulTgUE)
Checklist
Beta Was this translation helpful? Give feedback.
All reactions