Merge pull request #168 from GoogleChrome/develop

Release 1.0.0-beta5

Author: Jaroslav Polakovič

cors.json

@@ -4,7 +4,8 @@
       "https://kinoweb-dev.web.app",
       "https://kinoweb-dev--staging-2ra3ji0i.web.app",
       "https://kinoweb.dev",
-      "http://localhost:5000"
+      "http://localhost:5000",
+      "https://www.gstatic.com"
     ],
     "responseHeader": [
       "Accept-Ranges",

firebase.json

@@ -5,7 +5,7 @@
       "headers": [
         {
           "key": "Content-Security-Policy",
-          "value": "script-src 'self'; object-src 'none'; base-uri 'none'"
+          "value": "script-src 'self' www.gstatic.com; object-src 'none'; base-uri 'none'"
         }
       ]
     }],

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "kino",
-  "version": "1.0.0-beta4",
+  "version": "1.0.0-beta5",
   "description": "A sample offline streaming video PWA built for web.dev/media",
   "main": "src/index.js",
   "author": "Google",
@@ -36,6 +36,7 @@
     "rollup": "^2.50.4",
     "rollup-plugin-execute": "^1.1.1",
     "rollup-plugin-import-css": "^2.0.1",
+    "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "tmpl": ">=1.0.5"
   }

package.json

@@ -12,6 +12,7 @@
   --icon: #F7F7F8;
   --footer-text: #5a585b;
   --accent-background: #12292B;
+  --accent-background-alpha: #12292BCC;
   --accent: #00C9DB;
   --accent-text: #fff;
   --separator: #3D3B3F;
@@ -56,6 +57,7 @@
     --icon: #858287;
     --footer-text: #5a585b;
     --accent-background: #ECEFFF;
+    --accent-background-alpha: #ECEFFFCC;
     --accent: #3740FF;
     --accent-text: #000;
     --separator: #E6E4E7;
@@ -543,11 +545,15 @@ main {
  * Single Video
  */
 article {
+  width: 100%;
+  box-sizing: border-box;
   padding-bottom: calc(var(--gutter) * 3);
   margin-bottom: calc(var(--gutter) * 3);
   border-bottom: 1px solid var(--separator);
+  overflow: hidden;
 }
 article .video-content {
+  width: 100%;
   max-width: 760px;
   margin-left: auto;
   margin-right: auto;
@@ -611,69 +617,82 @@ h3[id*="example"]{
   font-size: 24px;
   margin-bottom: calc(var(--gutter) / 2);
 }
-article pre,
+article pre code,
 .code-sample .code-sample--content {
-  max-width: 760px;
-  white-space: pre-wrap;
+  display: block;
   font-size: 18px;
   font-family: monospace;
   padding: var(--gutter);
   border: 1px solid var(--code-border);
   background: var(--code-background);
-  overflow-y: auto;
+  overflow-x: auto;
 }
 .video-container {
-  --play-button-size: 112px;
-  --aspect-ratio-16-9-padding: 56.25%;
-
+  position: relative;
   border-radius: 8px;
   max-width: 1200px;
   margin: 0 auto;
   overflow: hidden;
+  padding-bottom: 56.25%;
 }
-.video-container--image {
-  height: 0;
-  padding-bottom: var(--aspect-ratio-16-9-padding);
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-items: center;
-  flex-flow: column nowrap;
+.video-container--overlay {
+  display: none;
 }
-.video-container--image picture img,
-.video-container--image > img {
+.video-container.has-player {
+  padding-bottom: 0;
+}
+.has-overlay .video-container--overlay {
+  position: absolute;
   width: 100%;
+  height: 100%;
+  inset: 0;
+  display: grid;
+  place-items: center center;
+}
+.has-overlay .video-container--overlay > * {
+  grid-column: 1;
+  grid-row: 1;
+  max-width: 100%;
   height: auto;
-
-  /*
-   * Centers the button without using absolute positioning.
-   *
-   * This helps to avoid stacking issues and clashes with fixed navigation.
-   */
-  margin-bottom: calc(-1 * (var(--aspect-ratio-16-9-padding) / 2) - (var(--play-button-size) / 2));
 }
-.video-container .play {
-  color: #000;
-  background: transparent;
-  border-radius: 50%;
-  width: var(--play-button-size);
-  height: var(--play-button-size);
-  padding: 0;
+.has-overlay .video-container--overlay button {
+  color: var(--accent);
+  background: var(--accent-background-alpha);
+  position: relative;
+  z-index: 100;
   border: none;
   cursor: pointer;
 }
+button.action--play {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  padding: 0;
+  background: #fff;
+  box-shadow: 0 0 30px rgba(0, 0, 0, .5);
+}
+button.action--unmute {
+  display: grid;
+  grid-template-rows: auto auto;
+  justify-items: center;
+  gap: 16px;
+  padding: 24px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+}
+button.action--unmute path {
+  stroke: var(--accent);
+}
 .video-container .video-container--player {
   display: none;
   height: 720px;
 }
-.video-container.has-player .video-container--image {
-  display: none;
-}
 .video-container.has-player .video-container--player {
   display: block;
   height: auto;
 }
-.video--disabled .video-container--image,
+.video--disabled .video-container--overlay,
 .video--disabled video-downloader {
   filter: grayscale(1);
   pointer-events: none;

public/styles.css

@@ -15,9 +15,10 @@
  */
 
 import css from 'rollup-plugin-import-css';
-import generateApi from './src/js/utils/generateApi.js';
-import generateCache from './src/js/utils/generateCache';
+import svg from 'rollup-plugin-svg';
 import json from '@rollup/plugin-json';
+import generateApi from './src/js/utils/generateApi';
+import generateCache from './src/js/utils/generateCache';
 import { terser } from 'rollup-plugin-terser';
 
 const isWatch = process.env.npm_lifecycle_event === 'watch';
@@ -33,6 +34,7 @@ export default [
       generateApi(),
       json(),
       css(),
+      svg(),
       isWatch ? {} : terser(),
     ],
   },
@@ -43,7 +45,9 @@ export default [
       format: 'cjs',
     },
     plugins: [
+      generateApi(),
       generateCache(),
+      json(),
       isWatch ? {} : terser(),
     ],
   },

rollup.config.js

@@ -9,6 +9,25 @@ video-sources:
   - src: https://storage.googleapis.com/kino-assets/single-video/video.mp4
     type: video/mp4; codecs="avc1.640032,mp4a.40.2"
 thumbnail: https://storage.googleapis.com/kino-assets/single-video/thumbnail.png
+media-session-artwork:
+  - sizes: 96x96
+    src: https://storage.googleapis.com/kino-assets/single-video/artwork-96x96.png
+    type: image/png
+  - sizes: 128x128
+    src: https://storage.googleapis.com/kino-assets/single-video/artwork-128x128.png
+    type: image/png
+  - sizes: 192x192
+    src: https://storage.googleapis.com/kino-assets/single-video/artwork-192x192.png
+    type: image/png
+  - sizes: 256x256
+    src: https://storage.googleapis.com/kino-assets/single-video/artwork-256x256.png
+    type: image/png
+  - sizes: 384x384
+    src: https://storage.googleapis.com/kino-assets/single-video/artwork-384x384.png
+    type: image/png
+  - sizes: 512x512
+    src: https://storage.googleapis.com/kino-assets/single-video/artwork-512x512.png
+    type: image/png
 ---
 
 ## Introduction

src/api/basics/01-single-video.md renamed to src/api/01-basics/01-single-video.md

@@ -10,9 +10,29 @@ video-sources:
     type: video/mp4; codecs="av01.0.04M.08, mp4a.40.2"
   - src: https://storage.googleapis.com/kino-assets/multiple-sources/hevc.mp4
     type: video/mp4; codecs="hev1.1.6.L93.90,mp4a.40.2"
+    cast: true
   - src: https://storage.googleapis.com/kino-assets/multiple-sources/vp9.webm
     type: video/webm
 thumbnail: https://storage.googleapis.com/kino-assets/multiple-sources/thumbnail.png
+media-session-artwork:
+  - sizes: 96x96
+    src: https://storage.googleapis.com/kino-assets/multiple-sources/artwork-96x96.png
+    type: image/png
+  - sizes: 128x128
+    src: https://storage.googleapis.com/kino-assets/multiple-sources/artwork-128x128.png
+    type: image/png
+  - sizes: 192x192
+    src: https://storage.googleapis.com/kino-assets/multiple-sources/artwork-192x192.png
+    type: image/png
+  - sizes: 256x256
+    src: https://storage.googleapis.com/kino-assets/multiple-sources/artwork-256x256.png
+    type: image/png
+  - sizes: 384x384
+    src: https://storage.googleapis.com/kino-assets/multiple-sources/artwork-384x384.png
+    type: image/png
+  - sizes: 512x512
+    src: https://storage.googleapis.com/kino-assets/multiple-sources/artwork-512x512.png
+    type: image/png
 ---
 
 ## Introduction