bibixx / zium.app Goto Github PK

• Make double clicking on a stream enter the full screen
• Implement Keyboard Lock to allow better navigation throughout the app (allow using Escape in the full screen mode)
• Make F toggle full screen

Designs: https://www.figma.com/file/JCMfY8OFGmiDT3lEzSX6zS/Zium.app-Designs?type=design&node-id=892-15824&mode=design&t=vam4AdzqgFFocQ77-4

The goal of this task is to implement a Source button component so that it can replace the current Video feed content component.

Please note that the hover/active state changes should be animated in the same manner as in the current Button component, which includes scale CSS transformation.

As is: When going into past weekends with no pre/post-event shows, the "Check back soon for more shows" banner is displayed.
To be: If there are no pre/post-events for past weekends, the "More from Formula 1" section should not be displayed.

#31 will introduce the ability to change the F1 Live to International as the main feed. The international feed has multiple audio and subtitle tracks and we need a way to enable the user to change them.

Case no. 1 — User logged in, no subscription

We shouldn't let users into the app if they have no active subscription. In this case preferably we should point them to the buy subscription page (it'd be also nice to stress that it's not subscription to zium, but to F1 TV)

For now, quickly I have pieced this together:

The Subscribe to F1 TV button leads to this page: https://www.formula1.com/subscribe-to-f1-tv
See global coverage plan here: https://www.formula1.com/en/toolbar/content_schedule.html

Case no. 2 — User logged in, TV Pro Subscription

Probably nothing should in this case

Case no. 3 — User logged in, TV Access Subscription

I can see 5 places where this affects the app in any way

1. Event Details → "Race" replay/scheduled event paywalled
2. Event Details → "Race" live event paywalled
   • The TV Access grants the user to watch replays but not live events
3. Event Details → "Additional" event paywalled
4. Live event paywalled in the header
   • Currently I just don't show those in the header but maybe we can handle it differently somehow
5. Replay/Scheduled event paywalled in the header (In case you missed it / Remind me 15 minutes before)
   • Currently I just don't show those in the header but maybe we can handle it differently somehow. This can be done independently from the live event though.
6. Race View when the user manually enters the url of a paywalled event for them

The title says it all. I've only noticed this behaviour on live events (Dutch GP FP 1).

(Please note that the reason streams go blank in the above recording is that stream protection system. This does not happen when I'm not recording my screen)

As is: It seems like the older the race weekend is, the more time it takes to fetch dates of particular events assigned to those weekends. Until the date is loaded, "Starts in 0 seconds" is displayed underneath the session name.
To be: Until the sessions' date is loaded, a "Loading..." word should be displayed instead of the "Starts in 0 seconds".

Icons can be found here: https://www.figma.com/file/JCMfY8OFGmiDT3lEzSX6zS/Zium.app-Designs?type=design&node-id=833-9639&t=P9KSujJlMfJ5wWhh-4

Dear bibixx,

I want to inform you a a program like this already exists. It's called "MultiViewer For F1"

As is: Sprints in race weekends pre 2023 season are marked with an "SQ" icon.
To be: "S" icon.

Designs: https://www.figma.com/file/JCMfY8OFGmiDT3lEzSX6zS/Zium.app-Designs?type=design&node-id=153-11675&mode=design&t=kUJ5HfSiKEdLaxZ8-4

Note that, ideally, the banner is positioned at the bottom in a way that does not obstruct the underneath content but rather shrinks the "viewport" vertically.

Now that we have the scroll to the top by clicking on the logo, we could use some visual hint to complement that, such as a subtle logo change on hover or a tooltip, etc.

As the list of currently supported keyboard shortcuts grow, we need a place for users to be able to discover and learn all of them.

An idea for the feature is to allow the user to "spawn" a new browser window (which can eg. be moved to a second monitor) that still has connection with the "main" window, so both focusing audio and sync between videos can work

• Handle the change to international in the layout for single-source streams
• Handle offsets for int'l

Progress on this can be found in: #35

When there are no more video streams available to be added we currently show no info about it to the user. We should have some kind of a zero state for this situation

When watching an event with many streams placed all around my canvas, as a viewer, I'd like to peek into one stream for a couple of seconds so that I can take a closer look at an action currently happening there. By peeking, I mean being able to either zoom in on that particular stream window or make it larger temporarily, so that it hovers over the other streams on my canvas while dimming the background.

As of now, icon buttons have no labels or tooltips. The goal of this task is to add a tooltip for every icon button in the app.

I'd love to be able to probe some users for a bit of feedback about the app. I don't want to be too intrusive and definitely don't want to force users to answer any open ended questions (as it's also hard to analyse afterwards, right @toiletgranny)

I guess I like what Craft does, simple emojis list + an optional feedback window

I would open it up after use enters the page a few times (3?) or maybe opens a few races. One thing that would be also great would be to snooze the feedback form till the end of the session (we should have info about when the stream more or less should end, though it's not super reliable as sessions can be longer then schedule, eg. in terms of rain like in SPA or red flags.

Development note:

• For managing the responses I'd use GlitchTip + Sentry's User Feedback API (I will first have to research if GlitchTip actually supports it)
• Additionally log the emoji/quick responses to Matomo to be able to analyse it easier

When I go into single-stream events, such as weekend warm-ups, or pre/post-race shows, ideally, the player adapts to that and doesn't trouble me with all the UI and all the features that do not apply in that case:

1. There's a single video stream playing in the center,
2. The video scaling is set to contain, not fill,
3. The player bar does not show controls for adding video streams or managing layouts,
4. All the controls for CC or language, if available, are moved over to the player bar at the bottom (rather than being displayed directly on the video feed).

Figma designs can be found here: https://www.figma.com/file/JCMfY8OFGmiDT3lEzSX6zS/Zium.app-Designs?type=design&node-id=1279-8170&mode=design&t=z8ueqDFm5X7fpMOC-4