Dynamic meta tags for content #2546

Merged
NetOpWibby merged 1 commit from 2410-meta-tags into master 2019-07-29 15:34:34 +02:00
NetOpWibby commented 2019-06-12 23:46:22 +02:00 (Migrated from github.com)

PR Checklist

Please check all that apply to this PR using "x":

  • I have checked that this PR is not a duplicate of an existing PR (open, closed or merged)
  • I have checked that this PR does not introduce a breaking change

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting)
  • Refactoring (no functional changes)
  • Documentation changes

Fixes

Issue Number: #2410

What is the current behavior?

Shared lbry.tv links are plain.

What is the new behavior?

Shared lbry.tv links are enriched with metadata to make them more appealing to scrollers.

## PR Checklist <!-- For the checkbox formatting to work properly, make sure there are no spaces on either side of the "x" --> Please check all that apply to this PR using "x": - [x] I have checked that this PR is not a duplicate of an existing PR (open, closed or merged) - [x] I have checked that this PR does not introduce a breaking change ## PR Type What kind of change does this PR introduce? - [ ] Bugfix - [x] Feature - [ ] Code style update (formatting) - [ ] Refactoring (no functional changes) - [ ] Documentation changes ## Fixes Issue Number: #2410 ## What is the current behavior? Shared `lbry.tv` links are plain. ## What is the new behavior? Shared `lbry.tv` links are enriched with metadata to make them more appealing to scrollers.
NetOpWibby commented 2019-06-12 23:48:22 +02:00 (Migrated from github.com)

Included in this PR is commented code for tag inclusion, whenever that drops. Also, when navigating away from content to a regular page, the title attribute doesn't update (yet). It should default to LBRY.tv or something similar.

Included in this PR is commented code for tag inclusion, whenever that drops. Also, when navigating away from content to a regular page, the `title` attribute doesn't update (yet). It _should_ default to `LBRY.tv` or something similar.
tzarebczan (Migrated from github.com) reviewed 2019-06-12 23:53:59 +02:00
tzarebczan (Migrated from github.com) commented 2019-06-12 23:53:59 +02:00

We don't really expose author even though it's available - it should use channel if there is one (could be anonymous too)

We don't really expose author even though it's available - it should use channel if there is one (could be anonymous too)
neb-b commented 2019-06-13 04:26:10 +02:00 (Migrated from github.com)

Does this work? I figured we would need to change code in platforms/web/server.js since we aren't server rending our app.

Does this work? I figured we would need to change code in `platforms/web/server.js` since we aren't server rending our app.
NetOpWibby commented 2019-06-13 04:27:00 +02:00 (Migrated from github.com)

Idk how to test on the web but it updates in the app.

Idk how to test on the web but it updates in the app.
neb-b commented 2019-06-13 04:29:15 +02:00 (Migrated from github.com)

To test the basic og image I used ngrok. I would run the web version with yarn run:web (not yarn dev:web, that didn't seem to work right since it was a webpack-dev-server).

Then point ngrok at localhost:1337 and it gives you a regular url that points to your computer. Then sharing that url will show the og tags.

To test the basic og image I used [ngrok](https://ngrok.com/). I would run the web version with `yarn run:web` (not `yarn dev:web`, that didn't seem to work right since it was a webpack-dev-server). Then point ngrok at `localhost:1337` and it gives you a regular url that points to your computer. Then sharing that url will show the og tags.
NetOpWibby commented 2019-06-13 18:44:26 +02:00 (Migrated from github.com)

It doesn't appear to work.

You can just use your computer's name and send an iMessage to yourself to test. (http://computer.local:1337/path/to/content)

It doesn't appear to work. You can just use your computer's name and send an iMessage to yourself to test. (`http://computer.local:1337/path/to/content`)
NetOpWibby commented 2019-06-13 18:58:23 +02:00 (Migrated from github.com)

I don't see how making edits to platforms/web/server.js will work. Navigating the app doesn't trigger updates there. Hard refreshes trigger updates but obviously that doesn't happen naturally.

Finally, useful information isn't found here aside from the path.

I don't see how making edits to `platforms/web/server.js` will work. Navigating the app doesn't trigger updates there. **Hard** refreshes trigger updates but obviously that doesn't happen naturally. Finally, useful information isn't found here aside from the path.
NetOpWibby commented 2019-06-14 00:07:32 +02:00 (Migrated from github.com)

Is it possible to have the video URL part of the claim data? There's no way to have a video preview if I don't have the direct mp4 link.

Is it possible to have the video URL part of the claim data? There's no way to have a video preview if I don't have the direct mp4 link.
tzarebczan commented 2019-06-14 00:10:02 +02:00 (Migrated from github.com)

Let's stick to thumbnail previews for now, that would have to be tackled another day.

We don't know what streaming solution LBRY.tv will go with yet, but it should be possible to make some url later on that will point to the video itself.

Let's stick to thumbnail previews for now, that would have to be tackled another day. We don't know what streaming solution LBRY.tv will go with yet, but it should be possible to make some url later on that will point to the video itself.
tzarebczan commented 2019-06-14 19:29:18 +02:00 (Migrated from github.com)

Per our discussion today, might be better to grab this data via a chainquery fetch. We'll have to do this based on if we know the claim id or not. This should also work for channels, CQ uses the same field for thumbnail url (source url for banner if we wanted that).

Here's an example by claim id:
https://chainquery.lbry.io/api/sql?query=SELECT%20*%20FROM%20claim%20where%20claim_id=%2294a844e1f9e7dab814378de404e35ec69b57435b%22

just claim name:
https://chainquery.lbry.io/api/sql?query=SELECT%20*%20FROM%20claim%20where%20name=%22@theGavin2000%22&bid_state=%22controlling%22

Per our discussion today, might be better to grab this data via a chainquery fetch. We'll have to do this based on if we know the claim id or not. This should also work for channels, CQ uses the same field for thumbnail url (source url for banner if we wanted that). Here's an example by claim id: https://chainquery.lbry.io/api/sql?query=SELECT%20*%20FROM%20claim%20where%20claim_id=%2294a844e1f9e7dab814378de404e35ec69b57435b%22 just claim name: https://chainquery.lbry.io/api/sql?query=SELECT%20*%20FROM%20claim%20where%20name=%22@theGavin2000%22&bid_state=%22controlling%22
tzarebczan (Migrated from github.com) reviewed 2019-06-19 00:37:47 +02:00
tzarebczan (Migrated from github.com) commented 2019-06-19 00:37:46 +02:00

thumbnail misspelled :)

thumbnail misspelled :)
tzarebczan (Migrated from github.com) reviewed 2019-06-19 00:41:43 +02:00
tzarebczan (Migrated from github.com) commented 2019-06-19 00:41:43 +02:00

Query with a channel: SELECT channel.name as channel, claim.name, claim.description, claim.language, claim.thumbnail_url, claim.title FROM claim left join claim channel on claim.publisher_id = channel.claim_id where claim.claim_id="93a61971c473ade02300361dc077eb564b558a8d"

Will we always have the claim id? does that come from the claim that's resolved? What if someone shares beta.lbry.tv/jiggytom Sounds like we'll need to use claim.name = xxx and bid_state = controlling per my original suggestion in that case.

Query with a channel: SELECT channel.name as channel, claim.name, claim.description, claim.language, claim.thumbnail_url, claim.title FROM claim left join claim channel on claim.publisher_id = channel.claim_id where claim.claim_id="93a61971c473ade02300361dc077eb564b558a8d" Will we always have the claim id? does that come from the claim that's resolved? What if someone shares beta.lbry.tv/jiggytom Sounds like we'll need to use claim.name = xxx and bid_state = controlling per my original suggestion in that case.
tzarebczan (Migrated from github.com) reviewed 2019-06-19 01:03:22 +02:00
tzarebczan (Migrated from github.com) commented 2019-06-19 01:03:22 +02:00

I saw we grab claim id from the URL, so we'll need to adjust the query as such.

I saw we grab claim id from the URL, so we'll need to adjust the query as such.
kauffj (Migrated from github.com) requested changes 2019-06-26 16:32:35 +02:00
kauffj (Migrated from github.com) commented 2019-06-26 16:26:36 +02:00

Is this code writing the HTML to disk only to read it back? If I'm understanding what this does correctly, it seems like it could be skipped entirely.

(Additionally, this approach could cause a race condition among two requests that came in simultaneously)

Is this code writing the HTML to disk only to read it back? If I'm understanding what this does correctly, it seems like it could be skipped entirely. (Additionally, this approach could cause a race condition among two requests that came in simultaneously)
kauffj (Migrated from github.com) commented 2019-06-26 16:26:57 +02:00

Can these values be injected into the HTML file rather than built in JS?

Can these values be injected into the HTML file rather than built in JS?
kauffj (Migrated from github.com) commented 2019-06-26 16:27:45 +02:00

How about a fallback of "Watch %content_title% on lbry.tv" or "Watch %content_title% from %creator% on lbry.tv"?

How about a fallback of "Watch %content_title% on lbry.tv" or "Watch %content_title% from %creator% on lbry.tv"?
@ -10,0 +14,4 @@
let isAppPage = req.url.includes('/$/');
let isChannel = req.url.includes('/@');
let queryUrl = '';
kauffj (Migrated from github.com) commented 2019-06-26 16:31:28 +02:00

This test probably needs to be stronger, as I think @ can technically appear in the middle of a claim name

This test probably needs to be stronger, as I think `@` can technically appear in the middle of a claim name
@ -10,0 +22,4 @@
case isChannel:
queryUrl = `https://chainquery.lbry.io/api/sql?query=SELECT channel.name as channel, claim.name, claim.description, claim.language, claim.thumbnail_url, claim.title FROM claim left join claim channel on claim.publisher_id = channel.claim_id where claim.claim_id="${identifier}"`;
break;
kauffj (Migrated from github.com) commented 2019-06-26 16:30:47 +02:00

@sayplastic (or @nikooo777?) is there a better way for @NetOperatorWibby to be getting data from chainquery for lbry.tv than this?

@sayplastic (or @nikooo777?) is there a better way for @NetOperatorWibby to be getting data from chainquery for lbry.tv than this?
tzarebczan (Migrated from github.com) reviewed 2019-06-26 19:32:19 +02:00
@ -10,0 +14,4 @@
let isAppPage = req.url.includes('/$/');
let isChannel = req.url.includes('/@');
let queryUrl = '';
tzarebczan (Migrated from github.com) commented 2019-06-26 19:32:19 +02:00

@ is a reversed character.

@ is a reversed character.
nikooo777 (Migrated from github.com) reviewed 2019-07-02 03:35:12 +02:00
@ -10,0 +22,4 @@
case isChannel:
queryUrl = `https://chainquery.lbry.io/api/sql?query=SELECT channel.name as channel, claim.name, claim.description, claim.language, claim.thumbnail_url, claim.title FROM claim left join claim channel on claim.publisher_id = channel.claim_id where claim.claim_id="${identifier}"`;
break;
nikooo777 (Migrated from github.com) commented 2019-07-02 03:35:12 +02:00

if this is serverside we can use a mysql connector, otherwise no, unless we proxy the calls.
Also this risks getting throttled by chainquery, I think there is a limit to how many queries can be sent to the web API

if this is serverside we can use a mysql connector, otherwise no, unless we proxy the calls. Also this risks getting throttled by chainquery, I think there is a limit to how many queries can be sent to the web API
NetOpWibby (Migrated from github.com) reviewed 2019-07-03 22:56:50 +02:00
@ -10,0 +22,4 @@
case isChannel:
queryUrl = `https://chainquery.lbry.io/api/sql?query=SELECT channel.name as channel, claim.name, claim.description, claim.language, claim.thumbnail_url, claim.title FROM claim left join claim channel on claim.publisher_id = channel.claim_id where claim.claim_id="${identifier}"`;
break;
NetOpWibby (Migrated from github.com) commented 2019-07-03 22:56:50 +02:00

How do I improve this?

How do I improve this?
nikooo777 (Migrated from github.com) reviewed 2019-07-08 13:19:51 +02:00
@ -10,0 +22,4 @@
case isChannel:
queryUrl = `https://chainquery.lbry.io/api/sql?query=SELECT channel.name as channel, claim.name, claim.description, claim.language, claim.thumbnail_url, claim.title FROM claim left join claim channel on claim.publisher_id = channel.claim_id where claim.claim_id="${identifier}"`;
break;
nikooo777 (Migrated from github.com) commented 2019-07-08 13:19:51 +02:00

as first version we agreed that this is fine. however please update from .io to .com

as first version we agreed that this is fine. however please update from .io to .com
tzarebczan commented 2019-07-18 19:34:40 +02:00 (Migrated from github.com)

@NetOperatorWibby / @seanyesmunt can this be merged?

@NetOperatorWibby / @seanyesmunt can this be merged?
neb-b commented 2019-07-19 17:56:37 +02:00 (Migrated from github.com)

@kauffj wanted to test or make changes to this once lbry.tv was running the new app

@kauffj wanted to test or make changes to this once lbry.tv was running the new app
tzarebczan commented 2019-07-19 18:06:09 +02:00 (Migrated from github.com)

Cool, I can try pushing this up on beta / dev later today.

Cool, I can try pushing this up on beta / dev later today.
kauffj (Migrated from github.com) approved these changes 2019-07-29 00:01:54 +02:00
kauffj (Migrated from github.com) left a comment

This works and is mergeable as long as @sayplastic and/or @nikooo777 says it won't bring down and/or harm lbry.tv or chainquery.

I filed https://github.com/lbryio/lbrytv/issues/48 to find the proper solution.

This works and is mergeable as long as @sayplastic and/or @nikooo777 says it won't bring down and/or harm lbry.tv or chainquery. I filed https://github.com/lbryio/lbrytv/issues/48 to find the proper solution.
Sign in to join this conversation.
No reviewers
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: LBRYCommunity/lbry-desktop#2546
No description provided.