some metadata field refactoring, update media edit / details to use n…

…ew field elements
openbroadcaster · Jul 25, 2024 · 7420556 · 7420556
1 parent 02a1e79
commit 7420556
Show file tree

Hide file tree

Showing 26 changed files with 739 additions and 367 deletions.
diff --git a/html/media/addedit_form.html b/html/media/addedit_form.html
@@ -47,7 +47,7 @@
 
   <div class="fieldrow">
     <label data-t>Year</label>
-    <input class="year_field" type="text">
+    <ob-field-number data-edit class="year_field"></ob-field-number>
     <button class="copy_to_all" data-field="year_field" onclick="OB.Media.copyField(this);" title="Copy To All"><i class="far fa-copy"></i></button>
   </div>
 
@@ -57,6 +57,12 @@
     <button class="copy_to_all" data-field="category_field" onclick="OB.Media.copyField(this);" title="Copy To All"><i class="far fa-copy"></i></button>
   </div>
 
+  <div class="fieldrow">
+    <label data-t class="required">Genre</label>
+    <select class="genre_field"></select>
+    <button class="copy_to_all" data-field="genre_field" onclick="OB.Media.copyField(this);" title="Copy To All"><i class="far fa-copy"></i></button>
+  </div>
+
   <div class="fieldrow">
     <label data-t class="required">Country</label>
     <ob-field-country class="country_field" data-edit></ob-field-country>
@@ -69,12 +75,6 @@
     <button class="copy_to_all" data-field="language_field" onclick="OB.Media.copyField(this);" title="Copy To All"><i class="far fa-copy"></i></button>
   </div>
 
-  <div class="fieldrow">
-    <label data-t class="required">Genre</label>
-    <select class="genre_field"></select>
-    <button class="copy_to_all" data-field="genre_field" onclick="OB.Media.copyField(this);" title="Copy To All"><i class="far fa-copy"></i></button>
-  </div>
-
   <div class="fieldrow">
     <label data-t>Comments</label>
     <textarea class="comments_field"></textarea>

diff --git a/js/media/addedit.js b/js/media/addedit.js
@@ -124,6 +124,7 @@ OB.Media.mediaAddeditForm = function (id, title, editing) {
     }
 
     // fill country list
+    /*
     for (var i in OB.Settings.countries) {
         $form
             .find(".country_field")
@@ -135,6 +136,7 @@ OB.Media.mediaAddeditForm = function (id, title, editing) {
                     "</option>",
             );
     }
+    */
 
     // tie together genre list with category list on change
     $form.find(".category_field").change(function () {
@@ -156,12 +158,10 @@ OB.Media.mediaAddeditForm = function (id, title, editing) {
                         .setAttribute("data-id3-field", metadata.settings.id3_key);
                 }
 
-                // set select field options
-                if (metadata.type == "select" && metadata.settings && metadata.settings.options) {
-                    metadata.settings.options.forEach(function (option) {
-                        let selectField = metadataField.querySelector(".metadata_name_field");
-                        selectField.innerHTML = selectField.innerHTML + "<option>" + option + "</option>";
-                    });
+                // settings
+                let selectField = metadataField.querySelector(".metadata_name_field");
+                if (metadata.settings) {
+                    selectField.settings = metadata.settings;
                 }
 
                 // change field name and description values
@@ -189,12 +189,6 @@ OB.Media.mediaAddeditForm = function (id, title, editing) {
                         "#media_addedit_" + id + " .metadata_" + metadata.name + "_field",
                     ).suggestions = metadata.settings.suggestions;
                 }
-
-                // set options
-                if (metadata.type == "select" && metadata?.settings?.options) {
-                    document.querySelector("#media_addedit_" + id + " .metadata_" + metadata.name + "_field").options =
-                        metadata.settings.options;
-                }
             }
         });
 
@@ -452,8 +446,9 @@ OB.Media.save = function () {
                 .val();
 
             // media and playlist metadata fields return arrays, but will be a single item, so convert:
-            if (Array.isArray(metaItem) && (metadata.type == "media" || metadata.type == "playlist")) {
-                metaItem = metaItem[0];
+            if (metadata.type == "media" || metadata.type == "playlist") {
+                if (!metaItem || !metaItem.length) metaItem = null;
+                else metaItem = metaItem[0];
             }
 
             item["metadata_" + metadata.name] = metaItem;

diff --git a/js/media/details.js b/js/media/details.js
@@ -99,26 +99,19 @@ OB.Media.detailsPage = function (id) {
             labelElem.textContent = metadata.description;
             metaElem.appendChild(labelElem);
 
-            switch (metadata.type) {
-                case "media":
-                case "playlist":
-                    const mediaPlaylistElem = document.createElement("ob-field-" + metadata.type);
-                    mediaPlaylistElem.setAttribute("value", value);
-                    mediaPlaylistElem.dataset.single = true;
-                    metaElem.appendChild(mediaPlaylistElem);
-                    break;
-                case "time":
-                case "date":
-                case "datetime":
-                    const dateTimeElem = document.createElement("ob-field-" + metadata.type);
-                    dateTimeElem.setAttribute("value", value);
-                    metaElem.appendChild(dateTimeElem);
-                    break;
-                default:
-                    const spanElem = document.createElement("span");
-                    spanElem.textContent = value;
-                    metaElem.appendChild(spanElem);
-                    break;
+            // use custom html element if available
+            if (customElements.get("ob-field-" + metadata.type)) {
+                const fieldElem = document.createElement("ob-field-" + metadata.type);
+                fieldElem.value = value;
+                fieldElem.settings = metadata.settings;
+                metaElem.appendChild(fieldElem);
+            }
+
+            // fallback to span
+            else {
+                const spanElem = document.createElement("span");
+                spanElem.textContent = value;
+                metaElem.appendChild(spanElem);
             }
 
             document.querySelector("#media_details_metadata").appendChild(metaElem);

diff --git a/js/media/settings.js b/js/media/settings.js
@@ -404,7 +404,7 @@ OB.Media.metadataAddEditTypeChange = function () {
 
     // handle select field
     var select_value = document.querySelector(".metadata_default_select").value;
-    var select_options = document.querySelector("#metadata_select_options").value.split("\n");
+    var select_options = document.querySelector("#metadata_select_options").value?.split("\n");
     document.querySelector(".metadata_default_select").options = select_options;
     document.querySelector(".metadata_default_select").value = select_value;