OpenGraph/oEmbed support

toby3d commented 2 years ago

Describe the feature

Comparison of meta-information received in the same video from Piped and YouTube:

oEmbed and OpenGraph is a simple tools to get meta-information and even a built-in player for YouTube videos that can be implemented in Piped. Thanks to it, all links to an instance in any provider will not look identical to each other and allow you to see the context of the video before you click on the link.

Why would this be useful to add?

Will allow you to embed the Piped player directly into any site that supports embedded media
Allows you to see the title, description and cover art of the video without clicking on the link, facilitating visual search

Concept(s)

OpenGraph

Here it's simple, just specify in the template a set of meta nodes with the keys with the prefix og: and values obtained from the YouTube video page and adapted for the Piped instance:

<meta property="og:site_name" content="Piped"> <!-- site name -->
<meta property="og:url" content="https://piped.privacy.com.de/watch?v=tsD4im7K3wg"> <!-- video page URL -->
<meta property="og:title" content="How does it feel to live long enough to see all your favorite franchises go down in flames?"> <!-- video title -->
<meta property="og:image" content="https://pipedproxy.kavin.rocks/vi_webp/tsD4im7K3wg/maxresdefault.webp?host=i.ytimg.com"> <!-- thumbnail URL -->
<meta property="og:image:width" content="1280"> <!-- thumbnail width -->
<meta property="og:image:height" content="720"> <!-- thumbnail height -->
<meta property="og:description" content="origin: Star Trek Discovery Season 1 - re:Viewhttps://youtu.be/ri7v-utIcvY"> <!-- video description -->

oEmbed

Architecturally, you should provide a router intended only for receiving requests from providers for previews and responding to them, like /oembed, like YouTube. This router should accept GET requests with query parameters and respond to them with JSON/XML (depending on provider's preferences) in a special format.

Since Piped instances cannot appear in the global providers list in time, to detect and exploit the oEmbed router by a provider, it needs to be prompted with a link node in the template and/or Link server header.

Headers examples:

Host: piped.kavin.rocks
Link: <https://piped.kavin.rocks/oembed?url=https%3A%2F%2Fpiped.kavin.rocks%2Fwatch%3Fv%3DtsD4im7K3wg&format=json>; rel="alternate"; type="application/json+oembed"; title="JSON oEmbed"
Link: <https://piped.kavin.rocks/oembed?url=https%3A%2F%2Fpiped.kavin.rocks%2Fwatch%3Fv%3DtsD4im7K3wg&format=xml>; rel="alternate"; type="text/xml+oembed"; title="XML oEmbed"
...

Template examples:

<html>
  <head>
    ...
    <link rel="alternate" type="application/json+oembed" href="https://piped.kavin.rocks/oembed?url=https%3A%2F%2Fpiped.kavin.rocks%2Fwatch%3Fv%3DtsD4im7K3wg&format=json" title="JSON oEmbed" />
    <link rel="alternate" type="text/xml+oembed" href="https://piped.kavin.rocks/oembed?url=https%3A%2F%2Fpiped.kavin.rocks%2Fwatch%3Fv%3DtsD4im7K3wg&format=xml" title="XML oEmbed" />
    ...
  </head>
  <body>
  ...

It is desirable to support both formats and both methods of routing identification for backward compatibility with older ISPs that do not know how to JSON or get data from headers.

A JSON response to an oEmbed request for a video might look something like this:

{
    "type": "video", // embed type
    "version": "1.0", // always "1.0"
    "title": "How does it feel to live long enough to see all your favorite franchises go down in flames?", // video title
    "author_name": "Cyber Zomb", // channel name
    "author_url": "https://piped.privacy.com.de/channel/UCUtc7dMxnccC8XXXqZAHf-A", // channel url
    "provider_name": "Piped", // site name
    "provider_url": "https://piped.kavin.rocks/", // base url of instance
    "cache_age": 3600, // the proposed response caching time by the provider in seconds
    "thumbnail_url": "https://pipedproxy.kavin.rocks/vi_webp/tsD4im7K3wg/maxresdefault.webp?host=i.ytimg.com", // video thumbnail
    "thumbnail_width": 1280, // thumbnail width
    "thumbnail_height": 720, // thumbnail height
    "html": "...", // HTML code for downloading and rendering an embedded player of the requested size
    "width": 425, // player width requested by provider
    "height": 344 // player height requested by provider
}

Additional context

No response

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.

rafalohaki commented 2 years ago

+1

Vardor commented 1 year ago

+1

Is there any workaround for this issue?

jim3692 commented 1 year ago

I had developed this proxy as a workaround for this some time ago, so I don't know if it still works. The code can be found here: piped-html-proxy I have been thinking of writing an extension for Caddy, in order to replace it. I don't know which approach best fits the project.

gunchleoc commented 11 months ago

Same problem on Mastodon, no preview cards.

lordkitsuna commented 7 months ago

kinda surprised this isnt considered high priority. its a pretty large blocker for the average person to be willing to use piped. i have for now resorted to just providing both links, with the pipe linked set to not preview so it can just piggyback off the youtube preview

but that just means the ty link is used 99% of the time sadly. once i convince people to load the actual piped page they have no problem with piped player for the most part but its never going to be viable as a true replacement missing something as basic as link previews

lukyyy9 commented 6 months ago

+1 big need <3

luketeam5 commented 6 months ago

I had developed this proxy as a workaround for this some time ago, so I don't know if it still works. The code can be found here: piped-html-proxy I have been thinking of writing an extension for Caddy, in order to replace it. I don't know which approach best fits the project.

Any progress with the Caddy extension? I would love this feature as I am quite surprised it isn't implemented yet from the last time I checked.

jim3692 commented 5 months ago

I had developed this proxy as a workaround for this some time ago, so I don't know if it still works. The code can be found here: piped-html-proxy I have been thinking of writing an extension for Caddy, in order to replace it. I don't know which approach best fits the project.

Any progress with the Caddy extension? I would love this feature as I am quite surprised it isn't implemented yet from the last time I checked.

There is no progress on the Caddy extension, but the proxy works.

Please open an issue there if you need more help to configure it for your instance.

Bnyro commented 2 months ago

I've created a small service (needs to be hosted by the server admin) that can be used to share Piped links, located at https://github.com/TeamPiped/piped-opengraph. There's an example docker-compose.yml you should use, I've additionally pushed the image to codeberg.org/bnyro/opengraph (arm64 only) for now as I don't have access to Kavin's DockerHub Account.

Usage:

replace the domain of the url you want to share with the one of the piped-opengraph service, e.g. https://piped.example.com/watch?v=abcedfg with https://piped-opengraph.example.com/watch?v=abcedfg
That's it. You now get a preview and clicking the link will redirect you to the normal Piped frontend as you'd expect to.

Works for:

Videos (/watch)
Playlists (/playlist)
Channels (/channel/)

Demo:

lordkitsuna commented 2 months ago

I've created a small service (needs to be hosted by the server admin) that can be used to share Piped links, located at https://github.com/TeamPiped/piped-opengraph. There's an example docker-compose.yml you should use, I've additionally pushed the image to codeberg.org/bnyro/opengraph (arm64 only) for now as I don't have access to Kavin's DockerHub Account.

Usage:
* replace the domain of the url you want to share with the one of the `piped-opengraph` service, e.g. `https://piped.example.com/watch?v=abcedfg` with `https://piped-opengraph.example.com/watch?v=abcedfg`

* That's it. You now get a preview and clicking the link will redirect you to the normal Piped frontend as you'd expect to.
Works for:
* Videos (`/watch`)

* Playlists (`/playlist`)
Known quirks:
* Channel previews are currently broken due to YouTube changes.
Demo:
* https://ppv.chatoyer.de/watch?v=myAHrXIwqXs

* view-source:https://ppv.chatoyer.de/watch?v=myAHrXIwqXs

Awesome stuff, I was messing around with the demo and I'm just curious if there's any customization to what it previews that can be done? At the moment the thumbnail is Tiny and it's just a huge wall of the description text which isn't ideal but is at least better than nothing Screenshot_20240727-113400~2

Bnyro commented 2 months ago

Awesome stuff, I was messing around with the demo and I'm just curious if there's any customization to what it previews that can be done? At the moment the thumbnail is Tiny and it's just a huge wall of the description text which isn't ideal but is at least better than nothing

Not as far as I know, and looking at the OpenGraph specs at https://ogp.me/ it doesn't seem so. Did you try the URL previews of other services (e.g. Mastodon, Twitter, ...) to see if they have a larger thumbnail?

TeamPiped / Piped