Reuse the Frigate integration devcontainer

.devcontainer/config/configuration.yaml

@@ -0,0 +1,28 @@
+---
+default_config:
+
+logger:
+  default: error
+  logs:
+    custom_components.frigate: debug
+    homeassistant.components.mqtt: error
+
+downloader:
+  download_dir: www
+
+homeassistant:
+  name: Home
+  latitude: 0
+  longitude: 0
+  elevation: 0
+  unit_system: metric
+  currency: USD
+  time_zone: 'America/Los_Angeles'
+
+demo:
+
+lovelace:
+  mode: yaml
+  resources:
+    - url: http://localhost:5001/frigate-hass-card.js
+      type: module

.devcontainer/config/ui-lovelace.yaml

@@ -0,0 +1,15 @@
+views:
+  - cards:
+      - type: custom:frigate-card
+        name: Frigate Card with Frigate Camera
+        cameras:
+          - camera_entity: camera.demo
+            live_provider: frigate-jsmpeg
+            id: camera_demo_jsmpeg
+          - camera_entity: camera.demo
+            live_provider: ha
+            id: camera_demo_ha
+      - type: custom:frigate-card
+        name: Frigate Card with non-Frigate Camera
+        cameras:
+          - camera_entity: camera.demo_camera

.devcontainer/configuration.yaml

@@ -1,7 +0,0 @@
-default_config:
-lovelace:
-  mode: yaml
-  resources:
-    - url: http://127.0.0.1:5000/frigate-hass-card.js
-      type: module
-demo:

.devcontainer/devcontainer.json

@@ -1,17 +1,16 @@
 // See https://aka.ms/vscode-remote/devcontainer.json for format details.
 {
-  "image": "ghcr.io/ludeeus/devcontainer/generic:latest",
+  "dockerComposeFile": "docker-compose.yml",
-  "forwardPorts": [5000, 8123],
+  "service": "dev",
+  "workspaceFolder": "/workspace",
+  "shutdownAction": "stopCompose",
   "portsAttributes": {
-    "5000": {
+    "5001": {
       "label": "Rollup",
       "onAutoForward": "silent"
-    },
-    "8123": {
-      "label": "Home Assistant",
-      "onAutoForward": "notify"
     }
   },
+  "initializeCommand": "git submodule update --init",
   "postCreateCommand": "yarn install",
   "extensions": [
     "github.vscode-pull-request-github",

.devcontainer/docker-compose.yml

@@ -0,0 +1,27 @@
+---
+version: '3'
+services:
+  dev:
+    user: node
+    image: mcr.microsoft.com/vscode/devcontainers/javascript-node:0-16
+    ports:
+      # Rollup
+      - 5001:5001
+    volumes:
+      - ..:/workspace:cached
+    command: [sleep, infinity]
+  hass:
+    extends:
+      file: ./frigate-hass-integration/docker-compose.yml
+      service: hass
+    volumes:
+      - ./config/ui-lovelace.yaml:/config/ui-lovelace.yaml:ro
+      - ./config/configuration.yaml:/config/configuration.yaml:ro
+  frigate:
+    extends:
+      file: ./frigate-hass-integration/docker-compose.yml
+      service: frigate
+  mqtt:
+    extends:
+      file: ./frigate-hass-integration/docker-compose.yml
+      service: mqtt

.devcontainer/ui-lovelace.yaml

@@ -1,6 +0,0 @@
-views:
-  - cards:
-      - type: custom:frigate-card
-        name: Frigate Card Development
-        cameras:
-          - camera_entity: camera.demo_camera

.gitignore

@@ -2,3 +2,6 @@
 /.rpt2_cache/
 package-lock.json
 /dist
+
+.env
+.envrc

.gitmodules

@@ -0,0 +1,4 @@
+[submodule "frigate-hass-integration"]
+	path = .devcontainer/frigate-hass-integration
+	url = https://github.com/blakeblackshear/frigate-hass-integration
+	branch = master

.vscode/launch.json

@@ -7,7 +7,8 @@
       "name": "Launch Chrome against Home Assistant",
       "url": "http://localhost:8123",
       "webRoot": "${workspaceFolder}/dist",
-      "preLaunchTask": "Rollup & Home Assistant"
+      "preLaunchTask": "Rollup",
+      "resolveSourceMapLocations": ["http://localhost:5001/**"]
     }
   ]
 }

.vscode/tasks.json

@@ -21,32 +21,6 @@
         }
       },
       "isBackground": true
-    },
-    {
-      "label": "Home Assistant",
-      "type": "shell",
-      "command": "container start",
-      "problemMatcher": {
-        "pattern": [
-          {
-            "regexp": ".",
-            "file": 1,
-            "location": 2,
-            "message": 3
-          }
-        ],
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": ".",
-          "endsPattern": "."
-        }
-      },
-      "isBackground": true
-    },
-    {
-      "label": "Rollup & Home Assistant",
-      "dependsOn": ["Rollup", "Home Assistant"],
-      "problemMatcher": []
     }
   ]
 }

rollup.config.js

@@ -18,7 +18,7 @@ const dev = watch || process.env.DEV === 'true' || process.env.DEV === '1';
 const serveopts = {
   contentBase: ['./dist'],
   host: '0.0.0.0',
-  port: 5000,
+  port: 5001,
   allowCrossOrigin: true,
   headers: {
     'Access-Control-Allow-Origin': '*',

src/card.ts

@@ -5,7 +5,7 @@ import {
   LitElement,
   PropertyValues,
   TemplateResult,
-  unsafeCSS
+  unsafeCSS,
 } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -20,7 +20,7 @@ import {
   ConditionState,
   conditionStateRequestHandler,
   getOverriddenConfig,
-  getOverridesByKey
+  getOverridesByKey,
 } from './card-condition.js';
 import './components/elements.js';
 import { FrigateCardElements } from './components/elements.js';
@@ -41,7 +41,7 @@ import {
   CAMERA_BIRDSEYE,
   CARD_VERSION,
   MEDIA_PLAYER_SUPPORT_BROWSE_MEDIA,
-  REPO_URL
+  REPO_URL,
 } from './const.js';
 import './editor.js';
 import { getLanguage, localize } from './localize/localize.js';
@@ -66,14 +66,14 @@ import {
   MEDIA_TYPE_VIDEO,
   MenuButton,
   Message,
-  RawFrigateCardConfig
+  RawFrigateCardConfig,
 } from './types.js';
 import {
   convertActionToFrigateCardCustomAction,
   createFrigateCardCustomAction,
   frigateCardHandleAction,
   frigateCardHasAction,
-  getActionConfigGivenAction
+  getActionConfigGivenAction,
 } from './utils/action.js';
 import { contentsChanged } from './utils/basic.js';
 import { getCameraIcon, getCameraID, getCameraTitle } from './utils/camera.js';
@@ -84,7 +84,7 @@ import {
   homeAssistantSignPath,
   isHassDifferent,
   isTriggeredState,
-  sideLoadHomeAssistantElements
+  sideLoadHomeAssistantElements,
 } from './utils/ha';
 import { getEventID } from './utils/ha/browse-media.js';
 import { DeviceList, getAllDevices } from './utils/ha/device-registry.js';
@@ -92,7 +92,7 @@ import {
   ExtendedEntityCache,
   getAllEntities,
   getExtendedEntities,
-  getExtendedEntity
+  getExtendedEntity,
 } from './utils/ha/entity-registry.js';
 import { ResolvedMediaCache } from './utils/ha/resolved-media.js';
 import { supportsFeature } from './utils/ha/update.js';