Merge pull request #1049 from dermotduffy/screenful-fix

Fix expanded mode / fullscreen interactions

src/card.ts

@@ -1441,10 +1441,11 @@ class FrigateCard extends LitElement {
           window.open(url);
         }
         break;
+      case 'expand':
+        this._setExpand(!this._expand);
+        break;
       case 'fullscreen':
-        if (screenfull.isEnabled) {
-          screenfull.toggle(this);
-        }
+        this._toggleFullscreen();
         break;
       case 'menu_toggle':
         // This is a rare code path: this would only be used if someone has a
@@ -1488,9 +1489,6 @@ class FrigateCard extends LitElement {
       case 'diagnostics':
         this._diagnostics();
         break;
-      case 'expand':
-        this._setExpand(!this._expand);
-        break;
       default:
         console.warn(`Frigate card received unknown card action: ${action}`);
     }
@@ -1926,10 +1924,23 @@ class FrigateCard extends LitElement {
   }
 
   protected _setExpand(expand: boolean): void {
+    if (screenfull.isEnabled && screenfull.isFullscreen) {
+      // Fullscreen and expanded mode are mutually exclusive.
+      screenfull.exit();
+    }
+
     this._expand = expand;
     this._generateConditionState();
   }
 
+  protected _toggleFullscreen(): void {
+    if (screenfull.isEnabled) {
+      // Fullscreen and expanded mode are mutually exclusive.
+      this._expand = false;
+      screenfull.toggle(this);
+    }
+  }
+
   protected _renderInDialogIfNecessary(contents: TemplateResult): TemplateResult | void {
     if (this._expand) {
       return html` <web-dialog

src/scss/card.scss

@@ -184,4 +184,8 @@ web-dialog {
 
 web-dialog::part(dialog) {
   aspect-ratio: var(--frigate-card-expand-aspect-ratio);
+
+  // Fixes to render the dialog correctly in Safari.
+  border-radius: 0px;
+  background: transparent;
 }