📺 Media Player
The media player is a central feature that will be used to play any media files regardless of the product (e.g. podcast, music, video, etc), there will also be many added "bells and whistles" features such as lyrics, notes, animations, etc.
| Add buttions | Design | Prototype | Dev Mode | Task | Alpha Branch | Chat | Alpha | Beta | Production
- Details
- Design
- Develpment
- Launch
Details
Description
Replace with a detailed description here
Status
These details are only updated with each release, for more acurate updates and keeping track of progress, see the task in GitHub.
| Owner | Lead | Doc Status | Product Status | Last Update | Version | Release | Phase |
|---|---|---|---|---|---|---|---|
| Adi | Adi | In Progress | In Revision | 04.03.2024 | 0.01 | Internal | Alpha |
Use Case
The audio player will be used for podcasts, music and others apps can make use of it.
User Stories
Persona One
Update Coming Soon
As a busy user I don’t want to watch but rather listen to a podcast, however, when I hear a voice I don’t recognize, I want to take a glance at my phone to see a name and/or photo of who is talking or maybe ask the built-in “AI/assistant”.
Reminders
- #191
- #205
- Ensure Deep Link is setup
- Ensure theme is properly linked
- Be sure to follow the release guidelines
- Update Documentation
Links & Resources
Coming Soon
- Biz Docs
- Research
| Design | Prototype | Dev Mode
- Task | Alpha Branch | Chat | Alpha | Beta | Production
Design
Tasks
Parent Tasks
Child Tasks
Child Tasks
Coming Soon
Branding
User Flow
Splash views > Intro > Onboarding > Overview > All Categories > All Shows > All Hosts > Show > Episodes > Episode
UX
Development
Before you start developing you will need to setup your environment, if you have not done that yet visit Development Envietment.
Tasks
Parent Tasks
Child Tasks
Child Tasks
Coming Soon
- Backend
- Frontend
Backend
The mdeia Player doesn't need too much backend as the files are simply streamed through an API or file url however we should look into APIs and any functions that can improve the media experiance.
For leatures like CC, Translate or any supportive features we will use off the shelf APIs, for the most part these tasks should be performed in advance, we save the data and request it when a users wants to access it, (e.g. we should translate lyrics or CC once, save the translation).
Functions
Dependicies
- BackBone CMS
Frontend
Logic
Pre-Loading
Pre-Loading
By the time a users arrives at the media player, the first 10 or 30 seconds of the file should alredy have been preloaded, here is how we can achive that
- if a user is viewing a podcast, song, album, article or any view that contains a particulr file, load the first few seconds or as much time needed to fetch the rest of the file. Ensure it is not a bouce, wait 2 secons before starting to pre-load.
- if the user is viewing a general view such as the Home view or an Overview, than we should use a prediction model, could be baced on view fron the last 7 days, time of day, whats popular, etc. we should not load too much but at least 30 to 50 percent of the items on the screen, "on the screen" not on the entier view, this means we should not start loading right away but rather wait 2 seconds to determin if the user is still scrolling or if they have stopped to view the content. Note that most content do not start playing on tab but rather open a details view so no need to load those. only vedio, speed dial and other content that play on tab should be preloaded.
Caching
Caching
cache all preloads for a period of 30 days but set a limite in the amount of storage we can use on the device (baced on avalible space on phone or make and model), delete old caches to make space for new ones.
if the user has turned on download or smart downloads, check if file is avalible before pre-loading.
Dependencies
remember to add any flutter dependencies used to enable the Media Player.
Compatibility
-
Google
- Android Phones
- Android Tablets (Large Screens)
- WearOS
- Android TV
- Chrome OS
- Google Cast
- Google Glass
- Android Auto & Automitive
- Google Assistant
-
Web
- Mobile
- Tablet
- Desktop
-
Facebook
- Oculus
Widgets
The widgets listed below is what makes up the media player feature, these are the top and mid level widgets, the small details can be made up of 10s of small widgets. This should be determined by the developer to follow our clean code guidelines.
-
Media Pill
When the media player is minimixed the media pill will show at the bottom on the screen, the user can drag and drop the pill to relocate it on other parts of the screen, it should be "jumpy" meaning if a user puts it at the top right it'll jump to the currect top right position. (check youtube).
-
Media Sheet
the media sheet is the full screen experiance, it will open whenever a media file starts playing or when the user taps on the media pill.
Features
Below is a list of features that will be utilized in order to deliver a great Media Player experiance, some are core to the Media Player and others are complementary but function on thier own (e.g. Share). The details bellow are not comprehensive feature details but rather, describe how the features will be utilized within the Media Player, for further details, please see the individual feature documentation (linked if avalible).
-
Audio
In Studio users can indicate what user is talking at any given segment or the user can use AI to identify the various voices and assign a user to each voice, this allows us to change the photo on the media player to the user who is currently talking. A good example of such a feature would video chat products showing the video of the user who is talking. This will primarily be used in podcasts.
Audio will also be used for music and video when the user's views or app is off, this will save users data and speed of delivery as audio lifes are smaller then video.
-
Video
-
Lyrics
-
Ads
-
CC
-
Translate
-
Shuffle
play current list in a random order or generate a new randon list if a list is not playing
-
start an AI playlist
generate a playsilt similate to what is playing now
-
auto-play
automaticly play the next content
-
loop
play again when finished
-
play next
suggest what content to play next
-
Modes / Mode Switcher
modes allow users to switch between the varius modes avalible within the media player Modes
- Audio
- Video
- Notes
- Lyrics
- Animation ...
-
Format Picker
the format picker allows users to easily switch between formats while the media player is open.
Use Case
Persona One
Persona #100 as a teacher I do not want to be distracted by the app or have to leave podcasts only to look for the same show in videos, I would like to get to the video version of the show quickly.
Details
Persona Two
Pershona #101 As a mother i am often watching the kids and cooking at the same time, I cannot look at my phone or my food will get burnt or my child will touch the hot stove, I need a way to quickly let you know that I want the sudio only.User Flow
the user can tap and hold on the views (show art) and swipe betwwen formats.
Techninal
use animation to make it clear not only are we switching the frontend but also the files and data we fetch, various formats have difrent resons, (e.g. fetch sudio only files to reduce data usage. fetch additional data such as lyrics or music notes. fetch instramental to enable the musican features.)
-
Audio
-
Video
-
Ads
-
Share
-
Together
-
Transcribe
-
Translate
-
Voice Over
-
Voice Over with AI