Upload folder using huggingface_hub

README.md

@@ -10,7 +10,7 @@ app_file: space.py
 ---
 
 # `gradio_mediagallery`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_mediagallery"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a><p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_mediagallery'>Component GitHub Code</a></span></p>
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.2%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_mediagallery"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a><p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_mediagallery'>Component GitHub Code</a></span></p>
 
 Python library for easily interacting with trained machine learning models
 
@@ -19,7 +19,6 @@ Python library for easily interacting with trained machine learning models
 ```bash
 pip install gradio_mediagallery gradio_folderexplorer
 ```
-
 ## Usage
 
 ```python
@@ -28,8 +27,7 @@ import gradio as gr
 from gradio_folderexplorer import FolderExplorer
 from gradio_folderexplorer.helpers import load_media_from_folder
 from gradio_mediagallery import MediaGallery
-from gradio_mediagallery.helpers import extract_metadata, transfer_metadata
-import os
+from gradio_mediagallery.helpers import transfer_metadata
 
 # Configuration constant for the root directory containing media files
 ROOT_DIR_PATH = "./src/examples"
@@ -54,7 +52,7 @@ def handle_load_metadata(image_data: gr.EventData) -> List[Any]:
     )
 
 # UI layout and logic
-with gr.Blocks() as demo:
+with gr.Blocks(theme=gr.themes.Ocean()) as demo:
     """
     A Gradio interface for browsing and displaying media files with metadata extraction.
     """

app.py

@@ -3,8 +3,7 @@ import gradio as gr
 from gradio_folderexplorer import FolderExplorer
 from gradio_folderexplorer.helpers import load_media_from_folder
 from gradio_mediagallery import MediaGallery
-from gradio_mediagallery.helpers import extract_metadata, transfer_metadata
-import os
+from gradio_mediagallery.helpers import transfer_metadata
 
 # Configuration constant for the root directory containing media files
 ROOT_DIR_PATH = "./src/examples"
@@ -29,7 +28,7 @@ def handle_load_metadata(image_data: gr.EventData) -> List[Any]:
     )
 
 # UI layout and logic
-with gr.Blocks() as demo:
+with gr.Blocks(theme=gr.themes.Ocean()) as demo:
     """
     A Gradio interface for browsing and displaying media files with metadata extraction.
     """

space.py

@@ -43,8 +43,7 @@ import gradio as gr
 from gradio_folderexplorer import FolderExplorer
 from gradio_folderexplorer.helpers import load_media_from_folder
 from gradio_mediagallery import MediaGallery
-from gradio_mediagallery.helpers import extract_metadata, transfer_metadata
-import os
+from gradio_mediagallery.helpers import transfer_metadata
 
 # Configuration constant for the root directory containing media files
 ROOT_DIR_PATH = "./src/examples"
@@ -69,7 +68,7 @@ def handle_load_metadata(image_data: gr.EventData) -> List[Any]:
     )
 
 # UI layout and logic
-with gr.Blocks() as demo:
+with gr.Blocks(theme=gr.themes.Ocean()) as demo:
     \"\"\"
     A Gradio interface for browsing and displaying media files with metadata extraction.
     \"\"\"

src/README.md

@@ -10,7 +10,7 @@ app_file: space.py
 ---
 
 # `gradio_mediagallery`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_mediagallery"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a><p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_mediagallery'>Component GitHub Code</a></span></p>
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.2%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_mediagallery"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a><p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_mediagallery'>Component GitHub Code</a></span></p>
 
 Python library for easily interacting with trained machine learning models
 
@@ -19,7 +19,6 @@ Python library for easily interacting with trained machine learning models
 ```bash
 pip install gradio_mediagallery gradio_folderexplorer
 ```
-
 ## Usage
 
 ```python
@@ -28,8 +27,7 @@ import gradio as gr
 from gradio_folderexplorer import FolderExplorer
 from gradio_folderexplorer.helpers import load_media_from_folder
 from gradio_mediagallery import MediaGallery
-from gradio_mediagallery.helpers import extract_metadata, transfer_metadata
-import os
+from gradio_mediagallery.helpers import transfer_metadata
 
 # Configuration constant for the root directory containing media files
 ROOT_DIR_PATH = "./src/examples"
@@ -54,7 +52,7 @@ def handle_load_metadata(image_data: gr.EventData) -> List[Any]:
     )
 
 # UI layout and logic
-with gr.Blocks() as demo:
+with gr.Blocks(theme=gr.themes.Ocean()) as demo:
     """
     A Gradio interface for browsing and displaying media files with metadata extraction.
     """

src/backend/gradio_mediagallery/templates/component/index.js

@@ -20125,7 +20125,7 @@ function JS(r, e = {}) {
   return `${XS}=${t}`;
 }
 const Nc = /CMCD=[^&#]+/;
-function eb(r, e, t) {
+function e1(r, e, t) {
   const i = JS(e, t);
   if (!i)
     return r;
@@ -20134,7 +20134,7 @@ function eb(r, e, t) {
   const n = r.includes("?") ? "&" : "?";
   return `${r}${n}${i}`;
 }
-class tb {
+class t1 {
   constructor(e) {
     this.hls = void 0, this.config = void 0, this.media = void 0, this.sid = void 0, this.cid = void 0, this.useHeaders = !1, this.includeKeys = void 0, this.initialized = !1, this.starved = !1, this.buffering = !0, this.audioBuffer = void 0, this.videoBuffer = void 0, this.onWaiting = () => {
       this.initialized && (this.starved = !0), this.buffering = !0;
@@ -20219,7 +20219,7 @@ class tb {
     const s = {
       baseUrl: e.url
     };
-    this.useHeaders ? (e.headers || (e.headers = {}), YS(e.headers, t, s)) : e.url = eb(e.url, t, s);
+    this.useHeaders ? (e.headers || (e.headers = {}), YS(e.headers, t, s)) : e.url = e1(e.url, t, s);
   }
   getNextFrag(e) {
     var t;
@@ -20342,8 +20342,8 @@ class tb {
     };
   }
 }
-const ib = 3e5;
-class nb extends Kt {
+const i1 = 3e5;
+class n1 extends Kt {
   constructor(e) {
     super("content-steering", e.logger), this.hls = void 0, this.loader = null, this.uri = null, this.pathwayId = ".", this._pathwayPriority = null, this.timeToLoad = 300, this.reloadTimer = -1, this.updated = 0, this.started = !1, this.enabled = !0, this.levels = null, this.audioTracks = null, this.subtitleTracks = null, this.penalizedPathways = {}, this.hls = e, this.registerListeners();
   }
@@ -20436,7 +20436,7 @@ class nb extends Kt {
     let t;
     const i = this.penalizedPathways, n = performance.now();
     Object.keys(i).forEach((s) => {
-      n - i[s] > ib && delete i[s];
+      n - i[s] > i1 && delete i[s];
     });
     for (let s = 0; s < e.length; s++) {
       const a = e[s];
@@ -20821,7 +20821,7 @@ class xn extends Kt {
       mediaKeySessions: t
     } = this;
     for (let i = 0; i < t.length; i++) {
-      const n = sb(e, t[i]);
+      const n = s1(e, t[i]);
       if (n)
         return n;
     }
@@ -21256,7 +21256,7 @@ function Bs(r) {
     throw new Error("keyId is null");
   return ot(r.keyId);
 }
-function sb(r, e) {
+function s1(r, e) {
   if (r.keyId && e.mediaKeysSession.keyStatuses.has(r.keyId))
     return e.mediaKeysSession.keyStatuses.get(r.keyId);
   if (r.matches(e.decryptdata))
@@ -21276,7 +21276,7 @@ function Gc(r, e) {
     decryptdata: e
   }, t ? "HDCP level output restricted" : `key status changed to "${r}"`);
 }
-class rb {
+class r1 {
   constructor(e) {
     this.hls = void 0, this.isVideoPlaybackQualityAvailable = !1, this.timer = void 0, this.media = null, this.lastTime = void 0, this.lastDroppedFrames = 0, this.lastDecodedFrames = 0, this.streamController = void 0, this.hls = e, this.registerListeners();
   }
@@ -21368,13 +21368,13 @@ function Tn(r, e) {
 function Lo(r, e, t, i) {
   const n = r.mode;
   if (n === "disabled" && (r.mode = "hidden"), r.cues && r.cues.length > 0) {
-    const s = ob(r.cues, e, t);
+    const s = o1(r.cues, e, t);
     for (let a = 0; a < s.length; a++)
       (!i || i(s[a])) && r.removeCue(s[a]);
   }
   n === "disabled" && (r.mode = n);
 }
-function ab(r, e) {
+function a1(r, e) {
   if (e <= r[0].startTime)
     return 0;
   const t = r.length - 1;
@@ -21390,8 +21390,8 @@ function ab(r, e) {
       return s;
   return r[i].startTime - e < e - r[n].startTime ? i : n;
 }
-function ob(r, e, t) {
-  const i = [], n = ab(r, e);
+function o1(r, e, t) {
+  const i = [], n = a1(r, e);
   if (n > -1)
     for (let s = n, a = r.length; s < a; s++) {
       const o = r[s];
@@ -21410,7 +21410,7 @@ function cr(r) {
   }
   return e;
 }
-class lb extends El {
+class l1 extends El {
   constructor(e) {
     super(e, "subtitle-track-controller"), this.media = null, this.tracks = [], this.groupIds = null, this.tracksInGroup = [], this.trackId = -1, this.currentTrack = null, this.selectDefaultTrack = !0, this.queuedDefaultTrack = -1, this.useTextTrackPolling = !1, this.subtitlePollingInterval = -1, this._subtitleDisplay = !0, this.asyncPollTrackChange = () => this.pollTrackChange(0), this.onTextTracksChanged = () => {
       if (this.useTextTrackPolling || self.clearInterval(this.subtitlePollingInterval), !this.media || !this.hls.config.renderTextTracksNatively)
@@ -21681,7 +21681,7 @@ class lb extends El {
     this.loadPlaylist(d);
   }
 }
-function ub() {
+function u1() {
   try {
     return crypto.randomUUID();
   } catch {
@@ -21707,10 +21707,10 @@ const Ln = 0.025;
 let Cr = /* @__PURE__ */ function(r) {
   return r[r.Point = 0] = "Point", r[r.Range = 1] = "Range", r;
 }({});
-function cb(r, e, t) {
+function c1(r, e, t) {
   return `${r.identifier}-${t + 1}-${Qn(e)}`;
 }
-class db {
+class d1 {
   constructor(e, t) {
     this.base = void 0, this._duration = null, this._timelineStart = null, this.appendInPlaceDisabled = void 0, this.appendInPlaceStarted = void 0, this.dateRange = void 0, this.hasPlayed = !1, this.cumulativeDuration = 0, this.resumeOffset = NaN, this.playoutLimit = NaN, this.restrictions = {
       skip: !1,
@@ -21829,7 +21829,7 @@ class db {
     return this.assetList.length > 0 || this.assetListResponse !== null;
   }
   toString() {
-    return hb(this);
+    return h1(this);
   }
 }
 function Ba(r, e) {
@@ -21844,14 +21844,14 @@ function Na(r, e) {
     var t;
   return e;
 }
-function hb(r) {
+function h1(r) {
   return `["${r.identifier}" ${r.cue.pre ? "<pre>" : r.cue.post ? "<post>" : ""}${r.timelineStart.toFixed(2)}-${r.resumeTime.toFixed(2)}]`;
 }
 function bn(r) {
   const e = r.timelineStart, t = r.duration || 0;
   return `["${r.identifier}" ${e.toFixed(2)}-${(e + t).toFixed(2)}]`;
 }
-class fb {
+class f1 {
   constructor(e, t, i, n) {
     this.hls = void 0, this.interstitial = void 0, this.assetItem = void 0, this.tracks = null, this.hasDetails = !1, this.mediaAttached = null, this._currentTime = void 0, this._bufferedEosTime = void 0, this.checkPlayout = () => {
       this.reachedPlayout(this.currentTime) && this.hls && this.hls.trigger(E.PLAYOUT_LIMIT_REACHED, {});
@@ -22024,7 +22024,7 @@ class fb {
   }
 }
 const Vc = 0.033;
-class gb extends Kt {
+class g1 extends Kt {
   constructor(e, t) {
     super("interstitials-sched", t), this.onScheduleUpdate = void 0, this.eventMap = {}, this.events = null, this.items = null, this.durations = {
       primary: 0,
@@ -22157,7 +22157,7 @@ class gb extends Kt {
       const o = s[a], l = e[o];
       if (l.isInterstitial) {
         let u = this.eventMap[o];
-        u ? u.setDateRange(l) : (u = new db(l, t), this.eventMap[o] = u, i === !1 && (u.appendInPlace = i)), n.push(u);
+        u ? u.setDateRange(l) : (u = new d1(l, t), this.eventMap[o] = u, i === !1 && (u.appendInPlace = i)), n.push(u);
       }
     }
     return n;
@@ -22322,7 +22322,7 @@ class gb extends Kt {
 function Yt(r) {
   return `[${r.event ? '"' + r.event.identifier + '"' : "primary"}: ${r.start.toFixed(2)}-${r.end.toFixed(2)}]`;
 }
-class mb {
+class m1 {
   constructor(e) {
     this.hls = void 0, this.hls = e;
   }
@@ -22396,7 +22396,7 @@ function Kc(r) {
 function Ns(r, e) {
   return `[${r}] Advancing timeline position to ${e}`;
 }
-class pb extends Kt {
+class p1 extends Kt {
   constructor(e, t) {
     super("interstitials", e.logger), this.HlsPlayerClass = void 0, this.hls = void 0, this.assetListLoader = void 0, this.mediaSelection = null, this.altSelection = null, this.media = null, this.detachedData = null, this.requiredTracks = null, this.manager = null, this.playerQueue = [], this.bufferedPos = -1, this.timelinePos = -1, this.schedule = void 0, this.playingItem = null, this.bufferingItem = null, this.waitingItem = null, this.endedItem = null, this.playingAsset = null, this.endedAsset = null, this.bufferingAsset = null, this.shouldPlay = !1, this.onPlay = () => {
       this.shouldPlay = !0;
@@ -22500,7 +22500,7 @@ Schedule: ${l.map((m) => Yt(m))} pos: ${this.timelinePos}`), c.length && this.lo
         }
         a && this.trimInPlace(h, a), g && f !== h && this.trimInPlace(f, g), this.checkBuffer();
       }
-    }, this.hls = e, this.HlsPlayerClass = t, this.assetListLoader = new mb(e), this.schedule = new gb(this.onScheduleUpdate, e.logger), this.registerListeners();
+    }, this.hls = e, this.HlsPlayerClass = t, this.assetListLoader = new m1(e), this.schedule = new g1(this.onScheduleUpdate, e.logger), this.registerListeners();
   }
   registerListeners() {
     const e = this.hls;
@@ -23376,7 +23376,7 @@ Schedule: ${l.map((m) => Yt(m))} pos: ${this.timelinePos}`), c.length && this.lo
   createAsset(e, t, i, n, s, a) {
     const o = {
       parentIdentifier: e.identifier,
-      identifier: cb(e, a, t),
+      identifier: c1(e, a, t),
       duration: s,
       startOffset: i,
       timelineStart: n,
@@ -23418,7 +23418,7 @@ Schedule: ${l.map((m) => Yt(m))} pos: ${this.timelinePos}`), c.length && this.lo
     f != null && f.sessionId && f.contentId && (h.cmcd = Se({}, f, {
       contentId: Qn(t.uri)
     })), this.getAssetPlayer(d) && this.warn(`Duplicate date range identifier ${e} and asset ${d}`);
-    const g = new fb(this.HlsPlayerClass, h, e, t);
+    const g = new f1(this.HlsPlayerClass, h, e, t);
     this.playerQueue.push(g), e.assetList[i] = t;
     let m = !0;
     const p = (S) => {
@@ -23693,7 +23693,7 @@ Schedule: ${l.map((m) => Yt(m))} pos: ${this.timelinePos}`), c.length && this.lo
   }
 }
 const Hc = 500;
-class _b extends hl {
+class _1 extends hl {
   constructor(e, t, i) {
     super(e, t, i, "subtitle-stream-controller", W.SUBTITLE), this.currentTrackId = -1, this.tracksBuffered = [], this.mainDetails = null, this.registerListeners();
   }
@@ -23913,10 +23913,10 @@ class _b extends hl {
     Oe(e) ? super.loadFragment(e, t, i) : this._loadInitSegment(e, t);
   }
   get mediaBufferTimeRanges() {
-    return new yb(this.tracksBuffered[this.currentTrackId] || []);
+    return new y1(this.tracksBuffered[this.currentTrackId] || []);
   }
 }
-class yb {
+class y1 {
   constructor(e) {
     this.buffered = void 0;
     const t = (i, n, s) => {
@@ -23937,7 +23937,7 @@ class yb {
     };
   }
 }
-const vb = {
+const v1 = {
   42: 225,
   // lowercase a, acute accent
   92: 233,
@@ -24125,7 +24125,7 @@ const vb = {
   // Box drawings heavy up and right
   207: 9499
   // Box drawings heavy up and left
-}, bg = (r) => String.fromCharCode(vb[r] || r), Jt = 15, vi = 100, Eb = {
+}, bg = (r) => String.fromCharCode(v1[r] || r), Jt = 15, vi = 100, E1 = {
   17: 1,
   18: 3,
   21: 5,
@@ -24134,7 +24134,7 @@ const vb = {
   16: 11,
   19: 12,
   20: 14
-}, Sb = {
+}, S1 = {
   17: 2,
   18: 4,
   21: 6,
@@ -24142,7 +24142,7 @@ const vb = {
   23: 10,
   19: 13,
   20: 15
-}, bb = {
+}, b1 = {
   25: 1,
   26: 3,
   29: 5,
@@ -24151,7 +24151,7 @@ const vb = {
   24: 11,
   27: 12,
   28: 14
-}, Tb = {
+}, T1 = {
   25: 2,
   26: 4,
   29: 6,
@@ -24159,8 +24159,8 @@ const vb = {
   31: 10,
   27: 13,
   28: 15
-}, Ab = ["white", "green", "blue", "cyan", "red", "yellow", "magenta", "black", "transparent"];
-class Db {
+}, A1 = ["white", "green", "blue", "cyan", "red", "yellow", "magenta", "black", "transparent"];
+class D1 {
   constructor() {
     this.time = null, this.verboseLevel = 0;
   }
@@ -24204,7 +24204,7 @@ class Tg {
     return "color=" + this.foreground + ", underline=" + this.underline + ", italics=" + this.italics + ", background=" + this.background + ", flash=" + this.flash;
   }
 }
-class Ib {
+class I1 {
   constructor() {
     this.uchar = " ", this.penState = new Tg();
   }
@@ -24227,11 +24227,11 @@ class Ib {
     return this.uchar === " " && this.penState.isDefault();
   }
 }
-class xb {
+class x1 {
   constructor(e) {
     this.chars = [], this.pos = 0, this.currPenState = new Tg(), this.cueStartTime = null, this.logger = void 0;
     for (let t = 0; t < vi; t++)
-      this.chars.push(new Ib());
+      this.chars.push(new I1());
     this.logger = e;
   }
   equals(e) {
@@ -24312,7 +24312,7 @@ class Ua {
   constructor(e) {
     this.rows = [], this.currRow = Jt - 1, this.nrRollUpRows = null, this.lastOutputScreen = null, this.logger = void 0;
     for (let t = 0; t < Jt; t++)
-      this.rows.push(new xb(e));
+      this.rows.push(new x1(e));
     this.logger = e;
   }
   reset() {
@@ -24527,8 +24527,8 @@ class qc {
 }
 class zc {
   constructor(e, t, i) {
-    this.channels = void 0, this.currentChannel = 0, this.cmdHistory = kb(), this.logger = void 0;
-    const n = this.logger = new Db();
+    this.channels = void 0, this.currentChannel = 0, this.cmdHistory = k1(), this.logger = void 0;
+    const n = this.logger = new D1();
     this.channels = [null, new qc(e, t, n), new qc(e + 1, i, n)];
   }
   getHandler(e) {
@@ -24550,7 +24550,7 @@ class zc {
       this.logger.log(3, () => "[" + Wi([t[i], t[i + 1]]) + "] -> (" + Wi([n, s]) + ")");
       const l = this.cmdHistory;
       if (n >= 16 && n <= 31) {
-        if (Lb(n, s, l)) {
+        if (L1(n, s, l)) {
           Us(null, null, l), this.logger.log(3, () => "Repeated command (" + Wi([n, s]) + ") is dropped");
           continue;
         }
@@ -24598,7 +24598,7 @@ class zc {
     if (!(n || s))
       return !1;
     const a = e <= 23 ? 1 : 2;
-    t >= 64 && t <= 95 ? i = a === 1 ? Eb[e] : bb[e] : i = a === 1 ? Sb[e] : Tb[e];
+    t >= 64 && t <= 95 ? i = a === 1 ? E1[e] : b1[e] : i = a === 1 ? S1[e] : T1[e];
     const o = this.channels[a];
     return o ? (o.setPAC(this.interpretPAC(i, t)), this.currentChannel = a, !0) : !1;
   }
@@ -24639,7 +24639,7 @@ class zc {
       return !1;
     let s;
     const a = {};
-    e === 16 || e === 24 ? (s = Math.floor((t - 32) / 2), a.background = Ab[s], t % 2 === 1 && (a.background = a.background + "_semi")) : t === 45 ? a.background = "transparent" : (a.foreground = "black", t === 47 && (a.underline = !0));
+    e === 16 || e === 24 ? (s = Math.floor((t - 32) / 2), a.background = A1[s], t % 2 === 1 && (a.background = a.background + "_semi")) : t === 45 ? a.background = "transparent" : (a.foreground = "black", t === 47 && (a.underline = !0));
     const o = e <= 23 ? 1 : 2;
     return this.channels[o].setBkgData(a), !0;
   }
@@ -24666,10 +24666,10 @@ class zc {
 function Us(r, e, t) {
   t.a = r, t.b = e;
 }
-function Lb(r, e, t) {
+function L1(r, e, t) {
   return t.a === r && t.b === e;
 }
-function kb() {
+function k1() {
   return {
     a: null,
     b: null
@@ -24832,7 +24832,7 @@ var Al = function() {
     return self.WebVTT.convertCueToDOMTree(self, this.text);
   }, a;
 }();
-class Cb {
+class C1 {
   decode(e, t) {
     if (!e)
       return "";
@@ -24848,7 +24848,7 @@ function Ag(r) {
   const t = r.match(/^(?:(\d+):)?(\d{2}):(\d{2})(\.\d+)?/);
   return t ? parseFloat(t[2]) > 59 ? e(t[2], t[3], 0, t[4]) : e(t[1], t[2], t[3], t[4]) : null;
 }
-class Rb {
+class R1 {
   constructor() {
     this.values = /* @__PURE__ */ Object.create(null);
   }
@@ -24903,7 +24903,7 @@ function Dg(r, e, t, i) {
   }
 }
 const ko = new Al(0, 0, ""), Gs = ko.align === "middle" ? "middle" : "center";
-function wb(r, e, t) {
+function w1(r, e, t) {
   const i = r;
   function n() {
     const o = Ag(r);
@@ -24912,7 +24912,7 @@ function wb(r, e, t) {
     return r = r.replace(/^[^\sa-zA-Z-]+/, ""), o;
   }
   function s(o, l) {
-    const u = new Rb();
+    const u = new R1();
     Dg(o, function(h, f) {
       let g;
       switch (h) {
@@ -24956,9 +24956,9 @@ function Ig(r) {
   return r.replace(/<br(?: \/)?>/gi, `
 `);
 }
-class Fb {
+class F1 {
   constructor() {
-    this.state = "INITIAL", this.buffer = "", this.decoder = new Cb(), this.regionList = [], this.cue = null, this.oncue = void 0, this.onparsingerror = void 0, this.onflush = void 0;
+    this.state = "INITIAL", this.buffer = "", this.decoder = new C1(), this.regionList = [], this.cue = null, this.oncue = void 0, this.onparsingerror = void 0, this.onflush = void 0;
   }
   parse(e) {
     const t = this;
@@ -25017,7 +25017,7 @@ class Fb {
               continue;
             }
             try {
-              wb(s, t.cue, t.regionList);
+              w1(s, t.cue, t.regionList);
             } catch {
               t.cue = null, t.state = "BADCUE";
               continue;
@@ -25059,9 +25059,9 @@ class Fb {
     return e.onflush && e.onflush(), this;
   }
 }
-const Pb = /\r\n|\n\r|\n|\r/g, Ga = function(e, t, i = 0) {
+const P1 = /\r\n|\n\r|\n|\r/g, Ga = function(e, t, i = 0) {
   return e.slice(i, i + t.length) === t;
-}, Ob = function(e) {
+}, O1 = function(e) {
   let t = parseInt(e.slice(-3));
   const i = parseInt(e.slice(-6, -4)), n = parseInt(e.slice(-9, -7)), s = e.length > 9 ? parseInt(e.substring(0, e.indexOf(":"))) : 0;
   if (!H(t) || !H(i) || !H(n) || !H(s))
@@ -25071,7 +25071,7 @@ const Pb = /\r\n|\n\r|\n|\r/g, Ga = function(e, t, i = 0) {
 function Dl(r, e, t) {
   return Qn(r.toString()) + Qn(e.toString()) + Qn(t);
 }
-const $b = function(e, t, i) {
+const $1 = function(e, t, i) {
   let n = e[t], s = e[n.prevCC];
   if (!s || !s.new && n.new) {
     e.ccOffset = e.presentationOffset = n.start, n.new = !1;
@@ -25083,8 +25083,8 @@ const $b = function(e, t, i) {
   }
   e.presentationOffset = i;
 };
-function Mb(r, e, t, i, n, s, a) {
-  const o = new Fb(), l = Rt(new Uint8Array(r)).trim().replace(Pb, `
+function M1(r, e, t, i, n, s, a) {
+  const o = new F1(), l = Rt(new Uint8Array(r)).trim().replace(P1, `
 `).split(`
 `), u = [], c = e ? KE(e.baseTime, e.timescale) : 0;
   let d = "00:00.000", h = 0, f = 0, g, m = !0;
@@ -25092,7 +25092,7 @@ function Mb(r, e, t, i, n, s, a) {
     const v = t[i];
     let _ = t.ccOffset;
     const y = (h - c) / 9e4;
-    if (v != null && v.new && (f !== void 0 ? _ = t.ccOffset = v.start : $b(t, i, y)), y) {
+    if (v != null && v.new && (f !== void 0 ? _ = t.ccOffset = v.start : $1(t, i, y)), y) {
       if (!e) {
         g = new Error("Missing initPTS for VTT MPEGTS");
         return;
@@ -25118,7 +25118,7 @@ function Mb(r, e, t, i, n, s, a) {
           Ga(v, "LOCAL:") ? d = v.slice(6) : Ga(v, "MPEGTS:") && (h = parseInt(v.slice(7)));
         });
         try {
-          f = Ob(d) / 1e3;
+          f = O1(d) / 1e3;
         } catch (v) {
           g = v;
         }
@@ -25128,7 +25128,7 @@ function Mb(r, e, t, i, n, s, a) {
 `);
   }), o.flush();
 }
-const Va = "stpp.ttml.im1t", xg = /^(\d{2,}):(\d{2}):(\d{2}):(\d{2})\.?(\d+)?$/, Lg = /^(\d*(?:\.\d*)?)(h|m|s|ms|f|t)$/, Bb = {
+const Va = "stpp.ttml.im1t", xg = /^(\d{2,}):(\d{2}):(\d{2}):(\d{2})\.?(\d+)?$/, Lg = /^(\d*(?:\.\d*)?)(h|m|s|ms|f|t)$/, B1 = {
   left: "start",
   center: "center",
   right: "end",
@@ -25143,12 +25143,12 @@ function Wc(r, e, t, i) {
   }
   const s = n.map((o) => Rt(o)), a = VE(e.baseTime, 1, e.timescale);
   try {
-    s.forEach((o) => t(Nb(o, a)));
+    s.forEach((o) => t(N1(o, a)));
   } catch (o) {
     i(o);
   }
 }
-function Nb(r, e) {
+function N1(r, e) {
   const n = new DOMParser().parseFromString(r, "text/xml").getElementsByTagName("tt")[0];
   if (!n)
     throw new Error("Invalid ttml");
@@ -25173,11 +25173,11 @@ function Nb(r, e) {
     }
     const p = new Al(f - e, m - e, h);
     p.id = Dl(p.startTime, p.endTime, p.text);
-    const v = u[d.getAttribute("region")], _ = l[d.getAttribute("style")], y = Ub(v, _, l), {
+    const v = u[d.getAttribute("region")], _ = l[d.getAttribute("style")], y = U1(v, _, l), {
       textAlign: S
     } = y;
     if (S) {
-      const b = Bb[S];
+      const b = B1[S];
       b && (p.lineAlign = b), p.align = S;
     }
     return Se(p, y), p;
@@ -25200,7 +25200,7 @@ function kg(r, e) {
 ` : (s = i.childNodes) != null && s.length ? kg(i, e) : e ? t + i.textContent.trim().replace(/\s+/g, " ") : t + i.textContent;
   }, "");
 }
-function Ub(r, e, t) {
+function U1(r, e, t) {
   const i = "http://www.w3.org/ns/ttml#styling";
   let n = null;
   const s = [
@@ -25232,13 +25232,13 @@ function qa(r, e) {
   if (!r)
     return null;
   let t = Ag(r);
-  return t === null && (xg.test(r) ? t = Gb(r, e) : Lg.test(r) && (t = Vb(r, e))), t;
+  return t === null && (xg.test(r) ? t = G1(r, e) : Lg.test(r) && (t = V1(r, e))), t;
 }
-function Gb(r, e) {
+function G1(r, e) {
   const t = xg.exec(r), i = (t[4] | 0) + (t[5] | 0) / e.subFrameRate;
   return (t[1] | 0) * 3600 + (t[2] | 0) * 60 + (t[3] | 0) + i / e.frameRate;
 }
-function Vb(r, e) {
+function V1(r, e) {
   const t = Lg.exec(r), i = Number(t[1]);
   switch (t[2]) {
     case "h":
@@ -25268,7 +25268,7 @@ class Vs {
     this.cueRanges = [], this.startTime = null;
   }
 }
-class Kb {
+class K1 {
   constructor(e) {
     this.hls = void 0, this.media = null, this.config = void 0, this.enabled = !0, this.Cues = void 0, this.textTracks = [], this.tracks = [], this.initPTS = [], this.unparsedVttFrags = [], this.captionsTracks = {}, this.nonNativeCaptionsTracks = {}, this.cea608Parser1 = void 0, this.cea608Parser2 = void 0, this.lastCc = -1, this.lastSn = -1, this.lastPartIndex = -1, this.prevCC = -1, this.vttCCs = Qc(), this.captionsProperties = void 0, this.hls = e, this.config = e.config, this.Cues = e.config.cueHandler, this.captionsProperties = {
       textTrack1: {
@@ -25302,7 +25302,7 @@ class Kb {
   addCues(e, t, i, n, s) {
     let a = !1;
     for (let o = s.length; o--; ) {
-      const l = s[o], u = Hb(l[0], l[1], t, i);
+      const l = s[o], u = H1(l[0], l[1], t, i);
       if (u >= 0 && (l[0] = Math.min(l[0], t), l[1] = Math.max(l[1], i), a = !0, u / (i - t) > 0.5))
         return;
     }
@@ -25551,7 +25551,7 @@ class Kb {
       return;
     }
     const l = this.hls, u = (t = i.initSegment) != null && t.data ? Gt(i.initSegment.data, new Uint8Array(n)).buffer : n;
-    Mb(u, this.initPTS[i.cc], this.vttCCs, i.cc, i.start, (c) => {
+    M1(u, this.initPTS[i.cc], this.vttCCs, i.cc, i.start, (c) => {
       this._appendCues(c, i.level), l.trigger(E.SUBTITLE_FRAG_PROCESSED, {
         success: !0,
         frag: i
@@ -25663,7 +25663,7 @@ function Cg(r) {
 function Xc(r, e) {
   return !!r && r.kind === Cg(e) && Ao(e, r);
 }
-function Hb(r, e, t, i) {
+function H1(r, e, t, i) {
   return Math.min(e, i) - Math.max(r, t);
 }
 function Qc() {
@@ -25677,7 +25677,7 @@ function Qc() {
     }
   };
 }
-const qb = /\s/, zb = {
+const q1 = /\s/, z1 = {
   newCue(r, e, t, i) {
     const n = [];
     let s, a, o, l, u;
@@ -25686,7 +25686,7 @@ const qb = /\s/, zb = {
       if (s = i.rows[h], o = !0, l = 0, u = "", !s.isEmpty()) {
         var d;
         for (let m = 0; m < s.chars.length; m++)
-          qb.test(s.chars[m].uchar) && o ? l++ : (u += s.chars[m].uchar, o = !1);
+          q1.test(s.chars[m].uchar) && o ? l++ : (u += s.chars[m].uchar, o = !1);
         s.cueStartTime = e, e === t && (t += 1e-4), l >= 16 ? l-- : l++;
         const f = Ig(u.trim()), g = Dl(e, t, f);
         r != null && (d = r.cues) != null && d.getCueById(g) || (a = new c(e, t, f), a.id = g, a.line = h + 1, a.align = "left", a.position = 10 + Math.min(80, Math.floor(l * 8 / 32) * 10), n.push(a));
@@ -25694,7 +25694,7 @@ const qb = /\s/, zb = {
     return r && n.length && (n.sort((h, f) => h.line === "auto" || f.line === "auto" ? 0 : h.line > 8 && f.line > 8 ? f.line - h.line : h.line - f.line), n.forEach((h) => Eg(r, h))), n;
   }
 };
-function Wb() {
+function W1() {
   if (
     // @ts-ignore
     self.fetch && self.AbortController && self.ReadableStream && self.Request
@@ -25705,10 +25705,10 @@ function Wb() {
     }
   return !1;
 }
-const jb = /(\d+)-(\d+)\/(\d+)/;
+const j1 = /(\d+)-(\d+)\/(\d+)/;
 class Zc {
   constructor(e) {
-    this.fetchSetup = void 0, this.requestTimeout = void 0, this.request = null, this.response = null, this.controller = void 0, this.context = null, this.config = null, this.callbacks = null, this.stats = void 0, this.loader = null, this.fetchSetup = e.fetchSetup || Zb, this.controller = new self.AbortController(), this.stats = new nl();
+    this.fetchSetup = void 0, this.requestTimeout = void 0, this.request = null, this.response = null, this.controller = void 0, this.context = null, this.config = null, this.callbacks = null, this.stats = void 0, this.loader = null, this.fetchSetup = e.fetchSetup || Z1, this.controller = new self.AbortController(), this.stats = new nl();
   }
   destroy() {
     this.loader = this.callbacks = this.context = this.config = this.request = null, this.abortInternal(), this.response = null, this.fetchSetup = this.controller = this.stats = null;
@@ -25725,7 +25725,7 @@ class Zc {
     if (n.loading.start)
       throw new Error("Loader can only be used once.");
     n.loading.start = self.performance.now();
-    const s = Yb(e, this.controller.signal), a = e.responseType === "arraybuffer", o = a ? "byteLength" : "length", {
+    const s = Y1(e, this.controller.signal), a = e.responseType === "arraybuffer", o = a ? "byteLength" : "length", {
       maxTimeToFirstByteMs: l,
       maxLoadTimeMs: u
     } = t.loadPolicy;
@@ -25742,9 +25742,9 @@ class Zc {
           status: m,
           statusText: p
         } = d;
-        throw new Jb(p || "fetch, bad network response", m, d);
+        throw new J1(p || "fetch, bad network response", m, d);
       }
-      n.loading.first = f, n.total = Qb(d.headers) || n.total;
+      n.loading.first = f, n.total = Q1(d.headers) || n.total;
       const g = (h = this.callbacks) == null ? void 0 : h.onProgress;
       return g && H(t.highWaterMark) ? this.loadProgressively(d, n, e, t.highWaterMark, g) : a ? d.arrayBuffer() : e.responseType === "json" ? d.json() : d.text();
     }).then((d) => {
@@ -25793,7 +25793,7 @@ class Zc {
     return l();
   }
 }
-function Yb(r, e) {
+function Y1(r, e) {
   const t = {
     method: "GET",
     mode: "cors",
@@ -25803,15 +25803,15 @@ function Yb(r, e) {
   };
   return r.rangeEnd && t.headers.set("Range", "bytes=" + r.rangeStart + "-" + String(r.rangeEnd - 1)), t;
 }
-function Xb(r) {
-  const e = jb.exec(r);
+function X1(r) {
+  const e = j1.exec(r);
   if (e)
     return parseInt(e[2]) - parseInt(e[1]) + 1;
 }
-function Qb(r) {
+function Q1(r) {
   const e = r.get("Content-Range");
   if (e) {
-    const i = Xb(e);
+    const i = X1(e);
     if (H(i))
       return i;
   }
@@ -25819,15 +25819,15 @@ function Qb(r) {
   if (t)
     return parseInt(t);
 }
-function Zb(r, e) {
+function Z1(r, e) {
   return new self.Request(r.url, e);
 }
-class Jb extends Error {
+class J1 extends Error {
   constructor(e, t, i) {
     super(e), this.code = void 0, this.details = void 0, this.code = t, this.details = i;
   }
 }
-const e1 = /^age:\s*[\d.]+\s*$/im;
+const eb = /^age:\s*[\d.]+\s*$/im;
 class Rg {
   constructor(e) {
     this.xhrSetup = void 0, this.requestTimeout = void 0, this.retryTimeout = void 0, this.retryDelay = void 0, this.config = null, this.callbacks = null, this.context = null, this.loader = null, this.stats = void 0, this.xhrSetup = e && e.xhrSetup || null, this.stats = new nl(), this.retryDelay = 0;
@@ -25956,7 +25956,7 @@ class Rg {
   }
   getCacheAge() {
     let e = null;
-    if (this.loader && e1.test(this.loader.getAllResponseHeaders())) {
+    if (this.loader && eb.test(this.loader.getAllResponseHeaders())) {
       const t = this.loader.getResponseHeader("age");
       e = t ? parseFloat(t) : null;
     }
@@ -25966,12 +25966,12 @@ class Rg {
     return this.loader && new RegExp(`^${e}:\\s*[\\d.]+\\s*$`, "im").test(this.loader.getAllResponseHeaders()) ? this.loader.getResponseHeader(e) : null;
   }
 }
-const t1 = {
+const tb = {
   maxTimeToFirstByteMs: 8e3,
   maxLoadTimeMs: 2e4,
   timeoutRetry: null,
   errorRetry: null
-}, i1 = pe(pe({
+}, ib = pe(pe({
   autoStartLoad: !0,
   // used by stream-controller
   startPosition: -1,
@@ -26070,7 +26070,7 @@ const t1 = {
   bufferController: sS,
   capLevelController: Sl,
   errorController: vv,
-  fpsController: rb,
+  fpsController: r1,
   stretchShortVideoTrack: !1,
   // used by mp4-remuxer
   maxAudioFramesDrift: 1,
@@ -26127,7 +26127,7 @@ const t1 = {
   useMediaCapabilities: !0,
   preserveManualLevelOnError: !1,
   certLoadPolicy: {
-    default: t1
+    default: tb
   },
   keyLoadPolicy: {
     default: {
@@ -26241,20 +26241,20 @@ const t1 = {
   fragLoadingMaxRetry: 6,
   fragLoadingRetryDelay: 1e3,
   fragLoadingMaxRetryTimeout: 64e3
-}, n1()), {}, {
-  subtitleStreamController: _b,
-  subtitleTrackController: lb,
-  timelineController: Kb,
+}, nb()), {}, {
+  subtitleStreamController: _1,
+  subtitleTrackController: l1,
+  timelineController: K1,
   audioStreamController: eS,
   audioTrackController: tS,
   emeController: xn,
-  cmcdController: tb,
-  contentSteeringController: nb,
-  interstitialsController: pb
+  cmcdController: t1,
+  contentSteeringController: n1,
+  interstitialsController: p1
 });
-function n1() {
+function nb() {
   return {
-    cueHandler: zb,
+    cueHandler: z1,
     // used by timeline-controller
     enableWebVTT: !0,
     // used by timeline-controller
@@ -26281,7 +26281,7 @@ function n1() {
     renderTextTracksNatively: !0
   };
 }
-function s1(r, e, t) {
+function sb(r, e, t) {
   if ((e.liveSyncDurationCount || e.liveMaxLatencyDurationCount) && (e.liveSyncDuration || e.liveMaxLatencyDuration))
     throw new Error("Illegal hls.js config: don't mix up liveSyncDurationCount/liveMaxLatencyDurationCount and liveSyncDuration/liveMaxLatencyDuration");
   if (e.liveMaxLatencyDurationCount !== void 0 && (e.liveSyncDurationCount === void 0 || e.liveMaxLatencyDurationCount <= e.liveSyncDurationCount))
@@ -26319,12 +26319,12 @@ function s1(r, e, t) {
 function Co(r) {
   return r && typeof r == "object" ? Array.isArray(r) ? r.map(Co) : Object.keys(r).reduce((e, t) => (e[t] = Co(r[t]), e), {}) : r;
 }
-function r1(r, e) {
+function rb(r, e) {
   const t = r.loader;
-  t !== Zc && t !== Rg ? (e.log("[config]: Custom loader detected, cannot enable progressive streaming"), r.progressive = !1) : Wb() && (r.loader = Zc, r.progressive = !0, r.enableSoftwareAES = !0, e.log("[config]: Progressive streaming enabled, using FetchLoader"));
+  t !== Zc && t !== Rg ? (e.log("[config]: Custom loader detected, cannot enable progressive streaming"), r.progressive = !1) : W1() && (r.loader = Zc, r.progressive = !0, r.enableSoftwareAES = !0, e.log("[config]: Progressive streaming enabled, using FetchLoader"));
 }
-const dr = 2, a1 = 0.1, o1 = 0.05, l1 = 100;
-class u1 extends Af {
+const dr = 2, ab = 0.1, ob = 0.05, lb = 100;
+class ub extends Af {
   constructor(e, t) {
     super("gap-controller", e.logger), this.hls = void 0, this.fragmentTracker = void 0, this.media = null, this.mediaSource = void 0, this.nudgeRetry = 0, this.stallReported = !1, this.stalled = null, this.moved = !1, this.seeking = !1, this.buffered = {}, this.lastCurrentTime = 0, this.ended = 0, this.waiting = 0, this.onMediaPlaying = () => {
       this.ended = 0, this.waiting = 0;
@@ -26356,7 +26356,7 @@ class u1 extends Af {
     super.destroy(), this.unregisterListeners(), this.media = this.hls = this.fragmentTracker = null, this.mediaSource = void 0;
   }
   onMediaAttached(e, t) {
-    this.setInterval(l1), this.mediaSource = t.mediaSource;
+    this.setInterval(lb), this.mediaSource = t.mediaSource;
     const i = this.media = t.media;
     dt(i, "playing", this.onMediaPlaying), dt(i, "waiting", this.onMediaWaiting), dt(i, "ended", this.onMediaEnded);
   }
@@ -26594,7 +26594,7 @@ class u1 extends Af {
               return 0;
           }
         }
-        const f = Math.max(l + o1, a + a1);
+        const f = Math.max(l + ob, a + ab);
         if (this.warn(`skipping hole, adjusting currentTime from ${a} to ${f}`), this.moved = !0, n.currentTime = f, !(e != null && e.gap)) {
           const g = new Error(`fragment loaded with buffer holes, seeking from ${a} to ${f}`), m = {
             type: j.MEDIA_ERROR,
@@ -26670,7 +26670,7 @@ function ed(r) {
 function Ks(r, e) {
   return e.getAppendedFrag(r, W.MAIN) || e.getPartialFragment(r);
 }
-const c1 = 0.25;
+const cb = 0.25;
 function Ro() {
   if (!(typeof self > "u"))
     return self.VTTCue || self.TextTrackCue;
@@ -26695,7 +26695,7 @@ const Hs = (() => {
   }
   return Number.POSITIVE_INFINITY;
 })();
-class d1 {
+class db {
   constructor(e) {
     this.hls = void 0, this.id3Track = null, this.media = null, this.dateRangeCuesAppended = {}, this.removeCues = !0, this.assetCue = void 0, this.onEventCueEnter = () => {
       this.hls && this.hls.trigger(E.EVENT_CUE_ENTER, {});
@@ -26767,7 +26767,7 @@ class d1 {
           continue;
         const u = Wf(s[o].data), c = s[o].pts;
         let d = c + s[o].duration;
-        d > Hs && (d = Hs), d - c <= 0 && (d = c + c1);
+        d > Hs && (d = Hs), d - c <= 0 && (d = c + cb);
         for (let f = 0; f < u.length; f++) {
           const g = u[f];
           if (!jf(g)) {
@@ -26918,7 +26918,7 @@ class d1 {
     }
   }
 }
-class h1 {
+class hb {
   constructor(e) {
     this.hls = void 0, this.config = void 0, this.media = null, this.currentTime = 0, this.stallCount = 0, this._latency = null, this._targetLatencyUpdated = !1, this.onTimeupdate = () => {
       const {
@@ -27060,7 +27060,7 @@ class h1 {
     return e === null ? null : e - this.currentTime;
   }
 }
-class f1 extends El {
+class fb extends El {
   constructor(e, t) {
     super(e, "level-controller"), this._levels = [], this._firstLevel = -1, this._maxAutoLevel = -1, this._startLevel = void 0, this.currentLevel = null, this.currentLevelIndex = -1, this.manualLevelIndex = -1, this.steering = void 0, this.onParsedComplete = void 0, this.steering = t, this._registerListeners();
   }
@@ -27431,19 +27431,19 @@ function Fg() {
   const e = wg();
   return !e || e.prototype && typeof e.prototype.appendBuffer == "function" && typeof e.prototype.remove == "function";
 }
-function g1() {
+function gb() {
   if (!Fg())
     return !1;
   const r = Mi();
   return typeof (r == null ? void 0 : r.isTypeSupported) == "function" && (["avc1.42E01E,mp4a.40.2", "av01.0.01M.08", "vp09.00.50.08"].some((e) => r.isTypeSupported(is(e, "video"))) || ["mp4a.40.2", "fLaC"].some((e) => r.isTypeSupported(is(e, "audio"))));
 }
-function m1() {
+function mb() {
   var r;
   const e = wg();
   return typeof (e == null || (r = e.prototype) == null ? void 0 : r.changeType) == "function";
 }
-const p1 = 100;
-class _1 extends hl {
+const pb = 100;
+class _b extends hl {
   constructor(e, t, i) {
     super(e, t, i, "stream-controller", W.MAIN), this.audioCodecSwap = !1, this.level = -1, this._forceStartLoad = !1, this._hasEnoughToStart = !1, this.altAudio = 0, this.audioOnly = !1, this.fragPlaying = null, this.fragLastKbps = 0, this.couldBacktrack = !1, this.backtrackFragment = null, this.audioCodecSwitch = !1, this.videoBuffer = null, this.onMediaPlaying = () => {
       this.tick();
@@ -27482,7 +27482,7 @@ class _1 extends hl {
         lastCurrentTime: i,
         hls: n
       } = this;
-      if (this.stopLoad(), this.setInterval(p1), this.level = -1, !this.startFragRequested) {
+      if (this.stopLoad(), this.setInterval(pb), this.level = -1, !this.startFragRequested) {
         let s = n.startLevel;
         s === -1 && (n.config.testBandwidth && this.levels.length > 1 ? (s = 0, this.bitrateTest = !0) : s = n.firstAutoLevel), n.nextLoadLevel = s, this.level = n.loadLevel, this._hasEnoughToStart = !!t;
       }
@@ -27662,7 +27662,7 @@ class _1 extends hl {
       const a = t.levels[s].audioCodec;
       a && (i = i || a.indexOf("mp4a.40.2") !== -1, n = n || a.indexOf("mp4a.40.5") !== -1);
     }
-    this.audioCodecSwitch = i && n && !m1(), this.audioCodecSwitch && this.log("Both AAC/HE-AAC audio found in levels; declaring level codec as HE-AAC"), this.levels = t.levels, this.startFragRequested = !1;
+    this.audioCodecSwitch = i && n && !mb(), this.audioCodecSwitch && this.log("Both AAC/HE-AAC audio found in levels; declaring level codec as HE-AAC"), this.levels = t.levels, this.startFragRequested = !1;
   }
   onLevelLoading(e, t) {
     const {
@@ -28167,7 +28167,7 @@ class _1 extends hl {
     return this._forceStartLoad;
   }
 }
-class y1 extends Kt {
+class yb extends Kt {
   constructor(e, t) {
     super("key-loader", t), this.config = void 0, this.keyIdToKeyInfo = {}, this.emeController = null, this.config = e;
   }
@@ -28383,7 +28383,7 @@ function ja(r, e) {
   let t = r.url;
   return (t === void 0 || t.indexOf("data:") === 0) && (t = e.url), t;
 }
-class v1 {
+class vb {
   constructor(e) {
     this.hls = void 0, this.loaders = /* @__PURE__ */ Object.create(null), this.variableList = null, this.onManifestLoaded = this.checkAutostartLoad, this.hls = e, this.registerListeners();
   }
@@ -28833,7 +28833,7 @@ class kt {
    * Check if MediaSource Extensions are available and isTypeSupported checks pass for any baseline codecs.
    */
   static isSupported() {
-    return g1();
+    return gb();
   }
   /**
    * Get the MediaSource global used for MSE playback (ManagedMediaSource, MediaSource, or WebKitMediaSource).
@@ -28857,7 +28857,7 @@ class kt {
    * Get the default configuration applied to new instances.
    */
   static get DefaultConfig() {
-    return kt.defaultConfig ? kt.defaultConfig : i1;
+    return kt.defaultConfig ? kt.defaultConfig : ib;
   }
   /**
    * Replace the default configuration applied to new instances.
@@ -28871,15 +28871,15 @@ class kt {
    */
   constructor(e = {}) {
     this.config = void 0, this.userConfig = void 0, this.logger = void 0, this.coreComponents = void 0, this.networkControllers = void 0, this._emitter = new fl(), this._autoLevelCapping = -1, this._maxHdcpLevel = null, this.abrController = void 0, this.bufferController = void 0, this.capLevelController = void 0, this.latencyController = void 0, this.levelController = void 0, this.streamController = void 0, this.audioStreamController = void 0, this.subtititleStreamController = void 0, this.audioTrackController = void 0, this.subtitleTrackController = void 0, this.interstitialsController = void 0, this.gapController = void 0, this.emeController = void 0, this.cmcdController = void 0, this._media = null, this._url = null, this._sessionId = void 0, this.triggeringException = void 0, this.started = !1;
-    const t = this.logger = Dy(e.debug || !1, "Hls instance", e.assetPlayerId), i = this.config = s1(kt.DefaultConfig, e, t);
-    this.userConfig = e, i.progressive && r1(i, t);
+    const t = this.logger = Dy(e.debug || !1, "Hls instance", e.assetPlayerId), i = this.config = sb(kt.DefaultConfig, e, t);
+    this.userConfig = e, i.progressive && rb(i, t);
     const {
       abrController: n,
       bufferController: s,
       capLevelController: a,
       errorController: o,
       fpsController: l
-    } = i, u = new o(this), c = this.abrController = new n(this), d = new Ev(this), h = i.interstitialsController, f = h ? this.interstitialsController = new h(this, kt) : null, g = this.bufferController = new s(this, d), m = this.capLevelController = new a(this), p = new l(this), v = new v1(this), _ = i.contentSteeringController, y = _ ? new _(this) : null, S = this.levelController = new f1(this, y), b = new d1(this), A = new y1(this.config, this.logger), T = this.streamController = new _1(this, d, A), D = this.gapController = new u1(this, d);
+    } = i, u = new o(this), c = this.abrController = new n(this), d = new Ev(this), h = i.interstitialsController, f = h ? this.interstitialsController = new h(this, kt) : null, g = this.bufferController = new s(this, d), m = this.capLevelController = new a(this), p = new l(this), v = new vb(this), _ = i.contentSteeringController, y = _ ? new _(this) : null, S = this.levelController = new fb(this, y), b = new db(this), A = new yb(this.config, this.logger), T = this.streamController = new _b(this, d, A), D = this.gapController = new ub(this, d);
     m.setStreamController(T), p.setStreamController(T);
     const I = [v, S, T];
     f && I.splice(1, 0, f), y && I.splice(1, 0, y), this.networkControllers = I;
@@ -28888,7 +28888,7 @@ class kt {
     const k = i.audioStreamController;
     k && I.push(this.audioStreamController = new k(this, d, A)), this.subtitleTrackController = this.createController(i.subtitleTrackController, I);
     const R = i.subtitleStreamController;
-    R && I.push(this.subtititleStreamController = new R(this, d, A)), this.createController(i.timelineController, x), A.emeController = this.emeController = this.createController(i.emeController, x), this.cmcdController = this.createController(i.cmcdController, x), this.latencyController = this.createController(h1, x), this.coreComponents = x, I.push(u);
+    R && I.push(this.subtititleStreamController = new R(this, d, A)), this.createController(i.timelineController, x), A.emeController = this.emeController = this.createController(i.emeController, x), this.cmcdController = this.createController(i.cmcdController, x), this.latencyController = this.createController(hb, x), this.coreComponents = x, I.push(u);
     const N = u.onErrorOut;
     typeof N == "function" && this.on(E.ERROR, N, u), this.on(E.MANIFEST_LOADED, v.onManifestLoaded, v);
   }
@@ -29095,7 +29095,7 @@ class kt {
    */
   get sessionId() {
     let e = this._sessionId;
-    return e || (e = this._sessionId = ub()), e;
+    return e || (e = this._sessionId = u1()), e;
   }
   /**
    * @returns an array of levels (variants) sorted by HDCP-LEVEL, RESOLUTION (height), FRAME-RATE, CODECS, VIDEO-RANGE, and BANDWIDTH
@@ -29524,43 +29524,43 @@ class kt {
 }
 kt.defaultConfig = void 0;
 const {
-  SvelteComponent: E1,
-  action_destroyer: S1,
-  add_render_callback: b1,
+  SvelteComponent: Eb,
+  action_destroyer: Sb,
+  add_render_callback: bb,
   assign: nd,
   attr: Fi,
-  binding_callbacks: T1,
+  binding_callbacks: Tb,
   bubble: Ya,
-  children: A1,
+  children: Ab,
   claim_element: sd,
-  claim_space: D1,
-  create_slot: I1,
+  claim_space: Db,
+  create_slot: Ib,
   detach: qs,
   element: rd,
   exclude_internal_props: ad,
-  get_all_dirty_from_scope: x1,
-  get_slot_changes: L1,
-  get_svelte_dataset: k1,
-  init: C1,
+  get_all_dirty_from_scope: xb,
+  get_slot_changes: Lb,
+  get_svelte_dataset: kb,
+  init: Cb,
   insert_hydration: Xa,
-  is_function: R1,
+  is_function: Rb,
   listen: Ye,
-  raf: w1,
-  run_all: F1,
-  safe_not_equal: P1,
-  space: O1,
+  raf: wb,
+  run_all: Fb,
+  safe_not_equal: Pb,
+  space: Ob,
   src_url_equal: od,
   toggle_class: ld,
-  transition_in: $1,
-  transition_out: M1,
-  update_slot_base: B1
-} = window.__gradio__svelte__internal, { createEventDispatcher: N1 } = window.__gradio__svelte__internal;
-function U1(r) {
+  transition_in: $b,
+  transition_out: Mb,
+  update_slot_base: Bb
+} = window.__gradio__svelte__internal, { createEventDispatcher: Nb } = window.__gradio__svelte__internal;
+function Ub(r) {
   let e, t = '<span class="load-wrap svelte-1pwzuub"><span class="loader svelte-1pwzuub"></span></span>', i, n, s, a, o = !1, l, u = !0, c, d, h, f;
   const g = (
     /*#slots*/
     r[16].default
-  ), m = I1(
+  ), m = Ib(
     g,
     r,
     /*$$scope*/
@@ -29568,20 +29568,20 @@ function U1(r) {
     null
   );
   function p() {
-    cancelAnimationFrame(l), n.paused || (l = w1(p), o = !0), r[20].call(n);
+    cancelAnimationFrame(l), n.paused || (l = wb(p), o = !0), r[20].call(n);
   }
   return {
     c() {
-      e = rd("div"), e.innerHTML = t, i = O1(), n = rd("video"), m && m.c(), this.h();
+      e = rd("div"), e.innerHTML = t, i = Ob(), n = rd("video"), m && m.c(), this.h();
     },
     l(v) {
-      e = sd(v, "DIV", { class: !0, "data-svelte-h": !0 }), k1(e) !== "svelte-mez4j5" && (e.innerHTML = t), i = D1(v), n = sd(v, "VIDEO", {
+      e = sd(v, "DIV", { class: !0, "data-svelte-h": !0 }), kb(e) !== "svelte-mez4j5" && (e.innerHTML = t), i = Db(v), n = sd(v, "VIDEO", {
         src: !0,
         preload: !0,
         "data-testid": !0,
         crossorigin: !0
       });
-      var _ = A1(n);
+      var _ = Ab(n);
       m && m.l(_), _.forEach(qs), this.h();
     },
     h() {
@@ -29599,7 +29599,7 @@ function U1(r) {
       r[9], n.loop = /*loop*/
       r[10], Fi(n, "data-testid", a = /*$$props*/
       r[13]["data-testid"]), Fi(n, "crossorigin", "anonymous"), /*duration*/
-      r[2] === void 0 && b1(() => (
+      r[2] === void 0 && bb(() => (
         /*video_durationchange_handler*/
         r[21].call(n)
       ));
@@ -29703,7 +29703,7 @@ function U1(r) {
           /*video_play_pause_handler*/
           r[22]
         ),
-        S1(c = py.call(null, n, { autoplay: (
+        Sb(c = py.call(null, n, { autoplay: (
           /*autoplay*/
           r[8] ?? !1
         ) }))
@@ -29713,19 +29713,19 @@ function U1(r) {
       (!d || _ & /*processingVideo*/
       2048) && ld(e, "hidden", !/*processingVideo*/
       v[11]), m && m.p && (!d || _ & /*$$scope*/
-      32768) && B1(
+      32768) && Bb(
         m,
         g,
         v,
         /*$$scope*/
         v[15],
-        d ? L1(
+        d ? Lb(
           g,
           /*$$scope*/
           v[15],
           _,
           null
-        ) : x1(
+        ) : xb(
           /*$$scope*/
           v[15]
         ),
@@ -29757,26 +29757,26 @@ function U1(r) {
       ) && (n.currentTime = /*currentTime*/
       v[1]), o = !1, _ & /*paused*/
       8 && u !== (u = /*paused*/
-      v[3]) && n[u ? "pause" : "play"](), c && R1(c.update) && _ & /*autoplay*/
+      v[3]) && n[u ? "pause" : "play"](), c && Rb(c.update) && _ & /*autoplay*/
       256 && c.update.call(null, { autoplay: (
         /*autoplay*/
         v[8] ?? !1
       ) });
     },
     i(v) {
-      d || ($1(m, v), d = !0);
+      d || ($b(m, v), d = !0);
     },
     o(v) {
-      M1(m, v), d = !1;
+      Mb(m, v), d = !1;
     },
     d(v) {
-      v && (qs(e), qs(i), qs(n)), m && m.d(v), r[23](null), h = !1, F1(f);
+      v && (qs(e), qs(i), qs(n)), m && m.d(v), r[23](null), h = !1, Fb(f);
     }
   };
 }
-function G1(r, e, t) {
+function Gb(r, e, t) {
   let { $$slots: i = {}, $$scope: n } = e, { src: s = void 0 } = e, { muted: a = void 0 } = e, { playsinline: o = void 0 } = e, { preload: l = void 0 } = e, { autoplay: u = void 0 } = e, { controls: c = void 0 } = e, { currentTime: d = void 0 } = e, { duration: h = void 0 } = e, { paused: f = void 0 } = e, { node: g = void 0 } = e, { loop: m } = e, { is_stream: p } = e, { processingVideo: v = !1 } = e, _ = !1;
-  const y = N1();
+  const y = Nb();
   function S(R, N, K) {
     if (!(!R || !N) && kt.isSupported() && !_) {
       const U = new kt({
@@ -29824,7 +29824,7 @@ function G1(r, e, t) {
     f = this.paused, t(3, f);
   }
   function k(R) {
-    T1[R ? "unshift" : "push"](() => {
+    Tb[R ? "unshift" : "push"](() => {
       g = R, t(0, g);
     });
   }
@@ -29861,9 +29861,9 @@ function G1(r, e, t) {
     k
   ];
 }
-class zr extends E1 {
+class zr extends Eb {
   constructor(e) {
-    super(), C1(this, e, G1, U1, P1, {
+    super(), Cb(this, e, Gb, Ub, Pb, {
       src: 4,
       muted: 5,
       playsinline: 6,
@@ -29965,14 +29965,14 @@ class C4 extends TransformStream {
   }
 }
 Ai = new WeakMap();
-async function V1(r) {
+async function Vb(r) {
   return r ? `<div style="display: flex; flex-wrap: wrap; gap: 16px">${(await Promise.all(
     r.map(async ([t, i]) => t === null || !t.url ? "" : await f_(t.url))
   )).map((t) => `<img src="${t}" style="height: 400px" />`).join("")}</div>` : "";
 }
 var Wr = typeof self < "u" ? self : global;
-const ls = typeof navigator < "u", K1 = ls && typeof HTMLImageElement > "u", Rr = !(typeof global > "u" || typeof process > "u" || !process.versions || !process.versions.node), Il = Wr.Buffer, zs = Wr.BigInt, xl = !!Il, H1 = (r) => r;
-function wr(r, e = H1) {
+const ls = typeof navigator < "u", Kb = ls && typeof HTMLImageElement > "u", Rr = !(typeof global > "u" || typeof process > "u" || !process.versions || !process.versions.node), Il = Wr.Buffer, zs = Wr.BigInt, xl = !!Il, Hb = (r) => r;
+function wr(r, e = Hb) {
   if (Rr) try {
     return typeof require == "function" ? Promise.resolve(e(require(r))) : import(
       /* webpackIgnore: true */
@@ -29983,7 +29983,7 @@ function wr(r, e = H1) {
   }
 }
 let Ll = Wr.fetch;
-const q1 = (r) => Ll = r;
+const qb = (r) => Ll = r;
 if (!Wr.fetch) {
   const r = wr("http", (i) => i), e = wr("https", (i) => i), t = (i, { headers: n } = {}) => new Promise(async (s, a) => {
     let { port: o, hostname: l, pathname: u, protocol: c, search: d } = new URL(i);
@@ -30001,14 +30001,14 @@ if (!Wr.fetch) {
     });
     f.on("error", a), f.end();
   });
-  q1(t);
+  qb(t);
 }
 function ie(r, e, t) {
   return e in r ? Object.defineProperty(r, e, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : r[e] = t, r;
 }
-const Fr = (r) => Pg(r) ? void 0 : r, z1 = (r) => r !== void 0;
+const Fr = (r) => Pg(r) ? void 0 : r, zb = (r) => r !== void 0;
 function Pg(r) {
-  return r === void 0 || (r instanceof Map ? r.size === 0 : Object.values(r).filter(z1).length === 0);
+  return r === void 0 || (r instanceof Map ? r.size === 0 : Object.values(r).filter(zb).length === 0);
 }
 function $e(r) {
   let e = new Error(r);
@@ -30163,8 +30163,8 @@ class kl extends Map {
   }
 }
 var Fn = new kl("file parser"), tt = new kl("segment parser"), $n = new kl("file reader");
-function W1(r, e) {
-  return typeof r == "string" ? hd(r, e) : ls && !K1 && r instanceof HTMLImageElement ? hd(r.src, e) : r instanceof Uint8Array || r instanceof ArrayBuffer || r instanceof DataView ? new pt(r) : ls && r instanceof Blob ? Oo(r, e, "blob", Bo) : void $e("Invalid input argument");
+function Wb(r, e) {
+  return typeof r == "string" ? hd(r, e) : ls && !Kb && r instanceof HTMLImageElement ? hd(r.src, e) : r instanceof Uint8Array || r instanceof ArrayBuffer || r instanceof DataView ? new pt(r) : ls && r instanceof Blob ? Oo(r, e, "blob", Bo) : void $e("Invalid input argument");
 }
 function hd(r, e) {
   return (t = r).startsWith("data:") || t.length > 1e4 ? $o(r, e, "base64") : Rr && r.includes("://") ? Oo(r, e, "url", Mo) : Rr ? $o(r, e, "fs") : ls ? Oo(r, e, "url", Mo) : void $e("Invalid input argument");
@@ -30184,7 +30184,7 @@ const Mo = (r) => Ll(r).then((e) => e.arrayBuffer()), Bo = (r) => new Promise((e
   let i = new FileReader();
   i.onloadend = () => e(i.result || new ArrayBuffer()), i.onerror = t, i.readAsArrayBuffer(r);
 });
-class j1 extends Map {
+class jb extends Map {
   get tagKeys() {
     return this.allKeys || (this.allKeys = Array.from(this.keys())), this.allKeys;
   }
@@ -30193,7 +30193,7 @@ class j1 extends Map {
   }
 }
 function Ze(r, e, t) {
-  let i = new j1();
+  let i = new jb();
   for (let [n, s] of t) i.set(n, s);
   if (Array.isArray(e)) for (let n of e) r.set(n, i);
   else r.set(e, i);
@@ -30327,12 +30327,12 @@ function Pr(r, e) {
   for (let t of e) r.add(t);
 }
 ie(Cl, "default", at);
-class Y1 {
+class Yb {
   constructor(e) {
     ie(this, "parsers", {}), ie(this, "output", {}), ie(this, "errors", []), ie(this, "pushToErrors", (t) => this.errors.push(t)), this.options = Cl.useCached(e);
   }
   async read(e) {
-    this.file = await W1(e, this.options);
+    this.file = await Wb(e, this.options);
   }
   setup() {
     if (this.fileParser) return;
@@ -30362,8 +30362,8 @@ class Y1 {
     return t.close && t.close(), o;
   }
 }
-async function X1(r, e) {
-  let t = new Y1(e);
+async function Xb(r, e) {
+  let t = new Yb(e);
   return await t.read(r), t.parse();
 }
 class jr {
@@ -30441,13 +30441,13 @@ class ei {
   }
 }
 ie(ei, "headerLength", 4), ie(ei, "type", void 0), ie(ei, "multiSegment", !1), ie(ei, "canHandle", () => !1);
-function Q1(r) {
+function Qb(r) {
   return r === 192 || r === 194 || r === 196 || r === 219 || r === 221 || r === 218 || r === 254;
 }
-function Z1(r) {
+function Zb(r) {
   return r >= 224 && r <= 239;
 }
-function J1(r, e, t) {
+function Jb(r, e, t) {
   for (let [i, n] of tt) if (n.canHandle(r, e, t)) return i;
 }
 class md extends jr {
@@ -30481,10 +30481,10 @@ class md extends jr {
     t -= 2;
     let i, n, s, a, o, l, { file: u, findAll: c, wanted: d, remaining: h, options: f } = this;
     for (; e < t; e++) if (u.getUint8(e) === 255) {
-      if (i = u.getUint8(e + 1), Z1(i)) {
-        if (n = u.getUint16(e + 2), s = J1(u, e, n), s && d.has(s) && (a = tt.get(s), o = a.findPosition(u, e), l = f[s], o.type = s, this.appSegments.push(o), !c && (a.multiSegment && l.multiSegment ? (this.unfinishedMultiSegment = o.chunkNumber < o.chunkCount, this.unfinishedMultiSegment || h.delete(s)) : h.delete(s), h.size === 0))) break;
+      if (i = u.getUint8(e + 1), Zb(i)) {
+        if (n = u.getUint16(e + 2), s = Jb(u, e, n), s && d.has(s) && (a = tt.get(s), o = a.findPosition(u, e), l = f[s], o.type = s, this.appSegments.push(o), !c && (a.multiSegment && l.multiSegment ? (this.unfinishedMultiSegment = o.chunkNumber < o.chunkCount, this.unfinishedMultiSegment || h.delete(s)) : h.delete(s), h.size === 0))) break;
         f.recordUnknownSegments && (o = ei.findPosition(u, e), o.marker = i, this.unknownSegments.push(o)), e += n + 1;
-      } else if (Q1(i)) {
+      } else if (Qb(i)) {
         if (n = u.getUint16(e + 2), i === 218 && f.stopAfterSos !== !1) return;
         f.recordJpegSegments && this.jpegSegments.push({ offset: e, length: n, marker: i }), e += n + 1;
       }
@@ -31504,7 +31504,7 @@ function ET(r) {
       s && s.l(g), g.forEach(X), f.forEach(X), this.h();
     },
     h() {
-      ae(i, "class", "grid-wrap svelte-1crbckc"), mt(
+      ae(i, "class", "grid-wrap svelte-1k19y3g"), mt(
         i,
         "minimal",
         /*mode*/
@@ -31524,7 +31524,7 @@ function ET(r) {
         /*height*/
         r[6] !== "auto" ? `${/*height*/
         r[6]}px` : null
-      ), ae(e, "class", "gallery-container svelte-1crbckc");
+      ), ae(e, "class", "gallery-container");
     },
     m(h, f) {
       ye(h, e, f), o && o.m(e, null), ue(e, t), ue(e, i), ~n && u[n].m(i, null), r[63](e), a = !0;
@@ -31670,12 +31670,12 @@ function Pd(r) {
       x.forEach(X), c = ke(D), b && b.l(D), D.forEach(X), this.h();
     },
     h() {
-      ae(n, "class", "media-container svelte-1crbckc"), ae(u, "class", "thumbnails scroll-hide svelte-1crbckc"), gt(
+      ae(n, "class", "media-container svelte-1k19y3g"), ae(u, "class", "thumbnails scroll-hide svelte-1k19y3g"), gt(
         u,
         "justify-content",
         /*thumbnails_overflow*/
         r[24] ? "flex-start" : "center"
-      ), ae(e, "class", "preview svelte-1crbckc"), ae(e, "aria-label", "Image Preview"), ae(e, "tabindex", "-1"), mt(
+      ), ae(e, "class", "preview svelte-1k19y3g"), ae(e, "aria-label", "Image Preview"), ae(e, "tabindex", "-1"), mt(
         e,
         "minimal",
         /*mode*/
@@ -31902,7 +31902,7 @@ function Bd(r) {
         /*value*/
         r[4]
       ),
-      formatter: V1
+      formatter: Vb
     }
   }), t.$on(
     "share",
@@ -32135,7 +32135,7 @@ function Ud(r) {
       i = nn(s, t), s.forEach(X), this.h();
     },
     h() {
-      ae(e, "class", "caption svelte-1crbckc");
+      ae(e, "class", "caption svelte-1k19y3g");
     },
     m(n, s) {
       ye(n, e, s), ue(e, i);
@@ -32277,7 +32277,7 @@ function Gd(r) {
       i.l(v), n = ke(v), v.forEach(X), this.h();
     },
     h() {
-      ae(e, "class", "thumbnail-item thumbnail-small svelte-1crbckc"), ae(e, "aria-label", s = "Thumbnail " + /*i*/
+      ae(e, "class", "thumbnail-item thumbnail-small svelte-1k19y3g"), ae(e, "aria-label", s = "Thumbnail " + /*i*/
       (r[75] + 1) + " of " + /*resolved_value*/
       r[16].length), mt(
         e,
@@ -32344,7 +32344,7 @@ function Vd(r) {
       i = he(v, "BUTTON", { class: !0, "data-svelte-h": !0 }), $r(i) !== "svelte-1irq3m4" && (i.textContent = n), s = ke(v), a = he(v, "H3", { class: !0, "data-svelte-h": !0 }), $r(a) !== "svelte-1tc7pig" && (a.textContent = o), l = ke(v), g.l(v), v.forEach(X), p.forEach(X), this.h();
     },
     h() {
-      ae(i, "class", "close-button svelte-1crbckc"), ae(a, "class", "popup-title svelte-1crbckc"), ae(t, "class", "popup-content svelte-1crbckc"), ae(e, "class", "metadata-popup svelte-1crbckc"), ae(e, "role", "presentation"), gt(e, "width", typeof /*popup_metadata_width*/
+      ae(i, "class", "close-button svelte-1k19y3g"), ae(a, "class", "popup-title svelte-1k19y3g"), ae(t, "class", "popup-content svelte-1k19y3g"), ae(e, "class", "metadata-popup svelte-1k19y3g"), ae(e, "role", "presentation"), gt(e, "width", typeof /*popup_metadata_width*/
       r[15] == "number" ? `${/*popup_metadata_width*/
       r[15]}px` : (
         /*popup_metadata_width*/
@@ -32389,7 +32389,7 @@ function xT(r) {
       e = he(i, "P", { class: !0, "data-svelte-h": !0 }), $r(e) !== "svelte-1qb2m81" && (e.textContent = t), this.h();
     },
     h() {
-      ae(e, "class", "no-metadata-message svelte-1crbckc");
+      ae(e, "class", "no-metadata-message svelte-1k19y3g");
     },
     m(i, n) {
       ye(i, e, n);
@@ -32426,7 +32426,7 @@ function LT(r) {
       g.forEach(X), f.forEach(X), h.forEach(X), n = ke(d), s = he(d, "BUTTON", { class: !0, "data-svelte-h": !0 }), $r(s) !== "svelte-o01tbk" && (s.textContent = a), this.h();
     },
     h() {
-      ae(t, "class", "metadata-table svelte-1crbckc"), ae(e, "class", "metadata-table-container svelte-1crbckc"), ae(s, "class", "load-metadata-button svelte-1crbckc");
+      ae(t, "class", "metadata-table svelte-1k19y3g"), ae(e, "class", "metadata-table-container svelte-1k19y3g"), ae(s, "class", "load-metadata-button svelte-1k19y3g");
     },
     m(d, h) {
       ye(d, e, h), ue(e, t), ue(t, i);
@@ -32483,7 +32483,7 @@ function Kd(r) {
       l = nn(f, o), f.forEach(X), u = ke(d), d.forEach(X), this.h();
     },
     h() {
-      ae(t, "class", "metadata-label svelte-1crbckc"), ae(a, "class", "metadata-value svelte-1crbckc");
+      ae(t, "class", "metadata-label svelte-1k19y3g"), ae(a, "class", "metadata-value svelte-1k19y3g");
     },
     m(c, d) {
       ye(c, e, d), ue(e, t), ue(t, n), ue(e, s), ue(e, a), ue(a, l), ue(e, u);
@@ -32555,7 +32555,7 @@ function kT(r) {
       a.l(b), o = ke(b), m && m.l(b), b.forEach(X), S.forEach(X), l = ke(y), p && p.l(y), y.forEach(X), _.forEach(X), this.h();
     },
     h() {
-      ae(n, "class", "thumbnail-item thumbnail-lg svelte-1crbckc"), ae(n, "aria-label", "View single item in preview mode"), ae(i, "class", "gallery-item svelte-1crbckc"), ae(t, "class", "gallery-item-with-name svelte-1crbckc"), ae(e, "class", "single-item-wrapper svelte-1crbckc"), gt(
+      ae(n, "class", "thumbnail-item thumbnail-lg svelte-1k19y3g"), ae(n, "aria-label", "View single item in preview mode"), ae(i, "class", "gallery-item svelte-1k19y3g"), ae(t, "class", "gallery-item-with-name svelte-1k19y3g"), ae(e, "class", "single-item-wrapper svelte-1k19y3g"), gt(
         e,
         "--object-fit",
         /*object_fit*/
@@ -32620,7 +32620,7 @@ function CT(r) {
       o.forEach(X), this.h();
     },
     h() {
-      ae(e, "class", "grid-container svelte-1crbckc"), mt(
+      ae(e, "class", "grid-container svelte-1k19y3g"), mt(
         e,
         "pt-6",
         /*show_label*/
@@ -32812,7 +32812,7 @@ function qd(r) {
       i = nn(s, t), s.forEach(X), this.h();
     },
     h() {
-      ae(e, "class", "caption-label svelte-1crbckc");
+      ae(e, "class", "caption-label svelte-1k19y3g");
     },
     m(n, s) {
       ye(n, e, s), ue(e, i);
@@ -32842,7 +32842,7 @@ function zd(r) {
       i = nn(a, t), a.forEach(X), this.h();
     },
     h() {
-      ae(e, "class", "thumbnail-filename svelte-1crbckc"), ae(e, "title", n = /*file_name*/
+      ae(e, "class", "thumbnail-filename svelte-1k19y3g"), ae(e, "title", n = /*file_name*/
       r[73]);
     },
     m(s, a) {
@@ -32964,7 +32964,7 @@ function Wd(r) {
       i = nn(s, t), s.forEach(X), this.h();
     },
     h() {
-      ae(e, "class", "caption-label svelte-1crbckc");
+      ae(e, "class", "caption-label svelte-1k19y3g");
     },
     m(n, s) {
       ye(n, e, s), ue(e, i);
@@ -32994,7 +32994,7 @@ function jd(r) {
       i = nn(a, t), a.forEach(X), this.h();
     },
     h() {
-      ae(e, "class", "thumbnail-filename svelte-1crbckc"), ae(e, "title", n = /*file_name*/
+      ae(e, "class", "thumbnail-filename svelte-1k19y3g"), ae(e, "title", n = /*file_name*/
       r[73]);
     },
     m(s, a) {
@@ -33051,7 +33051,7 @@ function Yd(r) {
       s.l(A), a = ke(A), p && p.l(A), A.forEach(X), b.forEach(X), l = ke(S), _ && _.l(S), u = ke(S), S.forEach(X), this.h();
     },
     h() {
-      ae(i, "class", "thumbnail-item thumbnail-lg svelte-1crbckc"), ae(i, "aria-label", o = "Thumbnail " + /*i*/
+      ae(i, "class", "thumbnail-item thumbnail-lg svelte-1k19y3g"), ae(i, "aria-label", o = "Thumbnail " + /*i*/
       (r[75] + 1) + " of " + /*resolved_value*/
       r[16].length), mt(
         i,
@@ -33059,7 +33059,7 @@ function Yd(r) {
         /*selected_index*/
         r[0] === /*i*/
         r[75]
-      ), ae(t, "class", "gallery-item svelte-1crbckc"), ae(e, "class", "gallery-item-with-name svelte-1crbckc");
+      ), ae(t, "class", "gallery-item svelte-1k19y3g"), ae(e, "class", "gallery-item-with-name svelte-1k19y3g");
     },
     m(y, S) {
       ye(y, e, S), ue(e, t), ue(t, i), g[n].m(i, null), ue(i, a), p && p.m(i, null), ue(e, l), _ && _.m(e, null), ue(e, u), c = !0, d || (h = Ni(i, "click", v), d = !0);
@@ -33211,7 +33211,7 @@ function MT(r, e, t) {
       if (!(P != null && P.url)) return null;
       if (P.url.toLowerCase().endsWith(".png") || P.url.toLowerCase().endsWith(".jpg") || P.url.toLowerCase().endsWith(".jpeg"))
         try {
-          const st = yield X1(P.url, !0);
+          const st = yield Xb(P.url, !0);
           let rt = {};
           if (st)
             for (const [Ft, qt] of Object.entries(st))

src/backend/gradio_mediagallery/templates/component/style.css

@@ -1 +1 @@
-.block.svelte-239wnu{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.fullscreen.svelte-239wnu{border-radius:0}.auto-margin.svelte-239wnu{margin-left:auto;margin-right:auto}.block.border_focus.svelte-239wnu{border-color:var(--color-accent)}.block.border_contrast.svelte-239wnu{border-color:var(--body-text-color)}.padded.svelte-239wnu{padding:var(--block-padding)}.hidden.svelte-239wnu{display:none}.flex.svelte-239wnu{display:flex;flex-direction:column}.hide-container.svelte-239wnu:not(.fullscreen){margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}.resize-handle.svelte-239wnu{position:absolute;bottom:0;right:0;width:10px;height:10px;fill:var(--block-border-color);cursor:nwse-resize}.fullscreen.svelte-239wnu{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;overflow:auto}.animating.svelte-239wnu{animation:svelte-239wnu-pop-out .1s ease-out forwards}@keyframes svelte-239wnu-pop-out{0%{position:fixed;top:var(--start-top);left:var(--start-left);width:var(--start-width);height:var(--start-height);z-index:100}to{position:fixed;top:0vh;left:0vw;width:100vw;height:100vh;z-index:1000}}.placeholder.svelte-239wnu{border-radius:var(--block-radius);border-width:var(--block-border-width);border-color:var(--block-border-color);border-style:dashed}Tables */ table,tr,td,th{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-xl)}.md code,.md pre{background:none;font-family:var(--font-mono);font-size:var(--text-sm);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}.md pre[class*=language-]::selection,.md pre[class*=language-] ::selection,.md code[class*=language-]::selection,.md code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}.md pre{padding:1em;margin:.5em 0;overflow:auto;position:relative;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);box-shadow:none;border:none;border-radius:var(--radius-md);background:var(--code-background-fill);padding:var(--spacing-xxl);font-family:var(--font-mono);text-shadow:none;border-radius:var(--radius-sm);white-space:nowrap;display:block;white-space:pre}.md :not(pre)>code{padding:.1em;border-radius:var(--radius-xs);white-space:normal;background:var(--code-background-fill);border:1px solid var(--panel-border-color);padding:var(--spacing-xxs) var(--spacing-xs)}.md .token.comment,.md .token.prolog,.md .token.doctype,.md .token.cdata{color:#708090}.md .token.punctuation{color:#999}.md .token.namespace{opacity:.7}.md .token.property,.md .token.tag,.md .token.boolean,.md .token.number,.md .token.constant,.md .token.symbol,.md .token.deleted{color:#905}.md .token.selector,.md .token.attr-name,.md .token.string,.md .token.char,.md .token.builtin,.md .token.inserted{color:#690}.md .token.atrule,.md .token.attr-value,.md .token.keyword{color:#07a}.md .token.function,.md .token.class-name{color:#dd4a68}.md .token.regex,.md .token.important,.md .token.variable{color:#e90}.md .token.important,.md .token.bold{font-weight:700}.md .token.italic{font-style:italic}.md .token.entity{cursor:help}.dark .md .token.comment,.dark .md .token.prolog,.dark .md .token.cdata{color:#5c6370}.dark .md .token.doctype,.dark .md .token.punctuation,.dark .md .token.entity{color:#abb2bf}.dark .md .token.attr-name,.dark .md .token.class-name,.dark .md .token.boolean,.dark .md .token.constant,.dark .md .token.number,.dark .md .token.atrule{color:#d19a66}.dark .md .token.keyword{color:#c678dd}.dark .md .token.property,.dark .md .token.tag,.dark .md .token.symbol,.dark .md .token.deleted,.dark .md .token.important{color:#e06c75}.dark .md .token.selector,.dark .md .token.string,.dark .md .token.char,.dark .md .token.builtin,.dark .md .token.inserted,.dark .md .token.regex,.dark .md .token.attr-value,.dark .md .token.attr-value>.token.punctuation{color:#98c379}.dark .md .token.variable,.dark .md .token.operator,.dark .md .token.function{color:#61afef}.dark .md .token.url{color:#56b6c2}span.svelte-1m32c2s div[class*=code_wrap]{position:relative}span.svelte-1m32c2s span.katex{font-size:var(--text-lg);direction:ltr}span.svelte-1m32c2s div[class*=code_wrap]>button{z-index:1;cursor:pointer;border-bottom-left-radius:var(--radius-sm);padding:var(--spacing-md);width:25px;height:25px;position:absolute;right:0}span.svelte-1m32c2s .check{opacity:0;z-index:var(--layer-top);transition:opacity .2s;background:var(--code-background-fill);color:var(--body-text-color);position:absolute;top:var(--size-1-5);left:var(--size-1-5)}span.svelte-1m32c2s p:not(:first-child){margin-top:var(--spacing-xxl)}span.svelte-1m32c2s .md-header-anchor{margin-left:-25px;padding-right:8px;line-height:1;color:var(--body-text-color-subdued);opacity:0}span.svelte-1m32c2s h1:hover .md-header-anchor,span.svelte-1m32c2s h2:hover .md-header-anchor,span.svelte-1m32c2s h3:hover .md-header-anchor,span.svelte-1m32c2s h4:hover .md-header-anchor,span.svelte-1m32c2s h5:hover .md-header-anchor,span.svelte-1m32c2s h6:hover .md-header-anchor{opacity:1}span.md.svelte-1m32c2s .md-header-anchor>svg{color:var(--body-text-color-subdued)}span.svelte-1m32c2s table{word-break:break-word}div.svelte-17qq50w>.md.prose{font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}div.svelte-17qq50w>.md.prose *{color:var(--block-info-text-color)}div.svelte-17qq50w{margin-bottom:var(--spacing-md)}span.has-info.svelte-zgrq3{margin-bottom:var(--spacing-xs)}span.svelte-zgrq3:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-zgrq3{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}span[dir=rtl].svelte-zgrq3{display:block}.hide.svelte-zgrq3{margin:0;height:0}label.svelte-igqdol.svelte-igqdol{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-igqdol.svelte-igqdol{border-top-left-radius:0}label.float.svelte-igqdol.svelte-igqdol{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-igqdol.svelte-igqdol:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-igqdol.svelte-igqdol{display:none}span.svelte-igqdol.svelte-igqdol{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-igqdol.svelte-igqdol{box-shadow:none;border-width:0;background:transparent;overflow:visible}label[dir=rtl].svelte-igqdol.svelte-igqdol{border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-right:none;border-bottom-left-radius:var(--block-radius);border-bottom-right-radius:var(--block-label-radius);border-top-left-radius:var(--block-label-radius)}label[dir=rtl].svelte-igqdol span.svelte-igqdol{margin-left:var(--size-2);margin-right:0}.unstyled-link.svelte-151nsdd{all:unset;cursor:pointer}button.svelte-y0enk4{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-xs);color:var(--block-label-text-color);border:1px solid var(--border-color);padding:var(--spacing-xxs)}button.svelte-y0enk4:hover{background-color:var(--background-fill-secondary)}button[disabled].svelte-y0enk4{opacity:.5;box-shadow:none}button[disabled].svelte-y0enk4:hover{cursor:not-allowed}.padded.svelte-y0enk4{background:var(--bg-color)}button.svelte-y0enk4:hover,button.highlight.svelte-y0enk4{cursor:pointer;color:var(--color-accent)}.padded.svelte-y0enk4:hover{color:var(--block-label-text-color)}span.svelte-y0enk4{padding:0 1px;font-size:10px}div.svelte-y0enk4{display:flex;align-items:center;justify-content:center;transition:filter .2s ease-in-out}.x-small.svelte-y0enk4{width:10px;height:10px}.small.svelte-y0enk4{width:14px;height:14px}.medium.svelte-y0enk4{width:20px;height:20px}.large.svelte-y0enk4{width:22px;height:22px}.pending.svelte-y0enk4{animation:svelte-y0enk4-flash .5s infinite}@keyframes svelte-y0enk4-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-y0enk4{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6,.dropdown-arrow.svelte-ihhdbf{fill:currentColor}.circle.svelte-ihhdbf{fill:currentColor;opacity:.1}svg.svelte-pb9pol{animation:svelte-pb9pol-spin 1.5s linear infinite}@keyframes svelte-pb9pol-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h2.svelte-1xg7h5n{font-size:var(--text-xl)!important}p.svelte-1xg7h5n,h2.svelte-1xg7h5n{white-space:pre-line}.wrap.svelte-1xg7h5n{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3);text-align:center;margin:auto var(--spacing-lg)}.or.svelte-1xg7h5n{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-1xg7h5n{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-1xg7h5n{font-size:var(--text-lg)}}.hovered.svelte-1xg7h5n{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-15ls1gu{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:100%;margin-left:auto;margin-right:auto;height:var(--size-10)}.icon.svelte-15ls1gu{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-15ls1gu{color:var(--color-accent)}.icon.svelte-15ls1gu:hover,.icon.svelte-15ls1gu:focus{color:var(--color-accent)}.icon-button-wrapper.svelte-1h0hs6p{display:flex;flex-direction:row;align-items:center;justify-content:center;z-index:var(--layer-2);gap:var(--spacing-sm);box-shadow:var(--shadow-drop);border:1px solid var(--border-color-primary);background:var(--block-background-fill);padding:var(--spacing-xxs)}.icon-button-wrapper.hide-top-corner.svelte-1h0hs6p{border-top:none;border-right:none;border-radius:var(--block-label-right-radius)}.icon-button-wrapper.display-top-corner.svelte-1h0hs6p{border-radius:var(--radius-sm) 0 0 var(--radius-sm);top:var(--spacing-sm);right:-1px}.icon-button-wrapper.svelte-1h0hs6p:not(.top-panel){border:1px solid var(--border-color-primary);border-radius:var(--radius-sm)}.top-panel.svelte-1h0hs6p{position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);margin:0}.icon-button-wrapper.svelte-1h0hs6p button{margin:var(--spacing-xxs);border-radius:var(--radius-xs);position:relative}.icon-button-wrapper.svelte-1h0hs6p a.download-link:not(:last-child),.icon-button-wrapper.svelte-1h0hs6p button:not(:last-child){margin-right:var(--spacing-xxs)}.icon-button-wrapper.svelte-1h0hs6p a.download-link:not(:last-child):not(.no-border *):after,.icon-button-wrapper.svelte-1h0hs6p button:not(:last-child):not(.no-border *):after{content:"";position:absolute;right:-4.5px;top:15%;height:70%;width:1px;background-color:var(--border-color-primary)}.icon-button-wrapper.svelte-1h0hs6p>*{height:100%}img.svelte-kxeri3{object-fit:cover}.image-container.svelte-x2tujq.svelte-x2tujq{height:100%;position:relative;min-width:var(--size-20)}.image-container.svelte-x2tujq button.svelte-x2tujq{width:var(--size-full);height:var(--size-full);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.image-frame.svelte-x2tujq img{width:var(--size-full);height:var(--size-full);object-fit:scale-down}.selectable.svelte-x2tujq.svelte-x2tujq{cursor:crosshair}.fullscreen-controls svg{position:relative;top:0}.image-container:fullscreen{background-color:#000;display:flex;justify-content:center;align-items:center}.image-container:fullscreen img{max-width:90vw;max-height:90vh;object-fit:scale-down}.image-frame.svelte-x2tujq.svelte-x2tujq{width:auto;height:100%;display:flex;align-items:center;justify-content:center}.overlay.svelte-1pwzuub{position:absolute;background-color:#0006;width:100%;height:100%}.hidden.svelte-1pwzuub{display:none}.load-wrap.svelte-1pwzuub{display:flex;justify-content:center;align-items:center;height:100%}.loader.svelte-1pwzuub{display:flex;position:relative;background-color:var(--border-color-accent-subdued);animation:svelte-1pwzuub-shadowPulse 2s linear infinite;box-shadow:-24px 0 var(--border-color-accent-subdued),24px 0 var(--border-color-accent-subdued);margin:var(--spacing-md);border-radius:50%;width:10px;height:10px;scale:.5}@keyframes svelte-1pwzuub-shadowPulse{33%{box-shadow:-24px 0 var(--border-color-accent-subdued),24px 0 #fff;background:#fff}66%{box-shadow:-24px 0 #fff,24px 0 #fff;background:var(--border-color-accent-subdued)}to{box-shadow:-24px 0 #fff,24px 0 var(--border-color-accent-subdued);background:#fff}}.gallery-container.svelte-1crbckc.svelte-1crbckc{position:relative;width:100%;height:100%}button.svelte-1crbckc.svelte-1crbckc{width:var(--size-full);height:var(--size-full);display:block;border-radius:var(--radius-lg)}.preview.svelte-1crbckc.svelte-1crbckc{display:flex;position:absolute;flex-direction:column;z-index:var(--layer-2);border-radius:calc(var(--block-radius) - var(--block-border-width));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:var(--size-full);height:var(--size-full)}.preview.svelte-1crbckc.svelte-1crbckc:focus-visible{outline:none}.preview.minimal.svelte-1crbckc.svelte-1crbckc{width:fit-content;height:fit-content}.preview.svelte-1crbckc.svelte-1crbckc:before{content:"";position:absolute;z-index:var(--layer-below);background:var(--background-fill-primary);opacity:.9;width:var(--size-full);height:var(--size-full)}.fixed-height.svelte-1crbckc.svelte-1crbckc{min-height:var(--size-80);max-height:65vh}@media (--screen-xl){.fixed-height.svelte-1crbckc.svelte-1crbckc{min-height:450px}}.media-container.svelte-1crbckc.svelte-1crbckc{height:calc(100% - var(--size-14));width:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}.media-container.svelte-1crbckc img,.media-container.svelte-1crbckc video{max-width:100%;max-height:100%;object-fit:contain}.thumbnails.svelte-1crbckc img{object-fit:cover;width:var(--size-full);height:var(--size-full)}.thumbnails.svelte-1crbckc svg{position:absolute;top:var(--size-2);left:var(--size-2);width:50%;height:50%;opacity:50%}.caption.svelte-1crbckc.svelte-1crbckc{padding:var(--size-2) var(--size-3);overflow:hidden;color:var(--block-label-text-color);font-weight:var(--weight-semibold);text-align:center;text-overflow:ellipsis;white-space:nowrap;align-self:center}.thumbnails.svelte-1crbckc.svelte-1crbckc{display:flex;position:absolute;bottom:0;justify-content:flex-start;align-items:center;gap:var(--spacing-lg);width:var(--size-full);height:var(--size-14);overflow-x:scroll}.thumbnail-item.svelte-1crbckc.svelte-1crbckc{--ring-color:transparent;position:relative;box-shadow:inset 0 0 0 1px var(--ring-color),var(--shadow-drop);border:1px solid var(--border-color-primary);border-radius:var(--button-small-radius);background:var(--background-fill-secondary);aspect-ratio:var(--ratio-square);width:var(--size-full);height:var(--size-full);overflow:clip}.thumbnail-item.svelte-1crbckc.svelte-1crbckc:hover{--ring-color:var(--color-accent);border-color:var(--color-accent);filter:brightness(1.1)}.thumbnail-item.selected.svelte-1crbckc.svelte-1crbckc{--ring-color:var(--color-accent);border-color:var(--color-accent)}.thumbnail-item.svelte-1crbckc svg{position:absolute;top:50%;left:50%;width:50%;height:50%;opacity:50%;transform:translate(-50%,-50%)}.thumbnail-item.svelte-1crbckc video{width:var(--size-full);height:var(--size-full);overflow:hidden;object-fit:cover}.thumbnail-small.svelte-1crbckc.svelte-1crbckc{flex:none;transform:scale(.9);transition:75ms;width:var(--size-9);height:var(--size-9)}.thumbnail-small.selected.svelte-1crbckc.svelte-1crbckc{--ring-color:var(--color-accent);transform:scale(1);border-color:var(--color-accent)}.grid-wrap.svelte-1crbckc.svelte-1crbckc{position:relative;padding:var(--size-2);overflow-y:auto}.grid-wrap.fixed-height.svelte-1crbckc.svelte-1crbckc{min-height:var(--size-80);max-height:65vh}.grid-container.svelte-1crbckc.svelte-1crbckc{display:grid;position:relative;grid-template-rows:repeat(var(--grid-rows),minmax(100px,1fr));grid-template-columns:repeat(var(--grid-cols),minmax(100px,1fr));grid-auto-rows:minmax(100px,1fr);gap:var(--spacing-lg)}.single-item-wrapper.svelte-1crbckc.svelte-1crbckc{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--spacing-xxl);box-sizing:border-box}.single-item-wrapper.svelte-1crbckc .gallery-item-with-name.svelte-1crbckc{width:100%;height:100%;max-width:min(300px,80vw);max-height:min(320px,calc(80vh - var(--size-4)));display:flex;flex-direction:column;align-items:center}.single-item-wrapper.svelte-1crbckc .gallery-item.svelte-1crbckc{width:100%;height:100%;max-width:100%;max-height:100%}.single-item-wrapper.svelte-1crbckc .thumbnail-item.thumbnail-lg.svelte-1crbckc{display:flex!important;align-items:center!important;justify-content:center!important}.single-item-wrapper.svelte-1crbckc .thumbnail-filename.svelte-1crbckc{height:var(--size-4);line-height:var(--size-4)}.single-item-wrapper.svelte-1crbckc .thumbnail-lg.svelte-1crbckc>img,.single-item-wrapper.svelte-1crbckc .thumbnail-lg.svelte-1crbckc>video{object-fit:var(--object-fit)!important}.thumbnail-lg.svelte-1crbckc>img,.thumbnail-lg.svelte-1crbckc>video{width:var(--size-full);height:var(--size-full);overflow:hidden;object-fit:var(--object-fit)}.thumbnail-lg.svelte-1crbckc:hover .caption-label.svelte-1crbckc{opacity:.5}.caption-label.svelte-1crbckc.svelte-1crbckc{position:absolute;right:var(--block-label-margin);bottom:var(--block-label-margin);z-index:var(--layer-1);border-top:1px solid var(--border-color-primary);border-left:1px solid var(--border-color-primary);border-radius:var(--block-label-radius);background:var(--background-fill-secondary);padding:var(--block-label-padding);max-width:80%;overflow:hidden;font-size:var(--block-label-text-size);text-align:left;text-overflow:ellipsis;white-space:nowrap}.grid-wrap.minimal.svelte-1crbckc.svelte-1crbckc{padding:0}.gallery-item-with-name.svelte-1crbckc.svelte-1crbckc{display:flex;flex-direction:column;gap:var(--size-1);width:100%;height:100%}.thumbnail-filename.svelte-1crbckc.svelte-1crbckc{font-size:var(--text-xs);color:var(--body-text-color);text-align:center;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 var(--size-1)}.gallery-item.svelte-1crbckc.svelte-1crbckc{position:relative;width:100%;height:100%}.metadata-popup.svelte-1crbckc.svelte-1crbckc{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--background-fill-primary, white);border:1px solid var(--border-color-primary);box-shadow:0 4px 8px #0003;z-index:1000;border-radius:8px;max-width:min(90%,600px);max-height:min(50vh,calc(100% - 2rem));min-height:200px;display:flex;flex-direction:column;pointer-events:auto}.popup-content.svelte-1crbckc.svelte-1crbckc{padding:1rem;display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow-y:auto;position:relative}.close-button.svelte-1crbckc.svelte-1crbckc{position:absolute;top:.5rem;right:.5rem;background:none;border:none;font-size:1.25rem;cursor:pointer;z-index:20;color:var(--body-text-color);padding:.25rem;line-height:1;width:24px;height:24px;text-align:center}.popup-title.svelte-1crbckc.svelte-1crbckc{font-weight:700;margin:0 0 1rem;flex-shrink:0;padding-right:2.5rem}.metadata-table-container.svelte-1crbckc.svelte-1crbckc{flex-grow:1;overflow-y:auto;max-height:calc(100% - 5rem);min-height:0;margin-bottom:1rem}.metadata-table.svelte-1crbckc.svelte-1crbckc{width:100%;border-collapse:collapse;table-layout:auto}.metadata-label.svelte-1crbckc.svelte-1crbckc{background:var(--background-fill-secondary, #f5f5f5);padding:.5rem;font-weight:700;text-align:left;vertical-align:top;width:35%}.metadata-value.svelte-1crbckc.svelte-1crbckc{text-align:left;padding:.5rem;white-space:pre-wrap;word-break:break-all;vertical-align:top}.load-metadata-button.svelte-1crbckc.svelte-1crbckc{margin-top:1rem;padding:.5rem 1rem;background-color:var(--button-primary-background-fill);color:var(--button-primary-text-color);border:none;border-radius:4px;cursor:pointer;align-self:center;flex-shrink:0}.load-metadata-button.svelte-1crbckc.svelte-1crbckc:hover{background-color:var(--button-primary-background-fill-hover)}.no-metadata-message.svelte-1crbckc.svelte-1crbckc{flex-grow:1;display:flex;align-items:center;justify-content:center;color:var(--body-text-color-subdued)}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-vusapu.svelte-vusapu{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-3);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);overflow:hidden;pointer-events:none}.wrap.center.svelte-vusapu.svelte-vusapu{top:0;right:0;left:0}.wrap.default.svelte-vusapu.svelte-vusapu{top:0;right:0;bottom:0;left:0}.hide.svelte-vusapu.svelte-vusapu{opacity:0;pointer-events:none}.generating.svelte-vusapu.svelte-vusapu{animation:svelte-vusapu-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-vusapu-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-vusapu.svelte-vusapu{background:none}@keyframes svelte-vusapu-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-vusapu-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-vusapu.svelte-vusapu{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-vusapu.svelte-vusapu{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-vusapu.svelte-vusapu{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-vusapu.svelte-vusapu{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-vusapu.svelte-vusapu{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-vusapu.svelte-vusapu{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-vusapu.svelte-vusapu{position:absolute;bottom:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-vusapu.svelte-vusapu{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-vusapu.svelte-vusapu{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.validation-error.svelte-vusapu.svelte-vusapu{pointer-events:auto;color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font);position:absolute;background:var(--error-background-fill);top:0;right:0;z-index:var(--layer-3);padding:var(--size-1) var(--size-2);font-size:var(--text-md);text-align:center;border-bottom-left-radius:var(--radius-sm);border-bottom:1px solid var(--error-border-color);border-left:1px solid var(--error-border-color);display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-xl)}.minimal.svelte-vusapu.svelte-vusapu{pointer-events:none}.minimal.svelte-vusapu .progress-text.svelte-vusapu{background:var(--block-background-fill)}.border.svelte-vusapu.svelte-vusapu{border:1px solid var(--border-color-primary)}.clear-status.svelte-vusapu.svelte-vusapu{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-syezpc{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-syezpc{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-syezpc{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-body.success.svelte-syezpc{border:1px solid var(--color-green-700);background:var(--color-green-50)}.dark .toast-body.success.svelte-syezpc{border:1px solid var(--color-green-500);background-color:var(--color-grey-950)}.toast-title.svelte-syezpc{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm)}.toast-title.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-title.error.svelte-syezpc{color:var(--color-red-50)}.toast-title.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-title.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-title.info.svelte-syezpc{color:var(--color-grey-50)}.toast-title.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-title.success.svelte-syezpc{color:var(--color-green-50)}.toast-close.svelte-syezpc{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-close.error.svelte-syezpc{color:var(--color-red-500)}.toast-close.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-close.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-close.info.svelte-syezpc{color:var(--color-grey-500)}.toast-close.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-close.success.svelte-syezpc{color:var(--color-green-500)}.toast-text.svelte-syezpc{font-size:var(--text-lg);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.toast-text.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-text.error.svelte-syezpc{color:var(--color-red-50)}.toast-text.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-text.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-text.info.svelte-syezpc{color:var(--color-grey-50)}.toast-text.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-text.success.svelte-syezpc{color:var(--color-green-50)}.toast-details.svelte-syezpc{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-syezpc{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-icon.error.svelte-syezpc{color:var(--color-red-500)}.toast-icon.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-icon.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-syezpc{color:var(--color-grey-500)}.toast-icon.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-icon.success.svelte-syezpc{color:var(--color-green-500)}@keyframes svelte-syezpc-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-syezpc{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-syezpc-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-syezpc{background:var(--color-red-700)}.dark .timer.error.svelte-syezpc{background:var(--color-red-500)}.timer.warning.svelte-syezpc{background:var(--color-yellow-700)}.dark .timer.warning.svelte-syezpc{background:var(--color-yellow-500)}.timer.info.svelte-syezpc{background:var(--color-grey-700)}.dark .timer.info.svelte-syezpc{background:var(--color-grey-500)}.timer.success.svelte-syezpc{background:var(--color-green-700)}.dark .timer.success.svelte-syezpc{background:var(--color-green-500)}.hidden.svelte-syezpc{display:none}.toast-text.svelte-syezpc a{text-decoration:underline}.toast-wrap.svelte-je2isz{--toast-top:var(--size-4);display:flex;position:fixed;top:calc(var(--toast-top) + var(--size-4));right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-je2isz{width:calc(var(--size-96) + var(--size-10))}}.streaming-bar.svelte-ga0jj6{position:absolute;bottom:0;left:0;right:0;height:4px;background-color:var(--primary-600);animation:svelte-ga0jj6-countdown linear forwards;z-index:1}@keyframes svelte-ga0jj6-countdown{0%{transform:translate(0)}to{transform:translate(-100%)}}:global(*::-webkit-scrollbar){width:8px;height:8px;background-color:transparent}:global(*::-webkit-scrollbar-track){background:transparent;border-radius:10px}:global(*::-webkit-scrollbar-thumb){background-color:#8886;border-radius:10px;border:2px solid transparent;background-clip:content-box}:global(*::-webkit-scrollbar-thumb:hover){background-color:#888888b3}:global(html){scrollbar-width:thin;scrollbar-color:rgba(136,136,136,.7) transparent}.gallery-container{position:relative;width:100%;height:100%}button{width:var(--size-full);height:var(--size-full);display:block;border-radius:var(--radius-lg)}.preview{display:flex;position:absolute;flex-direction:column;z-index:var(--layer-2);border-radius:calc(var(--block-radius) - var(--block-border-width));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:var(--size-full);height:var(--size-full)}.preview:focus-visible{outline:none}.preview.minimal{width:fit-content;height:fit-content}.preview:before{content:"";position:absolute;z-index:var(--layer-below);background:var(--background-fill-primary);opacity:.9;width:var(--size-full);height:var(--size-full)}.fixed-height{min-height:var(--size-80);max-height:65vh}@media (--screen-xl){.fixed-height{min-height:450px}}.media-container{height:calc(100% - var(--size-14));width:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}.media-container :global(img),.media-container :global(video){max-width:100%;max-height:100%;object-fit:contain}.thumbnails :global(img){object-fit:cover;width:var(--size-full);height:var(--size-full)}.thumbnails :global(svg){position:absolute;top:var(--size-2);left:var(--size-2);width:50%;height:50%;opacity:50%}.caption{padding:var(--size-2) var(--size-3);overflow:hidden;color:var(--block-label-text-color);font-weight:var(--weight-semibold);text-align:center;text-overflow:ellipsis;white-space:nowrap;align-self:center}.thumbnails{display:flex;position:absolute;bottom:0;justify-content:flex-start;align-items:center;gap:var(--spacing-lg);width:var(--size-full);height:var(--size-14);overflow-x:scroll}.thumbnail-item{--ring-color: transparent;position:relative;box-shadow:inset 0 0 0 1px var(--ring-color),var(--shadow-drop);border:1px solid var(--border-color-primary);border-radius:var(--button-small-radius);background:var(--background-fill-secondary);aspect-ratio:var(--ratio-square);width:var(--size-full);height:var(--size-full);overflow:clip}.thumbnail-item:hover{--ring-color: var(--color-accent);border-color:var(--color-accent);filter:brightness(1.1)}.thumbnail-item.selected{--ring-color: var(--color-accent);border-color:var(--color-accent)}.thumbnail-item :global(svg){position:absolute;top:50%;left:50%;width:50%;height:50%;opacity:50%;transform:translate(-50%,-50%)}.thumbnail-item :global(video){width:var(--size-full);height:var(--size-full);overflow:hidden;object-fit:cover}.thumbnail-small{flex:none;transform:scale(.9);transition:75ms;width:var(--size-9);height:var(--size-9)}.thumbnail-small.selected{--ring-color: var(--color-accent);transform:scale(1);border-color:var(--color-accent)}.grid-wrap{position:relative;padding:var(--size-2);overflow-y:auto}.grid-wrap.fixed-height{min-height:var(--size-80);max-height:65vh}.grid-container{display:grid;position:relative;grid-template-rows:repeat(var(--grid-rows),minmax(100px,1fr));grid-template-columns:repeat(var(--grid-cols),minmax(100px,1fr));grid-auto-rows:minmax(100px,1fr);gap:var(--spacing-lg)}.single-item-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--spacing-xxl);box-sizing:border-box}.single-item-wrapper .gallery-item-with-name{width:100%;height:100%;max-width:min(300px,80vw);max-height:min(320px,calc(80vh - var(--size-4)));display:flex;flex-direction:column;align-items:center}.single-item-wrapper .gallery-item{width:100%;height:100%;max-width:100%;max-height:100%}.single-item-wrapper .thumbnail-item.thumbnail-lg{display:flex!important;align-items:center!important;justify-content:center!important}.single-item-wrapper .thumbnail-filename{height:var(--size-4);line-height:var(--size-4)}.single-item-wrapper .thumbnail-lg>:global(img),.single-item-wrapper .thumbnail-lg>:global(video){object-fit:var(--object-fit)!important}.thumbnail-lg>:global(img),.thumbnail-lg>:global(video){width:var(--size-full);height:var(--size-full);overflow:hidden;object-fit:var(--object-fit)}.thumbnail-lg:hover .caption-label{opacity:.5}.caption-label{position:absolute;right:var(--block-label-margin);bottom:var(--block-label-margin);z-index:var(--layer-1);border-top:1px solid var(--border-color-primary);border-left:1px solid var(--border-color-primary);border-radius:var(--block-label-radius);background:var(--background-fill-secondary);padding:var(--block-label-padding);max-width:80%;overflow:hidden;font-size:var(--block-label-text-size);text-align:left;text-overflow:ellipsis;white-space:nowrap}.grid-wrap.minimal{padding:0}.gallery-item-with-name{display:flex;flex-direction:column;gap:var(--size-1);width:100%;height:100%}.thumbnail-filename{font-size:var(--text-xs);color:var(--body-text-color);text-align:center;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 var(--size-1)}.gallery-item{position:relative;width:100%;height:100%}.metadata-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--background-fill-primary, white);border:1px solid var(--border-color-primary);box-shadow:0 4px 8px #0003;z-index:1000;border-radius:8px;max-width:min(90%,600px);max-height:min(50vh,calc(100% - 2rem));min-height:200px;display:flex;flex-direction:column;pointer-events:auto}.popup-content{padding:1rem;display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow-y:auto;position:relative}.close-button{position:absolute;top:.5rem;right:.5rem;background:none;border:none;font-size:1.25rem;cursor:pointer;z-index:20;color:var(--body-text-color);padding:.25rem;line-height:1;width:24px;height:24px;text-align:center}.popup-title{font-weight:700;margin:0 0 1rem;flex-shrink:0;padding-right:2.5rem}.metadata-table-container{flex-grow:1;overflow-y:auto;max-height:calc(100% - 5rem);min-height:0;margin-bottom:1rem}.metadata-table{width:100%;border-collapse:collapse;table-layout:auto}.metadata-label{background:var(--background-fill-secondary, #f5f5f5);padding:.5rem;font-weight:700;text-align:left;vertical-align:top;width:35%}.metadata-value{text-align:left;padding:.5rem;white-space:pre-wrap;word-break:break-all;vertical-align:top}.load-metadata-button{margin-top:1rem;padding:.5rem 1rem;background-color:var(--button-primary-background-fill);color:var(--button-primary-text-color);border:none;border-radius:4px;cursor:pointer;align-self:center;flex-shrink:0}.load-metadata-button:hover{background-color:var(--button-primary-background-fill-hover)}.no-metadata-message{flex-grow:1;display:flex;align-items:center;justify-content:center;color:var(--body-text-color-subdued)}.container.svelte-1onbytl.svelte-1onbytl{border-radius:var(--radius-lg);overflow:hidden}.container.selected.svelte-1onbytl.svelte-1onbytl{border:2px solid var(--border-color-accent)}.images-wrapper.svelte-1onbytl.svelte-1onbytl{display:flex;gap:var(--spacing-sm)}.container.table.svelte-1onbytl .images-wrapper.svelte-1onbytl{flex-direction:row;align-items:center;padding:var(--spacing-sm);border:1px solid var(--border-color-primary);border-radius:var(--radius-lg);background:var(--background-fill-secondary)}.container.gallery.svelte-1onbytl .images-wrapper.svelte-1onbytl{flex-direction:row;gap:0}.image-container.svelte-1onbytl.svelte-1onbytl{position:relative;flex-shrink:0}.container.table.svelte-1onbytl .image-container.svelte-1onbytl{width:var(--size-12);height:var(--size-12)}.container.gallery.svelte-1onbytl .image-container.svelte-1onbytl{width:var(--size-20);height:var(--size-20);margin-left:calc(-1 * var(--size-8))}.container.gallery.svelte-1onbytl .image-container.svelte-1onbytl:first-child{margin-left:0}.more-indicator.svelte-1onbytl.svelte-1onbytl{display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);font-weight:700;color:var(--border-color-primary)}.container.table.svelte-1onbytl .more-indicator.svelte-1onbytl{width:var(--size-12);height:var(--size-12)}.container.gallery.svelte-1onbytl .more-indicator.svelte-1onbytl{width:var(--size-20);height:var(--size-20);margin-left:calc(-1 * var(--size-8));margin-right:calc(-1 * var(--size-6))}.image-container.svelte-1onbytl img.svelte-1onbytl,.image-container.svelte-1onbytl video.svelte-1onbytl{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-md)}.caption.svelte-1onbytl.svelte-1onbytl{position:absolute;bottom:0;left:0;right:0;background:#000000b3;color:#fff;padding:var(--spacing-xs);font-size:var(--text-xs);text-align:center;border-radius:0 0 var(--radius-md) var(--radius-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.table.svelte-1onbytl .caption.svelte-1onbytl{display:none}
+.block.svelte-239wnu{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.fullscreen.svelte-239wnu{border-radius:0}.auto-margin.svelte-239wnu{margin-left:auto;margin-right:auto}.block.border_focus.svelte-239wnu{border-color:var(--color-accent)}.block.border_contrast.svelte-239wnu{border-color:var(--body-text-color)}.padded.svelte-239wnu{padding:var(--block-padding)}.hidden.svelte-239wnu{display:none}.flex.svelte-239wnu{display:flex;flex-direction:column}.hide-container.svelte-239wnu:not(.fullscreen){margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}.resize-handle.svelte-239wnu{position:absolute;bottom:0;right:0;width:10px;height:10px;fill:var(--block-border-color);cursor:nwse-resize}.fullscreen.svelte-239wnu{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;overflow:auto}.animating.svelte-239wnu{animation:svelte-239wnu-pop-out .1s ease-out forwards}@keyframes svelte-239wnu-pop-out{0%{position:fixed;top:var(--start-top);left:var(--start-left);width:var(--start-width);height:var(--start-height);z-index:100}to{position:fixed;top:0vh;left:0vw;width:100vw;height:100vh;z-index:1000}}.placeholder.svelte-239wnu{border-radius:var(--block-radius);border-width:var(--block-border-width);border-color:var(--block-border-color);border-style:dashed}Tables */ table,tr,td,th{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-xl)}.md code,.md pre{background:none;font-family:var(--font-mono);font-size:var(--text-sm);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}.md pre[class*=language-]::selection,.md pre[class*=language-] ::selection,.md code[class*=language-]::selection,.md code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}.md pre{padding:1em;margin:.5em 0;overflow:auto;position:relative;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);box-shadow:none;border:none;border-radius:var(--radius-md);background:var(--code-background-fill);padding:var(--spacing-xxl);font-family:var(--font-mono);text-shadow:none;border-radius:var(--radius-sm);white-space:nowrap;display:block;white-space:pre}.md :not(pre)>code{padding:.1em;border-radius:var(--radius-xs);white-space:normal;background:var(--code-background-fill);border:1px solid var(--panel-border-color);padding:var(--spacing-xxs) var(--spacing-xs)}.md .token.comment,.md .token.prolog,.md .token.doctype,.md .token.cdata{color:#708090}.md .token.punctuation{color:#999}.md .token.namespace{opacity:.7}.md .token.property,.md .token.tag,.md .token.boolean,.md .token.number,.md .token.constant,.md .token.symbol,.md .token.deleted{color:#905}.md .token.selector,.md .token.attr-name,.md .token.string,.md .token.char,.md .token.builtin,.md .token.inserted{color:#690}.md .token.atrule,.md .token.attr-value,.md .token.keyword{color:#07a}.md .token.function,.md .token.class-name{color:#dd4a68}.md .token.regex,.md .token.important,.md .token.variable{color:#e90}.md .token.important,.md .token.bold{font-weight:700}.md .token.italic{font-style:italic}.md .token.entity{cursor:help}.dark .md .token.comment,.dark .md .token.prolog,.dark .md .token.cdata{color:#5c6370}.dark .md .token.doctype,.dark .md .token.punctuation,.dark .md .token.entity{color:#abb2bf}.dark .md .token.attr-name,.dark .md .token.class-name,.dark .md .token.boolean,.dark .md .token.constant,.dark .md .token.number,.dark .md .token.atrule{color:#d19a66}.dark .md .token.keyword{color:#c678dd}.dark .md .token.property,.dark .md .token.tag,.dark .md .token.symbol,.dark .md .token.deleted,.dark .md .token.important{color:#e06c75}.dark .md .token.selector,.dark .md .token.string,.dark .md .token.char,.dark .md .token.builtin,.dark .md .token.inserted,.dark .md .token.regex,.dark .md .token.attr-value,.dark .md .token.attr-value>.token.punctuation{color:#98c379}.dark .md .token.variable,.dark .md .token.operator,.dark .md .token.function{color:#61afef}.dark .md .token.url{color:#56b6c2}span.svelte-1m32c2s div[class*=code_wrap]{position:relative}span.svelte-1m32c2s span.katex{font-size:var(--text-lg);direction:ltr}span.svelte-1m32c2s div[class*=code_wrap]>button{z-index:1;cursor:pointer;border-bottom-left-radius:var(--radius-sm);padding:var(--spacing-md);width:25px;height:25px;position:absolute;right:0}span.svelte-1m32c2s .check{opacity:0;z-index:var(--layer-top);transition:opacity .2s;background:var(--code-background-fill);color:var(--body-text-color);position:absolute;top:var(--size-1-5);left:var(--size-1-5)}span.svelte-1m32c2s p:not(:first-child){margin-top:var(--spacing-xxl)}span.svelte-1m32c2s .md-header-anchor{margin-left:-25px;padding-right:8px;line-height:1;color:var(--body-text-color-subdued);opacity:0}span.svelte-1m32c2s h1:hover .md-header-anchor,span.svelte-1m32c2s h2:hover .md-header-anchor,span.svelte-1m32c2s h3:hover .md-header-anchor,span.svelte-1m32c2s h4:hover .md-header-anchor,span.svelte-1m32c2s h5:hover .md-header-anchor,span.svelte-1m32c2s h6:hover .md-header-anchor{opacity:1}span.md.svelte-1m32c2s .md-header-anchor>svg{color:var(--body-text-color-subdued)}span.svelte-1m32c2s table{word-break:break-word}div.svelte-17qq50w>.md.prose{font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}div.svelte-17qq50w>.md.prose *{color:var(--block-info-text-color)}div.svelte-17qq50w{margin-bottom:var(--spacing-md)}span.has-info.svelte-zgrq3{margin-bottom:var(--spacing-xs)}span.svelte-zgrq3:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-zgrq3{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}span[dir=rtl].svelte-zgrq3{display:block}.hide.svelte-zgrq3{margin:0;height:0}label.svelte-igqdol.svelte-igqdol{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-igqdol.svelte-igqdol{border-top-left-radius:0}label.float.svelte-igqdol.svelte-igqdol{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-igqdol.svelte-igqdol:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-igqdol.svelte-igqdol{display:none}span.svelte-igqdol.svelte-igqdol{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-igqdol.svelte-igqdol{box-shadow:none;border-width:0;background:transparent;overflow:visible}label[dir=rtl].svelte-igqdol.svelte-igqdol{border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-right:none;border-bottom-left-radius:var(--block-radius);border-bottom-right-radius:var(--block-label-radius);border-top-left-radius:var(--block-label-radius)}label[dir=rtl].svelte-igqdol span.svelte-igqdol{margin-left:var(--size-2);margin-right:0}.unstyled-link.svelte-151nsdd{all:unset;cursor:pointer}button.svelte-y0enk4{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-xs);color:var(--block-label-text-color);border:1px solid var(--border-color);padding:var(--spacing-xxs)}button.svelte-y0enk4:hover{background-color:var(--background-fill-secondary)}button[disabled].svelte-y0enk4{opacity:.5;box-shadow:none}button[disabled].svelte-y0enk4:hover{cursor:not-allowed}.padded.svelte-y0enk4{background:var(--bg-color)}button.svelte-y0enk4:hover,button.highlight.svelte-y0enk4{cursor:pointer;color:var(--color-accent)}.padded.svelte-y0enk4:hover{color:var(--block-label-text-color)}span.svelte-y0enk4{padding:0 1px;font-size:10px}div.svelte-y0enk4{display:flex;align-items:center;justify-content:center;transition:filter .2s ease-in-out}.x-small.svelte-y0enk4{width:10px;height:10px}.small.svelte-y0enk4{width:14px;height:14px}.medium.svelte-y0enk4{width:20px;height:20px}.large.svelte-y0enk4{width:22px;height:22px}.pending.svelte-y0enk4{animation:svelte-y0enk4-flash .5s infinite}@keyframes svelte-y0enk4-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-y0enk4{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6,.dropdown-arrow.svelte-ihhdbf{fill:currentColor}.circle.svelte-ihhdbf{fill:currentColor;opacity:.1}svg.svelte-pb9pol{animation:svelte-pb9pol-spin 1.5s linear infinite}@keyframes svelte-pb9pol-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h2.svelte-1xg7h5n{font-size:var(--text-xl)!important}p.svelte-1xg7h5n,h2.svelte-1xg7h5n{white-space:pre-line}.wrap.svelte-1xg7h5n{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3);text-align:center;margin:auto var(--spacing-lg)}.or.svelte-1xg7h5n{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-1xg7h5n{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-1xg7h5n{font-size:var(--text-lg)}}.hovered.svelte-1xg7h5n{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-15ls1gu{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:100%;margin-left:auto;margin-right:auto;height:var(--size-10)}.icon.svelte-15ls1gu{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-15ls1gu{color:var(--color-accent)}.icon.svelte-15ls1gu:hover,.icon.svelte-15ls1gu:focus{color:var(--color-accent)}.icon-button-wrapper.svelte-1h0hs6p{display:flex;flex-direction:row;align-items:center;justify-content:center;z-index:var(--layer-2);gap:var(--spacing-sm);box-shadow:var(--shadow-drop);border:1px solid var(--border-color-primary);background:var(--block-background-fill);padding:var(--spacing-xxs)}.icon-button-wrapper.hide-top-corner.svelte-1h0hs6p{border-top:none;border-right:none;border-radius:var(--block-label-right-radius)}.icon-button-wrapper.display-top-corner.svelte-1h0hs6p{border-radius:var(--radius-sm) 0 0 var(--radius-sm);top:var(--spacing-sm);right:-1px}.icon-button-wrapper.svelte-1h0hs6p:not(.top-panel){border:1px solid var(--border-color-primary);border-radius:var(--radius-sm)}.top-panel.svelte-1h0hs6p{position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);margin:0}.icon-button-wrapper.svelte-1h0hs6p button{margin:var(--spacing-xxs);border-radius:var(--radius-xs);position:relative}.icon-button-wrapper.svelte-1h0hs6p a.download-link:not(:last-child),.icon-button-wrapper.svelte-1h0hs6p button:not(:last-child){margin-right:var(--spacing-xxs)}.icon-button-wrapper.svelte-1h0hs6p a.download-link:not(:last-child):not(.no-border *):after,.icon-button-wrapper.svelte-1h0hs6p button:not(:last-child):not(.no-border *):after{content:"";position:absolute;right:-4.5px;top:15%;height:70%;width:1px;background-color:var(--border-color-primary)}.icon-button-wrapper.svelte-1h0hs6p>*{height:100%}img.svelte-kxeri3{object-fit:cover}.image-container.svelte-x2tujq.svelte-x2tujq{height:100%;position:relative;min-width:var(--size-20)}.image-container.svelte-x2tujq button.svelte-x2tujq{width:var(--size-full);height:var(--size-full);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.image-frame.svelte-x2tujq img{width:var(--size-full);height:var(--size-full);object-fit:scale-down}.selectable.svelte-x2tujq.svelte-x2tujq{cursor:crosshair}.fullscreen-controls svg{position:relative;top:0}.image-container:fullscreen{background-color:#000;display:flex;justify-content:center;align-items:center}.image-container:fullscreen img{max-width:90vw;max-height:90vh;object-fit:scale-down}.image-frame.svelte-x2tujq.svelte-x2tujq{width:auto;height:100%;display:flex;align-items:center;justify-content:center}.overlay.svelte-1pwzuub{position:absolute;background-color:#0006;width:100%;height:100%}.hidden.svelte-1pwzuub{display:none}.load-wrap.svelte-1pwzuub{display:flex;justify-content:center;align-items:center;height:100%}.loader.svelte-1pwzuub{display:flex;position:relative;background-color:var(--border-color-accent-subdued);animation:svelte-1pwzuub-shadowPulse 2s linear infinite;box-shadow:-24px 0 var(--border-color-accent-subdued),24px 0 var(--border-color-accent-subdued);margin:var(--spacing-md);border-radius:50%;width:10px;height:10px;scale:.5}@keyframes svelte-1pwzuub-shadowPulse{33%{box-shadow:-24px 0 var(--border-color-accent-subdued),24px 0 #fff;background:#fff}66%{box-shadow:-24px 0 #fff,24px 0 #fff;background:var(--border-color-accent-subdued)}to{box-shadow:-24px 0 #fff,24px 0 var(--border-color-accent-subdued);background:#fff}}.preview.svelte-1k19y3g.svelte-1k19y3g{display:flex;position:absolute;flex-direction:column;z-index:var(--layer-2);border-radius:calc(var(--block-radius) - var(--block-border-width));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:var(--size-full);height:var(--size-full)}.preview.svelte-1k19y3g.svelte-1k19y3g:focus-visible{outline:none}.preview.minimal.svelte-1k19y3g.svelte-1k19y3g{width:fit-content;height:fit-content}.preview.svelte-1k19y3g.svelte-1k19y3g:before{content:"";position:absolute;z-index:var(--layer-below);background:var(--background-fill-primary);opacity:.9;width:var(--size-full);height:var(--size-full)}.fixed-height.svelte-1k19y3g.svelte-1k19y3g{min-height:var(--size-80);max-height:65vh}@media (--screen-xl){.fixed-height.svelte-1k19y3g.svelte-1k19y3g{min-height:450px}}.media-container.svelte-1k19y3g.svelte-1k19y3g{height:calc(100% - var(--size-14));width:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}.media-container.svelte-1k19y3g img,.media-container.svelte-1k19y3g video{max-width:100%;max-height:100%;object-fit:contain}.thumbnails.svelte-1k19y3g img{object-fit:cover;width:var(--size-full);height:var(--size-full)}.thumbnails.svelte-1k19y3g svg{position:absolute;top:var(--size-2);left:var(--size-2);width:50%;height:50%;opacity:50%}.caption.svelte-1k19y3g.svelte-1k19y3g{padding:var(--size-2) var(--size-3);overflow:hidden;color:var(--block-label-text-color);font-weight:var(--weight-semibold);text-align:center;text-overflow:ellipsis;white-space:nowrap;align-self:center}.thumbnails.svelte-1k19y3g.svelte-1k19y3g{display:flex;position:absolute;bottom:0;justify-content:flex-start;align-items:center;gap:var(--spacing-lg);width:var(--size-full);height:var(--size-14);overflow-x:scroll}.thumbnail-item.svelte-1k19y3g.svelte-1k19y3g{--ring-color:transparent;position:relative;box-shadow:inset 0 0 0 1px var(--ring-color),var(--shadow-drop);border:1px solid var(--border-color-primary);border-radius:var(--button-small-radius);background:var(--background-fill-secondary);aspect-ratio:var(--ratio-square);width:var(--size-full);height:var(--size-full);overflow:clip}.thumbnail-item.svelte-1k19y3g.svelte-1k19y3g:hover{--ring-color:var(--color-accent);border-color:var(--color-accent);filter:brightness(1.1)}.thumbnail-item.selected.svelte-1k19y3g.svelte-1k19y3g{--ring-color:var(--color-accent);border-color:var(--color-accent)}.thumbnail-item.svelte-1k19y3g svg{position:absolute;top:50%;left:50%;width:50%;height:50%;opacity:50%;transform:translate(-50%,-50%)}.thumbnail-item.svelte-1k19y3g video{width:var(--size-full);height:var(--size-full);overflow:hidden;object-fit:cover}.thumbnail-small.svelte-1k19y3g.svelte-1k19y3g{flex:none;transform:scale(.9);transition:75ms;width:var(--size-9);height:var(--size-9)}.thumbnail-small.selected.svelte-1k19y3g.svelte-1k19y3g{--ring-color:var(--color-accent);transform:scale(1);border-color:var(--color-accent)}.grid-wrap.svelte-1k19y3g.svelte-1k19y3g{position:relative;padding:var(--size-2);overflow-y:auto}.grid-wrap.fixed-height.svelte-1k19y3g.svelte-1k19y3g{min-height:var(--size-80);max-height:65vh}.grid-container.svelte-1k19y3g.svelte-1k19y3g{display:grid;position:relative;grid-template-rows:repeat(var(--grid-rows),minmax(100px,1fr));grid-template-columns:repeat(var(--grid-cols),minmax(100px,1fr));grid-auto-rows:minmax(100px,1fr);gap:var(--spacing-lg)}.single-item-wrapper.svelte-1k19y3g.svelte-1k19y3g{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--spacing-xxl);box-sizing:border-box}.single-item-wrapper.svelte-1k19y3g .gallery-item-with-name.svelte-1k19y3g{width:100%;height:100%;max-width:min(300px,80vw);max-height:min(320px,calc(80vh - var(--size-4)));display:flex;flex-direction:column;align-items:center}.single-item-wrapper.svelte-1k19y3g .gallery-item.svelte-1k19y3g{width:100%;height:100%;max-width:100%;max-height:100%}.single-item-wrapper.svelte-1k19y3g .thumbnail-item.thumbnail-lg.svelte-1k19y3g{display:flex!important;align-items:center!important;justify-content:center!important}.single-item-wrapper.svelte-1k19y3g .thumbnail-filename.svelte-1k19y3g{height:var(--size-4);line-height:var(--size-4)}.single-item-wrapper.svelte-1k19y3g .thumbnail-lg.svelte-1k19y3g>img,.single-item-wrapper.svelte-1k19y3g .thumbnail-lg.svelte-1k19y3g>video{object-fit:var(--object-fit)!important}.thumbnail-lg.svelte-1k19y3g>img,.thumbnail-lg.svelte-1k19y3g>video{width:var(--size-full);height:var(--size-full);overflow:hidden;object-fit:var(--object-fit)}.thumbnail-lg.svelte-1k19y3g:hover .caption-label.svelte-1k19y3g{opacity:.5}.caption-label.svelte-1k19y3g.svelte-1k19y3g{position:absolute;right:var(--block-label-margin);bottom:var(--block-label-margin);z-index:var(--layer-1);border-top:1px solid var(--border-color-primary);border-left:1px solid var(--border-color-primary);border-radius:var(--block-label-radius);background:var(--background-fill-secondary);padding:var(--block-label-padding);max-width:80%;overflow:hidden;font-size:var(--block-label-text-size);text-align:left;text-overflow:ellipsis;white-space:nowrap}.grid-wrap.minimal.svelte-1k19y3g.svelte-1k19y3g{padding:0}.gallery-item-with-name.svelte-1k19y3g.svelte-1k19y3g{display:flex;flex-direction:column;gap:var(--size-1);width:100%;height:100%}.thumbnail-filename.svelte-1k19y3g.svelte-1k19y3g{font-size:var(--text-xs);color:var(--body-text-color);text-align:center;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 var(--size-1)}.gallery-item.svelte-1k19y3g.svelte-1k19y3g{position:relative;width:100%;height:100%}.metadata-popup.svelte-1k19y3g.svelte-1k19y3g{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--background-fill-primary, white);border:1px solid var(--border-color-primary);box-shadow:0 4px 8px #0003;z-index:1000;border-radius:8px;max-width:min(90%,600px);max-height:min(50vh,calc(100% - 2rem));min-height:200px;display:flex;flex-direction:column;pointer-events:auto}.popup-content.svelte-1k19y3g.svelte-1k19y3g{padding:1rem;display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow-y:auto;position:relative}.close-button.svelte-1k19y3g.svelte-1k19y3g{position:absolute;top:.5rem;right:.5rem;background:none;border:none;font-size:1.25rem;cursor:pointer;z-index:20;color:var(--body-text-color);padding:.25rem;line-height:1;width:24px;height:24px;text-align:center}.popup-title.svelte-1k19y3g.svelte-1k19y3g{font-weight:700;margin:0 0 1rem;flex-shrink:0;padding-right:2.5rem}.metadata-table-container.svelte-1k19y3g.svelte-1k19y3g{flex-grow:1;overflow-y:auto;max-height:calc(100% - 5rem);min-height:0;margin-bottom:1rem}.metadata-table.svelte-1k19y3g.svelte-1k19y3g{width:100%;border-collapse:collapse;table-layout:auto}.metadata-label.svelte-1k19y3g.svelte-1k19y3g{background:var(--background-fill-secondary, #f5f5f5);padding:.5rem;font-weight:700;text-align:left;vertical-align:top;width:35%}.metadata-value.svelte-1k19y3g.svelte-1k19y3g{text-align:left;padding:.5rem;white-space:pre-wrap;word-break:break-all;vertical-align:top}.load-metadata-button.svelte-1k19y3g.svelte-1k19y3g{margin-top:1rem;padding:.5rem 1rem;background-color:var(--button-primary-border-color);color:var(--button-primary-text-color);border:none;border-radius:4px;cursor:pointer;align-self:center;flex-shrink:0}.load-metadata-button.svelte-1k19y3g.svelte-1k19y3g:hover{background-color:var(--button-primary-background-fill-hover)}.no-metadata-message.svelte-1k19y3g.svelte-1k19y3g{flex-grow:1;display:flex;align-items:center;justify-content:center;color:var(--body-text-color-subdued)}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-vusapu.svelte-vusapu{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-3);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);overflow:hidden;pointer-events:none}.wrap.center.svelte-vusapu.svelte-vusapu{top:0;right:0;left:0}.wrap.default.svelte-vusapu.svelte-vusapu{top:0;right:0;bottom:0;left:0}.hide.svelte-vusapu.svelte-vusapu{opacity:0;pointer-events:none}.generating.svelte-vusapu.svelte-vusapu{animation:svelte-vusapu-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-vusapu-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-vusapu.svelte-vusapu{background:none}@keyframes svelte-vusapu-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-vusapu-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-vusapu.svelte-vusapu{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-vusapu.svelte-vusapu{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-vusapu.svelte-vusapu{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-vusapu.svelte-vusapu{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-vusapu.svelte-vusapu{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-vusapu.svelte-vusapu{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-vusapu.svelte-vusapu{position:absolute;bottom:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-vusapu.svelte-vusapu{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-vusapu.svelte-vusapu{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.validation-error.svelte-vusapu.svelte-vusapu{pointer-events:auto;color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font);position:absolute;background:var(--error-background-fill);top:0;right:0;z-index:var(--layer-3);padding:var(--size-1) var(--size-2);font-size:var(--text-md);text-align:center;border-bottom-left-radius:var(--radius-sm);border-bottom:1px solid var(--error-border-color);border-left:1px solid var(--error-border-color);display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-xl)}.minimal.svelte-vusapu.svelte-vusapu{pointer-events:none}.minimal.svelte-vusapu .progress-text.svelte-vusapu{background:var(--block-background-fill)}.border.svelte-vusapu.svelte-vusapu{border:1px solid var(--border-color-primary)}.clear-status.svelte-vusapu.svelte-vusapu{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-syezpc{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-syezpc{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-syezpc{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-body.success.svelte-syezpc{border:1px solid var(--color-green-700);background:var(--color-green-50)}.dark .toast-body.success.svelte-syezpc{border:1px solid var(--color-green-500);background-color:var(--color-grey-950)}.toast-title.svelte-syezpc{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm)}.toast-title.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-title.error.svelte-syezpc{color:var(--color-red-50)}.toast-title.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-title.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-title.info.svelte-syezpc{color:var(--color-grey-50)}.toast-title.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-title.success.svelte-syezpc{color:var(--color-green-50)}.toast-close.svelte-syezpc{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-close.error.svelte-syezpc{color:var(--color-red-500)}.toast-close.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-close.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-close.info.svelte-syezpc{color:var(--color-grey-500)}.toast-close.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-close.success.svelte-syezpc{color:var(--color-green-500)}.toast-text.svelte-syezpc{font-size:var(--text-lg);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.toast-text.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-text.error.svelte-syezpc{color:var(--color-red-50)}.toast-text.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-text.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-text.info.svelte-syezpc{color:var(--color-grey-50)}.toast-text.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-text.success.svelte-syezpc{color:var(--color-green-50)}.toast-details.svelte-syezpc{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-syezpc{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-icon.error.svelte-syezpc{color:var(--color-red-500)}.toast-icon.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-icon.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-syezpc{color:var(--color-grey-500)}.toast-icon.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-icon.success.svelte-syezpc{color:var(--color-green-500)}@keyframes svelte-syezpc-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-syezpc{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-syezpc-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-syezpc{background:var(--color-red-700)}.dark .timer.error.svelte-syezpc{background:var(--color-red-500)}.timer.warning.svelte-syezpc{background:var(--color-yellow-700)}.dark .timer.warning.svelte-syezpc{background:var(--color-yellow-500)}.timer.info.svelte-syezpc{background:var(--color-grey-700)}.dark .timer.info.svelte-syezpc{background:var(--color-grey-500)}.timer.success.svelte-syezpc{background:var(--color-green-700)}.dark .timer.success.svelte-syezpc{background:var(--color-green-500)}.hidden.svelte-syezpc{display:none}.toast-text.svelte-syezpc a{text-decoration:underline}.toast-wrap.svelte-je2isz{--toast-top:var(--size-4);display:flex;position:fixed;top:calc(var(--toast-top) + var(--size-4));right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-je2isz{width:calc(var(--size-96) + var(--size-10))}}.streaming-bar.svelte-ga0jj6{position:absolute;bottom:0;left:0;right:0;height:4px;background-color:var(--primary-600);animation:svelte-ga0jj6-countdown linear forwards;z-index:1}@keyframes svelte-ga0jj6-countdown{0%{transform:translate(0)}to{transform:translate(-100%)}}.gallery-container{position:relative;width:100%;height:100%}button{width:var(--size-full);height:var(--size-full);display:block;border-radius:var(--radius-lg)}.container.svelte-1onbytl.svelte-1onbytl{border-radius:var(--radius-lg);overflow:hidden}.container.selected.svelte-1onbytl.svelte-1onbytl{border:2px solid var(--border-color-accent)}.images-wrapper.svelte-1onbytl.svelte-1onbytl{display:flex;gap:var(--spacing-sm)}.container.table.svelte-1onbytl .images-wrapper.svelte-1onbytl{flex-direction:row;align-items:center;padding:var(--spacing-sm);border:1px solid var(--border-color-primary);border-radius:var(--radius-lg);background:var(--background-fill-secondary)}.container.gallery.svelte-1onbytl .images-wrapper.svelte-1onbytl{flex-direction:row;gap:0}.image-container.svelte-1onbytl.svelte-1onbytl{position:relative;flex-shrink:0}.container.table.svelte-1onbytl .image-container.svelte-1onbytl{width:var(--size-12);height:var(--size-12)}.container.gallery.svelte-1onbytl .image-container.svelte-1onbytl{width:var(--size-20);height:var(--size-20);margin-left:calc(-1 * var(--size-8))}.container.gallery.svelte-1onbytl .image-container.svelte-1onbytl:first-child{margin-left:0}.more-indicator.svelte-1onbytl.svelte-1onbytl{display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);font-weight:700;color:var(--border-color-primary)}.container.table.svelte-1onbytl .more-indicator.svelte-1onbytl{width:var(--size-12);height:var(--size-12)}.container.gallery.svelte-1onbytl .more-indicator.svelte-1onbytl{width:var(--size-20);height:var(--size-20);margin-left:calc(-1 * var(--size-8));margin-right:calc(-1 * var(--size-6))}.image-container.svelte-1onbytl img.svelte-1onbytl,.image-container.svelte-1onbytl video.svelte-1onbytl{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-md)}.caption.svelte-1onbytl.svelte-1onbytl{position:absolute;bottom:0;left:0;right:0;background:#000000b3;color:#fff;padding:var(--spacing-xs);font-size:var(--text-xs);text-align:center;border-radius:0 0 var(--radius-md) var(--radius-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.table.svelte-1onbytl .caption.svelte-1onbytl{display:none}

src/demo/app.py

@@ -3,8 +3,7 @@ import gradio as gr
 from gradio_folderexplorer import FolderExplorer
 from gradio_folderexplorer.helpers import load_media_from_folder
 from gradio_mediagallery import MediaGallery
-from gradio_mediagallery.helpers import extract_metadata, transfer_metadata
-import os
+from gradio_mediagallery.helpers import transfer_metadata
 
 # Configuration constant for the root directory containing media files
 ROOT_DIR_PATH = "./src/examples"
@@ -29,7 +28,7 @@ def handle_load_metadata(image_data: gr.EventData) -> List[Any]:
     )
 
 # UI layout and logic
-with gr.Blocks() as demo:
+with gr.Blocks(theme=gr.themes.Ocean()) as demo:
     """
     A Gradio interface for browsing and displaying media files with metadata extraction.
     """

src/demo/space.py

@@ -43,8 +43,7 @@ import gradio as gr
 from gradio_folderexplorer import FolderExplorer
 from gradio_folderexplorer.helpers import load_media_from_folder
 from gradio_mediagallery import MediaGallery
-from gradio_mediagallery.helpers import extract_metadata, transfer_metadata
-import os
+from gradio_mediagallery.helpers import transfer_metadata
 
 # Configuration constant for the root directory containing media files
 ROOT_DIR_PATH = "./src/examples"
@@ -69,7 +68,7 @@ def handle_load_metadata(image_data: gr.EventData) -> List[Any]:
     )
 
 # UI layout and logic
-with gr.Blocks() as demo:
+with gr.Blocks(theme=gr.themes.Ocean()) as demo:
     \"\"\"
     A Gradio interface for browsing and displaying media files with metadata extraction.
     \"\"\"

src/frontend/Gallery.css

@@ -1,31 +1,3 @@
-   :global(*::-webkit-scrollbar) {
-    width: 8px;
-    height: 8px;
-    background-color: transparent;
-  }
-
-  :global(*::-webkit-scrollbar-track) {
-    background: transparent;
-    border-radius: 10px;
-  }
-
-  :global(*::-webkit-scrollbar-thumb) {
-    background-color: rgba(136, 136, 136, 0.4);
-    border-radius: 10px;
-    border: 2px solid transparent;
-    background-clip: content-box;
-  }
-
-  :global(*::-webkit-scrollbar-thumb:hover) {
-    background-color: rgba(136, 136, 136, 0.7);
-  }
-
-  /* Para Firefox */
-  :global(html) {
-    scrollbar-width: thin;
-    scrollbar-color: rgba(136, 136, 136, 0.7) transparent;
-  }
-  
  /**
    * Styles for the gallery container, which holds the entire component.
    */
@@ -45,427 +17,3 @@
     border-radius: var(--radius-lg);
   }
 
-  /**
-   * Styles for the preview mode, displaying a selected media item.
-   */
-  .preview {
-    display: flex;
-    position: absolute;
-    flex-direction: column;
-    z-index: var(--layer-2);
-    border-radius: calc(var(--block-radius) - var(--block-border-width));
-    -webkit-backdrop-filter: blur(8px);
-    backdrop-filter: blur(8px);
-    width: var(--size-full);
-    height: var(--size-full);
-  }
-
-  .preview:focus-visible {
-    outline: none;
-  }
-
-  .preview.minimal {
-    width: fit-content;
-    height: fit-content;
-  }
-
-  .preview::before {
-    content: "";
-    position: absolute;
-    z-index: var(--layer-below);
-    background: var(--background-fill-primary);
-    opacity: 0.9;
-    width: var(--size-full);
-    height: var(--size-full);
-  }
-
-  /**
-   * Styles for the grid wrapper with fixed height constraints.
-   */
-  .fixed-height {
-    min-height: var(--size-80);
-    max-height: 65vh;
-  }
-
-  @media (--screen-xl) {
-    .fixed-height {
-      min-height: 450px;
-    }
-  }
-
-  /**
-   * Styles for the media container in preview mode.
-   */
-  .media-container {
-    height: calc(100% - var(--size-14));
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-  }
-
-  .media-container :global(img),
-  .media-container :global(video) {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-  }
-
-  /**
-   * Styles for thumbnails in the preview mode carousel.
-   */
-  .thumbnails :global(img) {
-    object-fit: cover;
-    width: var(--size-full);
-    height: var(--size-full);
-  }
-
-  .thumbnails :global(svg) {
-    position: absolute;
-    top: var(--size-2);
-    left: var(--size-2);
-    width: 50%;
-    height: 50%;
-    opacity: 50%;
-  }
-
-  /**
-   * Styles for captions in preview mode.
-   */
-  .caption {
-    padding: var(--size-2) var(--size-3);
-    overflow: hidden;
-    color: var(--block-label-text-color);
-    font-weight: var(--weight-semibold);
-    text-align: center;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    align-self: center;
-  }
-
-  /**
-   * Styles for the thumbnails carousel in preview mode.
-   */
-  .thumbnails {
-    display: flex;
-    position: absolute;
-    bottom: 0;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-lg);
-    width: var(--size-full);
-    height: var(--size-14);
-    overflow-x: scroll;
-  }
-
-  /**
-   * Styles for individual thumbnail items.
-   */
-  .thumbnail-item {
-    --ring-color: transparent;
-    position: relative;
-    box-shadow: inset 0 0 0 1px var(--ring-color), var(--shadow-drop);
-    border: 1px solid var(--border-color-primary);
-    border-radius: var(--button-small-radius);
-    background: var(--background-fill-secondary);
-    aspect-ratio: var(--ratio-square);
-    width: var(--size-full);
-    height: var(--size-full);
-    overflow: clip;
-  }
-
-  .thumbnail-item:hover {
-    --ring-color: var(--color-accent);
-    border-color: var(--color-accent);
-    filter: brightness(1.1);
-  }
-
-  .thumbnail-item.selected {
-    --ring-color: var(--color-accent);
-    border-color: var(--color-accent);
-  }
-
-  .thumbnail-item :global(svg) {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 50%;
-    height: 50%;
-    opacity: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .thumbnail-item :global(video) {
-    width: var(--size-full);
-    height: var(--size-full);
-    overflow: hidden;
-    object-fit: cover;
-  }
-
-  /**
-   * Styles for small thumbnails in the preview carousel.
-   */
-  .thumbnail-small {
-    flex: none;
-    transform: scale(0.9);
-    transition: 0.075s;
-    width: var(--size-9);
-    height: var(--size-9);
-  }
-
-  .thumbnail-small.selected {
-    --ring-color: var(--color-accent);
-    transform: scale(1);
-    border-color: var(--color-accent);
-  }
-
-  /**
-   * Styles for the grid wrapper containing the gallery items.
-   */
-  .grid-wrap {
-    position: relative;
-    padding: var(--size-2);
-    overflow-y: auto;
-  }
-
-  .grid-wrap.fixed-height {
-    min-height: var(--size-80);
-    max-height: 65vh;
-  }
-
-  /**
-   * Styles for the grid container for multiple items.
-   */
-  .grid-container {
-    display: grid;
-    position: relative;
-    grid-template-rows: repeat(var(--grid-rows), minmax(100px, 1fr));
-    grid-template-columns: repeat(var(--grid-cols), minmax(100px, 1fr));
-    grid-auto-rows: minmax(100px, 1fr);
-    gap: var(--spacing-lg);
-  }
-
-  /**
-   * Styles for single-item view wrapper.
-   */
-  .single-item-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    padding: var(--spacing-xxl);
-    box-sizing: border-box;
-  }
-
-  .single-item-wrapper .gallery-item-with-name {
-    width: 100%;
-    height: 100%;
-    max-width: min(300px, 80vw);
-    max-height: min(320px, calc(80vh - var(--size-4)));
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .single-item-wrapper .gallery-item {
-    width: 100%;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-  }
-
-  .single-item-wrapper .thumbnail-item.thumbnail-lg {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-  }
-
-  .single-item-wrapper .thumbnail-filename {
-    height: var(--size-4);
-    line-height: var(--size-4);
-  }
-
-  .single-item-wrapper .thumbnail-lg > :global(img),
-  .single-item-wrapper .thumbnail-lg > :global(video) {
-    object-fit: var(--object-fit) !important;
-  }
-
-  /**
-   * Styles for large thumbnails in the grid or single-item view.
-   */
-  .thumbnail-lg > :global(img),
-  .thumbnail-lg > :global(video) {
-    width: var(--size-full);
-    height: var(--size-full);
-    overflow: hidden;
-    object-fit: var(--object-fit);
-  }
-
-  .thumbnail-lg:hover .caption-label {
-    opacity: 0.5;
-  }
-
-  /**
-   * Styles for captions in the grid or single-item view.
-   */
-  .caption-label {
-    position: absolute;
-    right: var(--block-label-margin);
-    bottom: var(--block-label-margin);
-    z-index: var(--layer-1);
-    border-top: 1px solid var(--border-color-primary);
-    border-left: 1px solid var(--border-color-primary);
-    border-radius: var(--block-label-radius);
-    background: var(--background-fill-secondary);
-    padding: var(--block-label-padding);
-    max-width: 80%;
-    overflow: hidden;
-    font-size: var(--block-label-text-size);
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .grid-wrap.minimal {
-    padding: 0;
-  }
-
-  /**
-   * Styles for gallery items with associated filenames.
-   */
-  .gallery-item-with-name {
-    display: flex;
-    flex-direction: column;
-    gap: var(--size-1);
-    width: 100%;
-    height: 100%;
-  }
-
-  .thumbnail-filename {
-    font-size: var(--text-xs);
-    color: var(--body-text-color);
-    text-align: center;
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding: 0 var(--size-1);
-  }
-
-  .gallery-item {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-
-  /**
-   * Styles for the metadata popup displayed in preview mode.
-   */
-  .metadata-popup {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: var(--background-fill-primary, white);
-    border: 1px solid var(--border-color-primary);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    z-index: 1000;
-    border-radius: 8px;
-    max-width: min(90%, 600px);
-    max-height: min(50vh, calc(100% - 2rem));
-    min-height: 200px;
-    display: flex;
-    flex-direction: column;
-    pointer-events: auto;
-  }
-
-  .popup-content {
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    box-sizing: border-box;
-    overflow-y: auto;
-    position: relative;
-  }
-
-  .close-button {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
-    background: none;
-    border: none;
-    font-size: 1.25rem;
-    cursor: pointer;
-    z-index: 20;
-    color: var(--body-text-color);
-    padding: 0.25rem;
-    line-height: 1;
-    width: 24px;
-    height: 24px;
-    text-align: center;
-  }
-
-  .popup-title {
-    font-weight: bold;
-    margin: 0 0 1rem 0;
-    flex-shrink: 0;
-    padding-right: 2.5rem;
-  }
-
-  .metadata-table-container {
-    flex-grow: 1;
-    overflow-y: auto;
-    max-height: calc(100% - 5rem);
-    min-height: 0;
-    margin-bottom: 1rem;
-  }
-
-  .metadata-table {
-    width: 100%;
-    border-collapse: collapse;
-    table-layout: auto;
-  }
-
-  .metadata-label {
-    background: var(--background-fill-secondary, #f5f5f5);
-    padding: 0.5rem;
-    font-weight: bold;
-    text-align: left;
-    vertical-align: top;
-    width: 35%;
-  }
-
-  .metadata-value {
-    text-align: left;
-    padding: 0.5rem;
-    white-space: pre-wrap;
-    word-break: break-all;
-    vertical-align: top;
-  }
-
-  .load-metadata-button {
-    margin-top: 1rem;
-    padding: 0.5rem 1rem;
-    background-color: var(--button-primary-background-fill);
-    color: var(--button-primary-text-color);
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    align-self: center;
-    flex-shrink: 0;
-  }
-
-  .load-metadata-button:hover {
-    background-color: var(--button-primary-background-fill-hover);
-  }
-
-  .no-metadata-message {
-    flex-grow: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--body-text-color-subdued);
-  }

src/frontend/shared/Gallery.svelte

@@ -650,27 +650,8 @@
   </div>
 {/if}
 
-<style lang="postcss">
-  /**
-   * Styles for the gallery container, which holds the entire component.
-   */
-  .gallery-container {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-
-  /**
-   * Styles for buttons to ensure they fill their container.
-   */
-  button {
-    width: var(--size-full);
-    height: var(--size-full);
-    display: block;
-    border-radius: var(--radius-lg);
-  }
-
-  /**
+<style>
+    /**
    * Styles for the preview mode, displaying a selected media item.
    */
   .preview {
@@ -1074,7 +1055,7 @@
   .load-metadata-button {
     margin-top: 1rem;
     padding: 0.5rem 1rem;
-    background-color: var(--button-primary-background-fill);
+    background-color: var(--button-primary-border-color);
     color: var(--button-primary-text-color);
     border: none;
     border-radius: 4px;
@@ -1095,5 +1076,4 @@
     color: var(--body-text-color-subdued);
   }
 
-
 </style>

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_mediagallery"
-version = "0.0.1"
+version = "0.0.2"
 description = "Python library for easily interacting with trained machine learning models"
 readme = "README.md"
 license = "Apache-2.0"