From fe2abfad86ccbd0cad04b54903e33a007249c179 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sat, 1 Apr 2023 17:03:16 -0700
Subject: [PATCH] Fix expanded mode / fullscreen interactions.

---
 src/card.ts        | 23 +++++++++++++++++------
 src/scss/card.scss |  4 ++++
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/card.ts b/src/card.ts
index 2d57109d..57904311 100644
--- a/src/card.ts
+++ b/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
diff --git a/src/scss/card.scss b/src/scss/card.scss
index 81e97b8b..66736eed 100644
--- a/src/scss/card.scss
+++ b/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;
 }
\ No newline at end of file