View: Media Library (Streaming)

[SpraxDev]

Apollo is supposed to have multiple services. They might just consist of a new UI that focuses on specific features that might exist in the normal File Browser View, like this one!

Imagine the user having a digital movie or TV shows collection. They might upload and organize them in the normal file view, but they can go to this view for consuming it.

It is meant to be used primarily for video content but can certainty be used as an image gallery too in the future – Please keep that in mind!

---

There are a couple of aspects to consider in the UI:

In General

• I'd suggest a sidebar and header layout similar to the one in the files view
  • Search at the top
  • Profile picture at the top right with a drop down menu when you click it
  • There should be something like a download button at the top right too that links to the Download View (part of different ticket soon™️)
  • Menu at the left
  • Can maybe be used for user defined filters (e.g. Only movies, Anime, Bollywood productions, holiday pictures, ...)

Overview / Dashboard

• Shows recommendation on what to watch next
  • For example TV shows that have been recently watched
  • Recently added (?)
• Each movie / TV show has its own image and at least the title shown
  • Maybe there can be addition info about with season and episode the user is currently on or would start with when clicking
  • Play button on hover?
  • Always shows progress information (e.g. watched 30% of the movie, so the user knows that he can continue right there)
  • Maybe we want to show the rating (e.g. 4/5 ⭐) from some external API in a corner?
  • If we do, it can be disabled by the user in a separate menu!
  • Maybe we show a little badge in a corner about the audio and subtitles available? (two letter code I'd say)

Movie / Show / Gallery details

• Cover Art (should work with square and DVD like art)
• Maybe even a banner at the top as background with a black semi transparency layer on top of it
  • Show title or something on there?
• Show title, genre, actors
  • synopsis that is collapsed by default (can click on Read more or something to show the full synopsis)
  • and other meta information that might be appropriate (e.g. available audio language)
• List of all the media in there with a thumbnail and title
  • Some more info too – Maybe similar/identical to the Overview / Dashboard section?
  • e.g. episodes of a show, images in a gallery, 1 movie or combination like movie and making-offs etc.

Playback view

The media is basically consumed on a separate page

• Video player
  • Play / Pause button
  • Chapters in timeline
  • Video quality selection
  • Audio quality/language selection
  • Playback speed selection
  • Button for full screen mode
  • Subtitles on/off
  • Subtitle selection
  • Context menu (right click) with options (similar to YT probably 😅)
  • Maybe have the title (and/or season/episode number) in the top left corner on hover?
• Area for additional info (maybe on the right?)
  • Current playlist (if any)
  • Auto play button (totally not like YT... Nice for TV shows where the playlist would get auto populated)
  • Some kind of button with a little pop-up or maybe a view that reveals itself inline/below the button to add something new to the playlist
    • This needs to have a search box again and a file view like thing that is able to list shows and episodes
  • WatchParty/-Together info (e.g. Participants, current status, ...)
  • There needs to a little segment at the bottom maybe with a progress bar
  • Just a progress bar and a short text
  • Can be a little hidden or maybe just collapsible dunno

Search result page

• How does it look like in general?
• Would say it does not have the continue playback information 'n stuff but links directly to the show details
• Maybe we want to highlight the text snipped that we matched? But what we do if it matched meta information like Genre? Probably not a nice and consistent feature to have with more complex search queries 😐

[JNSAPH]

lets gamble try merging

[JNSAPH]

I want to give you a brief overview of where things are right now.

In General

• [X] I'd suggest a sidebar and header layout similar to the one in the files view
  • [X] Search at the top (Implemented in Sidebar)
  • [X] Profile picture at the top right with a drop down menu when you click it
  • [ ] There should be something like a download button at the top right too that links to the Download View (Waiting for Ticket and further Details)
  • [X] Menu at the left
  • [X] Can maybe be used for user defined filters (e.g. Only movies, Anime, Bollywood productions, holiday pictures, ...) (Will be part of Search)

Overview / Dashboard

• [X] Shows recommendation on what to watch next (Currently Continue Watching)
  • [X] For example TV shows that have been recently watched
  • [X] Recently added (?)
• [X] Each movie / TV show has its own image and at least the title shown
  • [x] Maybe there can be addition info about with season and episode the user is currently on or would start with when clicking
  • [X] Play button on hover?
  • [X] Always shows progress information (e.g. watched 30% of the movie, so the user knows that he can continue right there) (Currently only on Continue Watching, can be added to all cards on request)
  • [X] Maybe we want to show the rating (e.g. 4/5 ⭐) from some external API in a corner?
  • [x] If we do, it can be disabled by the user in a separate menu! (Settings Menu missing)
  • [X] Maybe we show a little badge in a corner about the audio and subtitles available? (two letter code I'd say)

Movie / Show / Gallery details

• [X] Cover Art (should work with square and DVD like art)
• [X] Maybe even a banner at the top as background with a black semi transparency layer on top of it
  • [X] Show title or something on there?
• [x] Show title, genre, actors (Will be shown in hover menu, similar to netflix)
  • [x] synopsis that is collapsed by default (can click on Read more or something to show the full synopsis)
  • [x] and other meta information that might be appropriate (e.g. available audio language)
• [X] List of all the media in there with a thumbnail and title
  • [X] Some more info too – Maybe similar/identical to the Overview / Dashboard section?
  • [X] e.g. episodes of a show, images in a gallery, 1 movie or combination like movie and making-offs etc. (Will be shown in the Hover View)

Playback view

The media is basically consumed on a separate page

• Video player
  • [x] Play / Pause button
  • [x] Chapters in timeline
  • [x] Video quality selection
  • [x] Audio quality/language selection
  • [x] Playback speed selection
  • [x] Button for full screen mode
  • [x] Subtitles on/off
  • [x] Subtitle selection
  • [x] Context menu (right click) with options (similar to YT probably 😅)
  • [x] Maybe have the title (and/or season/episode number) in the top left corner on hover?
• [x] Area for additional info (maybe on the right?)
  • [x] Current playlist (if any)
  • [x] Auto play button (totally not like YT... Nice for TV shows where the playlist would get auto populated)
  • [x] Some kind of button with a little pop-up or maybe a view that reveals itself inline/below the button to add something new to the playlist
    • [x] This needs to have a search box again and a file view like thing that is able to list shows and episodes
  • [x] WatchParty/-Together info (e.g. Participants, current status, ...)
  • [x] There needs to a little segment at the bottom maybe with a progress bar
  • [x] Just a progress bar and a short text
  • [x] Can be a little hidden or maybe just collapsible dunno

Search result page

• [x] How does it look like in general?
• [x] Would say it does not have the continue playback information 'n stuff but links directly to the show details
• [x] Maybe we want to highlight the text snipped that we matched? But what we do if it matched meta information like Genre? Probably not a nice and consistent feature to have with more complex search

[JNSAPH]

Added video player and a basic search in #90754ca56ab349a8f1f8183ea7e70e82212855f4 . I'll probably rework the "before video play" screen to make it look less netflixi

[JNSAPH]

Added new Episode Viewer and Playlist in #e8924e3fc11d96e283d70ef0c4781000955d6f1b. All Tasks should be done and i'm going to close the Ticket for now. Feel free to reopen / contact me for a 1 on 1 review