CO: Can select existing Playlist when uploading new Video

[KubaMikolajczyk]

Context

While testing playlist: Channel owner experience - users expressed a need to add videos to the playlist while uploading or editing a video. This will require us to update video workspace final designs and create appropriate user stories to it.

Scope

• [ ] Just the UI, without integrating the transaction
• [ ] When uploading new video CO can add video to existing playlist
• [ ] When editing existing video CO can add video to existing playlist
• [ ] When editing NFT video CO can add video to existing playlist
• [ ] - #2488

Design

Add uploaded video to existing playlist | Figma Edit video > add to existing playlist | Figma

Empty state>

[KubaMikolajczyk]

All of the changes done and addressed in video update below: https://www.loom.com/share/b8cba94a8c4e4274beb14a622242eebf?sharedAppSource=team_library Also link to figma changelog: https://www.figma.com/file/xm6vBdSnQDroc57rGfGtPM/Video-workspace?node-id=1378%3A93428 Link to final designs: https://www.figma.com/file/xm6vBdSnQDroc57rGfGtPM/Video-workspace?node-id=308%3A5753

User stories:

Add new video to existing playlist Add existing video to an existing playlist Add NFT video to an existing playlist Edit thumbnail in video workspace flow

[kdembler]

@dmtrjsg IMO, this needs to be split into 3 issues:

1. Allow publisher to select playlist when publishing a new video (this issue?)
2. Block edits in video workspace when NFT is minted for the video (we missed that in our NFT scope I think)
3. Improve handling of thumbnail uploads in video workspace

[dmtrjsg]

@KubaMikolajczyk for this ticket

[dmtrjsg]

New tickets:

• 2297

  @KubaMikolajczyk can you kindly add the Figma link to comments to this 👆 ticket.

• 2298

[kdembler]

Hey team! Please add your planning poker estimate with ZenHub @drillprop @eldiegod @rafalpawlow

[dmtrjsg]

[dmtrjsg]

• Empty State from 2267

[KubaMikolajczyk]

I don't remember participating in a conversation about this component and I was wondering when did we agreed to use this solution?

On Monday Adam told me that the decision for this component is to use the standard dropdown component that we already have implemented for the select instead of context menu that I use here above, but after discussion today we discovered that this old dropdown for selects do not allow for multiselecting. So after some internal discussion with Adam & Tomasz and we see two options here:

1. We can leave it as it is designed here - it's some work for developers but we already discussed that the easier way of just using an old dropdown for select here won't work - no design work needed
2. We can go with your proposition of using the same solutions which we use in adding to whitelist - also some work for developers - from design side as we would now try to use this solution in more than one place and we want new functionalities for it - we need to prepare a new global component that will support both input fields & selects as a trigger + design all variants & states for this component in web components file & document it

If time is important here - I would go with option 1️⃣ it's easier. But if we choose 2️⃣ then it's not only updating designs respectively - its also component work + documentation. Wdyt?

[dmtrjsg]

@KubaMikolajczyk

I don't remember participating in a conversation about this component and I was wondering when did we agreed to use this solution?

• Correct, that was first time surfaced on the dev grooming meeting, when reviewing designs. The issue with multi-select list drop down, is how selected options are displayed. This is exacerbated with long(ish) names of playlists, and we thought that combobox for whitelisted members already solves this use case effectively.

[KubaMikolajczyk]

Empty state for no playlist in video workspace flow created: https://www.figma.com/file/xm6vBdSnQDroc57rGfGtPM/Video-workspace?node-id=2509%3A162914

[KubaMikolajczyk]

This issue will be tackled in #2392 👉

[KubaMikolajczyk]

☝️ This part of the work is done so all here is finished. Now playlists use a combo box for selection so you can look them up by typing and selecting. Also pills under the combo box show result of selection. Figma: https://www.figma.com/file/xm6vBdSnQDroc57rGfGtPM/Video-workspace?node-id=2397%3A141091