Fix more info dialog resizing

* Delete old JS file. Add new TS file. Add Type

* Updates

* Reviews

* Review Updates :)

* Updating State Localize

* Clean up

* Fixing Travis

.eslintrc-hound.json

@@ -1,6 +1,7 @@
 {
   "extends": ["airbnb-base", "prettier"],
   "parserOptions": {
+    "ecmaVersion": "2020",
     "ecmaFeatures": {
       "jsx": true,
       "modules": true

.eslintrc.json

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

.github/ISSUE_TEMPLATE.md

@@ -1,37 +0,0 @@
-<!-- READ THIS FIRST:
-- If you need additional help with this template please refer to https://www.home-assistant.io/help/reporting_issues/
-- Make sure you are running the latest version of Home Assistant before reporting an issue: https://github.com/home-assistant/home-assistant/releases
-- This is for bugs only. Feature and enhancement requests should go in our community forum: https://community.home-assistant.io/c/feature-requests
-- Provide as many details as possible. Do not delete any text from this template!
--->
-
-**Home Assistant release with the issue:**
-<!--
-- Frontend -> Developer tools -> Info
-- Or use this command: hass --version
--->
-
-**Last working Home Assistant release (if known):**
-
-**UI (States or Lovelace UI?):**
-<!--
-- Frontend -> Developer tools -> Info
--->
-
-**Browser and Operating System:**
-<!--
-Provide details about what browser (and version) you are seeing the issue in. And also which operating system this is on. If possible try to replicate the issue in other browsers and include your findings here.
--->
-
-**Description of problem:**
-<!--
-Explain what the issue is, and how things should look/behave. If possible provide a screenshot with a description.
--->
-
-
-**Javascript errors shown in the web inspector (if applicable):**
-```
-
-```
-
-**Additional information:**

.github/ISSUE_TEMPLATE/BUG_REPORT.md

@@ -0,0 +1,85 @@
+---
+name: Report a bug with the UI, Frontend or Lovelace
+about: Report an issue related to the Home Assistant frontend.
+labels: bug
+---
+<!-- READ THIS FIRST:
+- If you need additional help with this template please refer to https://www.home-assistant.io/help/reporting_issues/
+- Make sure you are running the latest version of Home Assistant before reporting an issue: https://github.com/home-assistant/home-assistant/releases
+- Do not report issues for custom Lovelace cards.
+- Provide as many details as possible. Paste logs, configuration samples and code into the backticks.
+DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed without comment.
+-->
+## Checklist
+
+- [ ] I have updated to the latest available Home Assistant version.
+- [ ] I have cleared the cache of my browser.
+- [ ] I have tried a different browser to see if it is related to my browser.
+
+## The problem
+<!--
+  Describe the issue you are experiencing here to communicate to the
+  maintainers. Tell us about the current behavior.
+  If possible provide a screenshot with a description.
+-->
+
+
+## Expected behavior
+<!-- 
+  Describe what you expected to happen or it should look/behave.
+  If possible provide a screenshot with a description.
+-->
+
+
+## Steps to reproduce
+<!--
+  Provide steps for us, that helps reproducing your issue.
+  For example:
+    1. Add a climate integration
+    2. Navigate to Lovelace
+    3. Click more info of the climate entity
+    4. Set the HVAC action to heat
+    5. Set the temperature higher than the current temperature
+    6. Set the HVAC action to cool
+-->
+
+
+## Environment
+<!--
+  Provide details about the versions you are using, which helps us reproducing
+  and finding the issue quicker. Version information is found in the
+  Home Assistant frontend: Developer tools -> Info.
+
+  Browser version and operating system is important! Please try to replicate
+  your issue in a different browser and be sure to include your findings.
+-->
+
+- Home Assistant release with the issue: 
+- Last working Home Assistant release (if known): 
+- UI Type (States or Lovelace): 
+- Browser and browser version: 
+- Operating system: 
+
+## Problem-relevant configuration
+<!--
+  An example configuration that caused the problem for you. Fill this out even
+  if it seems unimportant to you. Please be sure to remove personal information
+  like passwords, private URLs and other credentials.
+-->
+
+```yaml
+
+```
+
+## Javascript errors shown in your browser console/inspector
+<!--
+  If you come across any javascript or other error logs, e.g., in your browser
+  console/inspector please provide them.
+-->
+
+```txt
+
+```
+
+## Additional information
+

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -0,0 +1,25 @@
+---
+name: Request a feature for the UI, Frontend or Lovelace
+about: Request an new feature for the Home Assistant frontend.
+labels: feature request
+---
+<!--
+  DO NOT DELETE ANY TEXT from this template!
+  Otherwise, your request may be closed without comment.
+-->
+## The request
+<!-- 
+  Describe to our maintainers, the feature you would like to be added.
+  Please be clear and concise and, if possible, provide a screenshot or mockup.
+-->
+
+
+## The alternatives
+<!--
+  Are you currently using, or have you considered alternatives?
+  If so, could you please describe those?
+-->
+
+
+## Additional information
+

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,14 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Report a bug that is NOT related to the UI, Frontend or Lovelace
+    url: https://github.com/home-assistant/home-assistant/issues
+    about: This is the issue tracker for our frontend. Please report other issues with the backend repository.
+  - name: Report incorrect or missing information on our website
+    url: https://github.com/home-assistant/home-assistant.io/issues
+    about: Our documentation has its own issue tracker. Please report issues with the website there.
+  - name: I have a question or need support
+    url: https://www.home-assistant.io/help
+    about: We use GitHub for tracking bugs, check our website for resources on getting help.
+  - name: I'm unsure where to go
+    url: https://www.home-assistant.io/join-chat
+    about: If you are unsure where to go, then joining our chat is recommended; Just ask!

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,77 @@
+<!--
+  You are amazing! Thanks for contributing to our project!
+  Please, DO NOT DELETE ANY TEXT from this template! (unless instructed).
+-->
+## Breaking change
+<!--
+  If your PR contains a breaking change for existing users, it is important
+  to tell them what breaks, how to make it work again and why we did this.
+  This piece of text is published with the release notes, so it helps if you
+  write it towards our users, not us.
+  Note: Remove this section if this PR is NOT a breaking change.
+-->
+
+
+## Proposed change
+<!-- 
+  Describe the big picture of your changes here to communicate to the
+  maintainers why we should accept this pull request. If it fixes a bug
+  or resolves a feature request, be sure to link to that issue in the
+  additional information section.
+-->
+
+
+## Type of change
+<!--
+  What type of change does your PR introduce to the Home Assistant frontend?
+  NOTE: Please, check only 1! box! 
+  If your PR requires multiple boxes to be checked, you'll most likely need to
+  split it into multiple PRs. This makes things easier and faster to code review.
+-->
+
+- [ ] Dependency upgrade
+- [ ] Bugfix (non-breaking change which fixes an issue)
+- [ ] New feature (thank you!)
+- [ ] Breaking change (fix/feature causing existing functionality to break)
+- [ ] Code quality improvements to existing code or addition of tests
+
+## Example configuration
+<!--
+  Supplying a configuration snippet, makes it easier for a maintainer to test
+  your PR.
+-->
+
+```yaml
+
+```
+
+## Additional information
+<!--
+  Details are important, and help maintainers processing your PR.
+  Please be sure to fill out additional details, if applicable.
+-->
+
+- This PR fixes or closes issue: fixes #
+- This PR is related to issue: 
+- Link to documentation pull request: 
+
+## Checklist
+<!--
+  Put an `x` in the boxes that apply. You can also fill these out after
+  creating the PR. If you're unsure about any of them, don't hesitate to ask.
+  We're here to help! This is simply a reminder of what we are going to look
+  for before merging your code.
+-->
+
+- [ ] The code change is tested and works locally.
+- [ ] There is no commented out code in this PR.
+- [ ] Tests have been added to verify that the new code works.
+
+If user exposed functionality or configuration variables are added/changed:
+
+- [ ] Documentation added/updated for [www.home-assistant.io][docs-repository]
+
+<!--
+  Thank you for contributing <3
+-->
+[docs-repository]: https://github.com/home-assistant/home-assistant.io

.github/lock.yml

@@ -0,0 +1,27 @@
+# Configuration for Lock Threads - https://github.com/dessant/lock-threads
+
+# Number of days of inactivity before a closed issue or pull request is locked
+daysUntilLock: 1
+
+# Skip issues and pull requests created before a given timestamp. Timestamp must
+# follow ISO 8601 (`YYYY-MM-DD`). Set to `false` to disable
+skipCreatedBefore: 2020-01-01
+
+# Issues and pull requests with these labels will be ignored. Set to `[]` to disable
+exemptLabels: []
+
+# Label to add before locking, such as `outdated`. Set to `false` to disable
+lockLabel: false
+
+# Comment to post before locking. Set to `false` to disable
+lockComment: false
+
+# Assign `resolved` as the reason for locking. Set to `false` to disable
+setLockReason: false
+
+# Limit to only `issues` or `pulls`
+only: pulls
+
+# Optionally, specify configuration settings just for `issues` or `pulls`
+issues:
+   daysUntilLock: 30

.github/stale.yml

@@ -0,0 +1,56 @@
+# Configuration for probot-stale - https://github.com/probot/stale
+
+# Number of days of inactivity before an Issue or Pull Request becomes stale
+daysUntilStale: 90
+
+# Number of days of inactivity before an Issue or Pull Request with the stale label is closed.
+# Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale.
+daysUntilClose: 7
+
+# Only issues or pull requests with all of these labels are check if stale. Defaults to `[]` (disabled)
+onlyLabels: []
+
+# Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable
+exemptLabels:
+  - feature request
+  - Help wanted
+  - to do
+
+# Set to true to ignore issues in a project (defaults to false)
+exemptProjects: true
+
+# Set to true to ignore issues in a milestone (defaults to false)
+exemptMilestones: true
+
+# Set to true to ignore issues with an assignee (defaults to false)
+exemptAssignees: false
+
+# Label to use when marking as stale
+staleLabel: stale
+
+# Comment to post when marking as stale. Set to `false` to disable
+markComment: >
+  There hasn't been any activity on this issue recently. Due to the high number
+  of incoming GitHub notifications, we have to clean some of the old issues,
+  as many of them have already been resolved with the latest updates.
+
+  Please make sure to update to the latest Home Assistant version and check
+  if that solves the issue. Let us know if that works for you by adding a
+  comment 👍
+
+  This issue now has been marked as stale and will be closed if no further
+  activity occurs. Thank you for your contributions.
+
+# Comment to post when removing the stale label.
+# unmarkComment: >
+#   Your comment here.
+
+# Comment to post when closing a stale Issue or Pull Request.
+# closeComment: >
+#   Your comment here.
+
+# Limit the number of actions per hour, from 1-30. Default is 30
+limitPerRun: 30
+
+# Limit to only `issues` or `pulls`
+only: issues

.gitignore

@@ -25,6 +25,9 @@ dist
 .vscode/*
 !.vscode/extensions.json
 
+# Cast dev settings 
+src/cast/dev_const.ts
+
 # Secrets
 .lokalise_token
 yarn-error.log

.travis.yml

@@ -8,19 +8,11 @@ install: yarn install
 script:
   - npm run build
   - hassio/script/build_hassio
+  # Because else eslint fails because hassio has cleaned that build
+  - ./node_modules/.bin/gulp gen-icons-app
   - npm run test
   # - xvfb-run wct --module-resolution=node --npm
   # - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct --module-resolution=node --npm --plugin sauce; fi'
-services:
-  - docker
-before_deploy:
-  - 'docker pull lokalise/lokalise-cli@sha256:2198814ebddfda56ee041a4b427521757dd57f75415ea9693696a64c550cef21'
-deploy:
-  provider: script
-  script: script/travis_deploy
-  'on':
-    branch: master
 dist: trusty
 addons:
   sauce_connect: true
-

README.md

@@ -2,9 +2,9 @@
 
 This is the repository for the official [Home Assistant](https://home-assistant.io) frontend.
 
-[![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/home-assistant-polymer/master/docs/screenshot.png)](https://home-assistant.io/demo/)
+[![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/home-assistant-polymer/master/docs/screenshot.png)](https://demo.home-assistant.io/)
 
-- [View demo of the Polymer frontend](https://home-assistant.io/demo/)
+- [View demo of Home Assistant](https://demo.home-assistant.io/)
 - [More information about Home Assistant](https://home-assistant.io)
 - [Frontend development instructions](https://developers.home-assistant.io/docs/en/frontend_index.html)
 
@@ -31,3 +31,5 @@ It is possible to compile the project and/or run commands in the development env
 ## License
 
 Home Assistant is open-source and Apache 2 licensed. Feel free to browse the repository, learn and reuse parts in your own projects.
+
+We use [BrowserStack](https://www.browserstack.com) to test Home Assistant on a large variation of devices.

azure-pipelines-netlify.yml

@@ -0,0 +1,27 @@
+# https://dev.azure.com/home-assistant
+
+trigger: none
+pr: none
+schedules:
+  - cron: "0 0 * * *"
+    displayName: "build preview"
+    branches:
+      include:
+      - dev
+    always: false
+variables:
+  - group: netlify
+
+jobs:
+
+- job: 'Netlify_preview'
+  pool:
+    vmImage: 'ubuntu-latest'
+  steps:
+  - script: |
+      # Cast
+      curl -X POST -d {} https://api.netlify.com/build_hooks/${NETLIFY_CAST}
+
+      # Demo
+      curl -X POST -d {} https://api.netlify.com/build_hooks/${NETLIFY_DEMO}
+    displayName: 'Trigger netlify build preview'

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

azure-pipelines-translation.yml

@@ -0,0 +1,70 @@
+# https://dev.azure.com/home-assistant
+
+trigger:
+  batch: true
+  branches:
+    include:
+    - dev
+  paths:
+    include:
+    - translations/en.json
+pr: none
+schedules:
+  - cron: "30 0 * * *"
+    displayName: "translation update"
+    branches:
+      include:
+      - dev
+    always: true
+variables:
+- group: translation
+resources:
+  repositories:
+  - repository: azure
+    type: github
+    name: 'home-assistant/ci-azure'
+    endpoint: 'home-assistant'
+
+
+jobs:
+
+- job: 'Upload'
+  pool:
+    vmImage: 'ubuntu-latest'
+  steps:
+  - task: NodeTool@0
+    displayName: 'Use Node 12.x'
+    inputs:
+      versionSpec: '12.x'
+  - script: |
+      export LOKALISE_TOKEN="$(lokaliseToken)"
+      export AZURE_BRANCH="$(Build.SourceBranchName)"
+
+      ./script/translations_upload_base
+    displayName: 'Upload Translation'
+
+- job: 'Download'
+  dependsOn:
+  - 'Upload'
+  condition: or(eq(variables['Build.Reason'], 'Schedule'), eq(variables['Build.Reason'], 'Manual'))
+  pool:
+    vmImage: 'ubuntu-latest'
+  steps:
+  - task: NodeTool@0
+    displayName: 'Use Node 12.x'
+    inputs:
+      versionSpec: '12.x'
+  - template: templates/azp-step-git-init.yaml@azure
+  - script: |
+      export LOKALISE_TOKEN="$(lokaliseToken)"
+      export AZURE_BRANCH="$(Build.SourceBranchName)"
+
+      npm install
+      ./script/translations_download
+    displayName: 'Download Translation'
+  - script: |
+      git checkout dev
+      git add translation
+      git commit -am "[ci skip] Translation update"
+      git push
+    displayName: 'Update translation'

build-scripts/babel.js

@@ -33,6 +33,7 @@ module.exports.babelLoaderConfig = ({ latestBuild }) => {
               pragma: "h",
             },
           ],
+          "@babel/plugin-proposal-optional-chaining",
           [
             require("@babel/plugin-proposal-decorators").default,
             { decoratorsBeforeExport: true },

build-scripts/env.js

@@ -0,0 +1,6 @@
+module.exports = {
+  isProdBuild: process.env.NODE_ENV === "production",
+  isStatsBuild: process.env.STATS === "1",
+  isTravis: process.env.TRAVIS === "true",
+  isNetlify: process.env.NETLIFY === "true",
+};

build-scripts/gulp/app.js

@@ -1,10 +1,13 @@
 // Run HA develop mode
 const gulp = require("gulp");
 
+const envVars = require("../env");
+
 require("./clean.js");
 require("./translations.js");
 require("./gen-icons.js");
 require("./gather-static.js");
+require("./compress.js");
 require("./webpack.js");
 require("./service-worker.js");
 require("./entry-html.js");
@@ -18,7 +21,7 @@ gulp.task(
     "clean",
     gulp.parallel(
       "gen-service-worker-dev",
-      "gen-icons",
+      gulp.parallel("gen-icons-app", "gen-icons-mdi"),
       "gen-pages-dev",
       "gen-index-app-dev",
       gulp.series("create-test-translation", "build-translations")
@@ -35,13 +38,11 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean",
-    gulp.parallel("gen-icons", "build-translations"),
+    gulp.parallel("gen-icons-app", "gen-icons-mdi", "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"])
-    ),
+    "webpack-prod-app",
+    ...// Don't compress running tests
+    (envVars.isTravis ? [] : ["compress-app"]),
     gulp.parallel(
       "gen-pages-prod",
       "gen-index-app-prod",

build-scripts/gulp/cast.js

@@ -0,0 +1,41 @@
+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-app",
+      "gen-icons-mdi",
+      "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-app", "gen-icons-mdi", "build-translations"),
+    "copy-static-cast",
+    "webpack-prod-cast",
+    "gen-index-cast-prod"
+  )
+);

build-scripts/gulp/clean.js

@@ -1,6 +1,39 @@
 const del = require("del");
 const gulp = require("gulp");
 const config = require("../paths");
+require("./translations");
 
-gulp.task("clean", () => del([config.root, config.build_dir]));
-gulp.task("clean-demo", () => del([config.demo_root, config.build_dir]));
+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]);
+  })
+);
+
+gulp.task(
+  "clean-hassio",
+  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
+    return del([config.hassio_root, config.build_dir]);
+  })
+);
+
+gulp.task(
+  "clean-gallery",
+  gulp.parallel("clean-translations", function cleanOutputAndBuildDir() {
+    return del([config.gallery_root, config.build_dir]);
+  })
+);

build-scripts/gulp/compress.js

@@ -0,0 +1,38 @@
+// Tasks to compress
+
+const gulp = require("gulp");
+const zopfli = require("gulp-zopfli-green");
+const merge = require("merge-stream");
+const path = require("path");
+const paths = require("../paths");
+
+gulp.task("compress-app", function compressApp() {
+  const jsLatest = gulp
+    .src(path.resolve(paths.output, "**/*.js"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(paths.output));
+
+  const jsEs5 = gulp
+    .src(path.resolve(paths.output_es5, "**/*.js"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(paths.output_es5));
+
+  const polyfills = gulp
+    .src(path.resolve(paths.static, "polyfills/*.js"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(path.resolve(paths.static, "polyfills")));
+
+  const translations = gulp
+    .src(path.resolve(paths.static, "translations/*.json"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(path.resolve(paths.static, "translations")));
+
+  return merge(jsLatest, jsEs5, polyfills, translations);
+});
+
+gulp.task("compress-hassio", function compressApp() {
+  return gulp
+    .src(path.resolve(paths.hassio_root, "**/*.js"))
+    .pipe(zopfli())
+    .pipe(gulp.dest(paths.hassio_root));
+});

build-scripts/gulp/demo.js

@@ -1,4 +1,4 @@
-// Run HA develop mode
+// Run demo develop mode
 const gulp = require("gulp");
 
 require("./clean.js");
@@ -17,7 +17,8 @@ gulp.task(
     },
     "clean-demo",
     gulp.parallel(
-      "gen-icons",
+      "gen-icons-app",
+      "gen-icons-mdi",
       "gen-icons-demo",
       "gen-index-demo-dev",
       "build-translations"
@@ -34,7 +35,12 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean-demo",
-    gulp.parallel("gen-icons", "gen-icons-demo", "build-translations"),
+    gulp.parallel(
+      "gen-icons-app",
+      "gen-icons-mdi",
+      "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") {
+      const 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() {
+  const 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

@@ -11,9 +11,6 @@ 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 readFile = (pth) => fs.readFileSync(pth).toString();
 
 const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
@@ -22,7 +19,19 @@ const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
 };
 
 const renderDemoTemplate = (pth, data = {}) =>
-  renderTemplate(pth, data, demoTemplatePath);
+  renderTemplate(pth, data, (tpl) =>
+    path.resolve(config.demo_dir, "src/html/", `${tpl}.html.template`)
+  );
+
+const renderCastTemplate = (pth, data = {}) =>
+  renderTemplate(pth, data, (tpl) =>
+    path.resolve(config.cast_dir, "src/html/", `${tpl}.html.template`)
+  );
+
+const renderGalleryTemplate = (pth, data = {}) =>
+  renderTemplate(pth, data, (tpl) =>
+    path.resolve(config.gallery_dir, "src/html/", `${tpl}.html.template`)
+  );
 
 const minifyHtml = (content) =>
   minify(content, {
@@ -86,7 +95,7 @@ gulp.task("gen-index-app-dev", (done) => {
     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();
@@ -113,17 +122,64 @@ gulp.task("gen-index-app-prod", (done) => {
   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",
+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
+  );
 
-  fs.outputFileSync(path.resolve(config.demo_root, "index.html"), content);
+  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();
 });
 
@@ -156,8 +212,33 @@ gulp.task("gen-index-demo-prod", (done) => {
     es5Compatibility: es5Manifest["compatibility.js"],
     es5DemoJS: es5Manifest["main.js"],
   });
-  const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");
+  const minified = minifyHtml(content);
 
   fs.outputFileSync(path.resolve(config.demo_root, "index.html"), minified);
   done();
 });
+
+gulp.task("gen-index-gallery-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 = renderGalleryTemplate("index", {
+    latestGalleryJS: "./entrypoint.js",
+  });
+
+  fs.outputFileSync(path.resolve(config.gallery_root, "index.html"), content);
+  done();
+});
+
+gulp.task("gen-index-gallery-prod", (done) => {
+  const latestManifest = require(path.resolve(
+    config.gallery_output,
+    "manifest.json"
+  ));
+  const content = renderGalleryTemplate("index", {
+    latestGalleryJS: latestManifest["entrypoint.js"],
+  });
+  const minified = minifyHtml(content);
+
+  fs.outputFileSync(path.resolve(config.gallery_root, "index.html"), minified);
+  done();
+});

build-scripts/gulp/gallery.js

@@ -0,0 +1,38 @@
+// 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-gallery",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-gallery",
+    gulp.parallel("gen-icons-app", "gen-icons-app", "build-translations"),
+    "copy-static-gallery",
+    "gen-index-gallery-dev",
+    "webpack-dev-server-gallery"
+  )
+);
+
+gulp.task(
+  "build-gallery",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-gallery",
+    gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
+    "copy-static-gallery",
+    "webpack-prod-gallery",
+    "gen-index-gallery-prod"
+  )
+);

build-scripts/gulp/gather-static.js

@@ -4,8 +4,6 @@ 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) =>
@@ -67,24 +65,6 @@ function copyMapPanel(staticDir) {
   );
 }
 
-function compressStatic(staticDir) {
-  const staticPath = genStaticPath(staticDir);
-  const fonts = gulp
-    .src(staticPath("fonts/**/*.ttf"))
-    .pipe(zopfli())
-    .pipe(gulp.dest(staticPath("fonts")));
-  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(fonts, polyfills, translations);
-}
-
 gulp.task("copy-static", (done) => {
   const staticDir = paths.static;
   const staticPath = genStaticPath(paths.static);
@@ -104,11 +84,12 @@ gulp.task("copy-static", (done) => {
   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);
+  fs.copySync(
+    polyPath("public/static"),
+    path.resolve(paths.demo_root, "static")
+  );
   // Copy demo static files
   fs.copySync(path.resolve(paths.demo_dir, "public"), paths.demo_root);
 
@@ -118,3 +99,27 @@ gulp.task("copy-static-demo", (done) => {
   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();
+});
+
+gulp.task("copy-static-gallery", (done) => {
+  // Copy app static files
+  fs.copySync(polyPath("public/static"), paths.gallery_static);
+  // Copy gallery static files
+  fs.copySync(path.resolve(paths.gallery_dir, "public"), paths.gallery_root);
+
+  copyMapPanel(paths.gallery_static);
+  copyFonts(paths.gallery_static);
+  copyTranslations(paths.gallery_static);
+  done();
+});

build-scripts/gulp/gen-icons.js

@@ -22,6 +22,7 @@ const BUILT_IN_PANEL_ICONS = [
   "mailbox", // Mailbox
   "tooltip-account", // Map
   "cart", // Shopping List
+  "hammer", // developer-tools
 ];
 
 // Given an icon name, load the SVG file
@@ -56,18 +57,6 @@ function generateIconset(iconsetName, iconNames) {
   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);
@@ -100,24 +89,27 @@ function findIcons(searchPath, iconsetName) {
   return icons;
 }
 
-function genHassIcons() {
+gulp.task("gen-icons-mdi", (done) => {
+  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));
+  done();
+});
+
+gulp.task("gen-icons-app", (done) => {
   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");
@@ -128,8 +120,21 @@ gulp.task("gen-icons-demo", (done) => {
   done();
 });
 
-module.exports = {
-  findIcons,
-  generateIconset,
-  genMDIIcons,
-};
+gulp.task("gen-icons-hassio", (done) => {
+  const iconNames = findIcons(
+    path.resolve(paths.hassio_dir, "./src"),
+    "hassio"
+  );
+  // Find hassio icons inside HA main repo.
+  for (const item of findIcons(
+    path.resolve(paths.polymer_dir, "./src"),
+    "hassio"
+  )) {
+    iconNames.add(item);
+  }
+  fs.writeFileSync(
+    path.resolve(paths.hassio_dir, "hassio-icons.html"),
+    generateIconset("hassio", iconNames)
+  );
+  done();
+});

build-scripts/gulp/hassio.js

@@ -0,0 +1,34 @@
+const gulp = require("gulp");
+
+const envVars = require("../env");
+
+require("./clean.js");
+require("./gen-icons.js");
+require("./webpack.js");
+require("./compress.js");
+
+gulp.task(
+  "develop-hassio",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-hassio",
+    gulp.parallel("gen-icons-hassio", "gen-icons-mdi"),
+    "webpack-watch-hassio"
+  )
+);
+
+gulp.task(
+  "build-hassio",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-hassio",
+    gulp.parallel("gen-icons-hassio", "gen-icons-mdi"),
+    "webpack-prod-hassio",
+    ...// Don't compress running tests
+    (envVars.isTravis ? [] : ["compress-hassio"])
+  )
+);

build-scripts/gulp/translations.js

@@ -36,6 +36,7 @@ const TRANSLATION_FRAGMENTS = [
   "page-authorize",
   "page-demo",
   "page-onboarding",
+  "developer-tools",
 ];
 
 const tasks = [];
@@ -44,11 +45,10 @@ 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])
-      );
+      output = {
+        ...output,
+        ...recursiveFlatten(prefix + key + ".", data[key]),
+      };
     } else {
       output[prefix + key] = data[key];
     }
@@ -98,18 +98,16 @@ function recursiveEmpty(data) {
  * @link https://docs.lokalise.co/article/KO5SZWLLsy-key-referencing
  */
 const re_key_reference = /\[%key:([^%]+)%\]/;
-function lokalise_transform(data, original) {
+function lokaliseTransform(data, original, file) {
   const output = {};
   Object.entries(data).forEach(([key, value]) => {
     if (value instanceof Object) {
-      output[key] = lokalise_transform(value, original);
+      output[key] = lokaliseTransform(value, original, file);
     } 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`
-          );
+          throw Error(`Invalid key placeholder ${key} in ${file.path}`);
         }
         return replace;
       });
@@ -124,18 +122,28 @@ gulp.task(taskName, function() {
 });
 tasks.push(taskName);
 
-taskName = "create-test-metadata";
-gulp.task(taskName, function(cb) {
-  fs.writeFile(
-    workDir + "/testMetadata.json",
-    JSON.stringify({
-      test: {
-        nativeName: "Test",
-      },
-    }),
-    cb
-  );
+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";
@@ -172,7 +180,7 @@ gulp.task(
       .src("src/translations/en.json")
       .pipe(
         transform(function(data, file) {
-          return lokalise_transform(data, data);
+          return lokaliseTransform(data, data, file);
         })
       )
       .pipe(rename("translationMaster.json"))
@@ -187,6 +195,11 @@ gulp.task(
   gulp.series("build-master-translation", function() {
     return gulp
       .src([inDir + "/*.json", workDir + "/test.json"], { allowEmpty: true })
+      .pipe(
+        transform(function(data, file) {
+          return lokaliseTransform(data, data, file);
+        })
+      )
       .pipe(
         foreach(function(stream, file) {
           // For each language generate a merged json file. It begins with the master
@@ -203,7 +216,7 @@ gulp.task(
             const lang = subtags.slice(0, i).join("-");
             if (lang === "test") {
               src.push(workDir + "/test.json");
-            } else {
+            } else if (lang !== "en") {
               src.push(inDir + "/" + lang + ".json");
             }
           }

build-scripts/gulp/webpack.js

@@ -1,11 +1,39 @@
 // 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 } = require("../webpack");
+const {
+  createAppConfig,
+  createDemoConfig,
+  createCastConfig,
+  createHassioConfig,
+  createGalleryConfig,
+} = require("../webpack");
+
+const bothBuilds = (createConfigFunc, params) => [
+  createConfigFunc({ ...params, latestBuild: true }),
+  createConfigFunc({ ...params, latestBuild: false }),
+];
+
+const runDevServer = ({
+  compiler,
+  contentBase,
+  port,
+  listenHost = "localhost",
+}) =>
+  new WebpackDevServer(compiler, {
+    open: true,
+    watchContentBase: true,
+    contentBase,
+  }).listen(port, listenHost, function(err) {
+    if (err) {
+      throw err;
+    }
+    // Server listening
+    log("[webpack-dev-server]", `http://localhost:${port}`);
+  });
 
 const handler = (done) => (err, stats) => {
   if (err) {
@@ -28,20 +56,11 @@ const handler = (done) => (err, stats) => {
 };
 
 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
+  webpack(bothBuilds(createAppConfig, { isProdBuild: false })).watch(
+    {},
+    handler()
+  );
 });
 
 gulp.task(
@@ -49,47 +68,17 @@ gulp.task(
   () =>
     new Promise((resolve) =>
       webpack(
-        [
-          createAppConfig({
-            isProdBuild: true,
-            latestBuild: true,
-            isStatsBuild: false,
-          }),
-          createAppConfig({
-            isProdBuild: true,
-            latestBuild: false,
-            isStatsBuild: false,
-          }),
-        ],
+        bothBuilds(createAppConfig, { isProdBuild: true }),
         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(8080, "localhost", function(err) {
-    if (err) {
-      throw err;
-    }
-    // Server listening
-    log("[webpack-dev-server]", "http://localhost:8080");
+  runDevServer({
+    compiler: webpack(bothBuilds(createDemoConfig, { isProdBuild: false })),
+    contentBase: paths.demo_root,
+    port: 8090,
   });
 });
 
@@ -98,18 +87,82 @@ gulp.task(
   () =>
     new Promise((resolve) =>
       webpack(
-        [
-          createDemoConfig({
-            isProdBuild: true,
-            latestBuild: false,
-            isStatsBuild: false,
-          }),
-          createDemoConfig({
-            isProdBuild: true,
-            latestBuild: true,
-            isStatsBuild: false,
-          }),
-        ],
+        bothBuilds(createDemoConfig, {
+          isProdBuild: true,
+        }),
+        handler(resolve)
+      )
+    )
+);
+
+gulp.task("webpack-dev-server-cast", () => {
+  runDevServer({
+    compiler: webpack(bothBuilds(createCastConfig, { isProdBuild: false })),
+    contentBase: paths.cast_root,
+    port: 8080,
+    // Accessible from the network, because that's how Cast hits it.
+    listenHost: "0.0.0.0",
+  });
+});
+
+gulp.task(
+  "webpack-prod-cast",
+  () =>
+    new Promise((resolve) =>
+      webpack(
+        bothBuilds(createCastConfig, {
+          isProdBuild: true,
+        }),
+
+        handler(resolve)
+      )
+    )
+);
+
+gulp.task("webpack-watch-hassio", () => {
+  // we are not calling done, so this command will run forever
+  webpack(
+    createHassioConfig({
+      isProdBuild: false,
+      latestBuild: false,
+    })
+  ).watch({}, handler());
+});
+
+gulp.task(
+  "webpack-prod-hassio",
+  () =>
+    new Promise((resolve) =>
+      webpack(
+        createHassioConfig({
+          isProdBuild: true,
+          latestBuild: false,
+        }),
+        handler(resolve)
+      )
+    )
+);
+
+gulp.task("webpack-dev-server-gallery", () => {
+  runDevServer({
+    compiler: webpack(
+      createGalleryConfig({ latestBuild: true, isProdBuild: false })
+    ),
+    contentBase: paths.gallery_root,
+    port: 8100,
+  });
+});
+
+gulp.task(
+  "webpack-prod-gallery",
+  () =>
+    new Promise((resolve) =>
+      webpack(
+        createGalleryConfig({
+          isProdBuild: true,
+          latestBuild: true,
+        }),
+
         handler(resolve)
       )
     )

build-scripts/paths.js

@@ -14,4 +14,19 @@ module.exports = {
   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"),
+
+  gallery_dir: path.resolve(__dirname, "../gallery"),
+  gallery_root: path.resolve(__dirname, "../gallery/dist"),
+  gallery_output: path.resolve(__dirname, "../gallery/dist/frontend_latest"),
+  gallery_static: path.resolve(__dirname, "../gallery/dist/static"),
+
+  hassio_dir: path.resolve(__dirname, "../hassio"),
+  hassio_root: path.resolve(__dirname, "../hassio/build"),
+  hassio_publicPath: "/api/hassio/app/",
 };

build-scripts/webpack.js

@@ -3,8 +3,6 @@ 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");
 const { babelLoaderConfig } = require("./babel.js");
@@ -17,207 +15,249 @@ if (!version) {
 }
 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`;
+const createWebpackConfig = ({
+  entry,
+  outputRoot,
+  defineOverlay,
+  isProdBuild,
+  latestBuild,
+  isStatsBuild,
+  dontHash,
+}) => {
+  if (!dontHash) {
+    dontHash = new Set();
   }
-  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 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),
+    mode: isProdBuild ? "production" : "development",
+    devtool: isProdBuild ? "source-map" : "inline-cheap-module-source-map",
     entry,
     module: {
-      rules: [babelLoaderConfig({ latestBuild }), cssLoader, htmlLoader],
+      rules: [
+        babelLoaderConfig({ latestBuild }),
+        {
+          test: /\.css$/,
+          use: "raw-loader",
+        },
+        {
+          test: /\.(html)$/,
+          use: {
+            loader: "html-loader",
+            options: {
+              exportAsEs6Default: true,
+            },
+          },
+        },
+      ],
     },
-    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({
+    optimization: {
+      minimizer: [
+        new TerserPlugin({
           cache: true,
-          exclude: [/\.js\.map$/, /\.LICENSE$/, /\.py$/, /\.txt$/],
-          algorithm(input, compressionOptions, callback) {
-            return zopfli.gzip(input, compressionOptions, callback);
+          parallel: true,
+          extractComments: true,
+          sourceMap: true,
+          terserOptions: {
+            safari10: true,
+            ecma: latestBuild ? undefined : 5,
           },
         }),
-      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/",
+      ],
     },
-    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: [babelLoaderConfig({ latestBuild }), cssLoader, htmlLoader],
-    },
-    optimization: optimization(latestBuild),
     plugins: [
       new ManifestPlugin(),
       new webpack.DefinePlugin({
         __DEV__: !isProdBuild,
         __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
-        __VERSION__: JSON.stringify("DEMO"),
-        __DEMO__: true,
+        __VERSION__: JSON.stringify(version),
+        __DEMO__: false,
         __STATIC_PATH__: "/static/",
         "process.env.NODE_ENV": JSON.stringify(
           isProdBuild ? "production" : "development"
         ),
+        ...defineOverlay,
       }),
-      ...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")
+      ),
     ].filter(Boolean),
-    resolve,
+    resolve: {
+      extensions: [".ts", ".js", ".json"],
+      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",
+      },
+    },
     output: {
-      filename: genFilename(isProdBuild),
-      chunkFilename: genChunkFilename(isProdBuild, isStatsBuild),
+      filename: ({ chunk }) => {
+        if (!isProdBuild || dontHash.has(chunk.name)) {
+          return `${chunk.name}.js`;
+        }
+        return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`;
+      },
+      chunkFilename:
+        isProdBuild && !isStatsBuild
+          ? "chunk.[chunkhash].js"
+          : "[name].chunk.js",
       path: path.resolve(
-        paths.demo_root,
+        outputRoot,
         latestBuild ? "frontend_latest" : "frontend_es5"
       ),
       publicPath: latestBuild ? "/frontend_latest/" : "/frontend_es5/",
+      // For workerize loader
+      globalObject: "self",
     },
   };
 };
 
+const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
+  const config = createWebpackConfig({
+    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",
+    },
+    outputRoot: paths.root,
+    isProdBuild,
+    latestBuild,
+    isStatsBuild,
+  });
+
+  if (latestBuild) {
+    // 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`;
+    });
+
+    config.plugins.push(
+      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",
+        },
+      })
+    );
+  }
+
+  return config;
+};
+
+const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
+  return createWebpackConfig({
+    entry: {
+      main: path.resolve(paths.demo_dir, "src/entrypoint.ts"),
+      compatibility: path.resolve(
+        paths.polymer_dir,
+        "src/entrypoints/compatibility.ts"
+      ),
+    },
+    outputRoot: paths.demo_root,
+    defineOverlay: {
+      __VERSION__: JSON.stringify(`DEMO-${version}`),
+      __DEMO__: true,
+    },
+    isProdBuild,
+    latestBuild,
+    isStatsBuild,
+  });
+};
+
+const createCastConfig = ({ isProdBuild, latestBuild }) => {
+  const entry = {
+    launcher: path.resolve(paths.cast_dir, "src/launcher/entrypoint.ts"),
+  };
+
+  if (latestBuild) {
+    entry.receiver = path.resolve(paths.cast_dir, "src/receiver/entrypoint.ts");
+  }
+
+  return createWebpackConfig({
+    entry,
+    outputRoot: paths.cast_root,
+    isProdBuild,
+    latestBuild,
+  });
+};
+
+const createHassioConfig = ({ isProdBuild, latestBuild }) => {
+  if (latestBuild) {
+    throw new Error("Hass.io does not support latest build!");
+  }
+  const config = createWebpackConfig({
+    entry: {
+      entrypoint: path.resolve(paths.hassio_dir, "src/entrypoint.ts"),
+    },
+    outputRoot: "",
+    isProdBuild,
+    latestBuild,
+    dontHash: new Set(["entrypoint"]),
+  });
+
+  config.output.path = paths.hassio_root;
+  config.output.publicPath = paths.hassio_publicPath;
+
+  return config;
+};
+
+const createGalleryConfig = ({ isProdBuild, latestBuild }) => {
+  if (!latestBuild) {
+    throw new Error("Gallery only supports latest build!");
+  }
+  const config = createWebpackConfig({
+    entry: {
+      entrypoint: path.resolve(paths.gallery_dir, "src/entrypoint.js"),
+    },
+    outputRoot: paths.gallery_root,
+    isProdBuild,
+    latestBuild,
+  });
+
+  return config;
+};
+
 module.exports = {
-  resolve,
-  plugins,
-  optimization,
   createAppConfig,
   createDemoConfig,
+  createCastConfig,
+  createHassioConfig,
+  createGalleryConfig,
 };

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/_headers

@@ -0,0 +1,20 @@
+/*
+  Cache-Control: public, max-age: 0, s-maxage=3600, must-revalidate
+  Content-Security-Policy: form-action https:
+  Feature-Policy: vibrate 'none'; geolocation 'none'; midi 'none'; microphone 'none'; camera 'none'; magnetometer 'none'; gyroscope 'none'; speaker 'none'; vibrate 'none'; payment 'none'
+  Referrer-Policy: no-referrer-when-downgrade
+  X-Content-Type-Options: nosniff
+  X-Frame-Options: DENY
+  X-XSS-Protection: 1; mode=block
+
+/images/*
+  Cache-Control: public, max-age: 604800, s-maxage=604800
+
+/manifest.json
+  Cache-Control: public, max-age: 3600, s-maxage=3600
+
+/frontend_es5/*
+  Cache-Control: public, max-age: 604800, s-maxage=604800
+
+/frontend_latest/*
+  Cache-Control: public, max-age: 604800, s-maxage=604800

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 {
+    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 {
+    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,165 @@
+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 {
+    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?
+        <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 {
+    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 {
+    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,119 @@
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  customElement,
+  CSSResult,
+  css,
+  property,
+} from "lit-element";
+import { LovelaceConfig } from "../../../../src/data/lovelace";
+import "../../../../src/panels/lovelace/views/hui-view";
+import "../../../../src/panels/lovelace/views/hui-panel-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 {
+    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,
+      deleteConfig: async () => undefined,
+      setEditMode: () => undefined,
+    };
+    return this.lovelaceConfig.views[index].panel
+      ? html`
+          <hui-panel-view
+            .hass=${this.hass}
+            .config=${this.lovelaceConfig.views[index]}
+          ></hui-panel-view>
+        `
+      : 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, hui-panel-view"
+          ) as HTMLElement)!.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);
+      }
+      :host > * {
+        flex: 1;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hc-lovelace": HcLovelace;
+  }
+}

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

@@ -0,0 +1,250 @@
+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 {
+    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 = this._getErrorMessage(err);
+      return;
+    }
+    let connection;
+    try {
+      connection = await createConnection({ auth });
+    } catch (err) {
+      this._error = this._getErrorMessage(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 _getErrorMessage(error: number): string {
+    switch (error) {
+      case 1:
+        return "Unable to connect to the Home Assistant websocket API.";
+      case 2:
+        return "The supplied authentication is invalid.";
+      case 3:
+        return "The connection to Home Assistant was lost.";
+      case 4:
+        return "Missing hassUrl. This is required.";
+      case 5:
+        return "Home Assistant needs to be served over https:// to use with Home Assistant Cast.";
+      default:
+        return "Unknown Error";
+    }
+  }
+
+  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";
+}

cast/webpack.config.js

@@ -0,0 +1,11 @@
+const { createCastConfig } = require("../build-scripts/webpack.js");
+const { isProdBuild } = require("../build-scripts/env.js");
+
+// File just used for stats builds
+
+const latestBuild = true;
+
+module.exports = createCastConfig({
+  isProdBuild,
+  latestBuild,
+});

demo/public/_headers

@@ -0,0 +1,18 @@
+/*
+  Cache-Control: public, max-age: 0, s-maxage=3600, must-revalidate
+  Content-Security-Policy: form-action https:
+  Referrer-Policy: no-referrer-when-downgrade
+  X-Content-Type-Options: nosniff
+  X-XSS-Protection: 1; mode=block
+
+/api/*
+  Cache-Control: public, max-age: 604800, s-maxage=604800
+
+/assets/*
+  Cache-Control: public, max-age: 604800, s-maxage=604800
+
+/frontend_es5/*
+  Cache-Control: public, max-age: 604800, s-maxage=604800
+
+/frontend_latest/*
+  Cache-Control: public, max-age: 604800, s-maxage=604800

demo/public/manifest.json

@@ -7,22 +7,26 @@
     {
       "src": "/static/icons/favicon-192x192.png",
       "sizes": "192x192",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "maskable any"
     },
     {
       "src": "/static/icons/favicon-384x384.png",
       "sizes": "384x384",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "maskable any"
     },
     {
       "src": "/static/icons/favicon-512x512.png",
       "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "maskable any"
     },
     {
       "src": "/static/icons/favicon-1024x1024.png",
       "sizes": "1024x1024",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "maskable any"
     }
   ],
   "lang": "en-US",

demo/src/configs/arsaboo/entities.ts

@@ -94,22 +94,19 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         target_temp_high: 24,
         target_temp_low: 20,
         fan_mode: "auto",
-        fan_list: ["auto", "on"],
-        operation_mode: "auto",
-        operation_list: ["auto", "auxHeatOnly", "cool", "heat", "off"],
-        hold_mode: null,
-        away_mode: "off",
+        fan_modes: ["auto", "on"],
+        hvac_modes: ["auto", "cool", "heat", "off"],
         aux_heat: "off",
         actual_humidity: 30,
         fan: "on",
-        climate_mode: "Day",
         operation: "fan",
-        climate_list: ["Away", "Sleep", "Day", "Home"],
         fan_min_on_time: 10,
         friendly_name: localize(
           "ui.panel.page-demo.config.arsaboo.names.upstairs"
         ),
-        supported_features: 3575,
+        supported_features: 27,
+        preset_mode: "away",
+        preset_modes: ["home", "away", "eco", "sleep"],
       },
     },
     "input_boolean.abodeupdate": {
@@ -118,10 +115,6 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       attributes: {
         friendly_name: "Abode Updates",
         icon: "hademo:security",
-        templates: {
-          icon_color:
-            "if (state === 'on') return 'rgb(251, 210, 41)'; return 'rgb(54, 95, 140)';\n",
-        },
       },
     },
     "input_boolean.tv": {
@@ -130,10 +123,6 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       attributes: {
         friendly_name: "TV",
         icon: "hademo:television",
-        templates: {
-          icon_color:
-            "if (state === 'on') return 'rgb(251, 210, 41)'; return 'rgb(54, 95, 140)';\n",
-        },
       },
     },
     "input_boolean.homeautomation": {
@@ -142,10 +131,6 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       attributes: {
         friendly_name: "Home Automation",
         icon: "hass:home-automation",
-        templates: {
-          icon_color:
-            "if (state === 'on') return 'rgb(251, 210, 41)'; return 'rgb(54, 95, 140)';\n",
-        },
       },
     },
     "input_boolean.tvtime": {
@@ -154,12 +139,6 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       attributes: {
         friendly_name: "TV Time",
         icon: "hademo:television-guide",
-        templates: {
-          icon:
-            "if (state === 'on') return 'hademo:television-classic'; return 'hademo:television-classic-off';\n",
-          icon_color:
-            "if (state === 'on') return 'rgb(251, 210, 41)'; return 'rgb(54, 95, 140)';\n",
-        },
       },
     },
     "input_select.livingroomharmony": {
@@ -238,6 +217,18 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         icon: "hademo:currency-usd",
       },
     },
+    "sensor.study_temp": {
+      entity_id: "sensor.study_temp",
+      state: "20.9",
+      attributes: {
+        unit_of_measurement: "°C",
+        device_class: "temperature",
+        friendly_name: localize(
+          "ui.panel.page-demo.config.arsaboo.names.temperature_study"
+        ),
+        icon: "hademo:thermometer",
+      },
+    },
     "cover.garagedoor": {
       entity_id: "cover.garagedoor",
       state: "closed",
@@ -248,16 +239,7 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         homebridge_cover_type: "garage_door",
       },
     },
-    "light.master_lights": {
-      entity_id: "light.master_lights",
-      state: "off",
-      attributes: {
-        min_mireds: 153,
-        max_mireds: 500,
-        friendly_name: "Master Lights",
-        supported_features: 63,
-      },
-    },
+
     "light.living_room_lights": {
       entity_id: "light.living_room_lights",
       state: "off",
@@ -283,40 +265,7 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         supported_features: 1,
       },
     },
-    "light.hue_color_lamp_1": {
-      entity_id: "light.hue_color_lamp_1",
-      state: "on",
-      attributes: {
-        min_mireds: 153,
-        max_mireds: 500,
-        friendly_name: localize("ui.panel.page-demo.config.arsaboo.names.left"),
-        supported_features: 63,
-      },
-    },
-    "light.hue_color_lamp_2": {
-      entity_id: "light.hue_color_lamp_2",
-      state: "off",
-      attributes: {
-        min_mireds: 153,
-        max_mireds: 500,
-        friendly_name: localize(
-          "ui.panel.page-demo.config.arsaboo.names.right"
-        ),
-        supported_features: 63,
-      },
-    },
-    "light.hue_color_lamp_3": {
-      entity_id: "light.hue_color_lamp_3",
-      state: "on",
-      attributes: {
-        min_mireds: 153,
-        max_mireds: 500,
-        friendly_name: localize(
-          "ui.panel.page-demo.config.arsaboo.names.mirror"
-        ),
-        supported_features: 63,
-      },
-    },
+
     "sensor.plexspy": {
       entity_id: "sensor.plexspy",
       state: "0",
@@ -408,16 +357,6 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         supported_features: 0,
       },
     },
-    "light.gateway_light_34ce00813670": {
-      entity_id: "light.gateway_light_34ce00813670",
-      state: "off",
-      attributes: {
-        friendly_name: localize(
-          "ui.panel.page-demo.config.arsaboo.names.hallway"
-        ),
-        supported_features: 17,
-      },
-    },
     "alarm_control_panel.abode_alarm": {
       entity_id: "alarm_control_panel.abode_alarm",
       state: "disarmed",
@@ -475,35 +414,7 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         device_class: "motion",
       },
     },
-    "binary_sensor.water_leak_sensor_158d0001d77800": {
-      entity_id: "binary_sensor.water_leak_sensor_158d0001d77800",
-      state: "off",
-      attributes: {
-        battery_level: 41,
-        friendly_name: "Laundry Water Leak",
-        device_class: "moisture",
-      },
-    },
-    "binary_sensor.motion_sensor_158d00016c53bf": {
-      entity_id: "binary_sensor.motion_sensor_158d00016c53bf",
-      state: "off",
-      attributes: {
-        "No motion since": 0,
-        battery_level: 43,
-        friendly_name: "Master Occupancy",
-        device_class: "motion",
-      },
-    },
-    "binary_sensor.motion_sensor_158d00016612af": {
-      entity_id: "binary_sensor.motion_sensor_158d00016612af",
-      state: "off",
-      attributes: {
-        "No motion since": 0,
-        battery_level: 41,
-        friendly_name: "Upstairs Occupancy",
-        device_class: "motion",
-      },
-    },
+
     "binary_sensor.front_door": {
       entity_id: "binary_sensor.front_door",
       state: "off",
@@ -590,16 +501,6 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         icon: "hademo:history",
       },
     },
-    "light.lifxnrkitchen": {
-      entity_id: "light.lifxnrkitchen",
-      state: "off",
-      attributes: {
-        min_mireds: 111,
-        max_mireds: 400,
-        friendly_name: "LifxnrKitchen",
-        supported_features: 55,
-      },
-    },
     "light.lifx5": {
       entity_id: "light.lifx5",
       state: "on",
@@ -610,41 +511,6 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         supported_features: 55,
       },
     },
-    "light.lifxnrguest": {
-      entity_id: "light.lifxnrguest",
-      state: "off",
-      attributes: {
-        min_mireds: 111,
-        max_mireds: 400,
-        friendly_name: localize(
-          "ui.panel.page-demo.config.arsaboo.names.patio"
-        ),
-        supported_features: 55,
-      },
-    },
-    "light.lifx3": {
-      entity_id: "light.lifx3",
-      state: "off",
-      attributes: {
-        min_mireds: 111,
-        max_mireds: 400,
-        friendly_name: localize(
-          "ui.panel.page-demo.config.arsaboo.names.kitchen"
-        ),
-        supported_features: 55,
-      },
-    },
-    "sensor.illumination_158d00016c53bf": {
-      entity_id: "sensor.illumination_158d00016c53bf",
-      state: "10",
-      attributes: {
-        battery_level: 43,
-        unit_of_measurement: "lx",
-        friendly_name: "Master Brightness",
-        device_class: "illuminance",
-        icon: "hademo:brightness-7",
-      },
-    },
     "sensor.alok_to_home": {
       entity_id: "sensor.alok_to_home",
       state: "41",
@@ -683,24 +549,11 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         icon: "hademo:car",
       },
     },
-    "switch.wemoswitch": {
-      entity_id: "switch.wemoswitch",
-      state: "on",
-      attributes: {
-        friendly_name: localize("ui.panel.page-demo.config.arsaboo.labels.air"),
-      },
-    },
     "switch.driveway": {
       entity_id: "switch.driveway",
       state: "off",
       attributes: {
         friendly_name: "Driveway Light",
-        templates: {
-          icon_color:
-            "if (state === 'on') return 'rgb(251, 210, 41)'; return 'rgb(54, 95, 140)';\n",
-          icon:
-            "if (state === 'on') return 'hademo:lightbulb-on'; return 'hademo:lightbulb';\n",
-        },
       },
     },
     "switch.wemoporch": {
@@ -708,12 +561,6 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       state: "off",
       attributes: {
         friendly_name: "Porch Lights",
-        templates: {
-          icon_color:
-            "if (state === 'on') return 'rgb(251, 210, 41)'; return 'rgb(54, 95, 140)';\n",
-          icon:
-            "if (state === 'on') return 'hademo:lightbulb-on'; return 'hademo:lightbulb';\n",
-        },
       },
     },
   });

demo/src/configs/arsaboo/lovelace.ts

@@ -9,6 +9,30 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
       title: "Home",
       cards: [
         { type: "custom:ha-demo-card" },
+        {
+          type: "entities",
+          title: localize("ui.panel.page-demo.config.arsaboo.labels.lights"),
+          entities: [
+            {
+              entity: "light.kitchen_lights",
+            },
+            {
+              entity: "light.living_room_lights",
+            },
+            {
+              entity: "switch.wemoporch",
+            },
+            "light.lifx5",
+            {
+              type: "custom:cast-demo-row",
+            },
+          ],
+        },
+        {
+          type: "thermostat",
+          entity: "climate.upstairs",
+        },
+
         {
           type: "picture-elements",
           image: "/assets/arsaboo/floorplans/main.png",
@@ -381,104 +405,7 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
             },
           ],
         },
-        {
-          type: "picture-elements",
-          image: "/assets/arsaboo/floorplans/second.png",
-          elements: [
-            {
-              type: "state-icon",
-              entity: "binary_sensor.motion_sensor_158d00016612af",
-              style: {
-                top: "40%",
-                left: "35%",
-              },
-            },
-            // {
-            //   type: "custom:thermostat-card",
-            //   entity: "climate.bedroom",
-            //   no_card: true,
-            //   hvac: {
-            //     attribute: "operation",
-            //   },
-            //   style: {
-            //     top: "79%",
-            //     left: "92%",
-            //     width: "50px",
-            //     height: "50px",
-            //   },
-            // },
-            {
-              type: "state-icon",
-              entity: "binary_sensor.motion_sensor_158d00016c53bf",
-              style: {
-                top: "55%",
-                left: "80%",
-              },
-            },
-            {
-              type: "state-label",
-              entity: "sensor.illumination_158d00016c53bf",
-              style: {
-                top: "78%",
-                left: "80%",
-                "text-align": "center",
-                "font-size": "12px",
-                color: "black",
-              },
-            },
-            {
-              type: "image",
-              entity: "light.master_lights",
-              tap_action: {
-                action: "toggle",
-              },
-              hold_action: {
-                action: "more-info",
-              },
-              image: "/assets/arsaboo/icons/light_bulb_off.png",
-              state_image: {
-                on: "/assets/arsaboo/icons/light_bulb_on.png",
-              },
-              state_filter: {
-                on:
-                  "brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)",
-                off: "brightness(80%) saturate(0.8)",
-              },
-              style: {
-                top: "70%",
-                left: "80%",
-                width: "7%",
-                padding: "10px",
-              },
-            },
-            {
-              type: "state-icon",
-              entity: "binary_sensor.water_leak_sensor_158d0001d77800",
-              style: {
-                top: "25%",
-                left: "66%",
-              },
-            },
-            // {
-            //   type: "custom:thermostat-card",
-            //   entity: "climate.upstairs",
-            //   no_card: true,
-            //   hvac: {
-            //     attribute: "operation",
-            //   },
-            //   style: {
-            //     top: "18%",
-            //     left: "15%",
-            //     width: "50px",
-            //     height: "50px",
-            //   },
-            // },
-          ],
-        },
-        {
-          type: "thermostat",
-          entity: "climate.upstairs",
-        },
+
         {
           type: "media-control",
           entity: "media_player.family_room_2",
@@ -496,44 +423,11 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
             "sensor.usdinr",
           ],
         },
-        {
-          type: "entities",
-          title: localize("ui.panel.page-demo.config.arsaboo.labels.lights"),
-          entities: [
-            {
-              entity: "light.gateway_light_34ce00813670",
-            },
-            {
-              entity: "light.lifx3",
-            },
-            {
-              entity: "light.lifxnrguest",
-            },
-            {
-              type: "section",
-              label: localize(
-                "ui.panel.page-demo.config.arsaboo.names.master_bedroom"
-              ),
-            },
-            {
-              entity: "light.hue_color_lamp_1",
-            },
-            {
-              entity: "light.hue_color_lamp_2",
-            },
-            {
-              entity: "light.hue_color_lamp_3",
-            },
-            {
-              entity: "switch.wemoswitch",
-            },
-          ],
-        },
 
         {
           type: "alarm-panel",
           entity: "alarm_control_panel.abode_alarm",
-          name: "Abode",
+          name: "Security",
           states: ["arm_home", "arm_away"],
         },
         {
@@ -552,9 +446,14 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
             "script.tv_off",
           ],
         },
+        {
+          type: "sensor",
+          entity: "sensor.study_temp",
+          graph: "line",
+        },
         {
           type: "entities",
-          title: "Ring Doorbell",
+          title: "Doorbell",
           show_header_toggle: false,
           entities: [
             "binary_sensor.ring_front_door_ding",

demo/src/configs/jimpower/theme.ts

@@ -23,27 +23,24 @@ export const demoThemeJimpower = () => ({
   "paper-listbox-background-color": "#2E333A",
   "table-row-background-color": "#353840",
   "paper-grey-50": "var(--primary-text-color)",
-  "paper-toggle-button-checked-button-color": "var(--accent-color)",
+  "switch-checked-color": "var(--accent-color)",
   "paper-dialog-background-color": "#434954",
   "secondary-text-color": "#5294E2",
   "google-red-500": "#E45E65",
   "divider-color": "rgba(0, 0, 0, .12)",
-  "paper-toggle-button-unchecked-ink-color": "var(--disabled-text-color)",
   "google-green-500": "#39E949",
-  "paper-toggle-button-unchecked-button-color": "var(--disabled-text-color)",
+  "switch-unchecked-button-color": "var(--disabled-text-color)",
   "label-badge-border-color": "green",
   "paper-listbox-color": "var(--primary-color)",
   "paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
-  "paper-toggle-button-checked-ink-color": "var(--accent-color)",
   "paper-card-background-color": "#434954",
   "label-badge-text-color": "var(--primary-text-color)",
   "paper-slider-knob-start-color": "var(--accent-color)",
-  "paper-toggle-button-unchecked-bar-color": "var(--disabled-text-color)",
+  "switch-unchecked-track-color": "var(--disabled-text-color)",
   "dark-primary-color": "var(--accent-color)",
   "paper-slider-secondary-color": "var(--secondary-background-color)",
   "paper-slider-pin-color": "var(--accent-color)",
   "paper-item-icon-active-color": "#F9C536",
   "accent-color": "#E45E65",
-  "paper-toggle-button-checked-bar-color": "var(--accent-color)",
   "table-row-alternative-background-color": "#3E424B",
 });

demo/src/configs/kernehed/theme.ts

@@ -24,27 +24,24 @@ export const demoThemeKernehed = () => ({
   "paper-listbox-background-color": "#141414",
   "table-row-background-color": "#292929",
   "paper-grey-50": "var(--primary-text-color)",
-  "paper-toggle-button-checked-button-color": "var(--accent-color)",
+  "switch-checked-color": "var(--accent-color)",
   "paper-dialog-background-color": "#292929",
   "secondary-text-color": "#b58e31",
   "google-red-500": "#b58e31",
   "divider-color": "rgba(0, 0, 0, .12)",
-  "paper-toggle-button-unchecked-ink-color": "var(--disabled-text-color)",
   "google-green-500": "#2980b9",
-  "paper-toggle-button-unchecked-button-color": "var(--disabled-text-color)",
+  "switch-unchecked-button-color": "var(--disabled-text-color)",
   "label-badge-border-color": "green",
   "paper-listbox-color": "#777777",
   "paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
-  "paper-toggle-button-checked-ink-color": "var(--accent-color)",
   "paper-card-background-color": "#292929",
   "label-badge-text-color": "var(--primary-text-color)",
   "paper-slider-knob-start-color": "var(--accent-color)",
-  "paper-toggle-button-unchecked-bar-color": "var(--disabled-text-color)",
+  "switch-unchecked-track-color": "var(--disabled-text-color)",
   "dark-primary-color": "var(--accent-color)",
   "paper-slider-secondary-color": "var(--secondary-background-color)",
   "paper-slider-pin-color": "var(--accent-color)",
   "paper-item-icon-active-color": "#b58e31",
   "accent-color": "#2980b9",
-  "paper-toggle-button-checked-bar-color": "var(--accent-color)",
   "table-row-alternative-background-color": "#292929",
 });

demo/src/configs/teachingbirds/theme.ts

@@ -12,8 +12,7 @@ export const demoThemeTeachingbirds = () => ({
   "paper-slider-knob-color": "var(--primary-color)",
   "paper-listbox-color": "#FFFFFF",
   "paper-toggle-button-checked-bar-color": "var(--light-primary-color)",
-  "paper-toggle-button-checked-ink-color": "var(--dark-primary-color)",
-  "paper-toggle-button-unchecked-bar-color": "var(--primary-text-color)",
+  "switch-unchecked-track-color": "var(--primary-text-color)",
   "paper-card-background-color": "#4e4e4e",
   "label-badge-text-color": "var(--text-primary-color)",
   "primary-background-color": "#303030",
@@ -22,7 +21,7 @@ export const demoThemeTeachingbirds = () => ({
   "secondary-background-color": "#2b2b2b",
   "paper-slider-knob-start-color": "var(--primary-color)",
   "paper-item-icon-active-color": "#d8bf50",
-  "paper-toggle-button-checked-button-color": "var(--primary-color)",
+  "switch-checked-color": "var(--primary-color)",
   "secondary-text-color": "#389638",
   "disabled-text-color": "#545454",
   "paper-item-icon_-_color": "var(--primary-text-color)",

demo/src/custom-cards/card-modder.js

@@ -53,7 +53,7 @@ class CardModder extends LitElement {
     for (var k in this._config.style) {
       if (window.cardTools.hasTemplate(this._config.style[k]))
         this.templated.push(k);
-      this.card.style.setProperty(k, '');
+      this.card.style.setProperty(k, "");
       target.style.setProperty(
         k,
         window.cardTools.parseTemplate(this._config.style[k])

demo/src/custom-cards/card-tools.js

@@ -161,8 +161,8 @@ if (!window.cardTools) {
   };
 
   cardTools.longpress = (element) => {
-    customElements.whenDefined("long-press").then(() => {
-      const longpress = document.body.querySelector("long-press");
+    customElements.whenDefined("action-handler").then(() => {
+      const longpress = document.body.querySelector("action-handler");
       longpress.bind(element);
     });
     return element;

demo/src/custom-cards/cast-demo-row.ts

@@ -0,0 +1,113 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
+} from "lit-element";
+
+import "../../../src/components/ha-icon";
+import {
+  LovelaceRow,
+  CastConfig,
+} from "../../../src/panels/lovelace/entity-rows/types";
+import { HomeAssistant } from "../../../src/types";
+import { CastManager } from "../../../src/cast/cast_manager";
+import { castSendShowDemo } from "../../../src/cast/receiver_messages";
+
+@customElement("cast-demo-row")
+class CastDemoRow extends LitElement implements LovelaceRow {
+  public hass!: HomeAssistant;
+
+  @property() private _castManager?: CastManager | null;
+
+  public setConfig(_config: CastConfig): void {
+    // No config possible.
+  }
+
+  protected render(): TemplateResult {
+    if (
+      !this._castManager ||
+      this._castManager.castState === "NO_DEVICES_AVAILABLE"
+    ) {
+      return html``;
+    }
+    return html`
+      <ha-icon icon="hademo:television"></ha-icon>
+      <div class="flex">
+        <div class="name">Show Chromecast interface</div>
+        <google-cast-launcher></google-cast-launcher>
+      </div>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    import("../../../src/cast/cast_manager").then(({ getCastManager }) =>
+      getCastManager().then((mgr) => {
+        this._castManager = mgr;
+        mgr.addEventListener("state-changed", () => {
+          this.requestUpdate();
+        });
+        mgr.castContext.addEventListener(
+          cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
+          (ev) => {
+            // On Android, opening a new session always results in SESSION_RESUMED.
+            // So treat both as the same.
+            if (
+              ev.sessionState === "SESSION_STARTED" ||
+              ev.sessionState === "SESSION_RESUMED"
+            ) {
+              castSendShowDemo(mgr);
+            }
+          }
+        );
+      })
+    );
+  }
+
+  protected updated(changedProps) {
+    super.updated(changedProps);
+    this.style.display = this._castManager ? "" : "none";
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: flex;
+        align-items: center;
+      }
+      ha-icon {
+        padding: 8px;
+        color: var(--paper-item-icon-color);
+      }
+      .flex {
+        flex: 1;
+        overflow: hidden;
+        margin-left: 16px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      google-cast-launcher {
+        cursor: pointer;
+        display: inline-block;
+        height: 24px;
+        width: 24px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "cast-demo-row": CastDemoRow;
+  }
+}

demo/src/custom-cards/ha-demo-card.ts

@@ -1,10 +1,4 @@
-import {
-  LitElement,
-  html,
-  CSSResult,
-  css,
-  PropertyDeclarations,
-} from "lit-element";
+import { LitElement, html, CSSResult, css, property } from "lit-element";
 import { until } from "lit-html/directives/until";
 import "@material/mwc-button";
 import "@polymer/paper-spinner/paper-spinner-lite";
@@ -20,19 +14,11 @@ import {
 } from "../configs/demo-configs";
 
 export class HADemoCard extends LitElement implements LovelaceCard {
-  public lovelace?: Lovelace;
-  public hass!: MockHomeAssistant;
-  private _switching?: boolean;
+  @property() public lovelace?: Lovelace;
+  @property() public hass!: MockHomeAssistant;
+  @property() private _switching?: boolean;
   private _hidden = localStorage.hide_demo_card;
 
-  static get properties(): PropertyDeclarations {
-    return {
-      lovelace: {},
-      hass: {},
-      _switching: {},
-    };
-  }
-
   public getCardSize() {
     return this._hidden ? 0 : 2;
   }

demo/src/entrypoint.ts

@@ -12,5 +12,7 @@ import "./resources/hademo-icons";
 
 /* polyfill for paper-dropdown */
 setTimeout(() => {
-  import(/* webpackChunkName: "polyfill-web-animations-next" */ "web-animations-js/web-animations-next-lite.min");
+  import(
+    /* webpackChunkName: "polyfill-web-animations-next" */ "web-animations-js/web-animations-next-lite.min"
+  );
 }, 1000);

demo/src/ha-demo.ts

@@ -16,6 +16,8 @@ import { mockEvents } from "./stubs/events";
 import { mockMediaPlayer } from "./stubs/media_player";
 import { HomeAssistant } from "../../src/types";
 import { mockFrontend } from "./stubs/frontend";
+import { mockPersistentNotification } from "./stubs/persistent_notification";
+import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 
 class HaDemo extends HomeAssistantAppEl {
   protected async _initialize() {
@@ -43,6 +45,7 @@ class HaDemo extends HomeAssistantAppEl {
     mockEvents(hass);
     mockMediaPlayer(hass);
     mockFrontend(hass);
+    mockPersistentNotification(hass);
 
     // Once config is loaded AND localize, set entities and apply theme.
     Promise.all([selectedDemoConfig, localizePromise]).then(
@@ -58,49 +61,14 @@ class HaDemo extends HomeAssistantAppEl {
     document.body.addEventListener(
       "click",
       (e) => {
-        if (
-          e.defaultPrevented ||
-          e.button !== 0 ||
-          e.metaKey ||
-          e.ctrlKey ||
-          e.shiftKey
-        ) {
-          return;
-        }
+        const href = isNavigationClick(e);
 
-        const anchor = e
-          .composedPath()
-          .filter((n) => (n as HTMLElement).tagName === "A")[0] as
-          | HTMLAnchorElement
-          | undefined;
-        if (
-          !anchor ||
-          anchor.target ||
-          anchor.hasAttribute("download") ||
-          anchor.getAttribute("rel") === "external"
-        ) {
-          return;
-        }
-
-        let href = anchor.href;
-        if (!href || href.indexOf("mailto:") !== -1) {
-          return;
-        }
-
-        const location = window.location;
-        const origin =
-          location.origin || location.protocol + "//" + location.host;
-        if (href.indexOf(origin) !== 0) {
-          return;
-        }
-        href = href.substr(origin.length);
-
-        if (href === "#") {
+        if (!href) {
           return;
         }
 
         e.preventDefault();
-        navigate(this as any, href);
+        navigate(this, href);
       },
       { capture: true }
     );

demo/src/stubs/history.ts

@@ -65,74 +65,79 @@ const generateHistory = (state, deltas) => {
 const incrementalUnits = ["clients", "queries", "ads"];
 
 export const mockHistory = (mockHass: MockHomeAssistant) => {
-  mockHass.mockAPI(new RegExp("history/period/.+"), (
-    hass,
-    // @ts-ignore
-    method,
-    path,
-    // @ts-ignore
-    parameters
-  ) => {
-    const params = parseQuery<HistoryQueryParams>(path.split("?")[1]);
-    const entities = params.filter_entity_id.split(",");
+  mockHass.mockAPI(
+    new RegExp("history/period/.+"),
+    (
+      hass,
+      // @ts-ignore
+      method,
+      path,
+      // @ts-ignore
+      parameters
+    ) => {
+      const params = parseQuery<HistoryQueryParams>(path.split("?")[1]);
+      const entities = params.filter_entity_id.split(",");
 
-    const results: HassEntity[][] = [];
+      const results: HassEntity[][] = [];
 
-    for (const entityId of entities) {
-      const state = hass.states[entityId];
+      for (const entityId of entities) {
+        const state = hass.states[entityId];
 
-      if (!state) {
-        continue;
-      }
+        if (!state) {
+          continue;
+        }
 
-      if (!state.attributes.unit_of_measurement) {
-        results.push(generateHistory(state, [state.state]));
-        continue;
-      }
+        if (!state.attributes.unit_of_measurement) {
+          results.push(generateHistory(state, [state.state]));
+          continue;
+        }
 
-      const numberState = Number(state.state);
+        const numberState = Number(state.state);
 
-      if (isNaN(numberState)) {
-        // tslint:disable-next-line
-        console.log(
-          "Ignoring state with unparsable state but with a unit",
-          entityId,
-          state
+        if (isNaN(numberState)) {
+          // tslint:disable-next-line
+          console.log(
+            "Ignoring state with unparsable state but with a unit",
+            entityId,
+            state
+          );
+          continue;
+        }
+
+        const statesToGenerate = 15;
+        let genFunc;
+
+        if (incrementalUnits.includes(state.attributes.unit_of_measurement)) {
+          let initial = Math.floor(
+            numberState * 0.4 + numberState * Math.random() * 0.2
+          );
+          const diff = Math.max(
+            1,
+            Math.floor((numberState - initial) / statesToGenerate)
+          );
+          genFunc = () => {
+            initial += diff;
+            return Math.min(numberState, initial);
+          };
+        } else {
+          const diff = Math.floor(
+            numberState * (numberState > 80 ? 0.05 : 0.5)
+          );
+          genFunc = () =>
+            numberState - diff + Math.floor(Math.random() * 2 * diff);
+        }
+
+        results.push(
+          generateHistory(
+            {
+              entity_id: state.entity_id,
+              attributes: state.attributes,
+            },
+            Array.from({ length: statesToGenerate }, genFunc)
+          )
         );
-        continue;
       }
-
-      const statesToGenerate = 15;
-      let genFunc;
-
-      if (incrementalUnits.includes(state.attributes.unit_of_measurement)) {
-        let initial = Math.floor(
-          numberState * 0.4 + numberState * Math.random() * 0.2
-        );
-        const diff = Math.max(
-          1,
-          Math.floor((numberState - initial) / statesToGenerate)
-        );
-        genFunc = () => {
-          initial += diff;
-          return Math.min(numberState, initial);
-        };
-      } else {
-        const diff = Math.floor(numberState * (numberState > 80 ? 0.05 : 0.5));
-        genFunc = () =>
-          numberState - diff + Math.floor(Math.random() * 2 * diff);
-      }
-
-      results.push(
-        generateHistory(
-          {
-            entity_id: state.entity_id,
-            attributes: state.attributes,
-          },
-          Array.from({ length: statesToGenerate }, genFunc)
-        )
-      );
+      return results;
     }
-    return results;
-  });
+  );
 };

demo/src/stubs/lovelace.ts

@@ -1,4 +1,5 @@
 import "../custom-cards/ha-demo-card";
+import "../custom-cards/cast-demo-row";
 // Not duplicate, one is for typing.
 // tslint:disable-next-line
 import { HADemoCard } from "../custom-cards/ha-demo-card";
@@ -11,9 +12,10 @@ export const mockLovelace = (
   localizePromise: Promise<LocalizeFunc>
 ) => {
   hass.mockWS("lovelace/config", () =>
-    Promise.all([selectedDemoConfig, localizePromise]).then(
-      ([config, localize]) => config.lovelace(localize)
-    )
+    Promise.all([
+      selectedDemoConfig,
+      localizePromise,
+    ]).then(([config, localize]) => config.lovelace(localize))
   );
 
   hass.mockWS("lovelace/config/save", () => Promise.resolve());

demo/src/stubs/persistent_notification.ts

@@ -0,0 +1,16 @@
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import { PersistentNotification } from "../../../src/data/persistent_notification";
+
+export const mockPersistentNotification = (hass: MockHomeAssistant) => {
+  hass.mockWS("persistent_notification/get", () =>
+    Promise.resolve([
+      {
+        created_at: new Date().toISOString(),
+        message: "There was motion detected in the backyard.",
+        notification_id: "demo-1",
+        title: "Motion Detected!",
+        status: "unread",
+      },
+    ] as PersistentNotification[])
+  );
+};

demo/src/stubs/translations.ts

@@ -97,7 +97,7 @@ export const mockTranslations = (hass: MockHomeAssistant) => {
       "component.nest.config.abort.authorize_url_timeout":
         "Timeout generating authorize url.",
       "component.nest.config.abort.no_flows":
-        "You need to configure Nest before being able to authenticate with it. [Please read the instructions](https://www.home-assistant.io/components/nest/).",
+        "You need to configure Nest before being able to authenticate with it. [Please read the instructions](https://www.home-assistant.io/integrations/nest/).",
       "component.nest.config.error.internal_error":
         "Internal error validating code",
       "component.nest.config.error.invalid_code": "Invalid code",
@@ -199,7 +199,7 @@ export const mockTranslations = (hass: MockHomeAssistant) => {
       "component.point.config.abort.external_setup":
         "Point successfully configured from another flow.",
       "component.point.config.abort.no_flows":
-        "You need to configure Point before being able to authenticate with it. [Please read the instructions](https://www.home-assistant.io/components/point/).",
+        "You need to configure Point before being able to authenticate with it. [Please read the instructions](https://www.home-assistant.io/integrations/point/).",
       "component.point.config.create_entry.default":
         "Successfully authenticated with Minut for your Point device(s)",
       "component.point.config.error.follow_link":

demo/webpack.config.js

@@ -1,10 +1,9 @@
 const { createDemoConfig } = require("../build-scripts/webpack.js");
+const { isProdBuild, isStatsBuild } = require("../build-scripts/env.js");
 
-// This file exists because we haven't migrated the stats script yet
+// File just used for stats builds
 
-const isProdBuild = process.env.NODE_ENV === "production";
-const isStatsBuild = process.env.STATS === "1";
-const latestBuild = false;
+const latestBuild = true;
 
 module.exports = createDemoConfig({
   isProdBuild,

gallery/public/index.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#2157BC">
-    <title>HAGallery</title>
-    <script src='./main.js' async></script>
-    <style>
-      body {
-        font-family: Roboto, Noto, sans-serif;
-        margin: 0;
-        padding: 0;
-      }
-    </style>
-  </head>
-  <body></body>
-</html>

gallery/script/build_gallery

@@ -4,14 +4,6 @@
 # Stop on errors
 set -e
 
-cd "$(dirname "$0")/.."
+cd "$(dirname "$0")/../.."
 
-OUTPUT_DIR=dist
-
-rm -rf $OUTPUT_DIR
-
-cd ..
-./node_modules/.bin/gulp build-translations gen-icons
-cd gallery
-
-NODE_ENV=production ../node_modules/.bin/webpack -p --config webpack.config.js
+./node_modules/.bin/gulp build-gallery

gallery/script/develop_gallery

@@ -4,10 +4,6 @@
 # Stop on errors
 set -e
 
-cd "$(dirname "$0")/.."
+cd "$(dirname "$0")/../.."
 
-cd ..
-./node_modules/.bin/gulp build-translations gen-icons
-cd gallery
-
-../node_modules/.bin/webpack-dev-server
+./node_modules/.bin/gulp develop-gallery

gallery/src/components/demo-card.js

@@ -1,8 +1,8 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import JsYaml from "js-yaml";
+import { safeLoad } from "js-yaml";
 
-import { createCardElement } from "../../../src/panels/lovelace/common/create-card-element";
+import { createCardElement } from "../../../src/panels/lovelace/create-element/create-card-element";
 
 class DemoCard extends PolymerElement {
   static get template() {
@@ -62,7 +62,7 @@ class DemoCard extends PolymerElement {
       card.removeChild(card.lastChild);
     }
 
-    const el = createCardElement(JsYaml.safeLoad(config.config)[0]);
+    const el = createCardElement(safeLoad(config.config)[0]);
     el.hass = this.hass;
     card.appendChild(el);
   }

gallery/src/components/demo-cards.js

@@ -1,9 +1,9 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 
 import "./demo-card";
+import "../../../src/components/ha-switch";
 
 class DemoCards extends PolymerElement {
   static get template() {
@@ -26,9 +26,9 @@ class DemoCards extends PolymerElement {
       </style>
       <app-toolbar>
         <div class="filters">
-          <paper-toggle-button checked="{{_showConfig}}"
-            >Show config</paper-toggle-button
-          >
+          <ha-switch checked="[[_showConfig]]" on-change="_showConfigToggled">
+            Show config
+          </ha-switch>
         </div>
       </app-toolbar>
       <div class="cards">
@@ -53,6 +53,10 @@ class DemoCards extends PolymerElement {
       },
     };
   }
+
+  _showConfigToggled(ev) {
+    this._showConfig = ev.target.checked;
+  }
 }
 
 customElements.define("demo-cards", DemoCards);

gallery/src/components/demo-more-infos.js

@@ -1,9 +1,9 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 
 import "./demo-more-info";
+import "../../../src/components/ha-switch";
 
 class DemoMoreInfos extends PolymerElement {
   static get template() {
@@ -26,9 +26,7 @@ class DemoMoreInfos extends PolymerElement {
       </style>
       <app-toolbar>
         <div class="filters">
-          <paper-toggle-button checked="{{_showConfig}}"
-            >Show entity</paper-toggle-button
-          >
+          <ha-switch checked="{{_showConfig}}">Show entity</ha-switch>
         </div>
       </app-toolbar>
       <div class="cards">

gallery/src/data/demo_states.js

@@ -36,7 +36,7 @@ export default {
     attributes: {
       title: "Welcome Home!",
       message:
-        "Here are some resources to get started:\n\n - [Configuring Home Assistant](https://home-assistant.io/getting-started/configuration/)\n - [Available components](https://home-assistant.io/components/)\n - [Troubleshooting your configuration](https://home-assistant.io/docs/configuration/troubleshooting/)\n - [Getting help](https://home-assistant.io/help/)\n\nTo not see this card popup in the future, edit your config in\n`configuration.yaml` and disable the `introduction` component.",
+        "Here are some resources to get started:\n\n - [Configuring Home Assistant](https://home-assistant.io/getting-started/configuration/)\n - [Available integrations](https://home-assistant.io/integrations/)\n - [Troubleshooting your configuration](https://home-assistant.io/docs/configuration/troubleshooting/)\n - [Getting help](https://home-assistant.io/help/)\n\nTo not see this card popup in the future, edit your config in\n`configuration.yaml` and disable the `introduction` integration.",
     },
     last_changed: "2018-07-19T10:44:45.922241+00:00",
     last_updated: "2018-07-19T10:44:45.922241+00:00",

gallery/src/demos/demo-hui-thermostat-card.ts

@@ -14,14 +14,14 @@ const ENTITIES = [
     target_temp_high: 75,
     target_temp_low: 70,
     fan_mode: "Auto Low",
-    fan_list: ["On Low", "On High", "Auto Low", "Auto High", "Off"],
-    operation_mode: "auto",
-    operation_list: ["heat", "cool", "auto", "off"],
-    hold_mode: "home",
+    fan_modes: ["On Low", "On High", "Auto Low", "Auto High", "Off"],
+    hvac_modes: ["heat", "cool", "auto", "off"],
     swing_mode: "Auto",
-    swing_list: ["Auto", "1", "2", "3", "Off"],
+    swing_modes: ["Auto", "1", "2", "3", "Off"],
     friendly_name: "Ecobee",
-    supported_features: 1014,
+    supported_features: 59,
+    preset_mode: "eco",
+    preset_modes: ["away", "eco"],
   }),
   getEntity("climate", "nest", "heat", {
     current_temperature: 17,
@@ -29,14 +29,12 @@ const ENTITIES = [
     max_temp: 25,
     temperature: 19,
     fan_mode: "Auto Low",
-    fan_list: ["On Low", "On High", "Auto Low", "Auto High", "Off"],
-    operation_mode: "heat",
-    operation_list: ["heat", "cool", "auto", "off"],
-    hold_mode: "home",
+    fan_modes: ["On Low", "On High", "Auto Low", "Auto High", "Off"],
+    hvac_modes: ["heat", "cool", "auto", "off"],
     swing_mode: "Auto",
-    swing_list: ["Auto", "1", "2", "3", "Off"],
+    swing_modes: ["Auto", "1", "2", "3", "Off"],
     friendly_name: "Nest",
-    supported_features: 1014,
+    supported_features: 43,
   }),
 ];
 

gallery/src/demos/demo-util-long-press.ts

@@ -2,19 +2,19 @@ import { html, LitElement, TemplateResult } from "lit-element";
 import "@material/mwc-button";
 
 import "../../../src/components/ha-card";
-import { longPress } from "../../../src/panels/lovelace/common/directives/long-press-directive";
+import { actionHandler } from "../../../src/panels/lovelace/common/directives/action-handler-directive";
+import { ActionHandlerEvent } from "../../../src/data/lovelace";
 
 export class DemoUtilLongPress extends LitElement {
-  protected render(): TemplateResult | void {
+  protected render(): TemplateResult {
     return html`
       ${this.renderStyle()}
       ${[1, 2, 3].map(
         () => html`
           <ha-card>
             <mwc-button
-              @ha-click="${this._handleTap}"
-              @ha-hold="${this._handleHold}"
-              .longPress="${longPress()}"
+              @action=${this._handleAction}
+              .actionHandler=${actionHandler({})}
             >
               (long) press me!
             </mwc-button>
@@ -28,12 +28,8 @@ export class DemoUtilLongPress extends LitElement {
     `;
   }
 
-  private _handleTap(ev: Event) {
-    this._addValue(ev, "tap");
-  }
-
-  private _handleHold(ev: Event) {
-    this._addValue(ev, "hold");
+  private _handleAction(ev: ActionHandlerEvent) {
+    this._addValue(ev, ev.detail.action!);
   }
 
   private _addValue(ev: Event, value: string) {

gallery/src/ha-gallery.js

@@ -56,7 +56,7 @@ class HaGallery extends PolymerElement {
         color: var(--primary-color);
       }
 
-      a paper-item {
+      a {
         color: var(--primary-text-color);
         text-decoration: none;
       }
@@ -138,12 +138,22 @@ class HaGallery extends PolymerElement {
           </template>
         </div>
       </app-header-layout>
-      <notification-manager id='notifications'></notification-manager>
+      <notification-manager hass=[[_fakeHass]] id='notifications'></notification-manager>
     `;
   }
 
   static get properties() {
     return {
+      _fakeHass: {
+        type: Object,
+        // Just enough for computeRTL
+        value: {
+          language: "en",
+          translationMetadata: {
+            translations: {},
+          },
+        },
+      },
       _demo: {
         type: String,
         value: document.location.hash.substr(1),

gallery/src/html/index.html.template

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#2157BC" />
+    <title>HAGallery</title>
+
+    <script type="module" src="<%= latestGalleryJS %>"></script>
+    <style>
+      body {
+        font-family: Roboto, Noto, sans-serif;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body></body>
+</html>

gallery/webpack.config.js

@@ -1,7 +1,7 @@
 const path = require("path");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
+const { createGalleryConfig } = require("../build-scripts/webpack.js");
 const { babelLoaderConfig } = require("../build-scripts/babel.js");
-const webpackBase = require("../build-scripts/webpack.js");
 
 const isProd = process.env.NODE_ENV === "production";
 const chunkFilename = isProd ? "chunk.[chunkhash].js" : "[name].chunk.js";
@@ -9,58 +9,64 @@ const buildPath = path.resolve(__dirname, "dist");
 const publicPath = isProd ? "./" : "http://localhost:8080/";
 const latestBuild = true;
 
-module.exports = {
-  mode: isProd ? "production" : "development",
-  // Disabled in prod while we make Home Assistant able to serve the right files.
-  // Was source-map
-  devtool: isProd ? "none" : "inline-source-map",
-  entry: "./src/entrypoint.js",
-  module: {
-    rules: [
-      babelLoaderConfig({ latestBuild }),
-      {
-        test: /\.css$/,
-        use: "raw-loader",
-      },
-      {
-        test: /\.(html)$/,
-        use: {
-          loader: "html-loader",
-          options: {
-            exportAsEs6Default: true,
+module.exports = createGalleryConfig({
+  latestBuild: true,
+});
+
+const bla = () => {
+  const oldExports = {
+    mode: isProd ? "production" : "development",
+    // Disabled in prod while we make Home Assistant able to serve the right files.
+    // Was source-map
+    devtool: isProd ? "none" : "inline-source-map",
+    entry: "./src/entrypoint.js",
+    module: {
+      rules: [
+        babelLoaderConfig({ latestBuild }),
+        {
+          test: /\.css$/,
+          use: "raw-loader",
+        },
+        {
+          test: /\.(html)$/,
+          use: {
+            loader: "html-loader",
+            options: {
+              exportAsEs6Default: true,
+            },
           },
         },
-      },
-    ],
-  },
-  optimization: webpackBase.optimization(latestBuild),
-  plugins: [
-    new CopyWebpackPlugin([
-      "public",
-      { from: "../public", to: "static" },
-      { from: "../build-translations/output", to: "static/translations" },
-      {
-        from: "../node_modules/leaflet/dist/leaflet.css",
-        to: "static/images/leaflet/",
-      },
-      {
-        from: "../node_modules/@polymer/font-roboto-local/fonts",
-        to: "static/fonts",
-      },
-      {
-        from: "../node_modules/leaflet/dist/images",
-        to: "static/images/leaflet/",
-      },
-    ]),
-  ].filter(Boolean),
-  resolve: webpackBase.resolve,
-  output: {
-    filename: "[name].js",
-    chunkFilename: chunkFilename,
-    path: buildPath,
-    publicPath,
-  },
-  devServer: {
-    contentBase: "./public",
-  },
+      ],
+    },
+    optimization: webpackBase.optimization(latestBuild),
+    plugins: [
+      new CopyWebpackPlugin([
+        "public",
+        { from: "../public", to: "static" },
+        { from: "../build-translations/output", to: "static/translations" },
+        {
+          from: "../node_modules/leaflet/dist/leaflet.css",
+          to: "static/images/leaflet/",
+        },
+        {
+          from: "../node_modules/roboto-fontface/fonts/roboto/*.woff2",
+          to: "static/fonts/roboto/",
+        },
+        {
+          from: "../node_modules/leaflet/dist/images",
+          to: "static/images/leaflet/",
+        },
+      ]),
+    ].filter(Boolean),
+    resolve: webpackBase.resolve,
+    output: {
+      filename: "[name].js",
+      chunkFilename: chunkFilename,
+      path: buildPath,
+      publicPath,
+    },
+    devServer: {
+      contentBase: "./public",
+    },
+  };
 };

hassio/config.js

@@ -3,6 +3,7 @@ const path = require("path");
 module.exports = {
   // Target directory for the build.
   buildDir: path.resolve(__dirname, "build"),
+  nodeDir: path.resolve(__dirname, "../node_modules"),
   // Path where the Hass.io frontend will be publicly available.
   publicPath: "/api/hassio/app",
 };

hassio/script/build_hassio

@@ -4,11 +4,6 @@
 # Stop on errors
 set -e
 
-cd "$(dirname "$0")/.."
+cd "$(dirname "$0")/../.."
 
-OUTPUT_DIR=build
-
-rm -rf $OUTPUT_DIR
-
-node script/gen-icons.js
-NODE_ENV=production CI=false ../node_modules/.bin/webpack -p --config webpack.config.js
+./node_modules/.bin/gulp build-hassio

hassio/script/develop

@@ -4,11 +4,6 @@
 # Stop on errors
 set -e
 
-cd "$(dirname "$0")/.."
+cd "$(dirname "$0")/../.."
 
-OUTPUT_DIR=build
-
-rm -rf $OUTPUT_DIR
-mkdir $OUTPUT_DIR
-node script/gen-icons.js
-../node_modules/.bin/webpack --watch --progress
+./node_modules/.bin/gulp develop-hassio

hassio/script/gen-icons.js

@@ -1,20 +0,0 @@
-#!/usr/bin/env node
-const fs = require("fs");
-const {
-  findIcons,
-  generateIconset,
-  genMDIIcons,
-} = require("../../build-scripts/gulp/gen-icons.js");
-
-function genHassioIcons() {
-  const iconNames = findIcons("./src", "hassio");
-
-  for (const item of findIcons("../src", "hassio")) {
-    iconNames.add(item);
-  }
-
-  fs.writeFileSync("./hassio-icons.html", generateIconset("hassio", iconNames));
-}
-
-genMDIIcons();
-genHassioIcons();

hassio/src/addon-store/hassio-addon-repository.ts

@@ -15,7 +15,7 @@ import { HomeAssistant } from "../../../src/types";
 import {
   HassioAddonInfo,
   HassioAddonRepository,
-} from "../../../src/data/hassio";
+} from "../../../src/data/hassio/addon";
 import { navigate } from "../../../src/common/navigate";
 import { filterAndSort } from "../components/hassio-filter-addons";
 
@@ -36,84 +36,90 @@ class HassioAddonRepositoryEl extends LitElement {
     }
   );
 
-  protected render(): TemplateResult | void {
+  protected render(): TemplateResult {
     const repo = this.repo;
     const addons = this._getAddons(this.addons, this.filter);
+    const ha105pluss = this._computeHA105plus;
 
     if (this.filter && addons.length < 1) {
       return html`
-        <div class="card-group">
-          <div class="title">
-            <div class="description">
-              No results found in "${repo.name}"
-            </div>
-          </div>
+        <div class="content">
+          <p class="description">
+            No results found in "${repo.name}"
+          </p>
         </div>
       `;
     }
     return html`
-      <div class="card-group">
-        <div class="title">
+      <div class="content">
+        <h1>
           ${repo.name}
-          <div class="description">
-            Maintained by ${repo.maintainer}<br />
-            <a class="repo" href=${repo.url} target="_blank">${repo.url}</a>
-          </div>
+        </h1>
+        <p class="description">
+          Maintained by ${repo.maintainer}<br />
+          <a class="repo" href=${repo.url} target="_blank">${repo.url}</a>
+        </p>
+        <div class="card-group">
+          ${addons.map(
+            (addon) => html`
+              <paper-card
+                .addon=${addon}
+                class=${addon.available ? "" : "not_available"}
+                @click=${this._addonTapped}
+              >
+                <div class="card-content">
+                  <hassio-card-content
+                    .hass=${this.hass}
+                    .title=${addon.name}
+                    .description=${addon.description}
+                    .available=${addon.available}
+                    .icon=${addon.installed && addon.installed !== addon.version
+                      ? "hassio:arrow-up-bold-circle"
+                      : "hassio:puzzle"}
+                    .iconTitle=${addon.installed
+                      ? addon.installed !== addon.version
+                        ? "New version available"
+                        : "Add-on is installed"
+                      : addon.available
+                      ? "Add-on is not installed"
+                      : "Add-on is not available on your system"}
+                    .iconClass=${addon.installed
+                      ? addon.installed !== addon.version
+                        ? "update"
+                        : "installed"
+                      : !addon.available
+                      ? "not_available"
+                      : ""}
+                    .iconImage=${ha105pluss && addon.icon
+                      ? `/api/hassio/addons/${addon.slug}/icon`
+                      : undefined}
+                    .showTopbar=${addon.installed || !addon.available}
+                    .topbarClass=${addon.installed
+                      ? addon.installed !== addon.version
+                        ? "update"
+                        : "installed"
+                      : !addon.available
+                      ? "unavailable"
+                      : ""}
+                  ></hassio-card-content>
+                </div>
+              </paper-card>
+            `
+          )}
         </div>
-
-        ${addons.map(
-          (addon) => html`
-            <paper-card
-              .addon=${addon}
-              class=${addon.available ? "" : "not_available"}
-              @click=${this.addonTapped}
-            >
-              <div class="card-content">
-                <hassio-card-content
-                  .hass=${this.hass}
-                  .title=${addon.name}
-                  .description=${addon.description}
-                  .available=${addon.available}
-                  .icon=${this.computeIcon(addon)}
-                  .iconTitle=${this.computeIconTitle(addon)}
-                  .iconClass=${this.computeIconClass(addon)}
-                ></hassio-card-content>
-              </div>
-            </paper-card>
-          `
-        )}
       </div>
     `;
   }
 
-  private computeIcon(addon) {
-    return addon.installed && addon.installed !== addon.version
-      ? "hassio:arrow-up-bold-circle"
-      : "hassio:puzzle";
-  }
-
-  private computeIconTitle(addon) {
-    if (addon.installed) {
-      return addon.installed !== addon.version
-        ? "New version available"
-        : "Add-on is installed";
-    }
-    return addon.available
-      ? "Add-on is not installed"
-      : "Add-on is not available on your system";
-  }
-
-  private computeIconClass(addon) {
-    if (addon.installed) {
-      return addon.installed !== addon.version ? "update" : "installed";
-    }
-    return !addon.available ? "not_available" : "";
-  }
-
-  private addonTapped(ev) {
+  private _addonTapped(ev) {
     navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`);
   }
 
+  private get _computeHA105plus(): boolean {
+    const [major, minor] = this.hass.config.version.split(".", 2);
+    return Number(major) > 0 || (major === "0" && Number(minor) >= 105);
+  }
+
   static get styles(): CSSResultArray {
     return [
       hassioStyle,

hassio/src/addon-store/hassio-addon-store.ts

@@ -14,7 +14,7 @@ import {
   HassioAddonInfo,
   fetchHassioAddonsInfo,
   reloadHassioAddons,
-} from "../../../src/data/hassio";
+} from "../../../src/data/hassio/addon";
 import "../../../src/layouts/loading-screen";
 import "../components/hassio-search-input";
 
@@ -48,7 +48,7 @@ class HassioAddonStore extends LitElement {
     await this._loadData();
   }
 
-  protected render(): TemplateResult | void {
+  protected render(): TemplateResult {
     if (!this._addons || !this._repos) {
       return html`
         <loading-screen></loading-screen>

hassio/src/addon-store/hassio-repositories-editor.ts

@@ -17,7 +17,7 @@ import "../../../src/components/buttons/ha-call-api-button";
 import "../components/hassio-card-content";
 import { hassioStyle } from "../resources/hassio-style";
 import { HomeAssistant } from "../../../src/types";
-import { HassioAddonRepository } from "../../../src/data/hassio";
+import { HassioAddonRepository } from "../../../src/data/hassio/addon";
 import { PolymerChangedEvent } from "../../../src/polymer-types";
 import { repeat } from "lit-html/directives/repeat";
 
@@ -33,64 +33,66 @@ class HassioRepositoriesEditor extends LitElement {
       .sort((a, b) => (a.name < b.name ? -1 : 1))
   );
 
-  protected render(): TemplateResult | void {
+  protected render(): TemplateResult {
     const repos = this._sortedRepos(this.repos);
     return html`
-      <div class="card-group">
-        <div class="title">
+      <div class="content">
+        <h1>
           Repositories
-          <div class="description">
-            Configure which add-on repositories to fetch data from:
-          </div>
-        </div>
-        ${// Use repeat so that the fade-out from call-service-api-button
-        // stays with the correct repo after we add/delete one.
-        repeat(
-          repos,
-          (repo) => repo.slug,
-          (repo) => html`
-            <paper-card>
-              <div class="card-content">
-                <hassio-card-content
-                  .hass=${this.hass}
-                  .title=${repo.name}
-                  .description=${repo.url}
-                  icon="hassio:github-circle"
-                ></hassio-card-content>
-              </div>
-              <div class="card-actions">
-                <ha-call-api-button
-                  path="hassio/supervisor/options"
-                  .hass=${this.hass}
-                  .data=${this.computeRemoveRepoData(repos, repo.url)}
-                  class="warning"
-                >
-                  Remove
-                </ha-call-api-button>
-              </div>
-            </paper-card>
-          `
-        )}
+        </h1>
+        <p class="description">
+          Configure which add-on repositories to fetch data from:
+        </p>
+        <div class="card-group">
+          ${// Use repeat so that the fade-out from call-service-api-button
+          // stays with the correct repo after we add/delete one.
+          repeat(
+            repos,
+            (repo) => repo.slug,
+            (repo) => html`
+              <paper-card>
+                <div class="card-content">
+                  <hassio-card-content
+                    .hass=${this.hass}
+                    .title=${repo.name}
+                    .description=${repo.url}
+                    icon="hassio:github-circle"
+                  ></hassio-card-content>
+                </div>
+                <div class="card-actions">
+                  <ha-call-api-button
+                    path="hassio/supervisor/options"
+                    .hass=${this.hass}
+                    .data=${this.computeRemoveRepoData(repos, repo.url)}
+                    class="warning"
+                  >
+                    Remove
+                  </ha-call-api-button>
+                </div>
+              </paper-card>
+            `
+          )}
 
-        <paper-card>
-          <div class="card-content add">
-            <iron-icon icon="hassio:github-circle"></iron-icon>
-            <paper-input
-              label="Add new repository by URL"
-              .value=${this._repoUrl}
-              @value-changed=${this._urlChanged}
-            ></paper-input>
-          </div>
-          <div class="card-actions">
-            <ha-call-api-button
-              path="hassio/supervisor/options"
-              .hass=${this.hass}
-              .data=${this.computeAddRepoData(repos, this._repoUrl)}
-            >
-              Add
-            </ha-call-api-button>
-          </div>
-        </paper-card>
+          <paper-card>
+            <div class="card-content add">
+              <iron-icon icon="hassio:github-circle"></iron-icon>
+              <paper-input
+                label="Add new repository by URL"
+                .value=${this._repoUrl}
+                @value-changed=${this._urlChanged}
+              ></paper-input>
+            </div>
+            <div class="card-actions">
+              <ha-call-api-button
+                path="hassio/supervisor/options"
+                .hass=${this.hass}
+                .data=${this.computeAddRepoData(repos, this._repoUrl)}
+              >
+                Add
+              </ha-call-api-button>
+            </div>
+          </paper-card>
+        </div>
       </div>
     `;
   }

hassio/src/addon-view/hassio-addon-audio.js

@@ -1,142 +0,0 @@
-import "web-animations-js/web-animations-next-lite.min";
-
-import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../src/resources/ha-style";
-import { EventsMixin } from "../../../src/mixins/events-mixin";
-
-class HassioAddonAudio extends EventsMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style include="ha-style">
-        :host,
-        paper-card,
-        paper-dropdown-menu {
-          display: block;
-        }
-        .errors {
-          color: var(--google-red-500);
-          margin-bottom: 16px;
-        }
-        paper-item {
-          width: 450px;
-        }
-        .card-actions {
-          text-align: right;
-        }
-      </style>
-      <paper-card heading="Audio">
-        <div class="card-content">
-          <template is="dom-if" if="[[error]]">
-            <div class="errors">[[error]]</div>
-          </template>
-
-          <paper-dropdown-menu label="Input">
-            <paper-listbox
-              slot="dropdown-content"
-              attr-for-selected="device"
-              selected="{{selectedInput}}"
-            >
-              <template is="dom-repeat" items="[[inputDevices]]">
-                <paper-item device\$="[[item.device]]"
-                  >[[item.name]]</paper-item
-                >
-              </template>
-            </paper-listbox>
-          </paper-dropdown-menu>
-          <paper-dropdown-menu label="Output">
-            <paper-listbox
-              slot="dropdown-content"
-              attr-for-selected="device"
-              selected="{{selectedOutput}}"
-            >
-              <template is="dom-repeat" items="[[outputDevices]]">
-                <paper-item device\$="[[item.device]]"
-                  >[[item.name]]</paper-item
-                >
-              </template>
-            </paper-listbox>
-          </paper-dropdown-menu>
-        </div>
-        <div class="card-actions">
-          <mwc-button on-click="_saveSettings">Save</mwc-button>
-        </div>
-      </paper-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      addon: {
-        type: Object,
-        observer: "addonChanged",
-      },
-      inputDevices: Array,
-      outputDevices: Array,
-      selectedInput: String,
-      selectedOutput: String,
-      error: String,
-    };
-  }
-
-  addonChanged(addon) {
-    this.setProperties({
-      selectedInput: addon.audio_input || "null",
-      selectedOutput: addon.audio_output || "null",
-    });
-    if (this.outputDevices) return;
-
-    const noDevice = [{ device: "null", name: "-" }];
-    this.hass.callApi("get", "hassio/hardware/audio").then(
-      (resp) => {
-        const dev = resp.data.audio;
-        const input = Object.keys(dev.input).map((key) => ({
-          device: key,
-          name: dev.input[key],
-        }));
-        const output = Object.keys(dev.output).map((key) => ({
-          device: key,
-          name: dev.output[key],
-        }));
-        this.setProperties({
-          inputDevices: noDevice.concat(input),
-          outputDevices: noDevice.concat(output),
-        });
-      },
-      () => {
-        this.setProperties({
-          inputDevices: noDevice,
-          outputDevices: noDevice,
-        });
-      }
-    );
-  }
-
-  _saveSettings() {
-    this.error = null;
-    const path = `hassio/addons/${this.addon.slug}/options`;
-    this.hass
-      .callApi("post", path, {
-        audio_input: this.selectedInput === "null" ? null : this.selectedInput,
-        audio_output:
-          this.selectedOutput === "null" ? null : this.selectedOutput,
-      })
-      .then(
-        () => {
-          this.fire("hass-api-called", { success: true, path: path });
-        },
-        (resp) => {
-          this.error = resp.body.message;
-        }
-      );
-  }
-}
-
-customElements.define("hassio-addon-audio", HassioAddonAudio);