Bumped version to 20190917.2

* Add device config page

* Remove unused imports

* Revert a lot

Make the PR smaller

* Change columns add battery level

* memoize

* don't bubble

* Add mobile view

* fix filter mobile

* Comments

.eslintrc-hound.json

@@ -1,6 +1,7 @@
 {
-  "extends": "airbnb-base",
+  "extends": ["airbnb-base", "prettier"],
   "parserOptions": {
+    "ecmaVersion": "2020",
     "ecmaFeatures": {
       "jsx": true,
       "modules": true
@@ -8,7 +9,8 @@
   },
   "settings": {
     "react": {
-      "pragma": "h"
+      "pragma": "h",
+      "version": "15.0"
     },
     "import/resolver": {
       "webpack": {
@@ -21,7 +23,7 @@
     "__DEMO__": false,
     "__BUILD__": false,
     "__VERSION__": false,
-    "__PUBLIC_PATH__": false,
+    "__STATIC_PATH__": false,
     "Polymer": true,
     "webkitSpeechRecognition": false,
     "ResizeObserver": false
@@ -68,13 +70,11 @@
     "react/no-find-dom-node": 2,
     "react/no-is-mounted": 2,
     "react/jsx-no-comment-textnodes": 2,
-    "react/jsx-curly-spacing": 2,
     "react/jsx-no-undef": 2,
     "react/jsx-uses-react": 2,
     "react/jsx-uses-vars": 2,
-    "no-restricted-syntax": [0, "ForOfStatement"]
+    "no-restricted-syntax": [0, "ForOfStatement"],
+    "prettier/prettier": "error"
   },
-  "plugins": [
-    "react"
-  ]
+  "plugins": ["react", "prettier"]
 }

.eslintrc.json

@@ -1,14 +1,12 @@
 {
   "extends": "./.eslintrc-hound.json",
-  "plugins": [
-    "react"
-  ],
+  "plugins": ["react"],
   "env": {
     "browser": true
   },
-  "parser": "babel-eslint",
   "rules": {
     "import/no-unresolved": 2,
-    "linebreak-style": 0
+    "linebreak-style": 0,
+    "implicit-arrow-linebreak": 0
   }
 }

.gitattributes

@@ -0,0 +1,13 @@
+# Ensure Docker script files uses LF to support Docker for Windows.
+# Ensure "git config --global core.autocrlf input" before you clone
+*     text eol=lf
+*.ts  whitespace=error
+*.js  whitespace=error
+
+*.ico binary
+*.jpg binary
+*.png binary
+*.zip binary
+*.mp3 binary
+
+demo/public/api/camera_proxy_stream/* binary

.github/ISSUE_TEMPLATE.md

@@ -13,6 +13,10 @@
 
 **Last working Home Assistant release (if known):**
 
+**UI (States or Lovelace UI?):**
+<!--
+- Frontend -> Developer tools -> Info
+-->
 
 **Browser and Operating System:**
 <!--

.gitignore

@@ -4,8 +4,8 @@ node_modules/*
 npm-debug.log
 .DS_Store
 hass_frontend/*
-hass_frontend_es5/*
 .reify-cache
+demo/hademo-icons.html
 
 # Python stuff
 *.py[cod]
@@ -21,6 +21,13 @@ lib
 bin
 dist
 
+# vscode
+.vscode/*
+!.vscode/extensions.json
+
+# Cast dev settings 
+src/cast/dev_const.ts
+
 # Secrets
 .lokalise_token
 yarn-error.log

.nvmrc

@@ -1 +1 @@
-8.11.1
+12.1

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "ms-vscode.vscode-typescript-tslint-plugin",
+    "esbenp.prettier-vscode",
+    "bierner.lit-html",
+    "runem.lit-plugin"
+  ]
+}

Dockerfile

@@ -1,25 +1,31 @@
-FROM node:8.2.1-alpine
+FROM node:8.11.1-alpine
 
 # install yarn
 ENV PATH /root/.yarn/bin:$PATH
 
+## Install/force base tools
 RUN apk update \
-  && apk add curl bash binutils tar git python3 \
+  && apk add make g++ curl bash binutils tar git python2 python3 \
   && rm -rf /var/cache/apk/* \
   && /bin/bash \
-  && touch ~/.bashrc \
-  && curl -o- -L https://yarnpkg.com/install.sh | bash
+  && touch ~/.bashrc
 
+## Install yarn
+RUN curl -o- -L https://yarnpkg.com/install.sh | bash
+
+## Setup the project
 RUN mkdir -p /frontend
+
 WORKDIR /frontend
 
-ENV NODE_ENV production
+COPY package.json yarn.lock ./
 
-COPY package.json ./
-RUN yarn
-
-COPY bower.json ./
-RUN ./node_modules/.bin/bower install --allow-root
+RUN yarn install --frozen-lockfile
 
 COPY . .
-CMD [ "/bin/bash", "./script/build_frontend" ]
+
+COPY script/docker_entrypoint.sh /usr/bin/docker_entrypoint.sh
+
+RUN chmod +x /usr/bin/docker_entrypoint.sh
+
+CMD [ "docker_entrypoint.sh" ]

README.md

@@ -16,6 +16,18 @@ This is the repository for the official [Home Assistant](https://home-assistant.
 - Gallery: `cd gallery && script/develop_gallery`
 - Hass.io: [Instructions](https://developers.home-assistant.io/docs/en/hassio_hass.html)
 
+## Frontend development
+
+### Classic environment
+A complete guide can be found at the following [link](https://www.home-assistant.io/developers/frontend/). It describes a short guide for the build of project.
+
+### Docker environment
+It is possible to compile the project and/or run commands in the development environment having only the [Docker](https://www.docker.com) pre-installed in the system. On the root of project you can do:
+* `sh ./script/docker_run.sh build` Build all the project with one command
+* `sh ./script/docker_run.sh bash` Open an interactive shell (the same environment generated by the *classic environment*) where you can run commands. This bash work on your project directory and any change on your file is automatically present within your build bash.
+
+**Note**: if you have installed `npm` in addition to the `docker`, you can use the commands `npm run docker_build` and `npm run bash` to get a full build or bash as explained above
+
 ## License
 
 Home Assistant is open-source and Apache 2 licensed. Feel free to browse the repository, learn and reuse parts in your own projects.

azure-pipelines-release.yml

@@ -0,0 +1,64 @@
+# https://dev.azure.com/home-assistant
+
+trigger:
+  batch: true
+  tags:
+    include:
+      - "*"
+pr: none
+variables:
+  - name: versionWheels
+    value: '1.3-3.7-alpine3.10'
+  - name: versionNode
+    value: '12.1'
+  - group: twine
+resources:
+  repositories:
+    - repository: azure
+      type: github
+      name: 'home-assistant/ci-azure'
+      endpoint: 'home-assistant'
+
+
+stages:
+  - stage: "Validate"
+    jobs:
+    - template: templates/azp-job-version.yaml@azure
+
+  - stage: "Build"
+    jobs:
+      - job: "ReleasePython"
+        pool:
+          vmImage: "ubuntu-latest"
+        steps:
+          - task: UsePythonVersion@0
+            displayName: "Use Python 3.7"
+            inputs:
+              versionSpec: "3.7"
+          - task: NodeTool@0
+            displayName: "Use Node $(versionNode)"
+            inputs:
+              versionSpec: "$(versionNode)"
+          - script: pip install twine wheel
+            displayName: "Install tools"
+          - script: |
+              export TWINE_USERNAME="$(twineUser)"
+              export TWINE_PASSWORD="$(twinePassword)"
+
+              script/release
+            displayName: "Build and release package"
+      - template: templates/azp-job-wheels.yaml@azure
+        parameters:
+          builderVersion: '$(versionWheels)'
+          builderApk: 'build-base'
+          wheelsLocal: true
+          preBuild:
+          - task: NodeTool@0
+            displayName: "Use Node $(versionNode)"
+            inputs:
+              versionSpec: "$(versionNode)"
+          - script: |
+              set -e
+
+              yarn install
+              script/build_frontend

build-scripts/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../.eslintrc.json",
+  "rules": {
+    "import/no-extraneous-dependencies": 0,
+    "global-require": 0
+  }
+}

build-scripts/gulp/app.js

@@ -0,0 +1,51 @@
+// Run HA develop mode
+const gulp = require("gulp");
+
+require("./clean.js");
+require("./translations.js");
+require("./gen-icons.js");
+require("./gather-static.js");
+require("./webpack.js");
+require("./service-worker.js");
+require("./entry-html.js");
+
+gulp.task(
+  "develop-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean",
+    gulp.parallel(
+      "gen-service-worker-dev",
+      "gen-icons",
+      "gen-pages-dev",
+      "gen-index-app-dev",
+      gulp.series("create-test-translation", "build-translations")
+    ),
+    "copy-static",
+    "webpack-watch-app"
+  )
+);
+
+gulp.task(
+  "build-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean",
+    gulp.parallel("gen-icons", "build-translations"),
+    "copy-static",
+    gulp.parallel(
+      "webpack-prod-app",
+      // Do not compress static files in CI, it's SLOW.
+      ...(process.env.CI === "true" ? [] : ["compress-static"])
+    ),
+    gulp.parallel(
+      "gen-pages-prod",
+      "gen-index-app-prod",
+      "gen-service-worker-prod"
+    )
+  )
+);

build-scripts/gulp/cast.js

@@ -0,0 +1,37 @@
+// Run cast develop mode
+const gulp = require("gulp");
+
+require("./clean.js");
+require("./translations.js");
+require("./gen-icons.js");
+require("./gather-static.js");
+require("./webpack.js");
+require("./service-worker.js");
+require("./entry-html.js");
+
+gulp.task(
+  "develop-cast",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-cast",
+    gulp.parallel("gen-icons", "gen-index-cast-dev", "build-translations"),
+    "copy-static-cast",
+    "webpack-dev-server-cast"
+  )
+);
+
+gulp.task(
+  "build-cast",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-cast",
+    gulp.parallel("gen-icons", "build-translations"),
+    "copy-static-cast",
+    "webpack-prod-cast",
+    "gen-index-cast-prod"
+  )
+);

build-scripts/gulp/clean.js

@@ -0,0 +1,23 @@
+const del = require("del");
+const gulp = require("gulp");
+const config = require("../paths");
+require("./translations");
+
+gulp.task(
+  "clean",
+  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
+    return del([config.root, config.build_dir]);
+  })
+);
+gulp.task(
+  "clean-demo",
+  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
+    return del([config.demo_root, config.build_dir]);
+  })
+);
+gulp.task(
+  "clean-cast",
+  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
+    return del([config.cast_root, config.build_dir]);
+  })
+);

build-scripts/gulp/demo.js

@@ -0,0 +1,42 @@
+// Run demo develop mode
+const gulp = require("gulp");
+
+require("./clean.js");
+require("./translations.js");
+require("./gen-icons.js");
+require("./gather-static.js");
+require("./webpack.js");
+require("./service-worker.js");
+require("./entry-html.js");
+
+gulp.task(
+  "develop-demo",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-demo",
+    gulp.parallel(
+      "gen-icons",
+      "gen-icons-demo",
+      "gen-index-demo-dev",
+      "build-translations"
+    ),
+    "copy-static-demo",
+    "webpack-dev-server-demo"
+  )
+);
+
+gulp.task(
+  "build-demo",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-demo",
+    gulp.parallel("gen-icons", "gen-icons-demo", "build-translations"),
+    "copy-static-demo",
+    "webpack-prod-demo",
+    "gen-index-demo-prod"
+  )
+);

build-scripts/gulp/download_translations.js

@@ -0,0 +1,73 @@
+const del = require("del");
+const gulp = require("gulp");
+const mapStream = require("map-stream");
+
+const inDir = "translations";
+const downloadDir = inDir + "/downloads";
+
+const tasks = [];
+
+function hasHtml(data) {
+  return /<[a-z][\s\S]*>/i.test(data);
+}
+
+function recursiveCheckHasHtml(file, data, errors, recKey) {
+  Object.keys(data).forEach(function(key) {
+    if (typeof data[key] === "object") {
+      nextRecKey = recKey ? `${recKey}.${key}` : key;
+      recursiveCheckHasHtml(file, data[key], errors, nextRecKey);
+    } else if (hasHtml(data[key])) {
+      errors.push(`HTML found in ${file.path} at key ${recKey}.${key}`);
+    }
+  });
+}
+
+function checkHtml() {
+  let errors = [];
+
+  return mapStream(function(file, cb) {
+    const content = file.contents;
+    let error;
+    if (content) {
+      if (hasHtml(String(content))) {
+        const data = JSON.parse(String(content));
+        recursiveCheckHasHtml(file, data, errors);
+        if (errors.length > 0) {
+          error = errors.join("\r\n");
+        }
+      }
+    }
+    cb(error, file);
+  });
+}
+
+let taskName = "clean-downloaded-translations";
+gulp.task(taskName, function() {
+  return del([`${downloadDir}/**`]);
+});
+tasks.push(taskName);
+
+taskName = "check-translations-html";
+gulp.task(taskName, function() {
+  return gulp.src(`${downloadDir}/*.json`).pipe(checkHtml());
+});
+tasks.push(taskName);
+
+taskName = "move-downloaded-translations";
+gulp.task(taskName, function() {
+  return gulp.src(`${downloadDir}/*.json`).pipe(gulp.dest(inDir));
+});
+tasks.push(taskName);
+
+taskName = "check-downloaded-translations";
+gulp.task(
+  taskName,
+  gulp.series(
+    "check-translations-html",
+    "move-downloaded-translations",
+    "clean-downloaded-translations"
+  )
+);
+tasks.push(taskName);
+
+module.exports = tasks;

build-scripts/gulp/entry-html.js

@@ -0,0 +1,216 @@
+// Tasks to generate entry HTML
+/* eslint-disable import/no-dynamic-require */
+/* eslint-disable global-require */
+const gulp = require("gulp");
+const fs = require("fs-extra");
+const path = require("path");
+const template = require("lodash.template");
+const minify = require("html-minifier").minify;
+const config = require("../paths.js");
+
+const templatePath = (tpl) =>
+  path.resolve(config.polymer_dir, "src/html/", `${tpl}.html.template`);
+
+const demoTemplatePath = (tpl) =>
+  path.resolve(config.demo_dir, "src/html/", `${tpl}.html.template`);
+
+const castTemplatePath = (tpl) =>
+  path.resolve(config.cast_dir, "src/html/", `${tpl}.html.template`);
+
+const readFile = (pth) => fs.readFileSync(pth).toString();
+
+const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
+  const compiled = template(readFile(pathFunc(pth)));
+  return compiled({ ...data, renderTemplate });
+};
+
+const renderDemoTemplate = (pth, data = {}) =>
+  renderTemplate(pth, data, demoTemplatePath);
+
+const renderCastTemplate = (pth, data = {}) =>
+  renderTemplate(pth, data, castTemplatePath);
+
+const minifyHtml = (content) =>
+  minify(content, {
+    collapseWhitespace: true,
+    minifyJS: true,
+    minifyCSS: true,
+    removeComments: true,
+  });
+
+const PAGES = ["onboarding", "authorize"];
+
+gulp.task("gen-pages-dev", (done) => {
+  for (const page of PAGES) {
+    const content = renderTemplate(page, {
+      latestPageJS: `/frontend_latest/${page}.js`,
+      latestHassIconsJS: "/frontend_latest/hass-icons.js",
+
+      es5Compatibility: "/frontend_es5/compatibility.js",
+      es5PageJS: `/frontend_es5/${page}.js`,
+      es5HassIconsJS: "/frontend_es5/hass-icons.js",
+    });
+
+    fs.outputFileSync(path.resolve(config.root, `${page}.html`), content);
+  }
+  done();
+});
+
+gulp.task("gen-pages-prod", (done) => {
+  const latestManifest = require(path.resolve(config.output, "manifest.json"));
+  const es5Manifest = require(path.resolve(config.output_es5, "manifest.json"));
+
+  for (const page of PAGES) {
+    const content = renderTemplate(page, {
+      latestPageJS: latestManifest[`${page}.js`],
+      latestHassIconsJS: latestManifest["hass-icons.js"],
+
+      es5Compatibility: es5Manifest["compatibility.js"],
+      es5PageJS: es5Manifest[`${page}.js`],
+      es5HassIconsJS: es5Manifest["hass-icons.js"],
+    });
+
+    fs.outputFileSync(
+      path.resolve(config.root, `${page}.html`),
+      minifyHtml(content)
+    );
+  }
+  done();
+});
+
+gulp.task("gen-index-app-dev", (done) => {
+  // In dev mode we don't mangle names, so we hardcode urls. That way we can
+  // run webpack as last in watch mode, which blocks output.
+  const content = renderTemplate("index", {
+    latestAppJS: "/frontend_latest/app.js",
+    latestCoreJS: "/frontend_latest/core.js",
+    latestCustomPanelJS: "/frontend_latest/custom-panel.js",
+    latestHassIconsJS: "/frontend_latest/hass-icons.js",
+
+    es5Compatibility: "/frontend_es5/compatibility.js",
+    es5AppJS: "/frontend_es5/app.js",
+    es5CoreJS: "/frontend_es5/core.js",
+    es5CustomPanelJS: "/frontend_es5/custom-panel.js",
+    es5HassIconsJS: "/frontend_es5/hass-icons.js",
+  }).replace(/#THEMEC/g, "{{ theme_color }}");
+
+  fs.outputFileSync(path.resolve(config.root, "index.html"), content);
+  done();
+});
+
+gulp.task("gen-index-app-prod", (done) => {
+  const latestManifest = require(path.resolve(config.output, "manifest.json"));
+  const es5Manifest = require(path.resolve(config.output_es5, "manifest.json"));
+  const content = renderTemplate("index", {
+    latestAppJS: latestManifest["app.js"],
+    latestCoreJS: latestManifest["core.js"],
+    latestCustomPanelJS: latestManifest["custom-panel.js"],
+    latestHassIconsJS: latestManifest["hass-icons.js"],
+
+    es5Compatibility: es5Manifest["compatibility.js"],
+    es5AppJS: es5Manifest["app.js"],
+    es5CoreJS: es5Manifest["core.js"],
+    es5CustomPanelJS: es5Manifest["custom-panel.js"],
+    es5HassIconsJS: es5Manifest["hass-icons.js"],
+  });
+  const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");
+
+  fs.outputFileSync(path.resolve(config.root, "index.html"), minified);
+  done();
+});
+
+gulp.task("gen-index-cast-dev", (done) => {
+  const contentReceiver = renderCastTemplate("receiver", {
+    latestReceiverJS: "/frontend_latest/receiver.js",
+  });
+  fs.outputFileSync(
+    path.resolve(config.cast_root, "receiver.html"),
+    contentReceiver
+  );
+
+  const contentFAQ = renderCastTemplate("launcher-faq", {
+    latestLauncherJS: "/frontend_latest/launcher.js",
+    es5LauncherJS: "/frontend_es5/launcher.js",
+  });
+  fs.outputFileSync(path.resolve(config.cast_root, "faq.html"), contentFAQ);
+
+  const contentLauncher = renderCastTemplate("launcher", {
+    latestLauncherJS: "/frontend_latest/launcher.js",
+    es5LauncherJS: "/frontend_es5/launcher.js",
+  });
+  fs.outputFileSync(
+    path.resolve(config.cast_root, "index.html"),
+    contentLauncher
+  );
+  done();
+});
+
+gulp.task("gen-index-cast-prod", (done) => {
+  const latestManifest = require(path.resolve(
+    config.cast_output,
+    "manifest.json"
+  ));
+  const es5Manifest = require(path.resolve(
+    config.cast_output_es5,
+    "manifest.json"
+  ));
+
+  const contentReceiver = renderCastTemplate("receiver", {
+    latestReceiverJS: latestManifest["receiver.js"],
+  });
+  fs.outputFileSync(
+    path.resolve(config.cast_root, "receiver.html"),
+    contentReceiver
+  );
+
+  const contentFAQ = renderCastTemplate("launcher-faq", {
+    latestLauncherJS: latestManifest["launcher.js"],
+    es5LauncherJS: es5Manifest["launcher.js"],
+  });
+  fs.outputFileSync(path.resolve(config.cast_root, "faq.html"), contentFAQ);
+
+  const contentLauncher = renderCastTemplate("launcher", {
+    latestLauncherJS: latestManifest["launcher.js"],
+    es5LauncherJS: es5Manifest["launcher.js"],
+  });
+  fs.outputFileSync(
+    path.resolve(config.cast_root, "index.html"),
+    contentLauncher
+  );
+  done();
+});
+
+gulp.task("gen-index-demo-dev", (done) => {
+  // In dev mode we don't mangle names, so we hardcode urls. That way we can
+  // run webpack as last in watch mode, which blocks output.
+  const content = renderDemoTemplate("index", {
+    latestDemoJS: "/frontend_latest/main.js",
+
+    es5Compatibility: "/frontend_es5/compatibility.js",
+    es5DemoJS: "/frontend_es5/main.js",
+  });
+
+  fs.outputFileSync(path.resolve(config.demo_root, "index.html"), content);
+  done();
+});
+
+gulp.task("gen-index-demo-prod", (done) => {
+  const latestManifest = require(path.resolve(
+    config.demo_output,
+    "manifest.json"
+  ));
+  const es5Manifest = require(path.resolve(
+    config.demo_output_es5,
+    "manifest.json"
+  ));
+  const content = renderDemoTemplate("index", {
+    latestDemoJS: latestManifest["main.js"],
+
+    es5Compatibility: es5Manifest["compatibility.js"],
+    es5DemoJS: es5Manifest["main.js"],
+  });
+  const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");
+
+  fs.outputFileSync(path.resolve(config.demo_root, "index.html"), minified);
+  done();
+});

build-scripts/gulp/gather-static.js

@@ -0,0 +1,128 @@
+// Gulp task to gather all static files.
+
+const gulp = require("gulp");
+const path = require("path");
+const cpx = require("cpx");
+const fs = require("fs-extra");
+const zopfli = require("gulp-zopfli-green");
+const merge = require("merge-stream");
+const paths = require("../paths");
+
+const npmPath = (...parts) =>
+  path.resolve(paths.polymer_dir, "node_modules", ...parts);
+const polyPath = (...parts) => path.resolve(paths.polymer_dir, ...parts);
+
+const copyFileDir = (fromFile, toDir) =>
+  fs.copySync(fromFile, path.join(toDir, path.basename(fromFile)));
+
+const genStaticPath = (staticDir) => (...parts) =>
+  path.resolve(staticDir, ...parts);
+
+function copyTranslations(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+
+  // Translation output
+  fs.copySync(
+    polyPath("build-translations/output"),
+    staticPath("translations")
+  );
+}
+
+function copyPolyfills(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+
+  // Web Component polyfills and adapters
+  copyFileDir(
+    npmPath("@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"),
+    staticPath("polyfills/")
+  );
+  copyFileDir(
+    npmPath("@webcomponents/webcomponentsjs/webcomponents-bundle.js"),
+    staticPath("polyfills/")
+  );
+  copyFileDir(
+    npmPath("@webcomponents/webcomponentsjs/webcomponents-bundle.js.map"),
+    staticPath("polyfills/")
+  );
+}
+
+function copyFonts(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+  // Local fonts
+  cpx.copySync(
+    npmPath("roboto-fontface/fonts/roboto/*.woff2"),
+    staticPath("fonts/roboto")
+  );
+}
+
+function copyMapPanel(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+  copyFileDir(
+    npmPath("leaflet/dist/leaflet.css"),
+    staticPath("images/leaflet/")
+  );
+  fs.copySync(
+    npmPath("leaflet/dist/images"),
+    staticPath("images/leaflet/images/")
+  );
+}
+
+function compressStatic(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+  const polyfills = gulp
+    .src(staticPath("polyfills/*.js"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(staticPath("polyfills")));
+  const translations = gulp
+    .src(staticPath("translations/*.json"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(staticPath("translations")));
+
+  return merge(polyfills, translations);
+}
+
+gulp.task("copy-static", (done) => {
+  const staticDir = paths.static;
+  const staticPath = genStaticPath(paths.static);
+  // Basic static files
+  fs.copySync(polyPath("public"), paths.root);
+
+  copyPolyfills(staticDir);
+  copyFonts(staticDir);
+  copyTranslations(staticDir);
+
+  // Panel assets
+  copyFileDir(
+    npmPath("react-big-calendar/lib/css/react-big-calendar.css"),
+    staticPath("panels/calendar/")
+  );
+  copyMapPanel(staticDir);
+  done();
+});
+
+gulp.task("compress-static", () => compressStatic(paths.static));
+
+gulp.task("copy-static-demo", (done) => {
+  // Copy app static files
+  fs.copySync(polyPath("public"), paths.demo_root);
+  // Copy demo static files
+  fs.copySync(path.resolve(paths.demo_dir, "public"), paths.demo_root);
+
+  copyPolyfills(paths.demo_static);
+  copyMapPanel(paths.demo_static);
+  copyFonts(paths.demo_static);
+  copyTranslations(paths.demo_static);
+  done();
+});
+
+gulp.task("copy-static-cast", (done) => {
+  // Copy app static files
+  fs.copySync(polyPath("public/static"), paths.cast_static);
+  // Copy cast static files
+  fs.copySync(path.resolve(paths.cast_dir, "public"), paths.cast_root);
+
+  copyMapPanel(paths.cast_static);
+  copyFonts(paths.cast_static);
+  copyTranslations(paths.cast_static);
+  done();
+});

build-scripts/gulp/gen-icons.js

@@ -0,0 +1,136 @@
+const gulp = require("gulp");
+const path = require("path");
+const fs = require("fs");
+const paths = require("../paths");
+
+const ICON_PACKAGE_PATH = path.resolve(
+  __dirname,
+  "../../node_modules/@mdi/svg/"
+);
+const META_PATH = path.resolve(ICON_PACKAGE_PATH, "meta.json");
+const ICON_PATH = path.resolve(ICON_PACKAGE_PATH, "svg");
+const OUTPUT_DIR = path.resolve(__dirname, "../../build");
+const MDI_OUTPUT_PATH = path.resolve(OUTPUT_DIR, "mdi.html");
+const HASS_OUTPUT_PATH = path.resolve(OUTPUT_DIR, "hass-icons.html");
+
+const BUILT_IN_PANEL_ICONS = [
+  "calendar", // Calendar
+  "settings", // Config
+  "home-assistant", // Hass.io
+  "poll-box", // History panel
+  "format-list-bulleted-type", // Logbook
+  "mailbox", // Mailbox
+  "tooltip-account", // Map
+  "cart", // Shopping List
+  "hammer", // developer-tools
+];
+
+// Given an icon name, load the SVG file
+function loadIcon(name) {
+  const iconPath = path.resolve(ICON_PATH, `${name}.svg`);
+  try {
+    return fs.readFileSync(iconPath, "utf-8");
+  } catch (err) {
+    return null;
+  }
+}
+
+// Given an SVG file, convert it to an iron-iconset-svg definition
+function transformXMLtoPolymer(name, xml) {
+  const start = xml.indexOf("><path") + 1;
+  const end = xml.length - start - 6;
+  const pth = xml.substr(start, end);
+  return `<g id="${name}">${pth}</g>`;
+}
+
+// Given an iconset name and icon names, generate a polymer iconset
+function generateIconset(iconsetName, iconNames) {
+  const iconDefs = Array.from(iconNames)
+    .map((name) => {
+      const iconDef = loadIcon(name);
+      if (!iconDef) {
+        throw new Error(`Unknown icon referenced: ${name}`);
+      }
+      return transformXMLtoPolymer(name, iconDef);
+    })
+    .join("");
+  return `<ha-iconset-svg name="${iconsetName}" size="24"><svg><defs>${iconDefs}</defs></svg></ha-iconset-svg>`;
+}
+
+// Generate the full MDI iconset
+function genMDIIcons() {
+  const meta = JSON.parse(
+    fs.readFileSync(path.resolve(ICON_PACKAGE_PATH, META_PATH), "UTF-8")
+  );
+  const iconNames = meta.map((iconInfo) => iconInfo.name);
+  if (!fs.existsSync(OUTPUT_DIR)) {
+    fs.mkdirSync(OUTPUT_DIR);
+  }
+  fs.writeFileSync(MDI_OUTPUT_PATH, generateIconset("mdi", iconNames));
+}
+
+// Helper function to map recursively over files in a folder and it's subfolders
+function mapFiles(startPath, filter, mapFunc) {
+  const files = fs.readdirSync(startPath);
+  for (let i = 0; i < files.length; i++) {
+    const filename = path.join(startPath, files[i]);
+    const stat = fs.lstatSync(filename);
+    if (stat.isDirectory()) {
+      mapFiles(filename, filter, mapFunc);
+    } else if (filename.indexOf(filter) >= 0) {
+      mapFunc(filename);
+    }
+  }
+}
+
+// Find all icons used by the project.
+function findIcons(searchPath, iconsetName) {
+  const iconRegex = new RegExp(`${iconsetName}:[\\w-]+`, "g");
+  const icons = new Set();
+  function processFile(filename) {
+    const content = fs.readFileSync(filename);
+    let match;
+    // eslint-disable-next-line
+    while ((match = iconRegex.exec(content))) {
+      // strip off "hass:" and add to set
+      icons.add(match[0].substr(iconsetName.length + 1));
+    }
+  }
+  mapFiles(searchPath, ".js", processFile);
+  mapFiles(searchPath, ".ts", processFile);
+  return icons;
+}
+
+function genHassIcons() {
+  const iconNames = findIcons("./src", "hass");
+  BUILT_IN_PANEL_ICONS.forEach((name) => iconNames.add(name));
+  if (!fs.existsSync(OUTPUT_DIR)) {
+    fs.mkdirSync(OUTPUT_DIR);
+  }
+  fs.writeFileSync(HASS_OUTPUT_PATH, generateIconset("hass", iconNames));
+}
+
+gulp.task("gen-icons-mdi", (done) => {
+  genMDIIcons();
+  done();
+});
+gulp.task("gen-icons-hass", (done) => {
+  genHassIcons();
+  done();
+});
+gulp.task("gen-icons", gulp.series("gen-icons-hass", "gen-icons-mdi"));
+
+gulp.task("gen-icons-demo", (done) => {
+  const iconNames = findIcons(path.resolve(paths.demo_dir, "./src"), "hademo");
+  fs.writeFileSync(
+    path.resolve(paths.demo_dir, "hademo-icons.html"),
+    generateIconset("hademo", iconNames)
+  );
+  done();
+});
+
+module.exports = {
+  findIcons,
+  generateIconset,
+  genMDIIcons,
+};

build-scripts/gulp/service-worker.js

@@ -0,0 +1,33 @@
+// Generate service worker.
+// Based on manifest, create a file with the content as service_worker.js
+/* eslint-disable import/no-dynamic-require */
+/* eslint-disable global-require */
+const gulp = require("gulp");
+const path = require("path");
+const fs = require("fs-extra");
+const config = require("../paths.js");
+
+const swPath = path.resolve(config.root, "service_worker.js");
+
+const writeSW = (content) => fs.outputFileSync(swPath, content.trim() + "\n");
+
+gulp.task("gen-service-worker-dev", (done) => {
+  writeSW(
+    `
+console.debug('Service worker disabled in development');
+
+self.addEventListener('install', (event) => {
+  self.skipWaiting();
+});
+  `
+  );
+  done();
+});
+
+gulp.task("gen-service-worker-prod", (done) => {
+  fs.copySync(
+    path.resolve(config.output, "service_worker.js"),
+    path.resolve(config.root, "service_worker.js")
+  );
+  done();
+});

build-scripts/gulp/translations.js

@@ -0,0 +1,404 @@
+const del = require("del");
+const path = require("path");
+const gulp = require("gulp");
+const fs = require("fs");
+const foreach = require("gulp-foreach");
+const hash = require("gulp-hash");
+const hashFilename = require("gulp-hash-filename");
+const merge = require("gulp-merge-json");
+const minify = require("gulp-jsonminify");
+const rename = require("gulp-rename");
+const transform = require("gulp-json-transform");
+
+const inDir = "translations";
+const workDir = "build-translations";
+const fullDir = workDir + "/full";
+const coreDir = workDir + "/core";
+const outDir = workDir + "/output";
+
+String.prototype.rsplit = function(sep, maxsplit) {
+  var split = this.split(sep);
+  return maxsplit
+    ? [split.slice(0, -maxsplit).join(sep)].concat(split.slice(-maxsplit))
+    : split;
+};
+
+// Panel translations which should be split from the core translations. These
+// should mirror the fragment definitions in polymer.json, so that we load
+// additional resources at equivalent points.
+const TRANSLATION_FRAGMENTS = [
+  "config",
+  "history",
+  "logbook",
+  "mailbox",
+  "profile",
+  "shopping-list",
+  "page-authorize",
+  "page-demo",
+  "page-onboarding",
+  "developer-tools",
+];
+
+const tasks = [];
+
+function recursiveFlatten(prefix, data) {
+  let output = {};
+  Object.keys(data).forEach(function(key) {
+    if (typeof data[key] === "object") {
+      output = Object.assign(
+        {},
+        output,
+        recursiveFlatten(prefix + key + ".", data[key])
+      );
+    } else {
+      output[prefix + key] = data[key];
+    }
+  });
+  return output;
+}
+
+function flatten(data) {
+  return recursiveFlatten("", data);
+}
+
+function emptyFilter(data) {
+  const newData = {};
+  Object.keys(data).forEach((key) => {
+    if (data[key]) {
+      if (typeof data[key] === "object") {
+        newData[key] = emptyFilter(data[key]);
+      } else {
+        newData[key] = data[key];
+      }
+    }
+  });
+  return newData;
+}
+
+function recursiveEmpty(data) {
+  const newData = {};
+  Object.keys(data).forEach((key) => {
+    if (data[key]) {
+      if (typeof data[key] === "object") {
+        newData[key] = recursiveEmpty(data[key]);
+      } else {
+        newData[key] = "TRANSLATED";
+      }
+    }
+  });
+  return newData;
+}
+
+/**
+ * Replace Lokalise key placeholders with their actual values.
+ *
+ * We duplicate the behavior of Lokalise here so that placeholders can
+ * be included in src/translations/en.json, but still be usable while
+ * developing locally.
+ *
+ * @link https://docs.lokalise.co/article/KO5SZWLLsy-key-referencing
+ */
+const re_key_reference = /\[%key:([^%]+)%\]/;
+function lokalise_transform(data, original) {
+  const output = {};
+  Object.entries(data).forEach(([key, value]) => {
+    if (value instanceof Object) {
+      output[key] = lokalise_transform(value, original);
+    } else {
+      output[key] = value.replace(re_key_reference, (match, key) => {
+        const replace = key.split("::").reduce((tr, k) => tr[k], original);
+        if (typeof replace !== "string") {
+          throw Error(
+            `Invalid key placeholder ${key} in src/translations/en.json`
+          );
+        }
+        return replace;
+      });
+    }
+  });
+  return output;
+}
+
+let taskName = "clean-translations";
+gulp.task(taskName, function() {
+  return del([`${outDir}/**/*.json`]);
+});
+tasks.push(taskName);
+
+gulp.task("ensure-translations-build-dir", (done) => {
+  if (!fs.existsSync(workDir)) {
+    fs.mkdirSync(workDir);
+  }
+  done();
+});
+
+taskName = "create-test-metadata";
+gulp.task(
+  taskName,
+  gulp.series("ensure-translations-build-dir", function writeTestMetaData(cb) {
+    fs.writeFile(
+      workDir + "/testMetadata.json",
+      JSON.stringify({
+        test: {
+          nativeName: "Test",
+        },
+      }),
+      cb
+    );
+  })
+);
+tasks.push(taskName);
+
+taskName = "create-test-translation";
+gulp.task(
+  taskName,
+  gulp.series("create-test-metadata", function() {
+    return gulp
+      .src("src/translations/en.json")
+      .pipe(
+        transform(function(data, file) {
+          return recursiveEmpty(data);
+        })
+      )
+      .pipe(rename("test.json"))
+      .pipe(gulp.dest(workDir));
+  })
+);
+tasks.push(taskName);
+
+/**
+ * This task will build a master translation file, to be used as the base for
+ * all languages. This starts with src/translations/en.json, and replaces all
+ * Lokalise key placeholders with their target values. Under normal circumstances,
+ * this will be the same as translations/en.json However, we build it here to
+ * facilitate both making changes in development mode, and to ensure that the
+ * project is buildable immediately after merging new translation keys, since
+ * the Lokalise update to translations/en.json will not happen immediately.
+ */
+taskName = "build-master-translation";
+gulp.task(
+  taskName,
+  gulp.series("clean-translations", function() {
+    return gulp
+      .src("src/translations/en.json")
+      .pipe(
+        transform(function(data, file) {
+          return lokalise_transform(data, data);
+        })
+      )
+      .pipe(rename("translationMaster.json"))
+      .pipe(gulp.dest(workDir));
+  })
+);
+tasks.push(taskName);
+
+taskName = "build-merged-translations";
+gulp.task(
+  taskName,
+  gulp.series("build-master-translation", function() {
+    return gulp
+      .src([inDir + "/*.json", workDir + "/test.json"], { allowEmpty: true })
+      .pipe(
+        foreach(function(stream, file) {
+          // For each language generate a merged json file. It begins with the master
+          // translation as a failsafe for untranslated strings, and merges all parent
+          // tags into one file for each specific subtag
+          //
+          // TODO: This is a naive interpretation of BCP47 that should be improved.
+          //       Will be OK for now as long as we don't have anything more complicated
+          //       than a base translation + region.
+          const tr = path.basename(file.history[0], ".json");
+          const subtags = tr.split("-");
+          const src = [workDir + "/translationMaster.json"];
+          for (let i = 1; i <= subtags.length; i++) {
+            const lang = subtags.slice(0, i).join("-");
+            if (lang === "test") {
+              src.push(workDir + "/test.json");
+            } else if (lang !== "en") {
+              src.push(inDir + "/" + lang + ".json");
+            }
+          }
+          return gulp
+            .src(src, { allowEmpty: true })
+            .pipe(transform((data) => emptyFilter(data)))
+            .pipe(
+              merge({
+                fileName: tr + ".json",
+              })
+            )
+            .pipe(gulp.dest(fullDir));
+        })
+      );
+  })
+);
+tasks.push(taskName);
+
+const splitTasks = [];
+TRANSLATION_FRAGMENTS.forEach((fragment) => {
+  taskName = "build-translation-fragment-" + fragment;
+  gulp.task(
+    taskName,
+    gulp.series("build-merged-translations", function() {
+      // Return only the translations for this fragment.
+      return gulp
+        .src(fullDir + "/*.json")
+        .pipe(
+          transform((data) => ({
+            ui: {
+              panel: {
+                [fragment]: data.ui.panel[fragment],
+              },
+            },
+          }))
+        )
+        .pipe(gulp.dest(workDir + "/" + fragment));
+    })
+  );
+  tasks.push(taskName);
+  splitTasks.push(taskName);
+});
+
+taskName = "build-translation-core";
+gulp.task(
+  taskName,
+  gulp.series("build-merged-translations", function() {
+    // Remove the fragment translations from the core translation.
+    return gulp
+      .src(fullDir + "/*.json")
+      .pipe(
+        transform((data) => {
+          TRANSLATION_FRAGMENTS.forEach((fragment) => {
+            delete data.ui.panel[fragment];
+          });
+          return data;
+        })
+      )
+      .pipe(gulp.dest(coreDir));
+  })
+);
+tasks.push(taskName);
+splitTasks.push(taskName);
+
+taskName = "build-flattened-translations";
+gulp.task(
+  taskName,
+  gulp.series(...splitTasks, function() {
+    // Flatten the split versions of our translations, and move them into outDir
+    return gulp
+      .src(
+        TRANSLATION_FRAGMENTS.map(
+          (fragment) => workDir + "/" + fragment + "/*.json"
+        ).concat(coreDir + "/*.json"),
+        { base: workDir }
+      )
+      .pipe(
+        transform(function(data) {
+          // Polymer.AppLocalizeBehavior requires flattened json
+          return flatten(data);
+        })
+      )
+      .pipe(minify())
+      .pipe(hashFilename())
+      .pipe(
+        rename((filePath) => {
+          if (filePath.dirname === "core") {
+            filePath.dirname = "";
+          }
+        })
+      )
+      .pipe(gulp.dest(outDir));
+  })
+);
+tasks.push(taskName);
+
+taskName = "build-translation-fingerprints";
+gulp.task(
+  taskName,
+  gulp.series("build-flattened-translations", function() {
+    return gulp
+      .src(outDir + "/**/*.json")
+      .pipe(
+        rename({
+          extname: "",
+        })
+      )
+      .pipe(
+        hash({
+          algorithm: "md5",
+          hashLength: 32,
+          template: "<%= name %>.json",
+        })
+      )
+      .pipe(hash.manifest("translationFingerprints.json"))
+      .pipe(
+        transform(function(data) {
+          // After generating fingerprints of our translation files, consolidate
+          // all translation fragment fingerprints under the translation name key
+          const newData = {};
+          Object.entries(data).forEach(([key, value]) => {
+            const [path, _md5] = key.rsplit("-", 1);
+            // let translation = key;
+            let translation = path;
+            const parts = translation.split("/");
+            if (parts.length === 2) {
+              translation = parts[1];
+            }
+            if (!(translation in newData)) {
+              newData[translation] = {
+                fingerprints: {},
+              };
+            }
+            newData[translation].fingerprints[path] = value;
+          });
+          return newData;
+        })
+      )
+      .pipe(gulp.dest(workDir));
+  })
+);
+tasks.push(taskName);
+
+taskName = "build-translations";
+gulp.task(
+  taskName,
+  gulp.series("build-translation-fingerprints", function() {
+    return gulp
+      .src(
+        [
+          "src/translations/translationMetadata.json",
+          workDir + "/testMetadata.json",
+          workDir + "/translationFingerprints.json",
+        ],
+        { allowEmpty: true }
+      )
+      .pipe(merge({}))
+      .pipe(
+        transform(function(data) {
+          const newData = {};
+          Object.entries(data).forEach(([key, value]) => {
+            // Filter out translations without native name.
+            if (data[key].nativeName) {
+              newData[key] = data[key];
+            } else {
+              console.warn(
+                `Skipping language ${key}. Native name was not translated.`
+              );
+            }
+            if (data[key]) newData[key] = value;
+          });
+          return newData;
+        })
+      )
+      .pipe(
+        transform((data) => ({
+          fragments: TRANSLATION_FRAGMENTS,
+          translations: data,
+        }))
+      )
+      .pipe(rename("translationMetadata.json"))
+      .pipe(gulp.dest(workDir));
+  })
+);
+tasks.push(taskName);
+
+module.exports = tasks;

build-scripts/gulp/webpack.js

@@ -0,0 +1,170 @@
+// Tasks to run webpack.
+const gulp = require("gulp");
+const path = require("path");
+const webpack = require("webpack");
+const WebpackDevServer = require("webpack-dev-server");
+const log = require("fancy-log");
+const paths = require("../paths");
+const {
+  createAppConfig,
+  createDemoConfig,
+  createCastConfig,
+} = require("../webpack");
+
+const handler = (done) => (err, stats) => {
+  if (err) {
+    console.log(err.stack || err);
+    if (err.details) {
+      console.log(err.details);
+    }
+    return;
+  }
+
+  log(`Build done @ ${new Date().toLocaleTimeString()}`);
+
+  if (stats.hasErrors() || stats.hasWarnings()) {
+    console.log(stats.toString("minimal"));
+  }
+
+  if (done) {
+    done();
+  }
+};
+
+gulp.task("webpack-watch-app", () => {
+  const compiler = webpack([
+    createAppConfig({
+      isProdBuild: false,
+      latestBuild: true,
+      isStatsBuild: false,
+    }),
+    createAppConfig({
+      isProdBuild: false,
+      latestBuild: false,
+      isStatsBuild: false,
+    }),
+  ]);
+  compiler.watch({}, handler());
+  // we are not calling done, so this command will run forever
+});
+
+gulp.task(
+  "webpack-prod-app",
+  () =>
+    new Promise((resolve) =>
+      webpack(
+        [
+          createAppConfig({
+            isProdBuild: true,
+            latestBuild: true,
+            isStatsBuild: false,
+          }),
+          createAppConfig({
+            isProdBuild: true,
+            latestBuild: false,
+            isStatsBuild: false,
+          }),
+        ],
+        handler(resolve)
+      )
+    )
+);
+
+gulp.task("webpack-dev-server-demo", () => {
+  const compiler = webpack([
+    createDemoConfig({
+      isProdBuild: false,
+      latestBuild: false,
+      isStatsBuild: false,
+    }),
+    createDemoConfig({
+      isProdBuild: false,
+      latestBuild: true,
+      isStatsBuild: false,
+    }),
+  ]);
+
+  new WebpackDevServer(compiler, {
+    open: true,
+    watchContentBase: true,
+    contentBase: path.resolve(paths.demo_dir, "dist"),
+  }).listen(8090, "localhost", function(err) {
+    if (err) {
+      throw err;
+    }
+    // Server listening
+    log("[webpack-dev-server]", "http://localhost:8090");
+  });
+});
+
+gulp.task(
+  "webpack-prod-demo",
+  () =>
+    new Promise((resolve) =>
+      webpack(
+        [
+          createDemoConfig({
+            isProdBuild: true,
+            latestBuild: false,
+            isStatsBuild: false,
+          }),
+          createDemoConfig({
+            isProdBuild: true,
+            latestBuild: true,
+            isStatsBuild: false,
+          }),
+        ],
+        handler(resolve)
+      )
+    )
+);
+
+gulp.task("webpack-dev-server-cast", () => {
+  const compiler = webpack([
+    createCastConfig({
+      isProdBuild: false,
+      latestBuild: false,
+    }),
+    createCastConfig({
+      isProdBuild: false,
+      latestBuild: true,
+    }),
+  ]);
+
+  new WebpackDevServer(compiler, {
+    open: true,
+    watchContentBase: true,
+    contentBase: path.resolve(paths.cast_dir, "dist"),
+  }).listen(
+    8080,
+    // Accessible from the network, because that's how Cast hits it.
+    "0.0.0.0",
+    function(err) {
+      if (err) {
+        throw err;
+      }
+      // Server listening
+      log("[webpack-dev-server]", "http://localhost:8080");
+    }
+  );
+});
+
+gulp.task(
+  "webpack-prod-cast",
+  () =>
+    new Promise((resolve) =>
+      webpack(
+        [
+          createCastConfig({
+            isProdBuild: true,
+            latestBuild: false,
+          }),
+          createCastConfig({
+            isProdBuild: true,
+            latestBuild: true,
+          }),
+        ],
+        handler(resolve)
+      )
+    )
+);

build-scripts/paths.js

@@ -0,0 +1,23 @@
+var path = require("path");
+
+module.exports = {
+  polymer_dir: path.resolve(__dirname, ".."),
+
+  build_dir: path.resolve(__dirname, "../build"),
+  root: path.resolve(__dirname, "../hass_frontend"),
+  static: path.resolve(__dirname, "../hass_frontend/static"),
+  output: path.resolve(__dirname, "../hass_frontend/frontend_latest"),
+  output_es5: path.resolve(__dirname, "../hass_frontend/frontend_es5"),
+
+  demo_dir: path.resolve(__dirname, "../demo"),
+  demo_root: path.resolve(__dirname, "../demo/dist"),
+  demo_static: path.resolve(__dirname, "../demo/dist/static"),
+  demo_output: path.resolve(__dirname, "../demo/dist/frontend_latest"),
+  demo_output_es5: path.resolve(__dirname, "../demo/dist/frontend_es5"),
+
+  cast_dir: path.resolve(__dirname, "../cast"),
+  cast_root: path.resolve(__dirname, "../cast/dist"),
+  cast_static: path.resolve(__dirname, "../cast/dist/static"),
+  cast_output: path.resolve(__dirname, "../cast/dist/frontend_latest"),
+  cast_output_es5: path.resolve(__dirname, "../cast/dist/frontend_es5"),
+};

build-scripts/webpack.js

@@ -0,0 +1,288 @@
+const webpack = require("webpack");
+const fs = require("fs");
+const path = require("path");
+const TerserPlugin = require("terser-webpack-plugin");
+const WorkboxPlugin = require("workbox-webpack-plugin");
+const CompressionPlugin = require("compression-webpack-plugin");
+const zopfli = require("@gfx/zopfli");
+const ManifestPlugin = require("webpack-manifest-plugin");
+const paths = require("./paths.js");
+
+let version = fs
+  .readFileSync(path.resolve(paths.polymer_dir, "setup.py"), "utf8")
+  .match(/\d{8}\.\d+/);
+if (!version) {
+  throw Error("Version not found");
+}
+version = version[0];
+
+const genMode = (isProdBuild) => (isProdBuild ? "production" : "development");
+const genDevTool = (isProdBuild) =>
+  isProdBuild ? "source-map" : "inline-cheap-module-source-map";
+const genFilename = (isProdBuild, dontHash = new Set()) => ({ chunk }) => {
+  if (!isProdBuild || dontHash.has(chunk.name)) {
+    return `${chunk.name}.js`;
+  }
+  return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`;
+};
+const genChunkFilename = (isProdBuild, isStatsBuild) =>
+  isProdBuild && !isStatsBuild ? "chunk.[chunkhash].js" : "[name].chunk.js";
+
+const resolve = {
+  extensions: [".ts", ".js", ".json", ".tsx"],
+  alias: {
+    react: "preact-compat",
+    "react-dom": "preact-compat",
+    // Not necessary unless you consume a module using `createClass`
+    "create-react-class": "preact-compat/lib/create-react-class",
+    // Not necessary unless you consume a module requiring `react-dom-factories`
+    "react-dom-factories": "preact-compat/lib/react-dom-factories",
+  },
+};
+
+const tsLoader = (latestBuild) => ({
+  test: /\.ts|tsx$/,
+  exclude: /node_modules/,
+  use: [
+    {
+      loader: "ts-loader",
+      options: {
+        compilerOptions: latestBuild
+          ? { noEmit: false }
+          : { target: "es5", noEmit: false },
+      },
+    },
+  ],
+});
+const cssLoader = {
+  test: /\.css$/,
+  use: "raw-loader",
+};
+const htmlLoader = {
+  test: /\.(html)$/,
+  use: {
+    loader: "html-loader",
+    options: {
+      exportAsEs6Default: true,
+    },
+  },
+};
+
+const plugins = [
+  // Ignore moment.js locales
+  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+  // Color.js is bloated, it contains all color definitions for all material color sets.
+  new webpack.NormalModuleReplacementPlugin(
+    /@polymer\/paper-styles\/color\.js$/,
+    path.resolve(paths.polymer_dir, "src/util/empty.js")
+  ),
+  // Ignore roboto pointing at CDN. We use local font-roboto-local.
+  new webpack.NormalModuleReplacementPlugin(
+    /@polymer\/font-roboto\/roboto\.js$/,
+    path.resolve(paths.polymer_dir, "src/util/empty.js")
+  ),
+  // Ignore mwc icons pointing at CDN.
+  new webpack.NormalModuleReplacementPlugin(
+    /@material\/mwc-icon\/mwc-icon-font\.js$/,
+    path.resolve(paths.polymer_dir, "src/util/empty.js")
+  ),
+];
+
+const optimization = (latestBuild) => ({
+  minimizer: [
+    new TerserPlugin({
+      cache: true,
+      parallel: true,
+      extractComments: true,
+      sourceMap: true,
+      terserOptions: {
+        safari10: true,
+        ecma: latestBuild ? undefined : 5,
+      },
+    }),
+  ],
+});
+
+const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
+  const isCI = process.env.CI === "true";
+
+  // Create an object mapping browser urls to their paths during build
+  const translationMetadata = require("../build-translations/translationMetadata.json");
+  const workBoxTranslationsTemplatedURLs = {};
+  const englishFP = translationMetadata.translations.en.fingerprints;
+  Object.keys(englishFP).forEach((key) => {
+    workBoxTranslationsTemplatedURLs[
+      `/static/translations/${englishFP[key]}`
+    ] = `build-translations/output/${key}.json`;
+  });
+
+  const entry = {
+    app: "./src/entrypoints/app.ts",
+    authorize: "./src/entrypoints/authorize.ts",
+    onboarding: "./src/entrypoints/onboarding.ts",
+    core: "./src/entrypoints/core.ts",
+    compatibility: "./src/entrypoints/compatibility.ts",
+    "custom-panel": "./src/entrypoints/custom-panel.ts",
+    "hass-icons": "./src/entrypoints/hass-icons.ts",
+  };
+
+  return {
+    mode: genMode(isProdBuild),
+    devtool: genDevTool(isProdBuild),
+    entry,
+    module: {
+      rules: [tsLoader(latestBuild), cssLoader, htmlLoader],
+    },
+    optimization: optimization(latestBuild),
+    plugins: [
+      new ManifestPlugin(),
+      new webpack.DefinePlugin({
+        __DEV__: JSON.stringify(!isProdBuild),
+        __DEMO__: false,
+        __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
+        __VERSION__: JSON.stringify(version),
+        __STATIC_PATH__: "/static/",
+        "process.env.NODE_ENV": JSON.stringify(
+          isProdBuild ? "production" : "development"
+        ),
+      }),
+      ...plugins,
+      isProdBuild &&
+        !isCI &&
+        !isStatsBuild &&
+        new CompressionPlugin({
+          cache: true,
+          exclude: [/\.js\.map$/, /\.LICENSE$/, /\.py$/, /\.txt$/],
+          algorithm(input, compressionOptions, callback) {
+            return zopfli.gzip(input, compressionOptions, callback);
+          },
+        }),
+      latestBuild &&
+        new WorkboxPlugin.InjectManifest({
+          swSrc: "./src/entrypoints/service-worker-hass.js",
+          swDest: "service_worker.js",
+          importWorkboxFrom: "local",
+          include: [/\.js$/],
+          templatedURLs: {
+            ...workBoxTranslationsTemplatedURLs,
+            "/static/icons/favicon-192x192.png":
+              "public/icons/favicon-192x192.png",
+            "/static/fonts/roboto/Roboto-Light.woff2":
+              "node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff2",
+            "/static/fonts/roboto/Roboto-Medium.woff2":
+              "node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff2",
+            "/static/fonts/roboto/Roboto-Regular.woff2":
+              "node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff2",
+            "/static/fonts/roboto/Roboto-Bold.woff2":
+              "node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff2",
+          },
+        }),
+    ].filter(Boolean),
+    output: {
+      filename: genFilename(isProdBuild),
+      chunkFilename: genChunkFilename(isProdBuild, isStatsBuild),
+      path: latestBuild ? paths.output : paths.output_es5,
+      publicPath: latestBuild ? "/frontend_latest/" : "/frontend_es5/",
+      // For workerize loader
+      globalObject: "self",
+    },
+    resolve,
+  };
+};
+
+const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
+  return {
+    mode: genMode(isProdBuild),
+    devtool: genDevTool(isProdBuild),
+    entry: {
+      main: "./demo/src/entrypoint.ts",
+      compatibility: "./src/entrypoints/compatibility.ts",
+    },
+    module: {
+      rules: [tsLoader(latestBuild), cssLoader, htmlLoader],
+    },
+    optimization: optimization(latestBuild),
+    plugins: [
+      new ManifestPlugin(),
+      new webpack.DefinePlugin({
+        __DEV__: !isProdBuild,
+        __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
+        __VERSION__: JSON.stringify(`DEMO-${version}`),
+        __DEMO__: true,
+        __STATIC_PATH__: "/static/",
+        "process.env.NODE_ENV": JSON.stringify(
+          isProdBuild ? "production" : "development"
+        ),
+      }),
+      ...plugins,
+    ].filter(Boolean),
+    resolve,
+    output: {
+      filename: genFilename(isProdBuild),
+      chunkFilename: genChunkFilename(isProdBuild, isStatsBuild),
+      path: path.resolve(
+        paths.demo_root,
+        latestBuild ? "frontend_latest" : "frontend_es5"
+      ),
+      publicPath: latestBuild ? "/frontend_latest/" : "/frontend_es5/",
+      // For workerize loader
+      globalObject: "self",
+    },
+  };
+};
+
+const createCastConfig = ({ isProdBuild, latestBuild }) => {
+  const isStatsBuild = false;
+  const entry = {
+    launcher: "./cast/src/launcher/entrypoint.ts",
+  };
+
+  if (latestBuild) {
+    entry.receiver = "./cast/src/receiver/entrypoint.ts";
+  }
+
+  return {
+    mode: genMode(isProdBuild),
+    devtool: genDevTool(isProdBuild),
+    entry,
+    module: {
+      rules: [tsLoader(latestBuild), cssLoader, htmlLoader],
+    },
+    optimization: optimization(latestBuild),
+    plugins: [
+      new ManifestPlugin(),
+      new webpack.DefinePlugin({
+        __DEV__: !isProdBuild,
+        __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
+        __VERSION__: JSON.stringify(version),
+        __DEMO__: false,
+        __STATIC_PATH__: "/static/",
+        "process.env.NODE_ENV": JSON.stringify(
+          isProdBuild ? "production" : "development"
+        ),
+      }),
+      ...plugins,
+    ].filter(Boolean),
+    resolve,
+    output: {
+      filename: genFilename(isProdBuild),
+      chunkFilename: genChunkFilename(isProdBuild, isStatsBuild),
+      path: path.resolve(
+        paths.cast_root,
+        latestBuild ? "frontend_latest" : "frontend_es5"
+      ),
+      publicPath: latestBuild ? "/frontend_latest/" : "/frontend_es5/",
+      // For workerize loader
+      globalObject: "self",
+    },
+  };
+};
+
+module.exports = {
+  resolve,
+  plugins,
+  optimization,
+  createAppConfig,
+  createDemoConfig,
+  createCastConfig,
+};

cast/README.md

@@ -0,0 +1,56 @@
+# Home Assistant Cast
+
+Home Assistant Cast is made up of two separate applications:
+
+- Chromecast receiver application that can connect to Home Assistant and display relevant information.
+- Launcher website that allows users to authorize with their Home Assistant installation and launch the receiver app on their Chromecast.
+
+## Development
+
+- Run `script/develop_cast` to launch the Cast receiver dev server. Keep this running.
+- Navigate to http://localhost:8080 to start the launcher
+- Debug the receiver running on the Chromecast via [chrome://inspect/#devices](chrome://inspect/#devices)
+
+## Setting up development environment
+
+### Registering development cast app
+
+- Go to https://cast.google.com/publish and enroll your account for the Google Cast SDK (costs \$5)
+- Register your Chromecast as a testing device by entering the serial
+- Add new application -> Custom Receiver
+  - Name: Home Assistant Dev
+  - Receiver Application URL: http://IP-OF-DEV-MACHINE:8080/receiver.html
+  - Guest Mode: off
+  - Google Case for Audio: off
+
+### Setting dev variables
+
+Open `src/cast/dev_const.ts` and change `CAST_DEV_APP_ID` to the ID of the app you just created. And set the `CAST_DEV_HASS_URL` to the url of you development machine.
+
+### Changing configuration
+
+In `configuration.yaml`, configure CORS for the HTTP integration:
+
+```yaml
+http:
+  cors_allowed_origins:
+    - https://cast.home-assistant.io
+    - http://IP-OF-DEV-MACHINE:8080
+```
+
+## Running development
+
+```bash
+cd cast
+script/develop_cast
+```
+
+The launcher application will be accessible at [http://localhost:8080](http://localhost:8080) and the receiver application will be accessible at [http://localhost:8080/receiver.html](http://localhost:8080/receiver.html) (but only works if accessed by a Chromecast).
+
+### Developing cast widgets in HA ui
+
+If your work involves interaction with the Cast parts from the normal Home Assistant UI, you will need to have that development script running too (`script/develop`).
+
+### Developing the cast demo
+
+The cast demo is triggered from the Home Assistant demo. To work on that, you will also need to run the development script for the demo (`script/develop_demo`).

cast/public/manifest.json

@@ -0,0 +1,18 @@
+{
+  "background_color": "#FFFFFF",
+  "description": "Show Home Assistant on your Chromecast or Google Assistant devices with a screen.",
+  "dir": "ltr",
+  "display": "standalone",
+  "icons": [
+    {
+      "src": "/images/ha-cast-icon.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "lang": "en-US",
+  "name": "Home Assistant Cast",
+  "short_name": "HA Cast",
+  "start_url": "/?homescreen=1",
+  "theme_color": "#03A9F4"
+}

cast/public/service_worker.js

@@ -0,0 +1,3 @@
+self.addEventListener("fetch", function(event) {
+  event.respondWith(fetch(event.request));
+});

cast/script/build_cast

@@ -0,0 +1,9 @@
+#!/bin/sh
+# Build the cast receiver
+
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/../.."
+
+./node_modules/.bin/gulp build-cast

cast/script/develop_cast

@@ -0,0 +1,9 @@
+#!/bin/sh
+# Develop the cast receiver
+
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/../.."
+
+./node_modules/.bin/gulp develop-cast

cast/script/upload

@@ -0,0 +1,5 @@
+# Run it twice, second time we just delete.
+aws s3 sync dist s3://cast.home-assistant.io --acl public-read
+# Don't delete as it might break open sites that need to load code splitted things.
+# aws s3 sync dist s3://cast.home-assistant.io --acl public-read --delete
+# Todo : update JS first, HTML last.

cast/src/html/launcher-faq.html.template

@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Home Assistant Cast - FAQ</title>
+    <link rel="icon" href="/images/ha-cast-icon.png" type="image/png" />
+    <%= renderTemplate('_style_base') %>
+    <style>
+      body {
+        background-color: #e5e5e5;
+      }
+    </style>
+    <meta property="fb:app_id" content="338291289691179" />
+    <meta property="og:title" content="FAQ - Home Assistant Cast" />
+    <meta property="og:site_name" content="Home Assistant Cast" />
+    <meta property="og:url" content="https://cast.home-assistant.io/" />
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:description"
+      content="Frequently asked questions about Home Assistant Cast."
+    />
+    <meta
+      property="og:image"
+      content="https://cast.home-assistant.io/images/google-nest-hub.png"
+    />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@home_assistant" />
+    <meta name="twitter:title" content="FAQ - Home Assistant Cast" />
+    <meta
+      name="twitter:description"
+      content="Frequently asked questions about Home Assistant Cast."
+    />
+    <meta
+      name="twitter:image"
+      content="https://cast.home-assistant.io/images/google-nest-hub.png"
+    />
+  </head>
+  <body>
+    <%= renderTemplate('_js_base') %>
+
+    <script type="module" crossorigin="use-credentials">
+      import "<%= latestLauncherJS %>";
+    </script>
+
+    <script nomodule>
+      (function() {
+        // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
+        if (!isS101) {
+          _ls("/static/polyfills/custom-elements-es5-adapter.js");
+          _ls("<%= es5LauncherJS %>");
+        }
+      })();
+    </script>
+
+    <hc-layout subtitle="FAQ">
+      <style>
+        a {
+          color: var(--primary-color);
+        }
+      </style>
+      <div class="card-content">
+        <p><a href="/">&laquo; Back to Home Assistant Cast</a></p>
+      </div>
+
+      <div class="section-header">What is Home Assistant Cast?</div>
+      <div class="card-content">
+        <p>
+          Home Assistant Cast allows you to show your Home Assistant data on a
+          Chromecast device and allows you to interact with Home Assistant on
+          Google Assistant devices with a screen.
+        </p>
+      </div>
+
+      <div class="section-header">
+        What are the Home Assistant Cast requirements?
+      </div>
+      <div class="card-content">
+        <p>
+          Home Assistant Cast requires a Home Assistant installation that is
+          accessible via HTTPS (the url starts with "https://").
+        </p>
+      </div>
+
+      <div class="section-header">What is Home Assistant?</div>
+      <div class="card-content">
+        <p>
+          Home Assistant is worlds biggest open source home automation platform
+          with a focus on privacy and local control. You can install Home
+          Assistant for free.
+        </p>
+        <p>
+          <a href="https://www.home-assistant.io" target="_blank"
+            >Visit the Home Assistant website.</a
+          >
+        </p>
+      </div>
+
+      <div class="section-header" id="https">
+        Why does my Home Assistant needs to be served using HTTPS?
+      </div>
+      <div class="card-content">
+        <p>
+          The Chromecast only works with websites served over HTTPS. This means
+          that the Home Assistant Cast app that runs on your Chromecast is
+          served over HTTPS. Websites served over HTTPS are restricted on what
+          content can be accessed on websites served over HTTP. This is called
+          mixed active content (<a
+            href="https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content#Mixed_active_content"
+            target="_blank"
+            >learn more @ MDN</a
+          >).
+        </p>
+        <p>
+          The easiest way to get your Home Assistant installation served over
+          HTTPS is by signing up for
+          <a href="https://www.nabucasa.com" target="_blank"
+            >Home Assistant Cloud by Nabu Casa</a
+          >.
+        </p>
+      </div>
+
+      <div class="section-header" id="https">
+        Why does Home Assistant Cast require me to authorize my Home Assistant
+        instance?
+      </div>
+      <div class="card-content">
+        <p>
+          You're currently looking at the Home Assistant Cast launcher
+          application. This is a standalone application to launch Home Assistant
+          Cast on your Chromecast. Because Chromecasts do not allow us to log in
+          to Home Assistant, we need to supply authentication to it from the
+          launcher. This authentication is obtained when you authorize your
+          instance. Your authentication credentials will remain in your browser
+          and on your Cast device.
+        </p>
+        <p>
+          Your authentication credentials or Home Assistant url are never sent
+          to the Cloud. You can validate this behavior in
+          <a
+            href="https://github.com/home-assistant/home-assistant-polymer/tree/dev/cast"
+            target="_blank"
+            >the source code</a
+          >.
+        </p>
+        <p>
+          The launcher application exists to make it possible to use Home
+          Assistant Cast with older versions of Home Assistant.
+        </p>
+        <p>
+          Starting with Home Assistant 0.97, Home Assistant Cast is also built
+          into the Lovelace UI as a special entities card row. Since the
+          Lovelace UI already has authentication, you will be able to start
+          casting right away.
+        </p>
+      </div>
+
+      <div class="section-header">Wat does Home Assistant Cast do?</div>
+      <div class="card-content">
+        <p>
+          Home Assistant Cast is a receiver application for the Chromecast. When
+          loaded, it will make a direct connection to your Home Assistant
+          instance.
+        </p>
+        <p>
+          Home Assistant Cast is able to render any of your Lovelace views on
+          your Chromecast. Things that work in Lovelace in Home Assistant will
+          work in Home Assistant Cast:
+        </p>
+        <ul>
+          <li>Render Lovelace views, including custom cards</li>
+          <li>
+            Real-time data stream will ensure the UI always shows the latest
+            state of your house
+          </li>
+          <li>Navigate between views using navigate actions or weblinks</li>
+          <li>
+            Instant updates of the casted Lovelace UI when you update your
+            Lovelace configuration.
+          </li>
+        </ul>
+        <p>Things that currently do not work:</p>
+        <ul>
+          <li>
+            Live videostreams using the streaming integration
+          </li>
+          <li>Specifying a view with a single card with "panel: true".</li>
+        </ul>
+      </div>
+
+      <div class="section-header" id="https">
+        How do I change what is shown on my Chromecast?
+      </div>
+      <div class="card-content">
+        <p>
+          Home Assistant Cast allows you to show your Lovelace view on your
+          Chromecast. So to edit what is shown, you need to edit your Lovelace
+          UI.
+        </p>
+        <p>
+          To edit your Lovelace UI, open Home Assistant, click on the three-dot
+          menu in the top right and click on "Configure UI".
+        </p>
+      </div>
+
+      <div class="section-header" id="browser">
+        What browsers are supported?
+      </div>
+      <div class="card-content">
+        <p>
+          Chromecast is a technology developed by Google, and is available on:
+        </p>
+        <ul>
+          <li>Google Chrome (all platforms except on iOS)</li>
+          <li>
+            Microsoft Edge (all platforms,
+            <a href="https://www.microsoftedgeinsider.com" target="_blank"
+              >dev and canary builds only</a
+            >)
+          </li>
+        </ul>
+      </div>
+
+      <div class="section-header">Why do some custom cards not work?</div>
+      <div class="card-content">
+        <p>
+          Home Assistant needs to be configured to allow Home Assistant Cast to
+          load custom cards. Starting with Home Assistant 0.97, this is done
+          automatically. If you are on an older version, or have manually
+          configured CORS for the HTTP integration, add the following to your
+          configuration.yaml file:
+        </p>
+        <pre>
+http:
+  cors_allowed_origins:
+    - https://cast.home-assistant.io</pre
+        >
+        <p>
+          Some custom cards rely on things that are only available in the normal
+          Home Assistant interface. This requires an update by the custom card
+          developer.
+        </p>
+        <p>
+          If you're a custom card developer: the most common mistake is that
+          LitElement is extracted from an element that is not available on the
+          page.
+        </p>
+      </div>
+    </hc-layout>
+
+    <script>
+      var _gaq = [["_setAccount", "UA-57927901-9"], ["_trackPageview"]];
+      (function(d, t) {
+        var g = d.createElement(t),
+          s = d.getElementsByTagName(t)[0];
+        g.src =
+          ("https:" == location.protocol ? "//ssl" : "//www") +
+          ".google-analytics.com/ga.js";
+        s.parentNode.insertBefore(g, s);
+      })(document, "script");
+    </script>
+  </body>
+</html>

cast/src/html/launcher.html.template

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Home Assistant Cast</title>
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="icon" href="/images/ha-cast-icon.png" type="image/png" />
+    <%= renderTemplate('_style_base') %>
+    <style>
+      body {
+        background-color: #e5e5e5;
+      }
+    </style>
+    <meta property="fb:app_id" content="338291289691179">
+    <meta property="og:title" content="Home Assistant Cast">
+    <meta property="og:site_name" content="Home Assistant Cast">
+    <meta property="og:url" content="https://cast.home-assistant.io/">
+    <meta property="og:type" content="website">
+    <meta property="og:description" content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen.">
+    <meta property="og:image" content="https://cast.home-assistant.io/images/google-nest-hub.png">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="@home_assistant">
+    <meta name="twitter:title" content="Home Assistant Cast">
+    <meta name="twitter:description" content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen.">
+    <meta name="twitter:image" content="https://cast.home-assistant.io/images/google-nest-hub.png">
+  </head>
+  <body>
+    <%= renderTemplate('_js_base') %>
+
+    <hc-connect></hc-connect>
+
+    <script type="module" crossorigin="use-credentials">
+      import "<%= latestLauncherJS %>";
+    </script>
+
+    <script nomodule>
+      (function() {
+        // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
+        if (!isS101) {
+          _ls("/static/polyfills/custom-elements-es5-adapter.js");
+          _ls("<%= es5LauncherJS %>");
+        }
+      })();
+    </script>
+    <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-57927901-9', 'auto');
+    ga('send', 'pageview', location.pathname.includes("auth_callback") === -1 ? location.pathname : "/");
+    </script>
+  </body>
+</html>

cast/src/html/receiver.html.template

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
+  <script type="module" src="<%= latestReceiverJS %>"></script>
+  <%= renderTemplate('_style_base') %>
+  <style>
+    body {
+      background-color: white;
+      font-size: initial;
+    }
+  </style>
+  <script>
+  var _gaq=[['_setAccount','UA-57927901-10'],['_trackPageview']];
+  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
+  g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
+  s.parentNode.insertBefore(g,s)}(document,'script'));
+  </script>
+</html>

cast/src/launcher/entrypoint.ts

@@ -0,0 +1,5 @@
+import "../../../src/resources/ha-style";
+import "../../../src/resources/roboto";
+import "../../../src/components/ha-iconset-svg";
+import "../../../src/resources/hass-icons";
+import "./layout/hc-connect";

cast/src/launcher/layout/hc-cast.ts

@@ -0,0 +1,282 @@
+import {
+  customElement,
+  LitElement,
+  property,
+  TemplateResult,
+  html,
+  CSSResult,
+  css,
+} from "lit-element";
+import { Connection, Auth } from "home-assistant-js-websocket";
+import "@polymer/iron-icon";
+import "@polymer/paper-listbox/paper-listbox";
+import "@polymer/paper-item/paper-icon-item";
+import "../../../../src/components/ha-icon";
+import {
+  enableWrite,
+  askWrite,
+  saveTokens,
+} from "../../../../src/common/auth/token_storage";
+import {
+  ensureConnectedCastSession,
+  castSendShowLovelaceView,
+} from "../../../../src/cast/receiver_messages";
+import "../../../../src/layouts/loading-screen";
+import { CastManager } from "../../../../src/cast/cast_manager";
+import {
+  LovelaceConfig,
+  getLovelaceCollection,
+} from "../../../../src/data/lovelace";
+import "./hc-layout";
+import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
+import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
+
+@customElement("hc-cast")
+class HcCast extends LitElement {
+  @property() public auth!: Auth;
+  @property() public connection!: Connection;
+  @property() public castManager!: CastManager;
+  @property() private askWrite = false;
+  @property() private lovelaceConfig?: LovelaceConfig | null;
+
+  protected render(): TemplateResult | void {
+    if (this.lovelaceConfig === undefined) {
+      return html`
+        <loading-screen></loading-screen>>
+      `;
+    }
+
+    const error =
+      this.castManager.castState === "NO_DEVICES_AVAILABLE"
+        ? html`
+            <p>
+              There were no suitable Chromecast devices to cast to found.
+            </p>
+          `
+        : undefined;
+
+    return html`
+      <hc-layout .auth=${this.auth} .connection=${this.connection}>
+        ${this.askWrite
+          ? html`
+              <p class="question action-item">
+                Stay logged in?
+                <span>
+                  <mwc-button @click=${this._handleSaveTokens}>
+                    YES
+                  </mwc-button>
+                  <mwc-button @click=${this._handleSkipSaveTokens}>
+                    NO
+                  </mwc-button>
+                </span>
+              </p>
+            `
+          : ""}
+        ${error
+          ? html`
+              <div class="card-content">${error}</div>
+            `
+          : !this.castManager.status
+          ? html`
+              <p class="center-item">
+                <mwc-button raised @click=${this._handleLaunch}>
+                  <iron-icon icon="hass:cast"></iron-icon>
+                  Start Casting
+                </mwc-button>
+              </p>
+            `
+          : html`
+              <div class="section-header">PICK A VIEW</div>
+              <paper-listbox
+                attr-for-selected="data-path"
+                .selected=${this.castManager.status.lovelacePath || ""}
+              >
+                ${(this.lovelaceConfig
+                  ? this.lovelaceConfig.views
+                  : [generateDefaultViewConfig([], [], [], {}, () => "")]
+                ).map(
+                  (view, idx) => html`
+                    <paper-icon-item
+                      @click=${this._handlePickView}
+                      data-path=${view.path || idx}
+                    >
+                      ${view.icon
+                        ? html`
+                            <ha-icon
+                              .icon=${view.icon}
+                              slot="item-icon"
+                            ></ha-icon>
+                          `
+                        : ""}
+                      ${view.title || view.path}
+                    </paper-icon-item>
+                  `
+                )}
+              </paper-listbox>
+            `}
+        <div class="card-actions">
+          ${this.castManager.status
+            ? html`
+                <mwc-button @click=${this._handleLaunch}>
+                  <iron-icon icon="hass:cast-connected"></iron-icon>
+                  Manage
+                </mwc-button>
+              `
+            : ""}
+          <div class="spacer"></div>
+          <mwc-button @click=${this._handleLogout}>Log out</mwc-button>
+        </div>
+      </hc-layout>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+
+    const llColl = getLovelaceCollection(this.connection);
+    // We first do a single refresh because we need to check if there is LL
+    // configuration.
+    llColl.refresh().then(
+      () => {
+        llColl.subscribe((config) => {
+          this.lovelaceConfig = config;
+        });
+      },
+      async () => {
+        this.lovelaceConfig = null;
+      }
+    );
+
+    this.askWrite = askWrite();
+
+    this.castManager.addEventListener("state-changed", () => {
+      this.requestUpdate();
+    });
+    this.castManager.addEventListener("connection-changed", () => {
+      this.requestUpdate();
+    });
+  }
+
+  protected updated(changedProps) {
+    super.updated(changedProps);
+    toggleAttribute(
+      this,
+      "hide-icons",
+      this.lovelaceConfig
+        ? !this.lovelaceConfig.views.some((view) => view.icon)
+        : true
+    );
+  }
+
+  private async _handleSkipSaveTokens() {
+    this.askWrite = false;
+  }
+
+  private async _handleSaveTokens() {
+    enableWrite();
+    this.askWrite = false;
+  }
+
+  private _handleLaunch() {
+    this.castManager.requestSession();
+  }
+
+  private async _handlePickView(ev: Event) {
+    const path = (ev.currentTarget as any).getAttribute("data-path");
+    await ensureConnectedCastSession(this.castManager!, this.auth!);
+    castSendShowLovelaceView(this.castManager, path);
+  }
+
+  private async _handleLogout() {
+    try {
+      await this.auth.revoke();
+      saveTokens(null);
+      if (this.castManager.castSession) {
+        this.castManager.castContext.endCurrentSession(true);
+      }
+      this.connection.close();
+      location.reload();
+    } catch (err) {
+      alert("Unable to log out!");
+    }
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .center-item {
+        display: flex;
+        justify-content: space-around;
+      }
+
+      .action-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .question {
+        position: relative;
+        padding: 8px 16px;
+      }
+
+      .question:before {
+        border-radius: 4px;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        pointer-events: none;
+        content: "";
+        background-color: var(--primary-color);
+        opacity: 0.12;
+        will-change: opacity;
+      }
+
+      .connection,
+      .connection a {
+        color: var(--secondary-text-color);
+      }
+
+      mwc-button iron-icon {
+        margin-right: 8px;
+        height: 18px;
+      }
+
+      paper-listbox {
+        padding-top: 0;
+      }
+
+      paper-listbox ha-icon {
+        padding: 12px;
+        color: var(--secondary-text-color);
+      }
+
+      paper-icon-item {
+        cursor: pointer;
+      }
+
+      paper-icon-item[disabled] {
+        cursor: initial;
+      }
+
+      :host([hide-icons]) paper-icon-item {
+        --paper-item-icon-width: 0px;
+      }
+
+      .spacer {
+        flex: 1;
+      }
+
+      .card-content a {
+        color: var(--primary-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hc-cast": HcCast;
+  }
+}

cast/src/launcher/layout/hc-connect.ts

@@ -0,0 +1,333 @@
+import {
+  LitElement,
+  customElement,
+  property,
+  TemplateResult,
+  html,
+  CSSResult,
+  css,
+} from "lit-element";
+import {
+  getAuth,
+  createConnection,
+  Auth,
+  getAuthOptions,
+  ERR_HASS_HOST_REQUIRED,
+  ERR_INVALID_HTTPS_TO_HTTP,
+  Connection,
+  ERR_CANNOT_CONNECT,
+  ERR_INVALID_AUTH,
+} from "home-assistant-js-websocket";
+import "@polymer/iron-icon";
+import "@material/mwc-button";
+import "@polymer/paper-input/paper-input";
+import {
+  loadTokens,
+  saveTokens,
+} from "../../../../src/common/auth/token_storage";
+import "../../../../src/layouts/loading-screen";
+import { CastManager, getCastManager } from "../../../../src/cast/cast_manager";
+import "./hc-layout";
+import { castSendShowDemo } from "../../../../src/cast/receiver_messages";
+import { registerServiceWorker } from "../../../../src/util/register-service-worker";
+
+const seeFAQ = (qid) => html`
+  See <a href="./faq.html${qid ? `#${qid}` : ""}">the FAQ</a> for more
+  information.
+`;
+const translateErr = (err) =>
+  err === ERR_CANNOT_CONNECT
+    ? "Unable to connect"
+    : err === ERR_HASS_HOST_REQUIRED
+    ? "Please enter a Home Assistant URL."
+    : err === ERR_INVALID_HTTPS_TO_HTTP
+    ? html`
+        Cannot connect to Home Assistant instances over "http://".
+        ${seeFAQ("https")}
+      `
+    : `Unknown error (${err}).`;
+
+const INTRO = html`
+  <p>
+    Home Assistant Cast allows you to cast your Home Assistant installation to
+    Chromecast video devices and to Google Assistant devices with a screen.
+  </p>
+  <p>
+    For more information, see the
+    <a href="./faq.html">frequently asked questions</a>.
+  </p>
+`;
+
+@customElement("hc-connect")
+export class HcConnect extends LitElement {
+  @property() private loading = false;
+  // If we had stored credentials but we cannot connect,
+  // show a screen asking retry or logout.
+  @property() private cannotConnect = false;
+  @property() private error?: string | TemplateResult;
+  @property() private auth?: Auth;
+  @property() private connection?: Connection;
+  @property() private castManager?: CastManager | null;
+  private openDemo = false;
+
+  protected render(): TemplateResult | void {
+    if (this.cannotConnect) {
+      const tokens = loadTokens();
+      return html`
+        <hc-layout>
+          <div class="card-content">
+            Unable to connect to ${tokens!.hassUrl}.
+          </div>
+          <div class="card-actions">
+            <a href="/">
+              <mwc-button>
+                Retry
+              </mwc-button>
+            </a>
+            <div class="spacer"></div>
+            <mwc-button @click=${this._handleLogout}>Log out</mwc-button>
+          </div>
+        </hc-layout>
+      `;
+    }
+
+    if (this.castManager === undefined || this.loading) {
+      return html`
+        <loading-screen></loading-screen>
+      `;
+    }
+
+    if (this.castManager === null) {
+      return html`
+        <hc-layout>
+          <div class="card-content">
+            ${INTRO}
+            <p class="error">
+              The Cast API is not available in your browser.
+              ${seeFAQ("browser")}
+            </p>
+          </div>
+        </hc-layout>
+      `;
+    }
+
+    if (!this.auth) {
+      return html`
+        <hc-layout>
+          <div class="card-content">
+            ${INTRO}
+            <p>
+              To get started, enter your Home Assistant URL and click authorize.
+              If you want a preview instead, click the show demo button.
+            </p>
+            <p>
+              <paper-input
+                label="Home Assistant URL"
+                placeholder="https://abcdefghijklmnop.ui.nabu.casa"
+                @keydown=${this._handleInputKeyDown}
+              ></paper-input>
+            </p>
+            ${this.error
+              ? html`
+                  <p class="error">${this.error}</p>
+                `
+              : ""}
+          </div>
+          <div class="card-actions">
+            <mwc-button @click=${this._handleDemo}>
+              Show Demo
+              <iron-icon
+                .icon=${this.castManager.castState === "CONNECTED"
+                  ? "hass:cast-connected"
+                  : "hass:cast"}
+              ></iron-icon>
+            </mwc-button>
+            <div class="spacer"></div>
+            <mwc-button @click=${this._handleConnect}>Authorize</mwc-button>
+          </div>
+        </hc-layout>
+      `;
+    }
+
+    return html`
+      <hc-cast
+        .connection=${this.connection}
+        .auth=${this.auth}
+        .castManager=${this.castManager}
+      ></hc-cast>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    import("./hc-cast");
+
+    getCastManager().then(
+      async (mgr) => {
+        this.castManager = mgr;
+        mgr.addEventListener("connection-changed", () => {
+          this.requestUpdate();
+        });
+        mgr.addEventListener("state-changed", () => {
+          if (this.openDemo && mgr.castState === "CONNECTED" && !this.auth) {
+            castSendShowDemo(mgr);
+          }
+        });
+
+        if (location.search.indexOf("auth_callback=1") !== -1) {
+          this._tryConnection("auth-callback");
+        } else if (loadTokens()) {
+          this._tryConnection("saved-tokens");
+        }
+      },
+      () => {
+        this.castManager = null;
+      }
+    );
+    registerServiceWorker(false);
+  }
+
+  private async _handleDemo() {
+    this.openDemo = true;
+    if (this.castManager!.status && !this.castManager!.status.showDemo) {
+      castSendShowDemo(this.castManager!);
+    } else {
+      this.castManager!.requestSession();
+    }
+  }
+
+  private _handleInputKeyDown(ev: KeyboardEvent) {
+    // Handle pressing enter.
+    if (ev.keyCode === 13) {
+      this._handleConnect();
+    }
+  }
+
+  private async _handleConnect() {
+    const inputEl = this.shadowRoot!.querySelector("paper-input")!;
+    const value = inputEl.value || "";
+    this.error = undefined;
+
+    if (value === "") {
+      this.error = "Please enter a Home Assistant URL.";
+      return;
+    } else if (value.indexOf("://") === -1) {
+      this.error =
+        "Please enter your full URL, including the protocol part (https://).";
+      return;
+    }
+
+    let url: URL;
+    try {
+      url = new URL(value);
+    } catch (err) {
+      this.error = "Invalid URL";
+      return;
+    }
+
+    if (url.protocol === "http:" && url.hostname !== "localhost") {
+      this.error = translateErr(ERR_INVALID_HTTPS_TO_HTTP);
+      return;
+    }
+    await this._tryConnection("user-request", `${url.protocol}//${url.host}`);
+  }
+
+  private async _tryConnection(
+    init: "auth-callback" | "user-request" | "saved-tokens",
+    hassUrl?: string
+  ) {
+    const options: getAuthOptions = {
+      saveTokens,
+      loadTokens: () => Promise.resolve(loadTokens()),
+    };
+    if (hassUrl) {
+      options.hassUrl = hassUrl;
+    }
+    let auth: Auth;
+
+    try {
+      this.loading = true;
+      auth = await getAuth(options);
+    } catch (err) {
+      if (init === "saved-tokens" && err === ERR_CANNOT_CONNECT) {
+        this.cannotConnect = true;
+        return;
+      }
+      this.error = translateErr(err);
+      this.loading = false;
+      return;
+    } finally {
+      // Clear url if we have a auth callback in url.
+      if (location.search.includes("auth_callback=1")) {
+        history.replaceState(null, "", location.pathname);
+      }
+    }
+
+    let conn: Connection;
+
+    try {
+      conn = await createConnection({ auth });
+    } catch (err) {
+      // In case of saved tokens, silently solve problems.
+      if (init === "saved-tokens") {
+        if (err === ERR_CANNOT_CONNECT) {
+          this.cannotConnect = true;
+        } else if (err === ERR_INVALID_AUTH) {
+          saveTokens(null);
+        }
+      } else {
+        this.error = translateErr(err);
+      }
+
+      return;
+    } finally {
+      this.loading = false;
+    }
+
+    this.auth = auth;
+    this.connection = conn;
+    this.castManager!.auth = auth;
+  }
+
+  private async _handleLogout() {
+    try {
+      saveTokens(null);
+      location.reload();
+    } catch (err) {
+      alert("Unable to log out!");
+    }
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .card-content a {
+        color: var(--primary-color);
+      }
+      .card-actions a {
+        text-decoration: none;
+      }
+      .error {
+        color: red;
+        font-weight: bold;
+      }
+
+      .error a {
+        color: darkred;
+      }
+
+      mwc-button iron-icon {
+        margin-left: 8px;
+      }
+
+      .spacer {
+        flex: 1;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hc-connect": HcConnect;
+  }
+}

cast/src/launcher/layout/hc-layout.ts

@@ -0,0 +1,166 @@
+import {
+  customElement,
+  LitElement,
+  TemplateResult,
+  html,
+  CSSResult,
+  css,
+  property,
+} from "lit-element";
+import {
+  Auth,
+  Connection,
+  HassUser,
+  getUser,
+} from "home-assistant-js-websocket";
+import "../../../../src/components/ha-card";
+
+@customElement("hc-layout")
+class HcLayout extends LitElement {
+  @property() public subtitle?: string | undefined;
+  @property() public auth?: Auth;
+  @property() public connection?: Connection;
+  @property() public user?: HassUser;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <ha-card>
+        <div class="layout">
+          <img class="hero" src="/images/google-nest-hub.png" />
+          <div class="card-header">
+            Home Assistant Cast${this.subtitle ? ` – ${this.subtitle}` : ""}
+            ${this.auth
+              ? html`
+                  <div class="subtitle">
+                    <a href=${this.auth.data.hassUrl} target="_blank"
+                      >${this.auth.data.hassUrl.substr(
+                        this.auth.data.hassUrl.indexOf("//") + 2
+                      )}</a
+                    >
+                    ${this.user
+                      ? html`
+                          – ${this.user.name}
+                        `
+                      : ""}
+                  </div>
+                `
+              : ""}
+          </div>
+          <slot></slot>
+        </div>
+      </ha-card>
+      <div class="footer">
+        <a href="./faq.html">Frequently Asked Questions</a> – Found a bug? Let
+        @balloob know
+        <!-- <a
+          href="https://github.com/home-assistant/home-assistant-polymer/issues"
+          target="_blank"
+          >Let us know!</a
+        > -->
+      </div>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+
+    if (this.connection) {
+      getUser(this.connection).then((user) => {
+        this.user = user;
+      });
+    }
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: flex;
+        min-height: 100%;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+
+      ha-card {
+        display: flex;
+        width: 100%;
+        max-width: 500px;
+      }
+
+      .layout {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .card-header {
+        color: var(--ha-card-header-color, --primary-text-color);
+        font-family: var(--ha-card-header-font-family, inherit);
+        font-size: var(--ha-card-header-font-size, 24px);
+        letter-spacing: -0.012em;
+        line-height: 32px;
+        padding: 24px 16px 16px;
+        display: block;
+      }
+
+      .subtitle {
+        font-size: 14px;
+        color: var(--secondary-text-color);
+        line-height: initial;
+      }
+      .subtitle a {
+        color: var(--secondary-text-color);
+      }
+
+      :host ::slotted(.card-content:not(:first-child)),
+      slot:not(:first-child)::slotted(.card-content) {
+        padding-top: 0px;
+        margin-top: -8px;
+      }
+
+      :host ::slotted(.section-header) {
+        font-weight: 500;
+        padding: 4px 16px;
+        text-transform: uppercase;
+      }
+
+      :host ::slotted(.card-content) {
+        padding: 16px;
+        flex: 1;
+      }
+
+      :host ::slotted(.card-actions) {
+        border-top: 1px solid #e8e8e8;
+        padding: 5px 16px;
+        display: flex;
+      }
+
+      img {
+        width: 100%;
+      }
+
+      .footer {
+        text-align: center;
+        font-size: 12px;
+        padding: 8px 0 24px;
+        color: var(--secondary-text-color);
+      }
+      .footer a {
+        color: var(--secondary-text-color);
+      }
+
+      @media all and (max-width: 500px) {
+        :host {
+          justify-content: flex-start;
+          min-height: 90%;
+          margin-bottom: 30px;
+        }
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hc-layout": HcLayout;
+  }
+}

cast/src/receiver/cast_context.ts

@@ -0,0 +1 @@
+export const castContext = cast.framework.CastReceiverContext.getInstance();

cast/src/receiver/demo/cast-demo-entities.ts

@@ -0,0 +1,141 @@
+import { Entity, convertEntities } from "../../../../src/fake_data/entity";
+
+export const castDemoEntities: () => Entity[] = () =>
+  convertEntities({
+    "light.reading_light": {
+      entity_id: "light.reading_light",
+      state: "on",
+      attributes: {
+        friendly_name: "Reading Light",
+      },
+    },
+    "light.ceiling": {
+      entity_id: "light.ceiling",
+      state: "on",
+      attributes: {
+        friendly_name: "Ceiling lights",
+      },
+    },
+    "light.standing_lamp": {
+      entity_id: "light.standing_lamp",
+      state: "off",
+      attributes: {
+        friendly_name: "Standing Lamp",
+      },
+    },
+    "sensor.temperature_inside": {
+      entity_id: "sensor.temperature_inside",
+      state: "22.7",
+      attributes: {
+        battery_level: 78,
+        unit_of_measurement: "\u00b0C",
+        friendly_name: "Inside",
+        device_class: "temperature",
+      },
+    },
+    "sensor.temperature_outside": {
+      entity_id: "sensor.temperature_outside",
+      state: "31.4",
+      attributes: {
+        battery_level: 53,
+        unit_of_measurement: "\u00b0C",
+        friendly_name: "Outside",
+        device_class: "temperature",
+      },
+    },
+    "person.arsaboo": {
+      entity_id: "person.arsaboo",
+      state: "not_home",
+      attributes: {
+        radius: 50,
+        friendly_name: "Arsaboo",
+        latitude: 52.3579946,
+        longitude: 4.8664597,
+        entity_picture: "/images/arsaboo.jpg",
+      },
+    },
+    "person.melody": {
+      entity_id: "person.melody",
+      state: "not_home",
+      attributes: {
+        radius: 50,
+        friendly_name: "Melody",
+        latitude: 52.3408927,
+        longitude: 4.8711073,
+        entity_picture: "/images/melody.jpg",
+      },
+    },
+    "zone.home": {
+      entity_id: "zone.home",
+      state: "zoning",
+      attributes: {
+        hidden: true,
+        latitude: 52.3631339,
+        longitude: 4.8903147,
+        radius: 100,
+        friendly_name: "Home",
+        icon: "hass:home",
+      },
+    },
+    "input_number.harmonyvolume": {
+      entity_id: "input_number.harmonyvolume",
+      state: "18.0",
+      attributes: {
+        initial: 30,
+        min: 1,
+        max: 100,
+        step: 1,
+        mode: "slider",
+        friendly_name: "Volume",
+        icon: "hass:volume-high",
+      },
+    },
+    "climate.upstairs": {
+      entity_id: "climate.upstairs",
+      state: "auto",
+      attributes: {
+        current_temperature: 24,
+        min_temp: 15,
+        max_temp: 30,
+        temperature: null,
+        target_temp_high: 26,
+        target_temp_low: 18,
+        fan_mode: "auto",
+        fan_modes: ["auto", "on"],
+        hvac_modes: ["auto", "cool", "heat", "off"],
+        aux_heat: "off",
+        actual_humidity: 30,
+        fan: "on",
+        operation: "fan",
+        fan_min_on_time: 10,
+        friendly_name: "Upstairs",
+        supported_features: 27,
+        preset_mode: "away",
+        preset_modes: ["home", "away", "eco", "sleep"],
+      },
+    },
+    "climate.downstairs": {
+      entity_id: "climate.downstairs",
+      state: "auto",
+      attributes: {
+        current_temperature: 22,
+        min_temp: 15,
+        max_temp: 30,
+        temperature: null,
+        target_temp_high: 24,
+        target_temp_low: 20,
+        fan_mode: "auto",
+        fan_modes: ["auto", "on"],
+        hvac_modes: ["auto", "cool", "heat", "off"],
+        aux_heat: "off",
+        actual_humidity: 30,
+        fan: "on",
+        operation: "fan",
+        fan_min_on_time: 10,
+        friendly_name: "Downstairs",
+        supported_features: 27,
+        preset_mode: "home",
+        preset_modes: ["home", "away", "eco", "sleep"],
+      },
+    },
+  });

cast/src/receiver/demo/cast-demo-lovelace.ts

@@ -0,0 +1,93 @@
+import {
+  LovelaceConfig,
+  LovelaceCardConfig,
+} from "../../../../src/data/lovelace";
+import { castContext } from "../cast_context";
+
+export const castDemoLovelace: () => LovelaceConfig = () => {
+  const touchSupported = castContext.getDeviceCapabilities()
+    .touch_input_supported;
+  return {
+    views: [
+      {
+        path: "overview",
+        cards: [
+          {
+            type: "markdown",
+            title: "Home Assistant Cast",
+            content: `With Home Assistant you can easily create interfaces (just like this one) which can be shown on Chromecast devices connected to TVs or Google Assistant devices with a screen.${
+              touchSupported
+                ? "\n\nYou are able to interact with this demo using the touch screen."
+                : "\n\nOn a Google Nest Hub you are able to interact with Home Assistant Cast via the touch screen."
+            }`,
+          },
+          {
+            type: touchSupported ? "entities" : "glance",
+            title: "Living Room",
+            entities: [
+              "light.reading_light",
+              "light.ceiling",
+              "light.standing_lamp",
+              "input_number.harmonyvolume",
+            ],
+          },
+          {
+            cards: [
+              {
+                graph: "line",
+                type: "sensor",
+                entity: "sensor.temperature_inside",
+              },
+              {
+                graph: "line",
+                type: "sensor",
+                entity: "sensor.temperature_outside",
+              },
+            ],
+            type: "horizontal-stack",
+          },
+          {
+            type: "map",
+            entities: ["person.arsaboo", "person.melody", "zone.home"],
+            aspect_ratio: touchSupported ? "16:9.3" : "16:11",
+          },
+          touchSupported && {
+            type: "entities",
+            entities: [
+              {
+                type: "weblink",
+                url: "/lovelace/climate",
+                name: "Climate controls",
+                icon: "hass:arrow-right",
+              },
+            ],
+          },
+        ].filter(Boolean) as LovelaceCardConfig[],
+      },
+      {
+        path: "climate",
+        cards: [
+          {
+            type: "thermostat",
+            entity: "climate.downstairs",
+          },
+          {
+            type: "entities",
+            entities: [
+              {
+                type: "weblink",
+                url: "/lovelace/overview",
+                name: "Back",
+                icon: "hass:arrow-left",
+              },
+            ],
+          },
+          {
+            type: "thermostat",
+            entity: "climate.upstairs",
+          },
+        ],
+      },
+    ],
+  };
+};

cast/src/receiver/entrypoint.ts

@@ -0,0 +1,42 @@
+import "../../../src/resources/custom-card-support";
+import { castContext } from "./cast_context";
+import { ReceivedMessage } from "./types";
+import { HassMessage } from "../../../src/cast/receiver_messages";
+import { HcMain } from "./layout/hc-main";
+import { CAST_NS } from "../../../src/cast/const";
+
+const controller = new HcMain();
+document.body.append(controller);
+
+const options = new cast.framework.CastReceiverOptions();
+options.disableIdleTimeout = true;
+options.customNamespaces = {
+  // @ts-ignore
+  [CAST_NS]: cast.framework.system.MessageType.JSON,
+};
+
+// The docs say we need to set options.touchScreenOptimizeApp = true
+// https://developers.google.com/cast/docs/caf_receiver/customize_ui#accessing_ui_controls
+// This doesn't work.
+// @ts-ignore
+options.touchScreenOptimizedApp = true;
+
+// The class reference say we can set a uiConfig in options to set it
+// https://developers.google.com/cast/docs/reference/caf_receiver/cast.framework.CastReceiverOptions#uiConfig
+// This doesn't work either.
+// @ts-ignore
+options.uiConfig = new cast.framework.ui.UiConfig();
+// @ts-ignore
+options.uiConfig.touchScreenOptimizedApp = true;
+
+castContext.addCustomMessageListener(
+  CAST_NS,
+  // @ts-ignore
+  (ev: ReceivedMessage<HassMessage>) => {
+    const msg = ev.data;
+    msg.senderId = ev.senderId;
+    controller.processIncomingMessage(msg);
+  }
+);
+
+castContext.start(options);

cast/src/receiver/layout/hc-demo.ts

@@ -0,0 +1,56 @@
+import { HassElement } from "../../../../src/state/hass-element";
+import "./hc-lovelace";
+import { customElement, TemplateResult, html, property } from "lit-element";
+import {
+  MockHomeAssistant,
+  provideHass,
+} from "../../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../../src/types";
+import { LovelaceConfig } from "../../../../src/data/lovelace";
+import { castDemoEntities } from "../demo/cast-demo-entities";
+import { castDemoLovelace } from "../demo/cast-demo-lovelace";
+import { mockHistory } from "../../../../demo/src/stubs/history";
+
+@customElement("hc-demo")
+class HcDemo extends HassElement {
+  @property() public lovelacePath!: string;
+  @property() private _lovelaceConfig?: LovelaceConfig;
+
+  protected render(): TemplateResult | void {
+    if (!this._lovelaceConfig) {
+      return html``;
+    }
+    return html`
+      <hc-lovelace
+        .hass=${this.hass}
+        .lovelaceConfig=${this._lovelaceConfig}
+        .viewPath=${this.lovelacePath}
+      ></hc-lovelace>
+    `;
+  }
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    this._initialize();
+  }
+
+  private async _initialize() {
+    const initial: Partial<MockHomeAssistant> = {
+      // Override updateHass so that the correct hass lifecycle methods are called
+      updateHass: (hassUpdate: Partial<HomeAssistant>) =>
+        this._updateHass(hassUpdate),
+    };
+
+    const hass = (this.hass = provideHass(this, initial));
+
+    mockHistory(hass);
+
+    hass.addEntities(castDemoEntities());
+    this._lovelaceConfig = castDemoLovelace();
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hc-demo": HcDemo;
+  }
+}

cast/src/receiver/layout/hc-launch-screen.ts

@@ -0,0 +1,66 @@
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  customElement,
+  CSSResult,
+  css,
+  property,
+} from "lit-element";
+import { HomeAssistant } from "../../../../src/types";
+
+@customElement("hc-launch-screen")
+class HcLaunchScreen extends LitElement {
+  @property() public hass?: HomeAssistant;
+  @property() public error?: string;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <div class="container">
+        <img
+          src="https://www.home-assistant.io/images/blog/2018-09-thinking-big/social.png"
+        />
+        <div class="status">
+          ${this.hass ? "Connected" : "Not Connected"}
+          ${this.error
+            ? html`
+                <p>Error: ${this.error}</p>
+              `
+            : ""}
+        </div>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: block;
+        height: 100vh;
+        padding-top: 64px;
+        background-color: white;
+        font-size: 24px;
+      }
+      .container {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+      }
+      img {
+        width: 717px;
+        height: 376px;
+        display: block;
+        margin: 0 auto;
+      }
+      .status {
+        padding-right: 54px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hc-launch-screen": HcLaunchScreen;
+  }
+}

cast/src/receiver/layout/hc-lovelace.ts

@@ -0,0 +1,108 @@
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  customElement,
+  CSSResult,
+  css,
+  property,
+} from "lit-element";
+import { LovelaceConfig } from "../../../../src/data/lovelace";
+import "../../../../src/panels/lovelace/hui-view";
+import { HomeAssistant } from "../../../../src/types";
+import { Lovelace } from "../../../../src/panels/lovelace/types";
+import "./hc-launch-screen";
+
+@customElement("hc-lovelace")
+class HcLovelace extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public lovelaceConfig!: LovelaceConfig;
+
+  @property() public viewPath?: string | number;
+
+  protected render(): TemplateResult | void {
+    const index = this._viewIndex;
+    if (index === undefined) {
+      return html`
+        <hc-launch-screen
+          .hass=${this.hass}
+          .error=${`Unable to find a view with path ${this.viewPath}`}
+        ></hc-launch-screen>
+      `;
+    }
+    const lovelace: Lovelace = {
+      config: this.lovelaceConfig,
+      editMode: false,
+      enableFullEditMode: () => undefined,
+      mode: "storage",
+      language: "en",
+      saveConfig: async () => undefined,
+      setEditMode: () => undefined,
+    };
+    return html`
+      <hui-view
+        .hass=${this.hass}
+        .lovelace=${lovelace}
+        .index=${index}
+        columns="2"
+      ></hui-view>
+    `;
+  }
+
+  protected updated(changedProps) {
+    super.updated(changedProps);
+
+    if (changedProps.has("viewPath") || changedProps.has("lovelaceConfig")) {
+      const index = this._viewIndex;
+
+      if (index !== undefined) {
+        const configBackground =
+          this.lovelaceConfig.views[index].background ||
+          this.lovelaceConfig.background;
+
+        if (configBackground) {
+          this.shadowRoot!.querySelector("hui-view")!.style.setProperty(
+            "--lovelace-background",
+            configBackground
+          );
+        }
+      }
+    }
+  }
+
+  private get _viewIndex() {
+    const selectedView = this.viewPath;
+    const selectedViewInt = parseInt(selectedView as string, 10);
+    for (let i = 0; i < this.lovelaceConfig.views.length; i++) {
+      if (
+        this.lovelaceConfig.views[i].path === selectedView ||
+        i === selectedViewInt
+      ) {
+        return i;
+      }
+    }
+    return undefined;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        background: var(--primary-background-color);
+      }
+      hui-view {
+        flex: 1;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hc-lovelace": HcLovelace;
+  }
+}

cast/src/receiver/layout/hc-main.ts

@@ -0,0 +1,233 @@
+import {
+  getAuth,
+  createConnection,
+  UnsubscribeFunc,
+} from "home-assistant-js-websocket";
+import { customElement, TemplateResult, html, property } from "lit-element";
+import { HassElement } from "../../../../src/state/hass-element";
+import {
+  HassMessage,
+  ConnectMessage,
+  ShowLovelaceViewMessage,
+  GetStatusMessage,
+  ShowDemoMessage,
+} from "../../../../src/cast/receiver_messages";
+import {
+  LovelaceConfig,
+  getLovelaceCollection,
+} from "../../../../src/data/lovelace";
+import "./hc-launch-screen";
+import { castContext } from "../cast_context";
+import { CAST_NS } from "../../../../src/cast/const";
+import { ReceiverStatusMessage } from "../../../../src/cast/sender_messages";
+import { loadLovelaceResources } from "../../../../src/panels/lovelace/common/load-resources";
+import { isNavigationClick } from "../../../../src/common/dom/is-navigation-click";
+
+@customElement("hc-main")
+export class HcMain extends HassElement {
+  @property() private _showDemo = false;
+
+  @property() private _lovelaceConfig?: LovelaceConfig;
+
+  @property() private _lovelacePath: string | number | null = null;
+
+  @property() private _error?: string;
+
+  private _unsubLovelace?: UnsubscribeFunc;
+
+  public processIncomingMessage(msg: HassMessage) {
+    if (msg.type === "connect") {
+      this._handleConnectMessage(msg);
+    } else if (msg.type === "show_lovelace_view") {
+      this._handleShowLovelaceMessage(msg);
+    } else if (msg.type === "get_status") {
+      this._handleGetStatusMessage(msg);
+    } else if (msg.type === "show_demo") {
+      this._handleShowDemo(msg);
+    } else {
+      // tslint:disable-next-line: no-console
+      console.warn("unknown msg type", msg);
+    }
+  }
+
+  protected render(): TemplateResult | void {
+    if (this._showDemo) {
+      return html`
+        <hc-demo .lovelacePath=${this._lovelacePath}></hc-demo>
+      `;
+    }
+
+    if (
+      !this._lovelaceConfig ||
+      this._lovelacePath === null ||
+      // Guard against part of HA not being loaded yet.
+      (this.hass &&
+        (!this.hass.states || !this.hass.config || !this.hass.services))
+    ) {
+      return html`
+        <hc-launch-screen
+          .hass=${this.hass}
+          .error=${this._error}
+        ></hc-launch-screen>
+      `;
+    }
+    return html`
+      <hc-lovelace
+        .hass=${this.hass}
+        .lovelaceConfig=${this._lovelaceConfig}
+        .viewPath=${this._lovelacePath}
+      ></hc-lovelace>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    import("../second-load");
+    window.addEventListener("location-changed", () => {
+      if (location.pathname.startsWith("/lovelace/")) {
+        this._lovelacePath = location.pathname.substr(10);
+        this._sendStatus();
+      }
+    });
+    document.body.addEventListener("click", (ev) => {
+      const href = isNavigationClick(ev);
+      if (href && href.startsWith("/lovelace/")) {
+        this._lovelacePath = href.substr(10);
+        this._sendStatus();
+      }
+    });
+  }
+
+  private _sendStatus(senderId?: string) {
+    const status: ReceiverStatusMessage = {
+      type: "receiver_status",
+      connected: !!this.hass,
+      showDemo: this._showDemo,
+    };
+
+    if (this.hass) {
+      status.hassUrl = this.hass.auth.data.hassUrl;
+      status.lovelacePath = this._lovelacePath!;
+    }
+
+    if (senderId) {
+      this.sendMessage(senderId, status);
+    } else {
+      for (const sender of castContext.getSenders()) {
+        this.sendMessage(sender.id, status);
+      }
+    }
+  }
+
+  private async _handleGetStatusMessage(msg: GetStatusMessage) {
+    this._sendStatus(msg.senderId!);
+  }
+
+  private async _handleConnectMessage(msg: ConnectMessage) {
+    let auth;
+    try {
+      auth = await getAuth({
+        loadTokens: async () => ({
+          hassUrl: msg.hassUrl,
+          clientId: msg.clientId,
+          refresh_token: msg.refreshToken,
+          access_token: "",
+          expires: 0,
+          expires_in: 0,
+        }),
+      });
+    } catch (err) {
+      this._error = err;
+      return;
+    }
+    let connection;
+    try {
+      connection = await createConnection({ auth });
+    } catch (err) {
+      this._error = err;
+      return;
+    }
+    if (this.hass) {
+      this.hass.connection.close();
+    }
+    this.initializeHass(auth, connection);
+    this._error = undefined;
+    this._sendStatus();
+  }
+
+  private async _handleShowLovelaceMessage(msg: ShowLovelaceViewMessage) {
+    // We should not get this command before we are connected.
+    // Means a client got out of sync. Let's send status to them.
+    if (!this.hass) {
+      this._sendStatus(msg.senderId!);
+      this._error = "Cannot show Lovelace because we're not connected.";
+      return;
+    }
+    if (!this._unsubLovelace) {
+      const llColl = getLovelaceCollection(this.hass!.connection);
+      // We first do a single refresh because we need to check if there is LL
+      // configuration.
+      try {
+        await llColl.refresh();
+        this._unsubLovelace = llColl.subscribe((lovelaceConfig) =>
+          this._handleNewLovelaceConfig(lovelaceConfig)
+        );
+      } catch (err) {
+        // Generate a Lovelace config.
+        this._unsubLovelace = () => undefined;
+        const {
+          generateLovelaceConfigFromHass,
+        } = await import("../../../../src/panels/lovelace/common/generate-lovelace-config");
+        this._handleNewLovelaceConfig(
+          await generateLovelaceConfigFromHass(this.hass!)
+        );
+      }
+    }
+    this._showDemo = false;
+    this._lovelacePath = msg.viewPath;
+    if (castContext.getDeviceCapabilities().touch_input_supported) {
+      this._breakFree();
+    }
+    this._sendStatus();
+  }
+
+  private _handleNewLovelaceConfig(lovelaceConfig: LovelaceConfig) {
+    castContext.setApplicationState(lovelaceConfig.title!);
+    this._lovelaceConfig = lovelaceConfig;
+    if (lovelaceConfig.resources) {
+      loadLovelaceResources(
+        lovelaceConfig.resources,
+        this.hass!.auth.data.hassUrl
+      );
+    }
+  }
+
+  private _handleShowDemo(_msg: ShowDemoMessage) {
+    import("./hc-demo").then(() => {
+      this._showDemo = true;
+      this._lovelacePath = "overview";
+      this._sendStatus();
+      if (castContext.getDeviceCapabilities().touch_input_supported) {
+        this._breakFree();
+      }
+    });
+  }
+
+  private _breakFree() {
+    const controls = document.body.querySelector("touch-controls");
+    if (controls) {
+      controls.remove();
+    }
+    document.body.setAttribute("style", "overflow-y: auto !important");
+  }
+
+  private sendMessage(senderId: string, response: any) {
+    castContext.sendCustomMessage(CAST_NS, senderId, response);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hc-main": HcMain;
+  }
+}

cast/src/receiver/second-load.ts

@@ -0,0 +1,5 @@
+import "web-animations-js/web-animations-next-lite.min";
+import "../../../src/resources/hass-icons";
+import "../../../src/resources/roboto";
+import "../../../src/components/ha-iconset-svg";
+import "./layout/hc-lovelace";

cast/src/receiver/types.ts

@@ -0,0 +1,6 @@
+export interface ReceivedMessage<T> {
+  gj: boolean;
+  data: T;
+  senderId: string;
+  type: "message";
+}