Merge pull request #141 from GoogleChrome/develop

Release 1.0.0-beta3

.eslintrc.json

@@ -32,6 +32,13 @@
           "src/js/utils/generateApi.js"
         ]
       }
+    ],
+    "import/no-unresolved": [
+      "error", {
+        "ignore": [
+          "../public/api.json"
+        ]
+      }
     ]
   }
 }

.github/workflows/cron-schedule.yaml

@@ -0,0 +1,85 @@
+# Copyright 2021 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+name: Cron Schedule
+
+on:
+  schedule:
+    - cron: '20 6 * * 1'
+
+jobs:
+
+  lint-js:
+    name: Lint JS
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          ref: develop
+
+      - name: Get npm cache directory
+        id: npm-cache
+        run: echo "::set-output name=dir::$(npm config get cache)"
+
+      - name: Configure npm cache
+        uses: actions/cache@v2
+        with:
+          path: ${{ steps.npm-cache.outputs.dir }}
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-npm-
+
+      - name: Install Node dependencies
+        run: npm ci
+
+      - name: Detect coding standard violations
+        run: npm run lint
+
+  deploy-staging:
+    needs: [lint-js]
+    name: Deploy Staging
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          ref: develop
+
+      - name: Get npm cache directory
+        id: npm-cache
+        run: echo "::set-output name=dir::$(npm config get cache)"
+
+      - name: Configure npm cache
+        uses: actions/cache@v2
+        with:
+          path: ${{ steps.npm-cache.outputs.dir }}
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-npm-
+
+      - name: Install Node dependencies
+        run: npm ci
+
+      - name: Build Assets
+        run: npm run build
+
+      - name: Deploy to Firebase
+        uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
+          expires: 30d
+          projectId: "${{ secrets.FIREBASE_PROJECT_ID }}"
+          channelId: staging

README.md

@@ -2,7 +2,7 @@
 
 # Kino
 
-This is a sample media (VOD) app to demonstrate media functionality in the context of a Progressive Web App.
+This is a sample Video on demand (VOD) app to demonstrate media functionality in the context of a Progressive Web App (PWA).
 
 ## Running the site locally
 
@@ -14,7 +14,7 @@ Start by creating a new project from the [Firebase Console](https://console.fire
 
 Clone this repository:
 
-    git clone [email protected]:xwp/kino.git
+    git clone [email protected]:GoogleChrome/kino.git
 
 Go to the project folder:
 

cors.json

@@ -2,7 +2,7 @@
   {
     "origin": [
       "https://kinoweb-dev.web.app",
-      "https://kinoweb-dev--staging-5ooakhlz.web.app",
+      "https://kinoweb-dev--staging-2ra3ji0i.web.app",
       "https://kinoweb.dev",
       "http://localhost:5000"
     ],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kino",
-  "version": "1.0.0-beta2",
+  "version": "1.0.0-beta3",
   "description": "A sample offline streaming video PWA built for web.dev/media",
   "main": "src/index.js",
   "author": "Google",
@@ -19,6 +19,7 @@
     "@babel/eslint-parser": "^7.14.4",
     "@babel/eslint-plugin": "^7.13.16",
     "@babel/preset-env": "^7.14.4",
+    "@rollup/plugin-json": "^4.1.0",
     "chokidar-cli": "^2.1.0",
     "eslint": "^7.27.0",
     "eslint-config-airbnb-base": "^14.2.1",

public/index.html

@@ -98,7 +98,7 @@
             </clipPath>
           </defs>
         </svg>
-        <a target="_blank" href="https://github.com/xwp/kino/">See the source code</a>
+        <a target="_blank" href="https://github.com/GoogleChrome/kino/">See the source code</a>
       </p>
     </div>
   </div>

rollup.config.js

@@ -16,16 +16,8 @@
 
 import css from 'rollup-plugin-import-css';
 import generateApi from './src/js/utils/generateApi.js';
-import generateAssetsToCache from './src/js/utils/generateAssetsToCache';
-
-async function setupApi() {
-  try {
-    const api = await generateApi();
-    await generateAssetsToCache(api);
-  } catch (err) {
-    console.error(err);
-  }
-}
+import generateCache from './src/js/utils/generateCache';
+import json from '@rollup/plugin-json';
 
 export default [
   {
@@ -35,6 +27,8 @@ export default [
       format: 'cjs',
     },
     plugins: [
+      generateApi(),
+      json(),
       css(),
     ],
   },
@@ -45,7 +39,7 @@ export default [
       format: 'cjs',
     },
     plugins: [
-      setupApi(),
+      generateCache(),
     ],
   },
 ];

src/api/streaming/06-adaptive-streaming.md

@@ -87,4 +87,4 @@ PWA and building more features and writing new content. If you want to contribut
 to the code that runs this site, make a suggestion, request a feature, or just
 want to see how it was built go check out the [source code].
 
-[source code]: https://github.com/xwp/kino/
+[source code]: https://github.com/GoogleChrome/kino/

src/index.js

@@ -20,6 +20,7 @@
 import Router from './js/classes/Router';
 import VideoDownloaderRegistry from './js/classes/VideoDownloaderRegistry';
 import ConnectionStatus from './js/classes/ConnectionStatus';
+import api from '../public/api.json';
 
 /**
  * Web Components implementation.
@@ -39,6 +40,7 @@ import VideoPage from './js/pages/Video';
 import CategoryPage from './js/pages/Category';
 import DownloadsPage from './js/pages/Downloads';
 import SettingsPage from './js/pages/Settings';
+import ErrorPage from './js/pages/Error';
 
 /**
  * Settings
@@ -118,15 +120,24 @@ const router = new Router({
   videoDownloaderRegistry,
   connectionStatus,
 });
-router.route('^/settings/?', SettingsPage);
-router.route('^/downloads/?', DownloadsPage);
-router.route('^/category/([^/]*)/?', CategoryPage);
 router.route('^/?$', HomePage);
+router.route('^/downloads/$', DownloadsPage);
+router.route('^/settings/$', SettingsPage);
 
 /**
- * Consider all else a single video page.
+ * Add the category pages.
  */
-router.route('.*', VideoPage);
+api.categories.forEach((category) => router.route(`^/category/${category.slug}/$`, CategoryPage));
+
+/**
+ * Add the video pages.
+ */
+api.videos.forEach((video) => router.route(`^/${video.id}/$`, VideoPage));
+
+/**
+ * Consider all else an error.
+ */
+router.route('.*', ErrorPage);
 
 /**
  * Register Service Worker.

src/js/constants.js

@@ -23,7 +23,7 @@
  * There may be adjacent caches used for other purposes and we
  * want to let the SW know which caches it should purge on upgrade.
  */
-export const SW_CACHE_NAME = 'static-assets-v1.0.0-beta2';
+export const SW_CACHE_NAME = 'static-assets-v1.0.0-beta3';
 export const SW_CACHE_FORMAT = /^static-assets-v[a-z0-9.-]+$/;
 
 /**

src/js/pages/Error.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright 2021 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @param {RouterContext} routerContext Context object passed by the Router.
+ */
+export default (routerContext) => {
+  const {
+    mainContent,
+    path,
+  } = routerContext;
+
+  mainContent.innerHTML = `
+    <style>
+      ins {
+        color: var(--accent-text);
+        font-weight: normal;
+      }
+    </style>
+    <div class="container">
+      <header class="page-header">
+        <h1>404. <ins>That’s an error.</ins></h1>
+        <p>The requested URL <code>${path}</code> was not found on this server. <br><ins>That’s all we know.</ins></p>
+      </header>
+    </div>
+  `;
+
+  const meta = document.createElement('meta');
+  meta.name = 'robots';
+  meta.content = 'noindex';
+  document.head.appendChild(meta);
+};

src/js/pages/Home.js

@@ -26,7 +26,8 @@ export default (routerContext) => {
     <div class="container">
       <header class="page-header">
         <h1>Bye bye buffering, hello video!</h1>
-        <p>All our content is available on the web, which means you can get access to it whenever you want it. What's more, if your browser supports the latest technologies, you can save videos to view whenever you're offline!</p>
+        <p>This is a sample Video on demand (VOD) app to demonstrate media functionality in the context of a Progressive Web App (PWA). All the content on this website is available offline when your browser supports the latest technologies, which means you can stream Videos downloaded to your device whenever you want.</p>
+        <p>It’s <strong>important</strong> to note that a single Video from the Google Chrome Developers <a href="https://www.youtube.com/channel/UCnUYZLuoy1rq1aVMwx4aTzw">YouTube channel</a> is being used to demonstrate the PWA’s capabilities. The main takeaway is the use case described in each article and not the Video content itself.</p>
       </header>
     </div>
   `;

src/js/utils/generateApi.js

@@ -83,19 +83,22 @@ const generateApiData = async () => {
 };
 
 /**
- * Generates the JSON API.
+ * Generates the public JSON API.
  *
- * @returns {object} The API object.
+ * @returns {object} The plugin configuration.
  */
-export default async function generateApi() {
-  const start = Date.now();
-  const apiData = await generateApiData();
-  const apiDataJSON = JSON.stringify(apiData, undefined, 2);
+export default function generateApi() {
+  return {
+    name: 'generate-api',
+    buildStart: async () => {
+      const start = Date.now();
+      const apiData = await generateApiData();
+      const apiDataJSON = JSON.stringify(apiData, undefined, 2);
 
-  fs.writeFile(apiDestFile, apiDataJSON, { encoding: 'utf-8' }, () => {
-    const time = Date.now() - start;
-    process.stdout.write(`\x1b[32mcreated \x1b[1m${apiDestFile}\x1b[22m in \x1b[1m${time}ms\x1b[22m\x1b[89m\n`);
-  });
-
-  return apiData;
+      fs.writeFile(apiDestFile, apiDataJSON, { encoding: 'utf-8' }, () => {
+        const time = Date.now() - start;
+        process.stdout.write(`\x1b[32mcreated \x1b[1m${apiDestFile}\x1b[22m in \x1b[1m${time}ms\x1b[22m\x1b[89m\n`);
+      });
+    },
+  };
 }