Add Playlist feature

[rebron]

Description

Allow users the ability to add, delete, play media similar to the Brave's iOS implementation of Playlist. Playlist should also be considered similar and related to the Bookmarks and Reading List feature.

Brave version (brave://version info)

tbd

Version/Channel Information:

• Can you reproduce this issue with the current release? n/a
• Can you reproduce this issue with the beta channel? n/a
• Can you reproduce this issue with the nightly channel? n/a

Other Additional Information:

Miscellaneous Information:

[ghost]

right click menu for add to playlist or drag and drop link to playlist sidebar would be nice such that there is no need to open video first and add from url bar button

[MadhaviSeelam]

Verification In progress using

Brave | 1.70.38 Chromium: 127.0.6533.73 (Official Build) nightly (64-bit)
-- | --
Revision | fa5ba873831ff147e04034be16aa6777471910e6
OS | Windows 11 Version 23H2 (Build 22631.3958)

Filed:

• https://github.com/brave/brave-browser/issues/40212
• https://github.com/brave/brave-browser/issues/40213
• https://github.com/brave/brave-browser/issues/40247
• https://github.com/brave/brave-browser/issues/40286
• https://github.com/brave/brave-browser/issues/40325
• https://github.com/brave/brave-browser/issues/40349
• https://github.com/brave/brave-browser/issues/40350

Encountered:

• https://github.com/brave/brave-browser/issues/40174
• https://github.com/brave/brave-browser/issues/40234

Case 1: Playlist settings - PASSED

1. Installed 1.70.38 2. launched Brave 3. relaunched Brave to pick up griffin variations 4. opened `Brave://flags` 5. confirmed `#playlist` is enabled by default 6. confirmed Playlist icon is in the sixth/last position in the sidebar below reading list 7. opened `brave://settings/braveContent` in a tab 8. confirmed a new setting `Enable Playlist` is shown and enabled by default 9. confirmed a new setting `Automatically add files for viewing` is shown and enabled by default step 3 | step 5 | step 6 | step 8-9 ---- | ------ | ------ | ----- |||

Case 2: Playlist UI - PASSED

1. continued from Case 1 2. clicked on Playlist icon in the sidebar 3. confirmed Playlist sidepanel opened with Playlist header 4. Playlist introduction text is not shown in the sidepanel as per figma and this is known issue 5. confirmed empty `Play Later` folder 6. confirmed `+`, Settings icon, `X` icons are shown 7. confirmed when pressed `+` icon, create a `New playlist` modal is shown 8. confirmed when clicked settings icon, `brave://settings/braveContent#playlist-section` page loaded 9. confirmed when pressed `X` icon, Sidepanel closed as expected 10. pressed Sidebar in the toolbar, Playlist sidepanel opened as expected as it was opened last time 11. pressed on Playlist button in the sidebar 12. confirmed Sidepanel is closed and when pressed again, it opened as expected 13. opened brave://settings/appearance in a new tab 14. selected `Show on the left` radio button for Show Sidebar Enabled section 15. confirmed Sidepanel shown left and Playlist Sidepanel shown when pressed Playlist icon 16. confirmed Sidepanel shown right when selected `Show on the right` radio button step 3-6 | step 7 | step 8 | step 9 | step 14 | step 16 | Dark theme ---- | ----- | ----- | ----- | ----- | ------ | ------ ||||||

Case 3 - Adding media - Basic functionality - PASSED

1. continued from Case 2 2. visited YouTube in a new tab 3. loaded https://www.youtube.com/watch?v=TdeYkT7DEJQ 4. confirmed the Playlist button appears in the URL bar 5. selected the Playlist button in the URL bar 6. confirmed `Add to playlist` dialog appears with selected media displayed. 7. confirmed selected media is shown with thumbnail and the title of the media file 8. if selected media do not have thumbnail, Brave image is shown with the title of the medial file 9. clicked `Cancel` button 10. confirmed the dialog dismissed 11. clicked `Playlist` button again 12. clicked `Add selected` 13. confirmed following menu is shown with options - Added to playlist - open in playlist - remove from playlist - more media in this page 14. confirmed Playlist icon changed from `+` to check mark that shows media added successfully 15. selected `open in playlist` option from step 11 16. confirmed `PlayLater` folder shows number of items eg. `1 items` in the Sidepanel 17. clicked `Play Later` folder 18. confirmed media successfully added to Playlist Sidepanel 19. clicked media to play 20. confirmed media played successfully 21. closed `PlayLater` folder 22. confirmed media is shown at the bottom of the `Play Later` folder by default step 4 | step 7| step 8 | step 12| step 13| step 14-16 | step 17-20| step 22 ----- | ----- | ----- | ----- | ----- | ----- | ----- | ----- |||||||

Case 4 - Adding media - Add YoutTube, Vimeo, Rumble & TikTok - PASSED

Shared steps: 1. continued Case 3 2. visited a media site as below 3. clicked Playlist icon 4. clicked `Add selected` 5. clicked Playlist button on the sidebar 6. confirmed media is shown in the Playlist panel 7. clicked on the video 8. confirmed media played as expected **_YouTube movie videos without ads_**

- Loaded YT video `Ace of Hearts` movie without ads(https://www.youtube.com/watch?v=NByhK5NMHJU) - Confirmed media added and played successfully example | example | example ------ | ------ | ------ ||

**_YT videos- Free with ads_**

- Loaded YT video that is free with ads `The Dog Who Saved Summer` (https://www.youtube.com/watch?v=j2UF4_znMOc) - Got an error `Sorry we couldn't find any media on this page` error - `Failed` - encountered https://github.com/brave/brave-browser/issues/40174 

**_Live streaming via YT_**

- Loaded YT and selected Live streaming (https://www.youtube.com/watch?v=NRRg7hOWNIs) - Confirmed `Sorry we couldn't find any media on this page` error as Live streaming is NOT supported

**_Vimeo - Music_**

- Loaded Vimeo music video (https://vimeo.com/72584122) - Confirmed media added and played successfully example | example | example | example ------ | ------ | ------ | ------ |||

**_Vimeo - Music_**

- Loaded https://vimeo.com/286183716 - Got an error `Sorry we couldn't find any media on this page` error - `Failed` - encountered https://github.com/brave/brave-browser/issues/40174 example | example ---- | ----- |

**_Vimeo - documentary_**

- Loaded https://vimeo.com/channels/staffpicks/562020019 - Got an error `Sorry we couldn't find any media on this page` error - `Failed` - encountered https://github.com/brave/brave-browser/issues/40174 example | example ----- | ----- |

**_Rumble - show_**

- visited Rumble - clicked `The Ramsey Show (August 2, 2024) (https://rumble.com/v59fkkh-the-ramsey-show-august-2-2024.html?e9s=src_v1_finance) - Two entries/media selections shown ` Add Playlist` dialog - filed https://github.com/brave/brave-browser/issues/40247 example | example | example ---- | ---- | ---- ||

Rumble - Shorts

- Added a short https://rumble.com/v55r1vg-disney-parks-stitch-big-feet-plush-doll-shorts.html?e9s=rel_v1_b - Confirmed media added and played successfully example | example | example ---- | ---- | ---- ||

twitch.tv - clips

- selected a clip https://www.twitch.tv/mrskilted/clip/DifficultConcernedFishTakeNRG-dKPVGiOV75XmfFsK - Confirmed media added and played successfully (However, run time may not be displayed in Playlist sidepanel. It is shown as `00:00` - https://www.twitch.tv/mrskilted/clip/ExcitedDistinctGarageANELE-HE82zvRFIxiX8Xkj example | example | example ---- | ---- | ---- ||

Dailymotion - Failed

- loaded https://www.dailymotion.com/video/x9398g0 - Playlist icon is not shown in the URL bar - Filed https://github.com/brave/brave-browser/issues/40286 

Case 5: Playlist settings in brave://settings/braveContent page - PASSED

**_Automatically add files for offline viewing_** **_Enabled `Add media files to Playlist_while offline viewing option` but disable internet/WiFi to play in the Playlist panel_** - PASSED

1. continue from Case 4 - verified a video was added when `Automatically add files for offline viewing` setting was enabled 2. loaded https://www.youtube.com/watch?v=sKyO2TPzNxw 3. clicked Playlist icon in the URL bar 4. clicked `Add selected` 5. clicked open playlist in the playlist options menu 6. confirmed the media added to playlist (`Ninnukori`) 7. disable network/wifi connection 8. confirmed media played successfully with cached/offline viewing option step 1 | step 4 | step 6 | step 8 ----- | ----- | ----- | ------ |||

**_Disable `Automatically add files for offline viewing` option and add and play media files with internet/WiFi enabled_** - PASSED

1. continue from Case 4 - verified a video was added when `Automatically add files for offline viewing` setting was enabled 2. toggle `off` Automatically add files for offline viewing option 4. loaded https://www.youtube.com/shorts/XOIIP_QMvoY in a new tab 5. clicked Playlist icon in the URL bar 4. clicked `Add selected` 6. clicked sidebar button in the toolbar 7. clicked Play Later folder 8. confirmed added media is shown in the Playlist panel at the bottom 9. confirmed media item is shown without the checkbox and media size in the Playlist panel 10. added couple of more files (eg. Mexican Mariachi Music) and confirmed checkbox and media size is not shown 11. selected media (eg. Mexican Mariachi Music) to play 12. confirmed media played successfully with offline option disabled step 2 | step 4 | step 6 | step 7 | step 8 | step 9 | step 11 ---- | ----- | ----- | ----- | ----- | ---- | ------ ||||||

**Disable `Automatically add files for offline viewing` option and play media while internet/wifi connection disabled_** - Failed

1. continued from above case - verified a video was added when `Automatically add files for offline viewing` setting was disbled 2. loaded https://www.youtube.com/watch?v=pJUE03aeaQ4 3. clicked Playlist icon in the URL bar 4. clicked `Add selected` 6. clicked `open playlist` from the playlist options 7. clicked Play Later folder 8. clicked on the video that was added at the bottom of the playlist 5. confirmed video played as expected in the Playlist sidepanel 6. pressed 3 dot menu confirmed `Keep for offline playing` option is shown 7. disable network/wifi connection 8. media stopped to play about 3 minutes after. Frame froze but no error message shown - bug?? ex | ex | ex | ex | ex ---- | ---- | ---- | ----| --- ||||

**_Enable Playlist_** -PASSED

1. continued from Case 4 2. toggle `off` Enable Playlist option 3. confirmed Playlist button on the sidebar is hidden 4. visited YouTube and selected a movie https://www.youtube.com/watch?v=_mQmPwu3sdA 5. confirmed Playlist icon is not shown in the URL bar step 3| step 5 ----- | ---- |

Case 6: Playing media and player controls UI - PASSED

**_Play, Rewind, Forward, Previous track, Next track_**

opened Play Later folder played various media files that are added to the playlist in previous testcases - confirmed a video screen with player controls are shown - confirmed play and pause worked as expected - confirmed 15 sec Rewind, Forward buttons are working as expected - confirmed Previous track, Next track is working as expected - confirmed hovering over the media shows the media title and progress bar. - confirmed the selection, drag/drop to specific time in the video works properly. - confirmed tooltips are shown for all the buttons in Player controls https://github.com/user-attachments/assets/7c7d4c71-6424-4c8b-9958-8dc55f86d693

**_Shuffle_**

1. opened Play Later folder 2. played media 3. clicked `Shuffle` button 4. confirmed media played in random order 5. confirmed able to re-order media files manually Auto shuffle https://github.com/user-attachments/assets/55124e29-792c-490c-931d-3ca48c5f04fb Manual shuffle https://github.com/user-attachments/assets/fd060b46-5c22-4991-b7d1-c55c7e44ec08

**_Repeat_**

1. verifed `Automatically add files for offline viewing` setting is enabled in `brave://settings/braveContent` 2. added two media files in cached mode - https://www.youtube.com/shorts/AcL8zJt-Osw - https://www.youtube.com/watch?v=WTmq9t_YwgU&list=PLV22BHHAh8Vq7l-f4lOhlbw4f8oGhDR1N&index=4 3. confirmed file is added to Play Later folder 4. disabled `Automatically add files for offline viewing` setting in `brave://settings/braveContent` 5. added following media files in non-cached mode - https://www.youtube.com/watch?v=Ny7AUaLRlcY&list=PLV22BHHAh8Vq7l-f4lOhlbw4f8oGhDR1N&index=9 - https://www.youtube.com/shorts/r6LPcFfuGdQ - https://www.youtube.com/watch?v=lfZcIe4s0C4 6. clicked Repeat for (1) or Repeat (all) or Repeat (off) #### Confirmed Repeat worked as expected Repeat (1), (all), (off) https://github.com/user-attachments/assets/fc01541b-f868-4955-86f7-3f8669095fcd

**_Miniplayer_**

- Play a media from the playlist in the playlist panel (eg. Ace of Hearts) - click Play Later - confirmed miniplayer playing the media anchored at the bottom of the Playlist panel - confirmed able to pause, play and close (x) the player https://github.com/user-attachments/assets/6cfd76cd-93bf-417a-b903-5a493e135da6

**_Sidepanel_**

1. continuing from above cases 2. media playing in the playlist panel 3. confirmed when a media item is still playing, a user can open and close the sidebar via toolbar sidepanel and clicking playlist on the sidebar 4. confirmed side panel can be resized. https://github.com/user-attachments/assets/0615a8d2-3386-4282-b74d-4335e5d25863

Case 7 - Individual media items and menu - PASSED

1. continuing from above cases - added media to the playlist 2. confirmed each media item displayed - title, content time in hours, minutes, seconds, content size and indicator of cached state. Minimalism added as cached media - `01:17:59`, check mark, `152MB` - Not cached media shown only content time The Founding Fathers: John Adams (Ep 4) as Not cached media - `28:17` 3. clicked 3 dot menu on each media file 4. confirmed move, Remove offline data/Keep for offline playing, Remove from playlist and View original page options are shown step 2 | step 4a | step 4b ----- | ------ | ------ || Move: - confirmed created a new playlist and moved the media to a new playlist (eg. Documentary) example | example | example | example ----- | ----- | ----- | ------ ||| `Remove offline data` - clicked Remove offline data for cached media (eg. Ace of Hearts) - confirmed the file is not cached and content time is shown example | example | example | example | example ----- | ------ | ---- | ----- | ----- |||| `Keep for offline playing` - clicked Keep for offline playing for Not cached file - confirmed the file is cached and checkmark and content size shown example | example | example ----- | ------ | ------ || Remove from playlist - confirmed media file is removed from the playlist as expected example | example ----- | ----- | View original page example | example ----- | ------ |

Case 8: Playlist folders and menu - In progress

**_Create a new playlist_** 1. clicked + button in the Playlist menu 2. entered `Drums` in the `New playlist` field  3. clicked `Create` 4. confirmed ` Drums` playlist created with thumbnail as music icon, `0 items`, `0m 0s` `0.00 MB` 5. added media to the default playlist - https://www.youtube.com/watch?v=C7HL5wYqAbU 6. clicked `Move` in the individual item menu 7. selected `Drums` >> Save 8. opened Playlist panel 9. confirmed `Drums` playlist is shown thumbnail of the first item, folder title, number of items in the folder, consolidated time of all items in hours, minutes, and seconds, and size of the folder. 10. added another media to the `Drums` playlist successfully 11. confirmed able to create multiple playlists - Indian music, Movies Podcasts 12. confirmed able to drag and drop playlists in the playlist panel 13. confirmed able to drag and drop or reorder items in the individual folder 14. confirmed after relaunching the browser, the order of items remained in the same state step 3 | step 4 | step 5 | step 6 | step 7 | step 9 | step 10a | step 10b | step 11 | step 12 | step 13 | step 14 ----- | ----- | ---- | ----- | ----- | ----- | ----- | ----- | ----- | ----- | ------ | -------- |||||||| ||| **_PlayList menu items_** Rename: 1. clicked on `Podcasts` playlist 2. clicked 3 dot menu of the playlist 3. clicked Rename 4. renamed the playlist (History Podcast) and clicked Save 5. confirmed renamed playlist is shown playlist panel step 1 | step 2 | step 4 | step 5 ---- | ----- | ----- | ----- ||| Edit: 1. clicked on `Drums` playlist 2. clicked 3 dot menu of the playlist 3. clicked Rename 4. renamed the playlist (History Podcast) and clicked Save 5. confirmed renamed playlist is shown playlist panel 6. selected a media (`Kodo`) >> Move 7. selected `Indian music` playlist >>Save 8. confirmed media item moved successfully 9. confirmed Remove & Done worked as expected example | example | example | example ---- | ----- | ----- | ----- |||

[stephendonner]

Verified IN-PROGRESS using

Brave | 1.70.40 Chromium: 127.0.6533.88 (Official Build) nightly (x86_64)
-- | --
Revision | efaf75994a59fed0cf6318aa9b56e5293fbd676a
OS | macOS Version 11.7.10 (Build 20G1427)

Case 1: Playlist settings - PASSED

### Steps: 1. installed `1.70.40` 2. launched Brave 3. opened `brave://version` 4. relaunched Brave 5. opened `brave://flags` 6. confirmed `Playlist` was enabled by default 7. confirmed `DefaultPlaylistStudy:Enabled` 8. opened `brave://settings/braveContent` 9. confirmed `Enable Playlist` was toggled to `On` 10. confirmed `Automatically add files for offline viewing` was toggled to `On` example | example | example | example ---------|----------|---------|-------- | | |

Case 2: Playlist UI - PASSED

### Steps: 1. clicked on `Playlist` in the sidebar 2. confirmed the `Playlist` UI showed 3. confirmed, by default, there's a `Play Later` folder 4. clicked on the `Create a new folder` icon 5. clicked on `Open Playlist settings` 6. confirmed `brave://settings/braveContent#playlist-section` loaded 7. confirmed when clicking on the `X` close widget, the sidebar closed 8. confirmed opening and closing the sidebar retained focus on the `Playlist` 9. opened `brave://settings/appearance` 10. clicked on `Show on the left` for `Sidebar` 11. enabled `Dark` mode example | example | example | example | example | example ---------|---------|----------|----------|---------|--------- | | | | |

Case 3: Adding media, basic functionality - PASSED

1. continued from Case 2 2. visited YouTube in a new tab 3. loaded https://www.youtube.com/watch?v=F2snk0zU018 4. confirmed the Playlist button appears in the URL bar 5. selected the Playlist button in the URL bar 6. confirmed `Add to playlist` dialog appears with proper media selected. 7. clicked `Cancel` button 8. confirmed the dialog dismissed 9. clicked `Playlist` button again 10. clicked `Add selected` 11. confirmed following menu is shown with options - Added to playlist - open in playlist - remove from playlist - more media in this page 12. confirmed Playlist icon changed from `+` to check mark that shows media added successfully 13. selected `open in playlist` option from step 11 14. confirmed `Play Later` folder shows number of items eg. `1 items` in the Sidepanel 15. clicked `Play Later` folder 16. confirmed media successfully added to Playlist Sidepanel 17. clicked media to play 18. confirmed media played successfully 19. closed `Play Later` folder 20. confirmed media is shown at the bottom of the `Play Later` folder by default step 4 | step 6 | step 10| step 11-13| step 14 | step 16-18| step 20 ----- | ----- | ----- | ----- | ----- | ----- | ----- | | | | | |

Case 4: Adding media {YouTube, Rumble, Twitch, Vimeo} - PENDING

## YouTube, Live - `PASSED` ### Steps: 1. loaded https://www.youtube.com/watch?v=W7LVYdyWwFU 2. clicked on `Add to Playlist` ### Confirmed I could NOT add a live video to playlist, as that's not supported example | example ---------|--------- | ## YouTube, video - `PASSED` ### Steps: 1. loaded https://www.youtube.com/watch?v=85lNjpxUISY 2. clicked on `Add to Play` ### Confirmed I could add to and play the 12k video in my playlist example | example ---------|--------- | ## Rumble - `PASSED` ### Steps: 1. loaded https://rumble.com/v56gwrr-mad-max-we-want-our-car-back-pc-01.html?playlist_id=QT7_sbNPL30 2. clicked on `Add to Playlist` ### Confirmed I could add to and play the video in my playlist example | example ---------|--------- | ## Twitch, clip - `PASSED` ### Steps: 1. loaded https://www.twitch.tv/kentsumeshi_heyoo/clip/TenuousProtectiveFungusWOOP-Q0P2DZI7GBS3eI-u 2. clicked on the `Add to Playlist` icon in the URL bar ### Confirmed I could add to and play the video in my playlist example | example ---------|--------- | ## Twitch, full video - `FAILED` ### Steps: 1. loaded https://www.twitch.tv/videos/2214696753 2. looked for an `Add to Playlist` icon ### Confirmed no available `Add to Playlist` button ## Vimeo - `FAILED` ### Steps: 1. loaded https://vimeo.com/752560752 2. clicked on `Add to Playlist` ### Confirmed unable to view video, with `Sorry, we're unable to find any media on this page` error dialog example | example ---------|--------- |

Case 5: Playlist settings in brave://settings/braveContent page - PASSED

**_Automatically add files for offline viewing_** ### Steps: 1. continue from Case 4 2. verified a video was added when Automatically add files for offline viewing setting was enabled 3. toggle off Automatically add files for offline viewing option 4. pressed Show sidebar button in the toolbar 5. verified Playlist sidepanel opened since it was the last opened item 6. disconnect internet/Wi-Fi connection 7. open `Play Later` folder 8. play media from the Playlist (`A start is About to Explode) 9. confirmed video played as expected in Playlist sidepanel 10. clicked View original page option from ... menu from the Video thumbnail 11. confirmed No internet connection page is shown step 2 | steps 3-4 | step 6 | step 9 | step 11 -------|-----------|--------|-------|------- | | | | **_Enable Playlist_** ### Steps: 1. continued from Case 4 2. toggle off `Enable Playlist` option 3. confirmed Playlist button on the sidebar is hidden 4. visited YouTube and selected a movie https://www.youtube.com/watch?v=g4eRWBPgUGo 5. confirmed Playlist icon is NOT shown in the URL bar example | example ---------|--------- |

Case 6: Playlist-media management - PENDING

_**Move**_ example | example | example | example | example ---------|----------|---------|----------|--------- | | | | **_Remove offline data_** example | example | example ---------|----------|--------- | | _**Remove from playlist**_ example | example ---------|--------- | _**View original page**_ example | example ---------|--------- |

Encountered/logged:

* https://github.com/brave/brave-browser/issues/40166 * https://github.com/brave/brave-browser/issues/40172 * https://github.com/brave/brave-browser/issues/40174 * https://github.com/brave/brave-browser/issues/40176 * https://github.com/brave/brave-browser/issues/40182 * https://github.com/brave/brave-browser/issues/40212 * https://github.com/brave/brave-browser/issues/40213 * https://github.com/brave/brave-browser/issues/40227 * https://github.com/brave/brave-browser/issues/37542 * https://github.com/brave/brave-browser/issues/37536 * https://github.com/brave/brave-browser/issues/34311 * https://github.com/brave/brave-browser/issues/40229 * https://github.com/brave/brave-browser/issues/40230 * https://github.com/brave/brave-browser/issues/40231 * https://github.com/brave/brave-browser/issues/40233 * https://github.com/brave/brave-browser/issues/40234 * https://github.com/brave/brave-browser/issues/40236 * https://github.com/brave/brave-browser/issues/40239 * https://github.com/brave/brave-browser/issues/40242 * https://github.com/brave/brave-browser/issues/40244 * https://github.com/brave/brave-browser/issues/40248