Fix custom vlaue

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

.eslintrc.json

@@ -75,13 +75,16 @@
     "object-curly-newline": 0,
     "default-case": 0,
     "wc/no-self-class": 0,
+    "no-shadow": 0,
     "@typescript-eslint/camelcase": 0,
-    "@typescript-eslint/ban-ts-ignore": 0,
+    "@typescript-eslint/ban-ts-comment": 0,
     "@typescript-eslint/no-use-before-define": 0,
     "@typescript-eslint/no-non-null-assertion": 0,
     "@typescript-eslint/no-explicit-any": 0,
     "@typescript-eslint/no-unused-vars": 0,
-    "@typescript-eslint/explicit-function-return-type": 0
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "@typescript-eslint/no-shadow": ["error"]
   },
   "plugins": ["disable", "import", "lit", "prettier", "@typescript-eslint"],
   "processor": "disable/disable"

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -1,26 +0,0 @@
----
-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

@@ -1,5 +1,8 @@
 blank_issues_enabled: false
 contact_links:
+  - name: Request a feature for the UI, Frontend or Lovelace
+    url: https://github.com/home-assistant/frontend/discussions/category_choices
+    about: Request an new feature for the Home Assistant frontend.
   - name: Report a bug that is NOT related to the UI, Frontend or Lovelace
     url: https://github.com/home-assistant/core/issues
     about: This is the issue tracker for our frontend. Please report other issues with the backend repository.

.github/PULL_REQUEST_TEMPLATE.md

@@ -18,8 +18,8 @@
 <!--
   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.
+  or resolves a feature request, be sure to link to that issue or discussion
+  in the additional information section.
 -->
 
 ## Type of change
@@ -56,7 +56,7 @@
 -->
 
 - This PR fixes or closes issue: fixes #
-- This PR is related to issue:
+- This PR is related to issue or discussion:
 - Link to documentation pull request:
 
 ## Checklist

.github/lock.yml

@@ -1,27 +0,0 @@
-# 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

@@ -1,56 +0,0 @@
-# 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

.github/workflows/lock.yml

@@ -0,0 +1,20 @@
+name: Lock
+
+# yamllint disable-line rule:truthy
+on:
+  schedule:
+    - cron: "0 * * * *"
+
+jobs:
+  lock:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: dessant/lock-threads@v2.0.1
+        with:
+          github-token: ${{ github.token }}
+          issue-lock-inactive-days: "30"
+          issue-exclude-created-before: "2020-10-01T00:00:00Z"
+          issue-lock-reason: ""
+          pr-lock-inactive-days: "1"
+          pr-exclude-created-before: "2020-11-01T00:00:00Z"
+          pr-lock-reason: ""

.github/workflows/stale.yml

@@ -0,0 +1,42 @@
+name: Stale
+
+# yamllint disable-line rule:truthy
+on:
+  schedule:
+    - cron: "0 * * * *"
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 90 days stale policy
+        uses: actions/stale@v3.0.13
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          days-before-stale: 90
+          days-before-close: 7
+          operations-per-run: 25
+          remove-stale-when-updated: true
+          stale-issue-label: "stale"
+          exempt-issue-labels: "no-stale,Help%20wanted,help-wanted,feature-request,feature%20request"
+          stale-issue-message: >
+            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 has now been marked as stale and will be closed if no
+            further activity occurs. Thank you for your contributions.
+
+          stale-pr-label: "stale"
+          exempt-pr-labels: "no-stale"
+          stale-pr-message: >
+            There hasn't been any activity on this pull request recently. This
+            pull request has been automatically marked as stale because of that
+            and will be closed if no further activity occurs within 7 days.
+
+            Thank you for your contributions.

.gitignore

@@ -23,6 +23,8 @@ dist
 # vscode
 .vscode/*
 !.vscode/extensions.json
+!.vscode/launch.json
+!.vscode/tasks.json
 
 # Cast dev settings
 src/cast/dev_const.ts

.vscode/launch.json

@@ -0,0 +1,44 @@
+{
+  // https://github.com/microsoft/vscode-js-debug/blob/master/OPTIONS.md
+  "configurations": [
+    {
+      "name": "Debug Frontend",
+      "request": "launch",
+      "type": "pwa-chrome",
+      "url": "http://localhost:8123/",
+      "webRoot": "${workspaceFolder}/hass_frontend",
+      "disableNetworkCache": true,
+      "preLaunchTask": "Develop Frontend",
+      "outFiles": [
+        "${workspaceFolder}/hass_frontend/frontend_latest/*.js"
+      ]
+    },
+    {
+      "name": "Debug Gallery",
+      "request": "launch",
+      "type": "pwa-chrome",
+      "url": "http://localhost:8100/",
+      "webRoot": "${workspaceFolder}/gallery/dist",
+      "disableNetworkCache": true,
+      "preLaunchTask": "Develop Gallery"
+    },
+    {
+      "name": "Debug Demo",
+      "request": "launch",
+      "type": "pwa-chrome",
+      "url": "http://localhost:8090/",
+      "webRoot": "${workspaceFolder}/demo/dist",
+      "disableNetworkCache": true,
+      "preLaunchTask": "Develop Demo"
+    },
+    {
+      "name": "Debug Cast",
+      "request": "launch",
+      "type": "pwa-chrome",
+      "url": "http://localhost:8080/",
+      "webRoot": "${workspaceFolder}/cast/dist",
+      "disableNetworkCache": true,
+      "preLaunchTask": "Develop Cast"
+    },
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,137 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Develop Frontend",
+      "type": "gulp",
+      "task": "develop-app",
+      // Sync changes here to other tasks until issue resolved
+      // https://github.com/Microsoft/vscode/issues/61497
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+      "isBackground": true,
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
+    {
+      "label": "Develop Gallery",
+      "type": "gulp",
+      "task": "develop-gallery",
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+
+      "isBackground": true,
+      "group": "build",
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
+    {
+      "label": "Develop Demo",
+      "type": "gulp",
+      "task": "develop-demo",
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+
+      "isBackground": true,
+      "group": "build",
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
+    {
+      "label": "Develop Cast",
+      "type": "gulp",
+      "task": "develop-cast",
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+
+      "isBackground": true,
+      "group": "build",
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
+  ]
+}

README.md

@@ -26,4 +26,4 @@ A complete guide can be found at the following [link](https://www.home-assistant
 
 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.
+We use [BrowserStack](https://www.browserstack.com) to test Home Assistant on a large variety of devices.

build-scripts/bundle.js

@@ -52,7 +52,13 @@ module.exports.terserOptions = (latestBuild) => ({
 module.exports.babelOptions = ({ latestBuild }) => ({
   babelrc: false,
   presets: [
-    !latestBuild && [require("@babel/preset-env").default, { modules: false }],
+    !latestBuild && [
+      require("@babel/preset-env").default,
+      {
+        useBuiltIns: "entry",
+        corejs: "3.6",
+      },
+    ],
     require("@babel/preset-typescript").default,
   ].filter(Boolean),
   plugins: [
@@ -62,7 +68,8 @@ module.exports.babelOptions = ({ latestBuild }) => ({
       { loose: true, useBuiltIns: true },
     ],
     // Only support the syntax, Webpack will handle it.
-    "@babel/syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta",
+    "@babel/plugin-syntax-dynamic-import",
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator",
     [

build-scripts/gulp/translations.js

@@ -7,7 +7,6 @@ const gulp = require("gulp");
 const fs = require("fs");
 const foreach = require("gulp-foreach");
 const merge = require("gulp-merge-json");
-const minify = require("gulp-jsonminify");
 const rename = require("gulp-rename");
 const transform = require("gulp-json-transform");
 const { mapFiles } = require("../util");
@@ -301,7 +300,6 @@ gulp.task("build-flattened-translations", function () {
         return flatten(data);
       })
     )
-    .pipe(minify())
     .pipe(
       rename((filePath) => {
         if (filePath.dirname === "core") {

build-scripts/gulp/webpack.js

@@ -18,6 +18,14 @@ const bothBuilds = (createConfigFunc, params) => [
   createConfigFunc({ ...params, latestBuild: false }),
 ];
 
+/**
+ * @param {{
+ *   compiler: import("webpack").Compiler,
+ *   contentBase: string,
+ *   port: number,
+ *   listenHost?: string
+ * }}
+ */
 const runDevServer = ({
   compiler,
   contentBase,
@@ -33,7 +41,10 @@ const runDevServer = ({
       throw err;
     }
     // Server listening
-    log("[webpack-dev-server]", `http://localhost:${port}`);
+    log(
+      "[webpack-dev-server]",
+      `Project is running at http://localhost:${port}`
+    );
   });
 
 const handler = (done) => (err, stats) => {
@@ -45,12 +56,12 @@ const handler = (done) => (err, stats) => {
     return;
   }
 
-  log(`Build done @ ${new Date().toLocaleTimeString()}`);
-
   if (stats.hasErrors() || stats.hasWarnings()) {
-    log.warn(stats.toString("minimal"));
+    console.log(stats.toString("minimal"));
   }
 
+  log(`Build done @ ${new Date().toLocaleTimeString()}`);
+
   if (done) {
     done();
   }

build-scripts/paths.js

@@ -1,4 +1,4 @@
-var path = require("path");
+const path = require("path");
 
 module.exports = {
   polymer_dir: path.resolve(__dirname, ".."),

build-scripts/webpack.js

@@ -2,9 +2,23 @@ const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
 const ManifestPlugin = require("webpack-manifest-plugin");
-const WorkerPlugin = require("worker-plugin");
 const paths = require("./paths.js");
 const bundle = require("./bundle");
+const log = require("fancy-log");
+
+class LogStartCompilePlugin {
+  ignoredFirst = false;
+
+  apply(compiler) {
+    compiler.hooks.beforeCompile.tap("LogStartCompilePlugin", () => {
+      if (!this.ignoredFirst) {
+        this.ignoredFirst = true;
+        return;
+      }
+      log("Changes detected. Starting compilation");
+    });
+  }
+}
 
 const createWebpackConfig = ({
   entry,
@@ -30,7 +44,7 @@ const createWebpackConfig = ({
     module: {
       rules: [
         {
-          test: /\.js$|\.ts$/,
+          test: /\.m?js$|\.ts$/,
           exclude: bundle.babelExclude(),
           use: {
             loader: "babel-loader",
@@ -46,16 +60,13 @@ const createWebpackConfig = ({
     optimization: {
       minimizer: [
         new TerserPlugin({
-          cache: true,
           parallel: true,
           extractComments: true,
-          sourceMap: true,
           terserOptions: bundle.terserOptions(latestBuild),
         }),
       ],
     },
     plugins: [
-      new WorkerPlugin(),
       new ManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
@@ -99,7 +110,17 @@ const createWebpackConfig = ({
         new RegExp(bundle.emptyPackages({ latestBuild }).join("|")),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
-    ],
+      // We need to change the import of the polyfill for EventTarget, so we replace the polyfill file with our customized one
+      new webpack.NormalModuleReplacementPlugin(
+        new RegExp(
+          require.resolve(
+            "lit-virtualizer/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js"
+          )
+        ),
+        path.resolve(paths.polymer_dir, "src/resources/EventTarget-ponyfill.js")
+      ),
+      !isProdBuild && new LogStartCompilePlugin(),
+    ].filter(Boolean),
     resolve: {
       extensions: [".ts", ".js", ".json"],
     },
@@ -110,6 +131,22 @@ const createWebpackConfig = ({
         }
         return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`;
       },
+      environment: {
+        // The environment supports arrow functions ('() => { ... }').
+        arrowFunction: latestBuild,
+        // The environment supports BigInt as literal (123n).
+        bigIntLiteral: false,
+        // The environment supports const and let for variable declarations.
+        const: latestBuild,
+        // The environment supports destructuring ('{ a, b } = obj').
+        destructuring: latestBuild,
+        // The environment supports an async import() function to import EcmaScript modules.
+        dynamicImport: latestBuild,
+        // The environment supports 'for of' iteration ('for (const x of array) { ... }').
+        forOf: latestBuild,
+        // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
+        module: latestBuild,
+      },
       chunkFilename:
         isProdBuild && !isStatsBuild
           ? "chunk.[chunkhash].js"

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

@@ -212,13 +212,8 @@
           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>
+          <li>Google Chrome (all platforms except iOS)</li>
+          <li>Microsoft Edge (all platforms)</li>
         </ul>
       </div>
 

cast/src/launcher/entrypoint.ts

@@ -1,3 +1,4 @@
+import "../../../src/resources/safari-14-attachshadow-patch";
 import "../../../src/resources/ha-style";
 import "../../../src/resources/roboto";
 import "./layout/hc-connect";

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

@@ -30,7 +30,7 @@ class HcLayout extends LitElement {
       <ha-card>
         <div class="layout">
           <img class="hero" src="/images/google-nest-hub.png" />
-          <div class="card-header">
+          <h1 class="card-header">
             Home Assistant Cast${this.subtitle ? ` – ${this.subtitle}` : ""}
             ${this.auth
               ? html`
@@ -44,7 +44,7 @@ class HcLayout extends LitElement {
                   </div>
                 `
               : ""}
-          </div>
+          </h1>
           <slot></slot>
         </div>
       </ha-card>

cast/src/receiver/entrypoint.ts

@@ -6,13 +6,60 @@ import { castContext } from "./cast_context";
 import { HcMain } from "./layout/hc-main";
 import { ReceivedMessage } from "./types";
 
-const controller = new HcMain();
-document.body.append(controller);
+const lovelaceController = new HcMain();
+document.body.append(lovelaceController);
+
+const mediaPlayer = document.createElement("cast-media-player");
+mediaPlayer.style.display = "none";
+document.body.append(mediaPlayer);
+const playerStylesAdded = false;
+
+let controls: HTMLElement | null;
+
+const setTouchControlsVisibility = (visible: boolean) => {
+  if (!castContext.getDeviceCapabilities().touch_input_supported) {
+    return;
+  }
+  controls =
+    controls ||
+    (document.body.querySelector("touch-controls") as HTMLElement | null);
+  if (controls) {
+    controls.style.display = visible ? "initial" : "none";
+  }
+};
+
+const showLovelaceController = () => {
+  mediaPlayer.style.display = "none";
+  lovelaceController.style.display = "initial";
+  document.body.setAttribute("style", "overflow-y: auto !important");
+  setTouchControlsVisibility(false);
+};
+
+const showMediaPlayer = () => {
+  lovelaceController.style.display = "none";
+  mediaPlayer.style.display = "initial";
+  document.body.removeAttribute("style");
+  setTouchControlsVisibility(true);
+  if (!playerStylesAdded) {
+    const style = document.createElement("style");
+    style.innerHTML = `
+    body {
+      --logo-image: url('https://www.home-assistant.io/images/home-assistant-logo.svg');
+      --logo-repeat: no-repeat;
+      --playback-logo-image: url('https://www.home-assistant.io/images/home-assistant-logo.svg');
+      --theme-hue: 200;
+      --progress-color: #03a9f4;
+      --splash-image: url('https://home-assistant.io/images/cast/splash.png');
+      --splash-size: cover;
+    }
+    `;
+    document.head.appendChild(style);
+  }
+};
 
 const options = new cast.framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  // @ts-ignore
   [CAST_NS]: cast.framework.system.MessageType.JSON,
 };
 
@@ -30,13 +77,61 @@ options.uiConfig = new cast.framework.ui.UiConfig();
 // @ts-ignore
 options.uiConfig.touchScreenOptimizedApp = true;
 
+castContext.setInactivityTimeout(86400); // 1 day
+
 castContext.addCustomMessageListener(
   CAST_NS,
   // @ts-ignore
   (ev: ReceivedMessage<HassMessage>) => {
+    // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
+    if (
+      playerManager.getPlayerState() !==
+      cast.framework.messages.PlayerState.IDLE
+    ) {
+      playerManager.stop();
+    } else {
+      showLovelaceController();
+    }
     const msg = ev.data;
     msg.senderId = ev.senderId;
-    controller.processIncomingMessage(msg);
+    lovelaceController.processIncomingMessage(msg);
+  }
+);
+
+const playerManager = castContext.getPlayerManager();
+
+playerManager.setMessageInterceptor(
+  cast.framework.messages.MessageType.LOAD,
+  (loadRequestData) => {
+    // We received a play media command, hide Lovelace and show media player
+    showMediaPlayer();
+    const media = loadRequestData.media;
+    // Special handling if it came from Google Assistant
+    if (media.entity) {
+      media.contentId = media.entity;
+      media.streamType = cast.framework.messages.StreamType.LIVE;
+      media.contentType = "application/vnd.apple.mpegurl";
+      // @ts-ignore
+      media.hlsVideoSegmentFormat =
+        cast.framework.messages.HlsVideoSegmentFormat.FMP4;
+    }
+    return loadRequestData;
+  }
+);
+
+playerManager.addEventListener(
+  cast.framework.events.EventType.MEDIA_STATUS,
+  (event) => {
+    if (
+      event.mediaStatus?.playerState ===
+        cast.framework.messages.PlayerState.IDLE &&
+      event.mediaStatus?.idleReason &&
+      event.mediaStatus?.idleReason !==
+        cast.framework.messages.IdleReason.INTERRUPTED
+    ) {
+      // media finished or stopped, return to default Lovelace
+      showLovelaceController();
+    }
   }
 );
 

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

@@ -9,7 +9,6 @@ import {
 } from "lit-element";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
-import "../../../../src/panels/lovelace/views/hui-panel-view";
 import "../../../../src/panels/lovelace/views/hui-view";
 import { HomeAssistant } from "../../../../src/types";
 import "./hc-launch-screen";
@@ -45,22 +44,13 @@ class HcLovelace extends LitElement {
       deleteConfig: async () => undefined,
       setEditMode: () => undefined,
     };
-    return this.lovelaceConfig.views[index].panel
-      ? html`
-          <hui-panel-view
-            .hass=${this.hass}
-            .lovelace=${lovelace}
-            .config=${this.lovelaceConfig.views[index]}
-          ></hui-panel-view>
-        `
-      : html`
-          <hui-view
-            .hass=${this.hass}
-            .lovelace=${lovelace}
-            .index=${index}
-            columns="2"
-          ></hui-view>
-        `;
+    return html`
+      <hui-view
+        .hass=${this.hass}
+        .lovelace=${lovelace}
+        .index=${index}
+      ></hui-view>
+    `;
   }
 
   protected updated(changedProps) {
@@ -76,7 +66,7 @@ class HcLovelace extends LitElement {
 
         if (configBackground) {
           (this.shadowRoot!.querySelector(
-            "hui-view, hui-panel-view"
+            "hui-view"
           ) as HTMLElement)!.style.setProperty(
             "--lovelace-background",
             configBackground

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

@@ -216,9 +216,7 @@ export class HcMain extends HassElement {
     }
     this._showDemo = false;
     this._lovelacePath = msg.viewPath;
-    if (castContext.getDeviceCapabilities().touch_input_supported) {
-      this._breakFree();
-    }
+
     this._sendStatus();
   }
 
@@ -241,9 +239,6 @@ export class HcMain extends HassElement {
       this._showDemo = true;
       this._lovelacePath = "overview";
       this._sendStatus();
-      if (castContext.getDeviceCapabilities().touch_input_supported) {
-        this._breakFree();
-      }
     });
   }
 
@@ -264,14 +259,6 @@ export class HcMain extends HassElement {
     }
   }
 
-  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);
   }

demo/src/configs/teachingbirds/lovelace.ts

@@ -7,205 +7,183 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
       cards: [
         { type: "custom:ha-demo-card" },
         {
+          type: "grid",
+          columns: 4,
           cards: [
             {
-              cards: [
+              image: "/assets/teachingbirds/isa_square.jpg",
+              type: "picture-entity",
+              show_name: false,
+              tap_action: {
+                action: "more-info",
+              },
+              entity: "sensor.presence_isa",
+            },
+            {
+              image: "/assets/teachingbirds/Stefan_square.jpg",
+              type: "picture-entity",
+              show_name: false,
+              tap_action: {
+                action: "more-info",
+              },
+              entity: "sensor.presence_stefan",
+            },
+            {
+              image: "/assets/teachingbirds/background_square.png",
+              elements: [
                 {
-                  image: "/assets/teachingbirds/isa_square.jpg",
-                  type: "picture-entity",
-                  show_name: false,
+                  state_image: {
+                    on: "/assets/teachingbirds/radiator_on.jpg",
+                    off: "/assets/teachingbirds/radiator_off.jpg",
+                  },
+                  type: "image",
+                  style: {
+                    width: "100%",
+                    top: "50%",
+                    left: "50%",
+                  },
                   tap_action: {
                     action: "more-info",
                   },
-                  entity: "sensor.presence_isa",
+                  entity: "switch.stefan_radiator_3",
                 },
                 {
-                  image: "/assets/teachingbirds/Stefan_square.jpg",
-                  type: "picture-entity",
-                  show_name: false,
-                  tap_action: {
-                    action: "more-info",
+                  style: {
+                    top: "90%",
+                    left: "50%",
                   },
-                  entity: "sensor.presence_stefan",
-                },
-                {
-                  image: "/assets/teachingbirds/background_square.png",
-                  elements: [
-                    {
-                      state_image: {
-                        on: "/assets/teachingbirds/radiator_on.jpg",
-                        off: "/assets/teachingbirds/radiator_off.jpg",
-                      },
-                      type: "image",
-                      style: {
-                        width: "100%",
-                        top: "50%",
-                        left: "50%",
-                      },
-                      tap_action: {
-                        action: "more-info",
-                      },
-                      entity: "switch.stefan_radiator_3",
-                    },
-                    {
-                      style: {
-                        top: "90%",
-                        left: "50%",
-                      },
-                      type: "state-label",
-                      entity: "sensor.temperature_stefan",
-                    },
-                  ],
-                  type: "picture-elements",
-                },
-                {
-                  image: "/assets/teachingbirds/background_square.png",
-                  elements: [
-                    {
-                      style: {
-                        "--mdc-icon-size": "100%",
-                        top: "50%",
-                        left: "50%",
-                      },
-                      type: "icon",
-                      tap_action: {
-                        action: "navigate",
-                        navigation_path: "/lovelace/home_info",
-                      },
-                      icon: "mdi:car",
-                    },
-                  ],
-                  type: "picture-elements",
-                },
-              ],
-              type: "horizontal-stack",
-            },
-            {
-              cards: [
-                {
-                  show_name: false,
-                  type: "picture-entity",
-                  name: "Alarm",
-                  image: "/assets/teachingbirds/House_square.jpg",
-                  entity: "alarm_control_panel.house",
-                },
-                {
-                  name: "Roomba",
-                  image: "/assets/teachingbirds/roomba_square.jpg",
-                  show_name: false,
-                  type: "picture-entity",
-                  state_image: {
-                    "Not Today": "/assets/teachingbirds/roomba_bw_square.jpg",
-                  },
-                  entity: "input_select.roomba_mode",
-                },
-                {
-                  show_name: false,
-                  type: "picture-entity",
-                  state_image: {
-                    Mail: "/assets/teachingbirds/mailbox_square.jpg",
-                    "Package and mail":
-                      "/assets/teachingbirds/mailbox_square.jpg",
-                    Empty: "/assets/teachingbirds/mailbox_bw_square.jpg",
-                    Package: "/assets/teachingbirds/mailbox_square.jpg",
-                  },
-                  entity: "sensor.mailbox",
-                },
-                {
-                  show_name: false,
-                  state_image: {
-                    "Put out": "/assets/teachingbirds/trash_square.jpg",
-                    "Take in": "/assets/teachingbirds/trash_square.jpg",
-                  },
-                  type: "picture-entity",
-                  image: "/assets/teachingbirds/trash_bear_bw_square.jpg",
-                  entity: "sensor.trash_status",
-                },
-              ],
-              type: "horizontal-stack",
-            },
-            {
-              cards: [
-                {
-                  state_image: {
-                    Idle: "/assets/teachingbirds/washer_square.jpg",
-                    Running: "/assets/teachingbirds/laundry_running_square.jpg",
-                    Clean: "/assets/teachingbirds/laundry_clean_2_square.jpg",
-                  },
-                  entity: "input_select.washing_machine_status",
-                  type: "picture-entity",
-                  show_name: false,
-                  name: "Washer",
-                },
-                {
-                  state_image: {
-                    Idle: "/assets/teachingbirds/dryer_square.jpg",
-                    Running: "/assets/teachingbirds/clothes_drying_square.jpg",
-                    Clean: "/assets/teachingbirds/folded_clothes_square.jpg",
-                  },
-                  entity: "input_select.dryer_status",
-                  type: "picture-entity",
-                  show_name: false,
-                  name: "Dryer",
-                },
-                {
-                  image: "/assets/teachingbirds/guests_square.jpg",
-                  type: "picture-entity",
-                  show_name: false,
-                  tap_action: {
-                    action: "toggle",
-                  },
-                  entity: "input_boolean.guest_mode",
-                },
-                {
-                  image: "/assets/teachingbirds/cleaning_square.jpg",
-                  type: "picture-entity",
-                  show_name: false,
-                  tap_action: {
-                    action: "toggle",
-                  },
-                  entity: "input_boolean.cleaning_day",
-                },
-              ],
-              type: "horizontal-stack",
-            },
-          ],
-          type: "vertical-stack",
-        },
-        {
-          type: "vertical-stack",
-          cards: [
-            {
-              cards: [
-                {
-                  graph: "line",
-                  type: "sensor",
-                  entity: "sensor.temperature_bedroom",
-                },
-                {
-                  graph: "line",
-                  type: "sensor",
-                  name: "S's room",
+                  type: "state-label",
                   entity: "sensor.temperature_stefan",
                 },
               ],
-              type: "horizontal-stack",
+              type: "picture-elements",
             },
             {
-              cards: [
+              image: "/assets/teachingbirds/background_square.png",
+              elements: [
                 {
-                  graph: "line",
-                  type: "sensor",
-                  entity: "sensor.temperature_passage",
-                },
-                {
-                  graph: "line",
-                  type: "sensor",
-                  name: "Laundry",
-                  entity: "sensor.temperature_downstairs_bathroom",
+                  style: {
+                    "--mdc-icon-size": "100%",
+                    top: "50%",
+                    left: "50%",
+                  },
+                  type: "icon",
+                  tap_action: {
+                    action: "navigate",
+                    navigation_path: "/lovelace/home_info",
+                  },
+                  icon: "mdi:car",
                 },
               ],
-              type: "horizontal-stack",
+              type: "picture-elements",
+            },
+
+            {
+              show_name: false,
+              type: "picture-entity",
+              name: "Alarm",
+              image: "/assets/teachingbirds/House_square.jpg",
+              entity: "alarm_control_panel.house",
+            },
+            {
+              name: "Roomba",
+              image: "/assets/teachingbirds/roomba_square.jpg",
+              show_name: false,
+              type: "picture-entity",
+              state_image: {
+                "Not Today": "/assets/teachingbirds/roomba_bw_square.jpg",
+              },
+              entity: "input_select.roomba_mode",
+            },
+            {
+              show_name: false,
+              type: "picture-entity",
+              state_image: {
+                Mail: "/assets/teachingbirds/mailbox_square.jpg",
+                "Package and mail": "/assets/teachingbirds/mailbox_square.jpg",
+                Empty: "/assets/teachingbirds/mailbox_bw_square.jpg",
+                Package: "/assets/teachingbirds/mailbox_square.jpg",
+              },
+              entity: "sensor.mailbox",
+            },
+            {
+              show_name: false,
+              state_image: {
+                "Put out": "/assets/teachingbirds/trash_square.jpg",
+                "Take in": "/assets/teachingbirds/trash_square.jpg",
+              },
+              type: "picture-entity",
+              image: "/assets/teachingbirds/trash_bear_bw_square.jpg",
+              entity: "sensor.trash_status",
+            },
+
+            {
+              state_image: {
+                Idle: "/assets/teachingbirds/washer_square.jpg",
+                Running: "/assets/teachingbirds/laundry_running_square.jpg",
+                Clean: "/assets/teachingbirds/laundry_clean_2_square.jpg",
+              },
+              entity: "input_select.washing_machine_status",
+              type: "picture-entity",
+              show_name: false,
+              name: "Washer",
+            },
+            {
+              state_image: {
+                Idle: "/assets/teachingbirds/dryer_square.jpg",
+                Running: "/assets/teachingbirds/clothes_drying_square.jpg",
+                Clean: "/assets/teachingbirds/folded_clothes_square.jpg",
+              },
+              entity: "input_select.dryer_status",
+              type: "picture-entity",
+              show_name: false,
+              name: "Dryer",
+            },
+            {
+              image: "/assets/teachingbirds/guests_square.jpg",
+              type: "picture-entity",
+              show_name: false,
+              tap_action: {
+                action: "toggle",
+              },
+              entity: "input_boolean.guest_mode",
+            },
+            {
+              image: "/assets/teachingbirds/cleaning_square.jpg",
+              type: "picture-entity",
+              show_name: false,
+              tap_action: {
+                action: "toggle",
+              },
+              entity: "input_boolean.cleaning_day",
+            },
+          ],
+        },
+        {
+          type: "grid",
+          columns: 2,
+          cards: [
+            {
+              graph: "line",
+              type: "sensor",
+              entity: "sensor.temperature_bedroom",
+            },
+            {
+              graph: "line",
+              type: "sensor",
+              name: "S's room",
+              entity: "sensor.temperature_stefan",
+            },
+            {
+              graph: "line",
+              type: "sensor",
+              entity: "sensor.temperature_passage",
+            },
+            {
+              graph: "line",
+              type: "sensor",
+              name: "Laundry",
+              entity: "sensor.temperature_downstairs_bathroom",
             },
           ],
         },

demo/src/entrypoint.ts

@@ -1,3 +1,4 @@
+import "../../src/resources/safari-14-attachshadow-patch";
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
 import "../../src/resources/ha-style";

demo/src/stubs/template.ts

@@ -6,4 +6,11 @@ export const mockTemplate = (hass: MockHomeAssistant) => {
       body: { message: "Template dev tool does not work in the demo." },
     })
   );
+  hass.mockWS("render_template", (msg, onChange) => {
+    onChange!({
+      result: msg.template,
+      listeners: { all: false, domains: [], entities: [], time: false },
+    });
+    return () => {};
+  });
 };

gallery/src/components/demo-cards.js

@@ -5,11 +5,16 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../src/components/ha-switch";
 import "../../../src/components/ha-formfield";
 import "./demo-card";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 
 class DemoCards extends PolymerElement {
   static get template() {
     return html`
       <style>
+        #container {
+          min-height: calc(100vh - 128px);
+          background: var(--primary-background-color);
+        }
         .cards {
           display: flex;
           flex-wrap: wrap;
@@ -24,6 +29,9 @@ class DemoCards extends PolymerElement {
         .filters {
           margin-left: 60px;
         }
+        ha-formfield {
+          margin-right: 16px;
+        }
       </style>
       <app-toolbar>
         <div class="filters">
@@ -31,16 +39,21 @@ class DemoCards extends PolymerElement {
             <ha-switch checked="[[_showConfig]]" on-change="_showConfigToggled">
             </ha-switch>
           </ha-formfield>
+          <ha-formfield label="Dark theme">
+            <ha-switch on-change="_darkThemeToggled"> </ha-switch>
+          </ha-formfield>
         </div>
       </app-toolbar>
-      <div class="cards">
-        <template is="dom-repeat" items="[[configs]]">
-          <demo-card
-            config="[[item]]"
-            show-config="[[_showConfig]]"
-            hass="[[hass]]"
-          ></demo-card>
-        </template>
+      <div id="container">
+        <div class="cards">
+          <template is="dom-repeat" items="[[configs]]">
+            <demo-card
+              config="[[item]]"
+              show-config="[[_showConfig]]"
+              hass="[[hass]]"
+            ></demo-card>
+          </template>
+        </div>
       </div>
     `;
   }
@@ -59,6 +72,12 @@ class DemoCards extends PolymerElement {
   _showConfigToggled(ev) {
     this._showConfig = ev.target.checked;
   }
+
+  _darkThemeToggled(ev) {
+    applyThemesOnElement(this.$.container, { themes: {} }, "default", {
+      dark: ev.target.checked,
+    });
+  }
 }
 
 customElements.define("demo-cards", DemoCards);

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

@@ -3,7 +3,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../src/components/ha-card";
 import "../../../src/state-summary/state-card-content";
-import "./more-info-content";
+import "../../../src/dialogs/more-info/more-info-content";
 
 class DemoMoreInfo extends PolymerElement {
   static get template() {
@@ -16,15 +16,12 @@ class DemoMoreInfo extends PolymerElement {
 
         ha-card {
           width: 333px;
+          padding: 20px 24px;
         }
 
         state-card-content {
           display: block;
-          padding: 16px;
-        }
-
-        more-info-content {
-          padding: 0 16px;
+          margin-bottom: 16px;
         }
 
         pre {

gallery/src/components/more-info-content.ts

@@ -1,73 +0,0 @@
-import { HassEntity } from "home-assistant-js-websocket";
-import { property, PropertyValues, UpdatingElement } from "lit-element";
-import dynamicContentUpdater from "../../../src/common/dom/dynamic_content_updater";
-import { stateMoreInfoType } from "../../../src/common/entity/state_more_info_type";
-import "../../../src/dialogs/more-info/controls/more-info-alarm_control_panel";
-import "../../../src/dialogs/more-info/controls/more-info-automation";
-import "../../../src/dialogs/more-info/controls/more-info-camera";
-import "../../../src/dialogs/more-info/controls/more-info-climate";
-import "../../../src/dialogs/more-info/controls/more-info-configurator";
-import "../../../src/dialogs/more-info/controls/more-info-counter";
-import "../../../src/dialogs/more-info/controls/more-info-cover";
-import "../../../src/dialogs/more-info/controls/more-info-default";
-import "../../../src/dialogs/more-info/controls/more-info-fan";
-import "../../../src/dialogs/more-info/controls/more-info-group";
-import "../../../src/dialogs/more-info/controls/more-info-humidifier";
-import "../../../src/dialogs/more-info/controls/more-info-input_datetime";
-import "../../../src/dialogs/more-info/controls/more-info-light";
-import "../../../src/dialogs/more-info/controls/more-info-lock";
-import "../../../src/dialogs/more-info/controls/more-info-media_player";
-import "../../../src/dialogs/more-info/controls/more-info-person";
-import "../../../src/dialogs/more-info/controls/more-info-script";
-import "../../../src/dialogs/more-info/controls/more-info-sun";
-import "../../../src/dialogs/more-info/controls/more-info-timer";
-import "../../../src/dialogs/more-info/controls/more-info-vacuum";
-import "../../../src/dialogs/more-info/controls/more-info-water_heater";
-import "../../../src/dialogs/more-info/controls/more-info-weather";
-import { HomeAssistant } from "../../../src/types";
-
-class MoreInfoContent extends UpdatingElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
-  @property() public stateObj?: HassEntity;
-
-  private _detachedChild?: ChildNode;
-
-  protected firstUpdated(): void {
-    this.style.position = "relative";
-    this.style.display = "block";
-  }
-
-  // This is not a lit element, but an updating element, so we implement update
-  protected update(changedProps: PropertyValues): void {
-    super.update(changedProps);
-    const stateObj = this.stateObj;
-    const hass = this.hass;
-
-    if (!stateObj || !hass) {
-      if (this.lastChild) {
-        this._detachedChild = this.lastChild;
-        // Detach child to prevent it from doing work.
-        this.removeChild(this.lastChild);
-      }
-      return;
-    }
-
-    if (this._detachedChild) {
-      this.appendChild(this._detachedChild);
-      this._detachedChild = undefined;
-    }
-
-    const moreInfoType =
-      stateObj.attributes && "custom_ui_more_info" in stateObj.attributes
-        ? stateObj.attributes.custom_ui_more_info
-        : "more-info-" + stateMoreInfoType(stateObj);
-
-    dynamicContentUpdater(this, moreInfoType.toUpperCase(), {
-      hass,
-      stateObj,
-    });
-  }
-}
-
-customElements.define("more-info-content", MoreInfoContent);

gallery/src/data/media_players.ts

@@ -6,7 +6,9 @@ export const createMediaPlayerEntities = () => [
     media_content_type: "music",
     media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
     media_artist: "Technohead",
-    supported_features: 64063,
+    // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
+    // Select Source + Stop + Clear + Play + Shuffle Set + Browse Media
+    supported_features: 195135,
     entity_picture: "/images/album_cover_2.jpg",
     media_duration: 300,
     media_position: 50,
@@ -14,12 +16,15 @@ export const createMediaPlayerEntities = () => [
       // 23 seconds in
       new Date().getTime() - 23000
     ).toISOString(),
+    volume_level: 0.5,
   }),
   getEntity("media_player", "music_playing", "playing", {
     friendly_name: "Playing The Music",
     media_content_type: "music",
     media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
     media_artist: "Technohead",
+    // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
+    // Select Source + Stop + Clear + Play + Shuffle Set
     supported_features: 64063,
     entity_picture: "/images/album_cover.jpg",
     media_duration: 300,
@@ -28,6 +33,7 @@ export const createMediaPlayerEntities = () => [
       // 23 seconds in
       new Date().getTime() - 23000
     ).toISOString(),
+    volume_level: 0.5,
   }),
   getEntity("media_player", "stream_playing", "playing", {
     friendly_name: "Playing the Stream",
@@ -35,50 +41,125 @@ export const createMediaPlayerEntities = () => [
     media_title: "Epic sax guy 10 hours",
     app_name: "YouTube",
     entity_picture: "/images/frenck.jpg",
-    supported_features: 33,
+    // Pause + Next Track + Play + Browse Media
+    supported_features: 147489,
   }),
-  getEntity("media_player", "living_room", "playing", {
-    friendly_name: "Pause, No skip, tvshow",
+  getEntity("media_player", "stream_paused", "paused", {
+    friendly_name: "Paused the Stream",
+    media_content_type: "movie",
+    media_title: "Epic sax guy 10 hours",
+    app_name: "YouTube",
+    entity_picture: "/images/frenck.jpg",
+    // Pause + Next Track + Play
+    supported_features: 16417,
+  }),
+  getEntity("media_player", "stream_playing_previous", "playing", {
+    friendly_name: 'Playing the Stream (with "previous" support)',
+    media_content_type: "movie",
+    media_title: "Epic sax guy 10 hours",
+    app_name: "YouTube",
+    entity_picture: "/images/frenck.jpg",
+    // Pause + Previous Track + Play
+    supported_features: 16401,
+  }),
+  getEntity("media_player", "tv_playing", "playing", {
+    friendly_name: "Playing non-skip TV Show",
     media_content_type: "tvshow",
     media_title: "Chapter 1",
     media_series_title: "House of Cards",
     app_name: "Netflix",
     entity_picture: "/images/netflix.jpg",
+    // Pause
     supported_features: 1,
   }),
   getEntity("media_player", "sonos_idle", "idle", {
     friendly_name: "Sonos Idle",
+    // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
+    // Select Source + Stop + Clear + Play + Shuffle Set
     supported_features: 64063,
+    volume_level: 0.33,
+    is_volume_muted: true,
   }),
-  getEntity("media_player", "theater", "off", {
+  getEntity("media_player", "idle_browse_media", "idle", {
+    friendly_name: "Idle waiting for Browse Media (e.g. Spotify)",
+    // Pause + Seek + Volume Set + Previous Track + Next Track + Play Media +
+    // Select Source + Play + Shuffle Set + Browse Media
+    supported_features: 182839,
+    volume_level: 0.79,
+  }),
+  getEntity("media_player", "theater_off", "off", {
     friendly_name: "TV Off",
+    // On + Off + Play + Next + Pause
+    supported_features: 16801,
+  }),
+  getEntity("media_player", "theater_on", "on", {
+    friendly_name: "TV On",
+    // On + Off + Play + Next + Pause
+    supported_features: 16801,
+  }),
+  getEntity("media_player", "theater_off_static", "off", {
+    friendly_name: "TV Off (cannot be switched on)",
+    // Off + Next + Pause
+    supported_features: 289,
+  }),
+  getEntity("media_player", "theater_on_static", "on", {
+    friendly_name: "TV On (cannot be switched off)",
+    // On + Next + Pause
     supported_features: 161,
   }),
   getEntity("media_player", "android_cast", "playing", {
-    friendly_name: "Casting App",
+    friendly_name: "Casting App (no supported features)",
     media_title: "Android Screen Casting",
     app_name: "Screen Mirroring",
-    // supported_features: 21437,
+  }),
+  getEntity("media_player", "image_display", "playing", {
+    friendly_name: "Digital Picture Frame",
+    media_content_type: "image",
+    media_title: "Famous Painting",
+    media_artist: "Famous Artist",
+    entity_picture: "/images/sunflowers.jpg",
+    // On + Off + Browse Media
+    supported_features: 131456,
   }),
   getEntity("media_player", "unavailable", "unavailable", {
     friendly_name: "Player Unavailable",
+    // Pause + Volume Set + Volume Mute + Previous Track + Next Track +
+    // Play Media + Stop + Play
     supported_features: 21437,
   }),
   getEntity("media_player", "unknown", "unknown", {
     friendly_name: "Player Unknown",
+    // Pause + Volume Set + Volume Mute + Previous Track + Next Track +
+    // Play Media + Stop + Play
     supported_features: 21437,
   }),
+  getEntity("media_player", "playing", "playing", {
+    friendly_name: "Player Playing (no Pause support)",
+    // Volume Set + Volume Mute + Previous Track + Next Track +
+    // Play Media + Stop + Play
+    supported_features: 21436,
+    volume_level: 1,
+  }),
+  getEntity("media_player", "idle", "idle", {
+    friendly_name: "Player Idle",
+    // Pause + Volume Set + Volume Mute + Previous Track + Next Track +
+    // Play Media + Stop + Play
+    supported_features: 21437,
+    volume_level: 0,
+  }),
   getEntity("media_player", "receiver_on", "on", {
     source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
     volume_level: 0.63,
     is_volume_muted: false,
     source: "TV",
-    friendly_name: "Receiver",
+    friendly_name: "Receiver (selectable sources)",
+    // Volume Set + Volume Mute + On + Off + Select Source + Play + Sound Mode
     supported_features: 84364,
   }),
   getEntity("media_player", "receiver_off", "off", {
     source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
-    friendly_name: "Receiver",
+    friendly_name: "Receiver (selectable sources)",
+    // Volume Set + Volume Mute + On + Off + Select Source + Play + Sound Mode
     supported_features: 84364,
   }),
 ];

gallery/src/demos/demo-hui-alarm-panel-card.ts

@@ -15,6 +15,10 @@ const ENTITIES = [
   getEntity("alarm_control_panel", "unavailable", "unavailable", {
     friendly_name: "Alarm",
   }),
+  getEntity("alarm_control_panel", "alarm_code", "disarmed", {
+    friendly_name: "Alarm",
+    code_format: "number",
+  }),
 ];
 
 const CONFIGS = [
@@ -30,7 +34,14 @@ const CONFIGS = [
     config: `
 - type: alarm-panel
   entity: alarm_control_panel.alarm_armed
-  title: My Alarm
+  name: My Alarm
+    `,
+  },
+  {
+    heading: "Code Example",
+    config: `
+- type: alarm-panel
+  entity: alarm_control_panel.alarm_code
     `,
   },
   {
@@ -83,8 +94,12 @@ class DemoAlarmPanelEntity extends PolymerElement {
 
   public ready() {
     super.ready();
+    this._setupDemo();
+  }
+
+  private async _setupDemo() {
     const hass = provideHass(this.$.demos);
-    hass.updateTranslations(null, "en");
+    await hass.updateTranslations(null, "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/demos/demo-hui-entity-button-card.ts

@@ -98,4 +98,4 @@ class DemoButtonEntity extends PolymerElement {
   }
 }
 
-customElements.define("demo-hui-button-card", DemoButtonEntity);
+customElements.define("demo-hui-entity-button-card", DemoButtonEntity);

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

@@ -8,6 +8,7 @@ import "../components/demo-cards";
 const ENTITIES = [
   getEntity("sensor", "brightness", "12", {}),
   getEntity("plant", "bonsai", "ok", {}),
+  getEntity("sensor", "not_working", "unavailable", {}),
   getEntity("sensor", "outside_humidity", "54", {
     unit_of_measurement: "%",
   }),
@@ -74,6 +75,13 @@ const CONFIGS = [
   entity: plant.bonsai
     `,
   },
+  {
+    heading: "Unavailable entity",
+    config: `
+- type: gauge
+  entity: sensor.not_working
+    `,
+  },
 ];
 
 class DemoGaugeEntity extends PolymerElement {

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

@@ -1,6 +1,8 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { mockTemplate } from "../../../demo/src/stubs/template";
+import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 
 const CONFIGS = [
@@ -254,7 +256,7 @@ const CONFIGS = [
 
 class DemoMarkdown extends PolymerElement {
   static get template() {
-    return html` <demo-cards configs="[[_configs]]"></demo-cards> `;
+    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
   }
 
   static get properties() {
@@ -265,6 +267,12 @@ class DemoMarkdown extends PolymerElement {
       },
     };
   }
+
+  public ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    mockTemplate(hass);
+  }
 }
 
 customElements.define("demo-hui-markdown-card", DemoMarkdown);

gallery/src/demos/demo-hui-media-control-card.ts

@@ -7,40 +7,61 @@ import { createMediaPlayerEntities } from "../data/media_players";
 
 const CONFIGS = [
   {
-    heading: "Paused music",
+    heading: "Paused Music",
     config: `
   - type: media-control
     entity: media_player.music_paused
     `,
   },
   {
-    heading: "Playing music",
+    heading: "Playing Music",
     config: `
   - type: media-control
     entity: media_player.music_playing
     `,
   },
   {
-    heading: "Playing stream",
+    heading: "Playing Stream",
     config: `
   - type: media-control
     entity: media_player.stream_playing
     `,
   },
   {
-    heading: "Pause, No skip, tvshow",
+    heading: "Paused Stream",
     config: `
   - type: media-control
-    entity: media_player.living_room
+    entity: media_player.stream_paused
     `,
   },
   {
-    heading: "Screen casting",
+    heading: 'Playing Stream (with "previous" support)',
+    config: `
+  - type: media-control
+    entity: media_player.stream_playing_previous
+    `,
+  },
+  {
+    heading: "Playing non-skip TV Show",
+    config: `
+  - type: media-control
+    entity: media_player.tv_playing
+    `,
+  },
+  {
+    heading: "Screen Casting",
     config: `
   - type: media-control
     entity: media_player.android_cast
     `,
   },
+  {
+    heading: "Digital Picture Frame",
+    config: `
+  - type: media-control
+    entity: media_player.image_display
+    `,
+  },
   {
     heading: "Sonos Idle",
     config: `
@@ -48,11 +69,53 @@ const CONFIGS = [
     entity: media_player.sonos_idle
     `,
   },
+  {
+    heading: "Idle waiting for Browse Media",
+    config: `
+  - type: media-control
+    entity: media_player.idle_browse_media
+    `,
+  },
   {
     heading: "Player Off",
     config: `
   - type: media-control
-    entity: media_player.theater
+    entity: media_player.theater_off
+    `,
+  },
+  {
+    heading: "Player On",
+    config: `
+  - type: media-control
+    entity: media_player.theater_on
+    `,
+  },
+  {
+    heading: "Player Off (cannot be switched on)",
+    config: `
+  - type: media-control
+    entity: media_player.theater_off_static
+    `,
+  },
+  {
+    heading: "Player On (cannot be switched off)",
+    config: `
+  - type: media-control
+    entity: media_player.theater_on_static
+    `,
+  },
+  {
+    heading: "Player Idle",
+    config: `
+  - type: media-control
+    entity: media_player.idle
+    `,
+  },
+  {
+    heading: "Player Playing",
+    config: `
+  - type: media-control
+    entity: media_player.playing
     `,
   },
   {
@@ -70,14 +133,14 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Receiver On",
+    heading: "Receiver On (selectable sources)",
     config: `
   - type: media-control
     entity: media_player.receiver_on
     `,
   },
   {
-    heading: "Receiver Off",
+    heading: "Receiver Off (selectable sources)",
     config: `
   - type: media-control
     entity: media_player.receiver_off

gallery/src/demos/demo-hui-media-player-rows.ts

@@ -12,23 +12,45 @@ const CONFIGS = [
 - type: entities
   entities:
     - entity: media_player.music_paused
-      name: Paused music
+      name: Paused Music
     - entity: media_player.music_playing
-      name: Playing music
+      name: Playing Music
     - entity: media_player.stream_playing
-      name: Paused, no play
-    - entity: media_player.living_room
-      name: Pause, No skip, tvshow
+      name: Playing Stream
+    - entity: media_player.stream_paused
+      name: Paused Stream
+    - entity: media_player.stream_playing_previous
+      name: Playing Stream (with "previous" support)
+    - entity: media_player.tv_playing
+      name: Playing non-skip TV Show
     - entity: media_player.android_cast
       name: Screen casting
+    - entity: media_player.image_display
+      name: Digital Picture Frame  
     - entity: media_player.sonos_idle
-      name: Chromcast Idle
-    - entity: media_player.theater
+      name: Sonos Idle  
+    - entity: media_player.idle_browse_media
+      name: Idle waiting for Browse Media
+    - entity: media_player.theater_off
       name: Player Off
+    - entity: media_player.theater_on
+      name: Player On
+    - entity: media_player.theater_off_static
+      name: Player Off (cannot be switched on)
+    - entity: media_player.theater_on_static
+      name: Player On (cannot be switched off)  
+    - entity: media_player.idle
+      name: Player Idle
+    - entity: media_player.playing
+      name: Player Playing
     - entity: media_player.unavailable
       name: Player Unavailable
     - entity: media_player.unknown
       name: Player Unknown
+    - entity: media_player.receiver_on
+      name: Receiver On (selectable sources)
+    - entity: media_player.receiver_off
+      name: Receiver Off (selectable sources)
     `,
   },
 ];

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

@@ -1,6 +1,7 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { mockHistory } from "../../../demo/src/stubs/history";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -36,6 +37,10 @@ const ENTITIES = [
     battery: 71,
     friendly_name: "Home Boy",
   }),
+  getEntity("sensor", "illumination", "23", {
+    friendly_name: "Illumination",
+    unit_of_measurement: "lx",
+  }),
 ];
 
 const CONFIGS = [
@@ -89,6 +94,42 @@ const CONFIGS = [
       entity: light.bed_light
     `,
   },
+  {
+    heading: "Default Grid",
+    config: `
+- type: grid
+  cards:
+    - type: entity
+      entity: light.kitchen_lights
+    - type: entity
+      entity: light.bed_light
+    - type: entity
+      entity: device_tracker.demo_paulus
+    - type: sensor
+      entity: sensor.illumination
+      graph: line
+    - type: entity
+      entity: device_tracker.demo_anne_therese
+    `,
+  },
+  {
+    heading: "Non-square Grid with 2 columns",
+    config: `
+- type: grid
+  columns: 2
+  square: false
+  cards:
+    - type: entity
+      entity: light.kitchen_lights
+    - type: entity
+      entity: light.bed_light
+    - type: entity
+      entity: device_tracker.demo_paulus
+    - type: sensor
+      entity: sensor.illumination
+      graph: line
+    `,
+  },
 ];
 
 class DemoStack extends PolymerElement {
@@ -110,6 +151,7 @@ class DemoStack extends PolymerElement {
     const hass = provideHass(this.$.demos);
     hass.updateTranslations(null, "en");
     hass.addEntities(ENTITIES);
+    mockHistory(hass);
   }
 }
 

gallery/src/demos/demo-more-info-light.ts

@@ -6,7 +6,7 @@ import { SUPPORT_BRIGHTNESS } from "../../../src/data/light";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-more-infos";
-import "../components/more-info-content";
+import "../../../src/dialogs/more-info/more-info-content";
 
 const ENTITIES = [
   getEntity("light", "bed_light", "on", {
@@ -40,8 +40,12 @@ class DemoMoreInfoLight extends PolymerElement {
 
   public ready() {
     super.ready();
+    this._setupDemo();
+  }
+
+  private async _setupDemo() {
     const hass = provideHass(this);
-    hass.updateTranslations(null, "en");
+    await hass.updateTranslations(null, "en");
     hass.addEntities(ENTITIES);
   }
 }

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

@@ -23,9 +23,9 @@ import { hassioStyle } from "../resources/hassio-style";
 class HassioAddonRepositoryEl extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public repo!: HassioAddonRepository;
+  @property({ attribute: false }) public repo!: HassioAddonRepository;
 
-  @property() public addons!: HassioAddonInfo[];
+  @property({ attribute: false }) public addons!: HassioAddonInfo[];
 
   @property() public filter!: string;
 
@@ -78,18 +78,18 @@ class HassioAddonRepositoryEl extends LitElement {
                     .title=${addon.name}
                     .description=${addon.description}
                     .available=${addon.available}
-                    .icon=${addon.installed && addon.installed !== addon.version
+                    .icon=${addon.installed && addon.update_available
                       ? mdiArrowUpBoldCircle
                       : mdiPuzzle}
                     .iconTitle=${addon.installed
-                      ? addon.installed !== addon.version
+                      ? addon.update_available
                         ? "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
+                      ? addon.update_available
                         ? "update"
                         : "installed"
                       : !addon.available
@@ -104,7 +104,7 @@ class HassioAddonRepositoryEl extends LitElement {
                       : undefined}
                     .showTopbar=${addon.installed || !addon.available}
                     .topbarClass=${addon.installed
-                      ? addon.installed !== addon.version
+                      ? addon.update_available
                         ? "update"
                         : "installed"
                       : !addon.available

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

@@ -11,6 +11,7 @@ import {
   PropertyValues,
 } from "lit-element";
 import { html, TemplateResult } from "lit-html";
+import { atLeastVersion } from "../../../src/common/config/version";
 import "../../../src/common/search/search-input";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-svg-icon";
@@ -24,6 +25,7 @@ import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-tabs-subpage";
 import { HomeAssistant, Route } from "../../../src/types";
+import { showRegistriesDialog } from "../dialogs/registries/show-dialog-registries";
 import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories";
 import { supervisorTabs } from "../hassio-tabs";
 import "./hassio-addon-repository";
@@ -98,14 +100,14 @@ class HassioAddonStore extends LitElement {
         main-page
         .tabs=${supervisorTabs}
       >
-        <span slot="header">Add-on store</span>
+        <span slot="header">Add-on Store</span>
         <ha-button-menu
           corner="BOTTOM_START"
           slot="toolbar-icon"
           @action=${this._handleAction}
         >
           <mwc-icon-button slot="trigger" alt="menu">
-            <ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
+            <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
           </mwc-icon-button>
           <mwc-list-item>
             Repositories
@@ -113,6 +115,12 @@ class HassioAddonStore extends LitElement {
           <mwc-list-item>
             Reload
           </mwc-list-item>
+          ${this.hass.userData?.showAdvanced &&
+          atLeastVersion(this.hass.config.version, 0, 117)
+            ? html`<mwc-list-item>
+                Registries
+              </mwc-list-item>`
+            : ""}
         </ha-button-menu>
         ${repos.length === 0
           ? html`<hass-loading-screen no-toolbar></hass-loading-screen>`
@@ -157,6 +165,9 @@ class HassioAddonStore extends LitElement {
       case 1:
         this.refreshData();
         break;
+      case 2:
+        this._manageRegistries();
+        break;
     }
   }
 
@@ -173,6 +184,10 @@ class HassioAddonStore extends LitElement {
     });
   }
 
+  private async _manageRegistries() {
+    showRegistriesDialog(this);
+  }
+
   private async _loadData() {
     try {
       const addonsInfo = await fetchHassioAddonsInfo(this.hass);

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -39,13 +39,11 @@ class HassioAddonConfig extends LitElement {
 
   @property({ type: Boolean }) private _configHasChanged = false;
 
-  @query("ha-yaml-editor") private _editor!: HaYamlEditor;
+  @property({ type: Boolean }) private _valid = true;
+
+  @query("ha-yaml-editor", true) private _editor!: HaYamlEditor;
 
   protected render(): TemplateResult {
-    const editor = this._editor;
-    // If editor not rendered, don't show the error.
-    const valid = editor ? editor.isValid : true;
-
     return html`
       <h1>${this.addon.name}</h1>
       <ha-card header="Configuration">
@@ -54,7 +52,7 @@ class HassioAddonConfig extends LitElement {
             @value-changed=${this._configChanged}
           ></ha-yaml-editor>
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
-          ${valid ? "" : html` <div class="errors">Invalid YAML</div> `}
+          ${this._valid ? "" : html` <div class="errors">Invalid YAML</div> `}
         </div>
         <div class="card-actions">
           <ha-progress-button class="warning" @click=${this._resetTapped}>
@@ -62,7 +60,7 @@ class HassioAddonConfig extends LitElement {
           </ha-progress-button>
           <ha-progress-button
             @click=${this._saveTapped}
-            .disabled=${!this._configHasChanged || !valid}
+            .disabled=${!this._configHasChanged || !this._valid}
           >
             Save
           </ha-progress-button>
@@ -78,9 +76,9 @@ class HassioAddonConfig extends LitElement {
     }
   }
 
-  private _configChanged(): void {
+  private _configChanged(ev): void {
     this._configHasChanged = true;
-    this.requestUpdate();
+    this._valid = ev.detail.isValid;
   }
 
   private async _resetTapped(ev: CustomEvent): Promise<void> {
@@ -175,7 +173,7 @@ class HassioAddonConfig extends LitElement {
         }
         iron-autogrow-textarea {
           width: 100%;
-          font-family: monospace;
+          font-family: var(--code-font-family, monospace);
         }
         .syntaxerror {
           color: var(--error-color);