From af47db00fa8b681c3d16ff2440f1f1d1a5d9642b Mon Sep 17 00:00:00 2001
From: Martin Schmidt <martin.schmidt@freemine.de>
Date: Sun, 15 May 2022 19:18:46 +0200
Subject: [PATCH] refactor(DLNA): loop though settings and allow editing

---
 .../components/System/DlnaEntryEditor.vue     | 154 ++++++
 .../components/System/DlnaProfileEditor.vue   | 487 ++++++++----------
 frontend/locales/en-US.json                   |  93 +++-
 frontend/pages/settings/dlna.vue              |  35 +-
 4 files changed, 452 insertions(+), 317 deletions(-)
 create mode 100644 frontend/components/System/DlnaEntryEditor.vue

diff --git a/frontend/components/System/DlnaEntryEditor.vue b/frontend/components/System/DlnaEntryEditor.vue
new file mode 100644
index 00000000000..d44c878a4bd
--- /dev/null
+++ b/frontend/components/System/DlnaEntryEditor.vue
@@ -0,0 +1,154 @@
+<template>
+  <v-card class="dlnaEntryEditor">
+    <v-row class="ma-0 justify-space-between align-center">
+      <v-card-title>{{ $t('settings.dlna.entryEditor') }}</v-card-title>
+      <v-btn icon class="mr-2" @click="$emit('close-editor')">
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+    </v-row>
+    <v-card-text>
+      <v-container>
+        <v-row>
+          <v-col
+            v-for="key in Object.keys(currentEntryData)"
+            :key="key"
+            cols="12"
+            sm="6"
+            md="4"
+          >
+            <v-select
+              v-if="key === 'Method'"
+              v-model="currentEntryData[key]"
+              :items="Object.values(deliveryMethod)"
+              outlined
+              :label="$t('settings.dlna.table.' + key)"
+            />
+            <v-select
+              v-else-if="key === 'Type' && category === 'CodecProfiles'"
+              v-model="currentEntryData[key]"
+              :items="Object.values(codecType)"
+              outlined
+              :label="$t('settings.dlna.table.' + key)"
+            />
+            <v-select
+              v-else-if="key === 'Type'"
+              v-model="currentEntryData[key]"
+              :items="Object.values(dlnaMediaType)"
+              outlined
+              :label="$t('settings.dlna.table.' + key)"
+            />
+            <v-select
+              v-else-if="key === 'TranscodeSeekInfo'"
+              v-model="currentEntryData[key]"
+              :items="Object.values(transcodeSeekInfo)"
+              outlined
+              :label="$t('settings.dlna.table.' + key)"
+            />
+            <v-select
+              v-else-if="key === 'Context'"
+              v-model="currentEntryData[key]"
+              :items="Object.values(encodingContext)"
+              outlined
+              :label="$t('settings.dlna.table.' + key)"
+            />
+            <v-text-field
+              v-else-if="typeof currentEntryData[key] === 'string'"
+              v-model="currentEntryData[key]"
+              :label="$t('settings.dlna.table.' + key)"
+              outlined
+            />
+            <v-text-field
+              v-else-if="typeof currentEntryData[key] === 'number'"
+              v-model.number="currentEntryData[key]"
+              :label="$t('settings.dlna.table.' + key)"
+              type="number"
+              outlined
+            />
+            <v-checkbox
+              v-else-if="typeof currentEntryData[key] === 'boolean'"
+              v-model="currentEntryData[key]"
+              :label="$t('settings.dlna.table.' + key)"
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn color="success" @click="$emit('save-item', currentEntryData)">
+        {{ $t('settings.dlna.profile.save') }}
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import {
+  CodecProfile,
+  ContainerProfile,
+  DirectPlayProfile,
+  DlnaProfileType,
+  ResponseProfile,
+  SubtitleDeliveryMethod,
+  SubtitleProfile,
+  TranscodeSeekInfo,
+  TranscodingProfile,
+  XmlAttribute
+} from '@jellyfin/client-axios';
+import { CodecType } from '@jellyfin/client-axios/dist/models/codec-type';
+import { EncodingContext } from '@jellyfin/client-axios/dist/models/encoding-context';
+
+export default Vue.extend({
+  props: {
+    entryData: {
+      type: Object as () =>
+        | SubtitleProfile
+        | DirectPlayProfile
+        | TranscodingProfile
+        | ContainerProfile
+        | CodecProfile
+        | ResponseProfile
+        | XmlAttribute,
+      default: () => {
+        return {};
+      }
+    },
+    category: {
+      default: '',
+      type: String
+    }
+  },
+  data() {
+    return {
+      currentEntryData: undefined as
+        | SubtitleProfile
+        | DirectPlayProfile
+        | TranscodingProfile
+        | ContainerProfile
+        | CodecProfile
+        | ResponseProfile
+        | XmlAttribute
+        | undefined,
+      deliveryMethod: SubtitleDeliveryMethod,
+      codecType: CodecType,
+      dlnaMediaType: DlnaProfileType,
+      transcodeSeekInfo: TranscodeSeekInfo,
+      encodingContext: EncodingContext
+    };
+  },
+  beforeMount() {
+    this.bindToData();
+  },
+  methods: {
+    bindToData() {
+      this.currentEntryData = JSON.parse(JSON.stringify(this.entryData));
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.dlnaEntryEditor {
+  width: 80em;
+}
+</style>
diff --git a/frontend/components/System/DlnaProfileEditor.vue b/frontend/components/System/DlnaProfileEditor.vue
index 8adbb614ed3..fbcda0e27a5 100644
--- a/frontend/components/System/DlnaProfileEditor.vue
+++ b/frontend/components/System/DlnaProfileEditor.vue
@@ -1,12 +1,11 @@
 <template>
   <v-card class="dlnaProfileEditor">
-    <v-row v-if="isDialog" class="ma-0 justify-space-between align-center">
+    <v-row class="ma-0 justify-space-between align-center">
       <v-card-title>{{ selectedProfile.Name }}</v-card-title>
       <v-btn icon class="mr-2" @click="$emit('close-dialog')">
         <v-icon>mdi-close</v-icon>
       </v-btn>
     </v-row>
-    <v-card-title v-else>{{ currentProfile.Name }}</v-card-title>
     <v-tabs v-model="tab" centered dark icons-and-text>
       <v-tabs-slider />
       <v-tab v-for="i in categories" :key="i" :href="'#tab-' + i">
@@ -20,37 +19,24 @@
           <v-list-group :value="true">
             <template #activator>
               <v-list-item-title>
-                {{ $t('settings.dlna.profile.info.general.title') }}
+                {{ $t('settings.dlna.profile.info.general') }}
               </v-list-item-title>
             </template>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="$t('settings.dlna.profile.info.general.name.text')"
-                />
-                <v-list-item-subtitle
-                  v-text="$t('settings.dlna.profile.info.general.name.info')"
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field v-model="currentProfile.Name" outlined dense />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
+            <v-list-item
+              v-for="key in Object.keys(profileInformation)"
+              :key="key"
+            >
               <v-list-item-content>
                 <v-list-item-title
-                  v-text="
-                    $t('settings.dlna.profile.info.general.userLibrary.text')
-                  "
+                  v-text="$t('settings.dlna.profile.info.' + key + '.text')"
                 />
                 <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.info.general.userLibrary.info')
-                  "
+                  v-text="$t('settings.dlna.profile.info.' + key + '.info')"
                 />
               </v-list-item-content>
               <v-list-item-action>
                 <v-select
+                  v-if="key === 'UserId'"
                   v-model="currentProfile.UserId"
                   :items="users"
                   item-text="Name"
@@ -61,56 +47,15 @@
                   :label="$t('settings.dlna.DefaultUserId.selector')"
                   reverse
                 />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.info.general.maxStreamQuality.text'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.info.general.maxStreamQuality.info'
-                    )
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
                 <v-text-field
-                  v-model.number="currentProfile.MaxStreamingBitrate"
-                  type="number"
+                  v-else-if="typeof currentProfile[key] === 'string'"
+                  v-model="currentProfile[key]"
                   outlined
                   dense
                 />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.info.general.musicTranscodeQuality.text'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.info.general.musicTranscodeQuality.info'
-                    )
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
                 <v-text-field
-                  v-model.number="
-                    currentProfile.MusicStreamingTranscodingBitrate
-                  "
+                  v-else
+                  v-model.number="currentProfile.MaxStreamingBitrate"
                   type="number"
                   outlined
                   dense
@@ -123,7 +68,7 @@
           <v-list-group :value="false">
             <template #activator>
               <v-list-item-title>
-                {{ $t('settings.dlna.profile.info.general.mediaTypes.text') }}
+                {{ $t('settings.dlna.profile.info.mediaTypes.text') }}
               </v-list-item-title>
             </template>
             <v-list-item v-for="key in Object.keys(mediaTypes)" :key="key">
@@ -132,9 +77,7 @@
               </v-list-item-action>
               <v-list-item-content>
                 <v-list-item-title
-                  v-text="
-                    $t('settings.dlna.profile.info.general.mediaTypes.' + key)
-                  "
+                  v-text="$t('settings.dlna.profile.info.mediaTypes.' + key)"
                 />
               </v-list-item-content>
             </v-list-item>
@@ -273,15 +216,7 @@
       </v-tab-item>
 
       <v-tab-item
-        v-for="section in [
-          'SubtitleProfiles',
-          'DirectPlayProfiles',
-          'TranscodingProfiles',
-          'ContainerProfiles',
-          'CodecProfiles',
-          'ResponseProfiles',
-          'XmlRootAttributes'
-        ]"
+        v-for="section in tableCategories"
         :key="section"
         :value="'tab-' + section"
       >
@@ -295,18 +230,37 @@
                 {{ $t('settings.dlna.profile.' + section + '.text') }}
               </v-toolbar-title>
               <v-spacer />
+              <v-btn class="ml-a" color="primary" @click="newItem(section)">
+                {{ $t('settings.dlna.newEntry') }}
+              </v-btn>
+              <v-dialog
+                v-model="entryEditor"
+                width="fit-content"
+                :retain-focus="false"
+              >
+                <dlna-entry-editor
+                  v-if="editEntry !== undefined"
+                  :entry-data="editEntry"
+                  :category="currentCategory"
+                  @close-editor="closeEditor"
+                  @save-item="saveItem"
+                />
+              </v-dialog>
             </v-toolbar>
           </template>
+          <template #item.Conditions="{ item }">
+            {{ JSON.stringify(item.Conditions) }}
+          </template>
+          <template #item.action="{ item }">
+            <v-icon small class="mr-2" @click="editItem(section, item)">
+              mdi-pencil
+            </v-icon>
+            <v-icon small class="mr-2" @click="deleteItem(section, item)">
+              mdi-delete
+            </v-icon>
+          </template>
         </v-data-table>
       </v-tab-item>
-
-      <v-tab-item value="tab-xml">
-        <v-card>
-          <v-card-text>
-            {{ $t('settings.dlna.profile.xml.text') }}
-          </v-card-text>
-        </v-card>
-      </v-tab-item>
     </v-tabs-items>
     <v-card-actions>
       <v-btn color="success" @click="$emit('save-selected', currentProfile)">
@@ -330,10 +284,20 @@
 <script lang="ts">
 import Vue from 'vue';
 import {
+  CodecProfile,
+  ContainerProfile,
   DeviceProfile,
+  DirectPlayProfile,
   DlnaProfileType,
-  UserDto
+  SubtitleProfile,
+  TranscodeSeekInfo,
+  TranscodingProfile,
+  UserDto,
+  XmlAttribute
 } from '@jellyfin/client-axios';
+import { SubtitleDeliveryMethod } from '@jellyfin/client-axios/dist/models/subtitle-delivery-method';
+import { EncodingContext } from '@jellyfin/client-axios/dist/models/encoding-context';
+import { CodecType } from '@jellyfin/client-axios/dist/models/codec-type';
 
 enum DlnaProfileCategories {
   info = 'info',
@@ -347,6 +311,23 @@ enum DlnaProfileCategories {
   xml = 'XmlRootAttributes'
 }
 
+enum TableCategories {
+  SubtitleProfiles = 'SubtitleProfiles',
+  DirectPlayProfiles = 'DirectPlayProfiles',
+  TranscodingProfiles = 'TranscodingProfiles',
+  ContainerProfiles = 'ContainerProfiles',
+  CodecProfiles = 'CodecProfiles',
+  ResponseProfiles = 'ResponseProfiles',
+  XmlRootAttributes = 'XmlRootAttributes'
+}
+
+enum ProfileInfo {
+  Name = 'Name',
+  UserId = 'UserId',
+  MaxStreamingBitrate = 'MaxStreamingBitrate',
+  MusicStreamingTranscodingBitrate = 'MusicStreamingTranscodingBitrate'
+}
+
 enum ServerIdentification {
   FriendlyName = 'FriendlyName',
   Manufacturer = 'Manufacturer',
@@ -375,6 +356,19 @@ enum ImageSettings {
   MaxIconHeight = 'MaxIconHeight'
 }
 
+type TableUnion =
+  | SubtitleProfile
+  | DirectPlayProfile
+  | TranscodingProfile
+  | CodecProfile
+  | ContainerProfile
+  | XmlAttribute;
+
+interface HeaderType {
+  text: string;
+  value: string;
+}
+
 export default Vue.extend({
   props: {
     selectedProfile: {
@@ -390,196 +384,108 @@ export default Vue.extend({
     users: {
       type: Array as () => UserDto[],
       default: () => undefined
-    },
-    isDialog: {
-      default: false,
-      type: Boolean
     }
   },
   data() {
     return {
-      headers: {
-        SubtitleProfiles: [
-          {
-            text: 'Format',
-            value: 'Format'
-          },
-          {
-            text: 'Method',
-            value: 'Method'
-          },
-          {
-            text: 'DidlMode',
-            value: 'DidlMode'
-          },
-          {
-            text: 'Language',
-            value: 'Language'
-          },
-          {
-            text: 'Container',
-            value: 'Container'
-          }
-        ],
-        DirectPlayProfiles: [
-          {
-            text: 'Container',
-            value: 'Container'
-          },
-          {
-            text: 'AudioCodec',
-            value: 'AudioCodec'
-          },
-          {
-            text: 'VideoCodec',
-            value: 'VideoCodec'
-          },
-          {
-            text: 'Type',
-            value: 'Type'
-          }
-        ],
-        TranscodingProfiles: [
-          {
-            text: 'Container',
-            value: 'Container'
-          },
-          {
-            text: 'Type',
-            value: 'Type'
-          },
-          {
-            text: 'AudioCodec',
-            value: 'AudioCodec'
-          },
-          {
-            text: 'VideoCodec',
-            value: 'VideoCodec'
-          },
-          {
-            text: 'Protocol',
-            value: 'Protocol'
-          },
-          {
-            text: 'EstimateContentLength',
-            value: 'EstimateContentLength'
-          },
-          {
-            text: 'EnableMpegtsM2TsMode',
-            value: 'EnableMpegtsM2TsMode'
-          },
-          {
-            text: 'TranscodeSeekInfo',
-            value: 'TranscodeSeekInfo'
-          },
-          {
-            text: 'CopyTimeStamps',
-            value: 'CopyTimeStamps'
-          },
-          {
-            text: 'Context',
-            value: 'Context'
-          },
-          {
-            text: 'EnableSubtitleInManifest',
-            value: 'EnableSubtitleInManifest'
-          },
-          {
-            text: 'MaxAudioChannels',
-            value: 'MaxAudioChannels'
-          },
-          {
-            text: 'MinSegments',
-            value: 'MinSegments'
-          },
-          {
-            text: 'SegmentLength',
-            value: 'SegmentLength'
-          },
-          {
-            text: 'BreakOnNonKeyFrames',
-            value: 'BreakOnNonKeyFrames'
-          }
-        ],
-        ContainerProfiles: [
-          {
-            text: 'Type',
-            value: 'Type'
-          },
-          {
-            text: 'Condition',
-            value: 'Condition'
-          },
-          {
-            text: 'Container',
-            value: 'Container'
-          }
-        ],
-        CodecProfiles: [
-          {
-            text: 'Type',
-            value: 'Type'
-          },
-          {
-            text: 'Condition',
-            value: 'Condition'
-          },
-          {
-            text: 'Container',
-            value: 'Container'
-          }
-        ],
-        ResponseProfiles: [
-          {
-            text: 'Container',
-            value: 'Container'
-          },
-          {
-            text: 'AudioCodec',
-            value: 'AudioCodec'
-          },
-          {
-            text: 'VideoCodec',
-            value: 'VideoCodec'
-          },
-          {
-            text: 'Type',
-            value: 'Type'
-          },
-          {
-            text: 'OrgPn',
-            value: 'OrgPn'
-          },
-          {
-            text: 'MimeType',
-            value: 'MimeType'
-          },
-          {
-            text: 'Conditions',
-            value: 'Conditions'
-          }
-        ],
-        XmlRootAttributes: [
-          {
-            text: 'Name',
-            value: 'Name'
-          },
-          {
-            text: 'Value',
-            value: 'Value'
-          }
-        ]
-      },
+      entryEditor: false,
       mediaTypes: DlnaProfileType,
+      profileInformation: ProfileInfo,
+      tableCategories: TableCategories,
       serverIdentification: ServerIdentification,
       categories: DlnaProfileCategories,
       displaySettings: DisplaySettings,
       imageSettings: ImageSettings,
       tab: null,
+      originalItem: {} as TableUnion | undefined,
+      editEntry: {} as TableUnion | undefined,
+      currentCategory: '',
+      emptyProfiles: {
+        SubtitleProfiles: {
+          Format: '',
+          Method: SubtitleDeliveryMethod.External,
+          DidlMode: '',
+          Language: '',
+          Container: ''
+        },
+        DirectPlayProfiles: {
+          Container: '',
+          AudioCodec: '',
+          VideoCodec: '',
+          Type: DlnaProfileType.Audio
+        },
+        TranscodingProfiles: {
+          Container: '',
+          Type: DlnaProfileType.Audio,
+          VideoCodec: '',
+          AudioCodec: '',
+          Protocol: '',
+          EstimateContentLength: false,
+          EnableMpegtsM2TsMode: false,
+          TranscodeSeekInfo: TranscodeSeekInfo.Auto,
+          CopyTimestamps: false,
+          Context: EncodingContext.Static,
+          EnableSubtitlesInManifest: false,
+          MaxAudioChannels: '',
+          MinSegments: 0,
+          SegmentLength: 0,
+          BreakOnNonKeyFrames: false
+        },
+        ContainerProfiles: {
+          Type: DlnaProfileType.Audio,
+          Conditions: [],
+          Container: ''
+        },
+        CodecProfiles: {
+          Type: CodecType.Audio,
+          Conditions: [],
+          ApplyConditions: [],
+          Codec: '',
+          Container: ''
+        },
+        ResponseProfiles: {
+          Container: '',
+          AudioCodec: '',
+          VideoCodec: '',
+          Type: DlnaProfileType.Audio,
+          OrgPn: '',
+          MimeType: '',
+          Conditions: []
+        },
+        XmlRootAttributes: {
+          Name: '',
+          Value: ''
+        }
+      } as Record<string, TableUnion>,
       currentProfile: undefined as DeviceProfile | undefined,
       supportedMediaTypes: [] as Array<string> | undefined
     };
   },
+  computed: {
+    headers(): Record<string, Array<HeaderType>> {
+      const record: Record<string, Array<HeaderType>> = {};
+
+      Object.entries(this.emptyProfiles).forEach(([key, value]) => {
+        const temp: Array<HeaderType> = [];
+
+        for (const entry in value) {
+          temp.push({
+            text: this.$t('settings.dlna.table.' + entry),
+            value: entry
+          });
+        }
+
+        temp.push({
+          text: this.$t('settings.dlna.table.action'),
+          value: 'action'
+        });
+
+        record[key] = temp;
+      });
+
+      return record;
+    }
+  },
   watch: {
     supportedMediaTypes() {
       if (this.currentProfile) {
@@ -598,6 +504,55 @@ export default Vue.extend({
       this.currentProfile = tempProfile;
       this.supportedMediaTypes =
         tempProfile.SupportedMediaTypes?.split(',') || [];
+    },
+    newItem(key: TableCategories) {
+      this.originalItem = undefined;
+      this.editEntry = this.emptyProfiles[key];
+      this.currentCategory = key;
+      this.entryEditor = true;
+    },
+    editItem(key: TableCategories, item: TableUnion) {
+      this.originalItem = item;
+      this.editEntry = {
+        ...this.emptyProfiles[key],
+        ...item
+      };
+      this.currentCategory = key;
+      this.entryEditor = true;
+    },
+    closeEditor() {
+      this.originalItem = undefined;
+      this.editEntry = undefined;
+      this.currentCategory = '';
+      this.entryEditor = false;
+    },
+    saveItem(item: TableUnion) {
+      if (!this.currentProfile) {
+        return;
+      }
+
+      const tab = this.currentProfile[
+        this.currentCategory as keyof DeviceProfile
+      ] as Array<TableUnion>;
+
+      if (this.originalItem === undefined) {
+        tab.push(item);
+      } else {
+        tab.splice(tab.indexOf(this.originalItem), 1, item);
+      }
+
+      this.closeEditor();
+    },
+    deleteItem(key: TableCategories, item: TableUnion) {
+      if (!this.currentProfile) {
+        return;
+      }
+
+      const tab = this.currentProfile[
+        key as keyof DeviceProfile
+      ] as Array<TableUnion>;
+
+      tab.splice(tab.indexOf(item), 1);
     }
   }
 });
diff --git a/frontend/locales/en-US.json b/frontend/locales/en-US.json
index ef826c75eeb..ec0ee01263e 100644
--- a/frontend/locales/en-US.json
+++ b/frontend/locales/en-US.json
@@ -317,7 +317,7 @@
     "dlna": {
       "dlna": "DLNA",
       "EnablePlayTo": {
-        "text": "Enable DLNA Play To",
+        "text": "Enable DLNA PlayTo",
         "description": "Detect devices within your network and offer the ability to control them remotely."
       },
       "EnableDebugLog": {
@@ -345,6 +345,18 @@
         "description": "Determines which user library should be displayed on connected devices. This can be overridden for each device using profiles.",
         "selector": "Select default user"
       },
+      "EnablePlayToTracing": {
+        "text": "Enable PlayTo Tracing",
+        "description": "Enables debug logging for DLNA PlayTo"
+      },
+      "BlastAliveMessageIntervalSeconds": {
+        "text": "[deprecated] Alive message interval",
+        "description": "MIGRATING - TO BE REMOVED ONCE WEB HAS BEEN ALTERED"
+      },
+      "AutoCreatePlayToProfiles": {
+        "text": "Automatically create PlayTo device profiles",
+        "description": ""
+      },
       "profile": {
         "new": "New Profile",
         "name": "Profile name",
@@ -360,30 +372,28 @@
         "save": "Save profile",
         "info": {
           "title": "Info",
-          "general": {
-            "title": "General settings",
-            "name": {
-              "text": "Name",
-              "info": "Set the name of this profile."
-            },
-            "userLibrary": {
-              "text": "User library",
-              "info": "Select which user library to display to the device. Leave empty to inherit the default setting."
-            },
-            "mediaTypes": {
-              "text": "Supported Media Types",
-              "Audio": "Audio",
-              "Video": "Video",
-              "Photo": "Photo"
-            },
-            "maxStreamQuality": {
-              "text": "Maximum streaming quality",
-              "info": "Specify a maximum bitrate when streaming."
-            },
-            "musicTranscodeQuality": {
-              "text": "Music transcoding bitrate",
-              "info": "Specify a maximum bitrate when streaming music."
-            }
+          "general": "General settings",
+          "Name": {
+            "text": "Name",
+            "info": "Set the name of this profile."
+          },
+          "UserId": {
+            "text": "User library",
+            "info": "Select which user library to display to the device. Leave empty to inherit the default setting."
+          },
+          "MaxStreamingBitrate": {
+            "text": "Maximum streaming quality",
+            "info": "Specify a maximum bitrate when streaming."
+          },
+          "MusicStreamingTranscodingBitrate": {
+            "text": "Music transcoding bitrate",
+            "info": "Specify a maximum bitrate when streaming music."
+          },
+          "mediaTypes": {
+            "text": "Supported Media Types",
+            "Audio": "Audio",
+            "Video": "Video",
+            "Photo": "Photo"
           },
           "display": {
             "title": "Display Settings",
@@ -482,7 +492,38 @@
           "title": "XML",
           "text": "These attributes are applied to the root element of every XML response."
         }
-      }
+      },
+      "table": {
+        "Format": "Format",
+        "Method": "Method",
+        "DidlMode": "DidlMode",
+        "Language": "Language",
+        "Container": "Container",
+        "AudioCodec": "Audio Codec",
+        "VideoCodec": "Video Codec",
+        "MaxAudioChannels": "Max Audio Channels",
+        "Protocol": "Protocol",
+        "Type": "Type",
+        "EstimateContentLength": "Estimate Content Length",
+        "EnableMpegtsM2TsMode": "Enable MpegtsM To Ts Mode",
+        "TranscodeSeekInfo": "Transcode Seek Info",
+        "CopyTimestamps": "Copy Time Stamps",
+        "Context": "Context",
+        "EnableSubtitlesInManifest": "Enable Subtitles in Manifest",
+        "MinSegments": "Min Segments",
+        "SegmentLength": "Segment length",
+        "BreakOnNonKeyFrames": "Break on non-keyframes",
+        "Conditions": "Conditions",
+        "ApplyConditions": "Apply Conditions",
+        "Codec": "Codec",
+        "MimeType": "Mime Type",
+        "OrgPn": "OrgPn",
+        "Name": "Name",
+        "Value": "Value",
+        "action": "Action"
+      },
+      "newEntry": "New Entry",
+      "entryEditor": "Entry Editor"
     },
     "devices": {
       "appName": "App name",
diff --git a/frontend/pages/settings/dlna.vue b/frontend/pages/settings/dlna.vue
index 414dfe81922..22784ace9e6 100644
--- a/frontend/pages/settings/dlna.vue
+++ b/frontend/pages/settings/dlna.vue
@@ -15,7 +15,7 @@
           <v-list two-line flat>
             <v-list-item-group>
               <v-list-item
-                v-for="dlnaSettingName in Object.keys(bindToRelevantConfig)"
+                v-for="dlnaSettingName in Object.keys(dlnaSettings)"
                 :key="dlnaSettingName"
               >
                 <v-list-item-content>
@@ -98,11 +98,14 @@
           />
         </v-card>
       </v-col>
-      <v-dialog v-model="deviceInfoDialog" width="fit-content">
+      <v-dialog
+        v-model="deviceInfoDialog"
+        width="fit-content"
+        :retain-focus="false"
+      >
         <dlna-profile-editor
           v-if="selectedProfile.Name"
           :selected-profile="selectedProfile"
-          :is-dialog="true"
           :is-custom-profile="isCustomProfile"
           :users="users"
           @close-dialog="closeDialog"
@@ -123,32 +126,27 @@ import {
   UserDto
 } from '@jellyfin/client-axios';
 import isNil from 'lodash/isNil';
-import DlnaProfileEditor from '~/components/System/DlnaProfileEditor.vue';
 
 /**
  * We need to define those interfaces here as the axios hook for
  * $api.configuration.getNamedConfiguration() returns an
  * any typed object which we cannot use further down the line.
  */
-interface RelevantConfig {
+interface DlnaNamedConfiguration {
   EnablePlayTo: boolean;
+  EnablePlayToTracing: boolean;
   EnableDebugLog: boolean;
   ClientDiscoveryIntervalSeconds: number;
   EnableServer: boolean;
-  BlastAliveMessages: boolean;
   AliveMessageIntervalSeconds: number;
-  DefaultUserId: string;
-}
-
-interface DlnaNamedConfiguration extends RelevantConfig {
-  EnablePlayToTracing: boolean;
+  BlastAliveMessages: boolean;
   BlastAliveMessageIntervalSeconds: number;
+  DefaultUserId: string;
   AutoCreatePlayToProfiles: boolean;
   SendOnlyMatchedHost: boolean;
 }
 
 export default Vue.extend({
-  components: { DlnaProfileEditor },
   async asyncData({ $api }) {
     const dlnaSettings = (
       await $api.configuration.getNamedConfiguration({ key: 'dlna' })
@@ -188,19 +186,6 @@ export default Vue.extend({
       return this.dlnaProfiles.filter(
         (profile) => profile.Type === DeviceProfileType.System
       );
-    },
-    bindToRelevantConfig(): RelevantConfig {
-      return {
-        EnablePlayTo: this.dlnaSettings.EnablePlayTo,
-        EnableDebugLog: this.dlnaSettings.EnableDebugLog,
-        ClientDiscoveryIntervalSeconds:
-          this.dlnaSettings.ClientDiscoveryIntervalSeconds,
-        EnableServer: this.dlnaSettings.EnableServer,
-        BlastAliveMessages: this.dlnaSettings.BlastAliveMessages,
-        AliveMessageIntervalSeconds:
-          this.dlnaSettings.AliveMessageIntervalSeconds,
-        DefaultUserId: this.dlnaSettings.DefaultUserId
-      };
     }
   },
   methods: {