Merge pull request #141 from GoogleChrome/develop

Release 1.0.0-beta3

Author: derekherman

.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-lock.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",

package.json

@@ -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>

public/index.html

@@ -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(),
     ],
   },
 ];

rollup.config.js

@@ -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/api/streaming/06-adaptive-streaming.md

@@ -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.