Improve player detection (#147)

* og:video

* Add player detection tests
This commit is contained in:
MeiMei 2022-06-18 13:14:54 +09:00 committed by GitHub
parent 6a7f17cdc1
commit 30acfb520b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 153 additions and 6 deletions

View File

@ -12,6 +12,7 @@ export default async (url: URL.Url, lang: string = null): Promise<Summary> => {
const res = await scpaping(url.href, { lang: lang || undefined });
const $ = res.$;
const twitterCard = $('meta[property="twitter:card"]').attr('content');
let title =
$('meta[property="og:title"]').attr('content') ||
@ -34,16 +35,23 @@ export default async (url: URL.Url, lang: string = null): Promise<Summary> => {
image = image ? URL.resolve(url.href, image) : null;
const playerUrl =
$('meta[property="twitter:player"]').attr('content') ||
$('meta[name="twitter:player"]').attr('content');
(twitterCard !== 'summary_large_image' && $('meta[property="twitter:player"]').attr('content')) ||
(twitterCard !== 'summary_large_image' && $('meta[name="twitter:player"]').attr('content')) ||
$('meta[property="og:video"]').attr('content') ||
$('meta[property="og:video:secure_url"]').attr('content') ||
$('meta[property="og:video:url"]').attr('content');
const playerWidth = parseInt(
$('meta[property="twitter:player:width"]').attr('content') ||
$('meta[name="twitter:player:width"]').attr('content'));
$('meta[name="twitter:player:width"]').attr('content') ||
$('meta[property="og:video:width"]').attr('content') ||
'');
const playerHeight = parseInt(
$('meta[property="twitter:player:height"]').attr('content') ||
$('meta[name="twitter:player:height"]').attr('content'));
$('meta[name="twitter:player:height"]').attr('content') ||
$('meta[property="og:video:height"]').attr('content') ||
'');
let description =
$('meta[property="og:description"]').attr('content') ||
@ -115,8 +123,8 @@ export default async (url: URL.Url, lang: string = null): Promise<Summary> => {
thumbnail: image || null,
player: {
url: playerUrl || null,
width: playerWidth || null,
height: playerHeight || null
width: Number.isNaN(playerWidth) ? null : playerWidth,
height: Number.isNaN(playerHeight) ? null : playerHeight
},
sitename: siteName || null,
sensitive,

View File

@ -0,0 +1,37 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PeerTube:video</title>
<!--
twitter:card = summary_large_image
twitter:player = <undefined>
og:video:url = Points embed URL
-->
<meta property="og:platform" content="PeerTube">
<meta property="og:type" content="video" />
<meta property="og:site_name" content="Site" />
<meta property="og:title" content="Title" />
<meta property="og:image" content="https://example.com/imageurl" />
<meta property="og:url" content="https://example.com/pageurl" />
<meta property="og:description" content="Desc" />
<meta property="og:video:url" content="https://example.com/embedurl" />
<meta property="og:video:secure_url" content="https://example.com/embedurl" />
<meta property="og:video:type" content="text/html" />
<meta property="og:video:width" content="640" />
<meta property="og:video:height" content="480" />
<meta property="name" content="Desc" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:site" content="@userid" />
<meta property="twitter:title" content="Title" />
<meta property="twitter:description" content="Desc" />
<meta property="twitter:image" content="https://example.com/imageurl" />
</head>
<body>
<h1>Yo</h1>
<p>Hey hey hey syuilo.</p>
</body>
</html>

View File

@ -0,0 +1,30 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pleroma:image</title>
<!--
twitter:card = summary_large_image
twitter:player = <defined>, and URL points thumbnail image.
og:video:* = <undefined>
-->
<meta content="Title" property="og:title">
<meta content="https://example.com/pageurl" property="og:url">
<meta content="Desc" property="og:description">
<meta content="article" property="og:type">
<meta content="https://example.com/imageurl" property="og:image">
<meta content="150" property="og:image:width">
<meta content="150" property="og:image:height">
<meta content="Title" property="twitter:title">
<meta content="Desc" property="twitter:description">
<meta content="summary_large_image" property="twitter:card">
<meta content="https://example.com/imageurl" property="twitter:player"><!-- This URL is an image. -->
</head>
<body>
<h1>Yo</h1>
<p>Hey hey hey syuilo.</p>
</body>
</html>

View File

@ -0,0 +1,35 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pleroma:video</title>
<!--
twitter:card = player
twitter:player = Points embed URL
og:video:url = <undefined>
-->
<meta content="Title" property="og:title">
<meta content="https://example.com/pageurl" property="og:url">
<meta content="Desc" property="og:description">
<meta content="article" property="og:type">
<meta content="https://example.com/videourl" property="og:video">
<meta content="https://example.com/imageurl" property="og:image">
<meta content="Title" property="twitter:title">
<meta content="Desc" property="twitter:description">
<meta content="player" property="twitter:card">
<meta content="https://example.com/embedurl" property="twitter:player">
<meta content="480" property="twitter:player:width">
<meta content="480" property="twitter:player:height">
<meta content="https://example.com/videourl" property="twitter:player:stream">
<meta content="video/mp4" property="twitter:player:stream:content_type">
<meta content="summary_large_image" property="twitter:card">
<meta content="https://example.com/imageurl" property="twitter:player">
</head>
<body>
<h1>Yo</h1>
<p>Hey hey hey syuilo.</p>
</body>
</html>

View File

@ -176,4 +176,41 @@ describe('TwitterCard', () => {
done();
});
});
it('Player detection - PeerTube:video => video', done => {
const app = express();
app.get('/', (req, res) => {
res.sendFile(__dirname + '/htmls/player-peertube-video.html');
});
server = app.listen(port, async () => {
const summary = await summaly(host);
assert.equal(summary.player.url, 'https://example.com/embedurl');
done();
});
});
it('Player detection - Pleroma:video => video', done => {
const app = express();
app.get('/', (req, res) => {
res.sendFile(__dirname + '/htmls/player-pleroma-video.html');
});
server = app.listen(port, async () => {
const summary = await summaly(host);
assert.equal(summary.player.url, 'https://example.com/embedurl');
done();
});
});
it('Player detection - Pleroma:image => image', done => {
const app = express();
app.get('/', (req, res) => {
res.sendFile(__dirname + '/htmls/player-pleroma-image.html');
});
server = app.listen(port, async () => {
const summary = await summaly(host);
assert.equal(summary.player.url, null);
done();
});
});
});