Fix Toolbar UI under video player, add icon for LBRY

[codenyte]

Describe the feature

Add an icon for the "Watch on LBRY" button, just like with the "Watch on YouTube" button. Check out the "Concept(s)" section down below for more information.

Why would this be useful to add?

First, I want to say that this is not an extremely important feature, just a tiny UI fix.

Currently, the "toolbar" under the video looks like this: It makes no sense. Why are the text and the icon of the "Watch on YouTube button" not vertically centered? Why does "Watch on YouTube" have an icon, but "Watch on LBRY" not?

Concept(s)

I have a few concepts (just the Piped website edited with Firefox DevTools):

1. (Text+Icons):

HTML Code

```html

Watch on YouTube Watch on Odysee Share

```

2. (Text+Icons, "Odysee" instead of "LBRY"): Actually, this makes more sense because it's not an open.lbry.com link but an odysee.com link, and the icon is also an Odysee icon, so the text should also say "Odysee".

HTML Code

```html

Watch on YouTube Watch on Share

```

3. (Only icons):

HTML Code

```html

Watch on YouTube Watch on Share

```

I used the Odysee icon from Font Awesome.

Personally, I think the second concept is the best one, and I think it makes the most sense because it includes icons and text, just like the "Share" button next to the "Watch on YouTube" and "Watch on LBRY" buttons.

I know that Piped is not written in plain HTML/CSS/JS but in Vue.js. I just wanted to create a quick concept, so I edited the compiled Vue (HTML/CSS) using the DevTools. Maybe this could still be helpful with implementing a proper Vue.js version of my tweaks.

Additional context

Btw, if these changes get implemented, I hope they also get ported to the redesigned Efy version.

Acknowledgements

• [X] I have searched the existing issues and this is NOT a duplicate or related to another open issue.
• [X] I have written a short but informative title.
• [X] I filled out all of the requested information in this form.

[Bnyro]

Looks like a good idea to me, feel free to create a PR for it. What you would need to modify for the icons is https://github.com/TeamPiped/Piped/blob/master/src/components/WatchVideo.vue#L105-L138, and add faOdyssee here https://github.com/TeamPiped/Piped/blob/master/src/main.js#L24. Follow the instructions on the README for setting the project up/testing your changes.

[Bnyro]

Changes get added to the EFY version automatically once someone merges the latest changes into it (which is some efforts since you need to fix conflicts between 'em).

[codenyte]

Thanks a lot for your quick answer. I'll be playing around with the Vue code a little bit, and if I get a working Vue.js implementation of this, I'll submit it as a PR. EDIT: I'm not a good web developer, and I've never used Vue.js before (although I want to learn it at some point), but since this is a fairly easy tweak, I think I'll get it done.

[Bnyro]

Sure, don't hesitate to ask if you have a question.

[codenyte]

The label change (LBRY → Odysee) and the icon were very easy to implement; they both show up correctly. I also want to implement settings toggles for both "Watch on YouTube" and "Watch on Odysee", but I'm struggling with that. I tried to put the "Watch on Odysee" button into a separate component, just like it is the case with the "Watch on YouTube" button, and add responsive design so the text would collapse on a small screen and only the icon would show up, but the separate component doesn't render. It also doesn't output any error message.

[Bnyro]

Did you make sure to import it properly at the beginning of the <script> and added it to the components property, so it looks something like

components: {
    WatchOnYouTubeButton,
    WatchOnLbryButton
}

?

[codenyte]

I'm gonna have to come back to this later, for now, I committed my working changes and opened a PR.