fix: uses polyfill to fix web components on safari

assets/bootstrap.js

@@ -1,3 +1,4 @@
+import '@ungap/custom-elements'
 import PreviewContentDialog from "./components/preview-content-dialog.js";
 import EpisodeContainer from './components/episode-container.js';
 import DownloadOptionTr from './components/download-option-tr.js';

assets/components/download-list-row.js

@@ -24,11 +24,12 @@ export default class DownloadListRow extends HTMLTableRowElement {
         if (oldValue !== newValue) {
             this[name] = newValue;
             this.setAttribute(name, newValue);
+            this.setPreviewContent();
         }
     }
 
-    previewContent() {
-        return `
+    setPreviewContent() {
+        this.previewContent = `
         <table class="table-auto flex flex-row">
             <thead>
                 <tr class="flex flex-col">

assets/controllers/download_list_controller.js

@@ -44,19 +44,19 @@ export default class extends Controller {
         console.log(target)
 
         downloads.forEach(download => {
-            console.log(download)
-            download.mediaTitle = download.getAttribute('media-title');
             download.addEventListener('click', (event) => {
                 // let previewContentModal = document.querySelector('#previewContentModal');
                 let content, heading = ""
                 if (event.target.tagName !== "TR") {
-                    content = event.target.parentElement.previewContent();
+                    content = event.target.parentElement.previewContent;
                     heading = event.target.parentElement.mediaTitle;
                 } else {
-                    content = event.target.previewContent();
+                    content = event.target.previewContent;
                     heading = event.target.mediaTitle;
                 }
 
+                console.log(content)
+
                 document.dispatchEvent(new CustomEvent('showPreviewContentModal', {detail: {heading: heading, content: content}}))
             })
         })

importmap.php

@@ -67,4 +67,7 @@ return [
     'pulltorefreshjs' => [
         'version' => '0.1.22',
     ],
+    '@ungap/custom-elements' => [
+        'version' => '1.3.0',
+    ],
 ];

src/User/Framework/Controller/Web/PreferencesController.php

@@ -36,6 +36,8 @@ class PreferencesController extends AbstractController
         $formData = (array) UserPreferencesFactory::createFromUser($this->getUser());
         $form = $this->createForm(UserMediaPreferencesForm::class, $formData);
 
+//        dd($form);
+
         return $this->render(
             'user/preferences.html.twig',
             [

templates/components/PreviewModal.html.twig

@@ -1,4 +1,4 @@
-<dialog{{ attributes }} is="preview-content-dialog" class="py-3 px-4 w-full md:w-[50rem] rounded-md dark:bg-gray-950/80 dark:border dark:border-orange-500 dark:text-white backdrop-filter backdrop-blur-md">
+<dialog{{ attributes }} is="preview-content-dialog" class="py-3 px-4 w-full md:w-[50rem] rounded-md dark:bg-gray-950/80 dark:border-2 dark:border-orange-500 dark:text-white backdrop-filter backdrop-blur-md">
     <div class="flex flex-row justify-end">
         <twig:ux:icon name="ic:twotone-cancel" width="16.75px" height="16.75px" class="modal-close rounded-full align-middle text-red-600 hover:text-red-700" />
     </div>