Media Session API: Add artwork #162
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -69,6 +69,9 @@ export default function generateCache() { | |
| } else if (Object.prototype.toString.call(video.thumbnail) === '[object String]') { | ||
| assetsToCache.push(video.thumbnail); | ||
| } | ||
| if (Array.isArray(video['media-session-artwork'])) { | ||
|
There was a problem hiding this comment. Is this needed to cache media session artwork images if the Media Session API is not supported? There was a problem hiding this comment. @beaufortfrancois I was wondering if we even want to cache those files. It's quite a lot of data – 400 kB currently – and the benefit of the artwork being available in the offline mode is marginal IMO. We can always fall back to the default artwork in those cases. And if you're asking whether we should exclude browsers with no Media Session API support, then I'd say perhaps. With Safari 15 on iOS out the door, there is currently no mainstream evergreen browser that would not support it.
What is your opinion on the caching? There was a problem hiding this comment.
Is it possible to cache them only when media session metadata are set? There was a problem hiding this comment. I think adding logic to the SW to cache this artwork when it's played, or dowloaded for offline playback, would be a better user experience instead of caching all the artwork during initialization. There was a problem hiding this comment. Good idea, guys, thank you. I've implemented the changes in d7ac820 The artwork is now cached when a video is played or downloaded. @beaufortfrancois @derekherman Can you please take another look? There was a problem hiding this comment. QQ: Is this caching assets every time video is played and/or downloaded or only once? There was a problem hiding this comment. @beaufortfrancois Aha, good point, I did not realize I believe it is sufficient to |
||
| video['media-session-artwork'].forEach((artworkObject) => assetsToCache.push(artworkObject.src)); | ||
| } | ||
| }); | ||
|
|
||
| const data = `/* | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we already have linter warnings so that we don't forget to add media session artwork to future .md files?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I can see how that would be useful, but I don't believe I've ever linted front-matter blocks in markdown files. What tool would you recommend for the task?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
https://www.npmjs.com/package/remark-frontmatter maybe. We use it for web.dev. See https://github.com/GoogleChrome/web.dev/search?q=remark-frontmatter
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think adding a markdown linter is a great idea. However, it feels a bit out of scope for this PR.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Noted. Do you mind filing a feature request to keep track of it?