Added Embed player in Asset and Stream page

[clacladev]

What does this pull request do? Explain your changes. (required)

• Added Download button below the player inside the Asset details page
• Added the Share menu, which then allows Copy link and Embed dialog, in Assets and Streams details pages

Specific updates (required)

• I refactored and broken down the /dashboard/assets/:id and /dashboard/streams/:id page in multiple smaller components. This refactoring was needed to keep the complexity of these pages manageable
• I extracted the ClipButton which was implemented a 3 different times in the page in a reusable component.

How did you test each of these updates (required)

• I took screenshots before and after and they match
• I tested light and dark mode
• I tested the different copy buttons and checked the values
• I tested on both Chrome and Safari

⚠️ The asset and stream details page needs to be tested for some edge cases I may have missed by a second person ⚠️

Does this pull request close any open issues?

Fixes #1282

Screenshots (optional):
The design:

The implementation:

Checklist:

• Confirm that the refactor ideas is ok
• The asset and stream details page needs to be tested for some edge cases I may have missed by a second person
• The Share, Copy and Embed icons are slightly different, because I used the ones included in our design system.
• The position of the Popover, when pressing Share button, is below the video. In the designs it’s on top. Currently the Popover in the design system does not support the forcing of the position. If we want it, it requires extra work
• The Copy Link button copies a link like https://lvpr.tv?v=93363tya76n5paaf . Is this the intended behaviour?
• The stream page does not have a download button. Can we actually allow a stream download? How?
• @adamsoffer can you confirm these points are ok?

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
livepeer-studio	✅ Ready (Inspect)	Visit Preview	Sep 27, 2022 at 3:36PM (UTC)

[victorges]

Tested the preview and looks awesome! Only suggestion I have is to remove the Download button from the top right as well (not below the player) so we don't have the same thing in multiple places. WDYT?

[victorges]

Regarding linking to the lvpr.tv player, I think the only real problem from it not using the livepeer.js player yet is that it will not publish any viewership metrics when used, which IMO is highly desired feature. We should update it ASAP to use the SDK player instead.

@adamsoffer I mentioned today that I could update the player to use the SDK player, but after the day today I'm actually not sure when I'll have bandwidth to do that. It'd also involve setting up React from scratch on the project (hopefully a really minimal version of it) and ideally find a way to download/embedded it statically on the IPFS directory, not to have the IPFS website depending on external resources. Do you think anyone from UX team could pick up on that? I can provide all support on the existing stuff in the project, deploying on fleek, etc

[adamsoffer]

No problem! I can pick that up 👍

[clacladev]

@victorges Personally, I agree to remove the top-right Download button. It's redundant and also it's not the main CTA, so there's no good reason to have it highlighted IMO. @adamsoffer can I go ahead?

[adamsoffer]

@clacladev agree let's remove the download button on the top right.

[clacladev]

@adamsoffer @victorges Removed the redundant Download button. Whenever you can review it, then please just approve the PR so I can merge. Cheers 🙌

[adamsoffer]

Looks awesome. I just pushed a couple very minor fixes (removed the underline text decoration download button and fixed the iframe string format).