From 643bd19c150aa3cf0cc4d7616a2b727762327c0a Mon Sep 17 00:00:00 2001
From: Martin Schmidt <martin.schmidt@freemine.de>
Date: Tue, 3 May 2022 17:14:57 +0200
Subject: [PATCH 1/5] feat(DLNA): create DLNA page

---
 .../components/System/SelectedDlnaProfile.vue | 924 ++++++++++++++++++
 frontend/locales/en-US.json                   | 169 ++++
 frontend/pages/settings/dlna.vue              | 249 +++++
 frontend/pages/settings/index.vue             |   3 +-
 4 files changed, 1344 insertions(+), 1 deletion(-)
 create mode 100644 frontend/components/System/SelectedDlnaProfile.vue
 create mode 100644 frontend/pages/settings/dlna.vue

diff --git a/frontend/components/System/SelectedDlnaProfile.vue b/frontend/components/System/SelectedDlnaProfile.vue
new file mode 100644
index 00000000000..6106f87de82
--- /dev/null
+++ b/frontend/components/System/SelectedDlnaProfile.vue
@@ -0,0 +1,924 @@
+<template>
+  <v-card class="selected-dlna-profile">
+    <v-row v-if="isDialog" 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 9" :key="i" :href="'#tab-' + i">
+        {{
+          $t(
+            'settings.dlna.profile.' +
+              categories[i - 1].toLocaleString() +
+              '.title'
+          )
+        }}
+      </v-tab>
+    </v-tabs>
+    <v-tabs-items v-model="tab">
+      <v-tab-item value="tab-1">
+        <v-list>
+          <!-- General -->
+          <v-list-group :value="true">
+            <template #activator>
+              <v-list-item-title>
+                {{ $t('settings.dlna.profile.info.general.title') }}
+              </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-content>
+                <v-list-item-title
+                  v-text="
+                    $t('settings.dlna.profile.info.general.userLibrary.text')
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.info.general.userLibrary.info')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-select
+                  v-model="currentProfile.UserId"
+                  :items="users"
+                  item-text="Name"
+                  item-value="Id"
+                  outlined
+                  dense
+                  clearable
+                  :label="$t('settings.dlna.DefaultUserId.selector')"
+                  reverse
+                />
+              </v-list-item-action>
+            </v-list-item>
+            <!-- Supported Media Types -->
+            <v-list-group :value="true" no-action sub-group>
+              <template #activator>
+                <v-list-item-title>
+                  {{ $t('settings.dlna.profile.info.general.mediaTypes.text') }}
+                </v-list-item-title>
+              </template>
+              <v-list-item>
+                <v-list-item-action>
+                  <v-checkbox v-model="supportedMediaTypes" value="Audio" />
+                </v-list-item-action>
+                <v-list-item-content>
+                  <v-list-item-title
+                    v-text="
+                      $t('settings.dlna.profile.info.general.mediaTypes.audio')
+                    "
+                  />
+                </v-list-item-content>
+              </v-list-item>
+              <v-list-item>
+                <v-list-item-action>
+                  <v-checkbox v-model="supportedMediaTypes" value="Photo" />
+                </v-list-item-action>
+                <v-list-item-content>
+                  <v-list-item-title
+                    v-text="
+                      $t('settings.dlna.profile.info.general.mediaTypes.photo')
+                    "
+                  />
+                </v-list-item-content>
+              </v-list-item>
+              <v-list-item>
+                <v-list-item-action>
+                  <v-checkbox v-model="supportedMediaTypes" value="Video" />
+                </v-list-item-action>
+                <v-list-item-content>
+                  <v-list-item-title
+                    v-text="
+                      $t('settings.dlna.profile.info.general.mediaTypes.video')
+                    "
+                  />
+                </v-list-item-content>
+              </v-list-item>
+            </v-list-group>
+            <!-- back to normal -->
+            <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"
+                  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
+                  "
+                  type="number"
+                  outlined
+                  dense
+                />
+              </v-list-item-action>
+            </v-list-item>
+          </v-list-group>
+
+          <!-- Display -->
+          <v-list-group :value="false">
+            <template #activator>
+              <v-list-item-title>
+                {{ $t('settings.dlna.profile.info.display.title') }}
+              </v-list-item-title>
+            </template>
+            <v-list-item>
+              <v-list-item-action>
+                <v-checkbox v-model="currentProfile.RequiresPlainFolders" />
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="
+                    $t('settings.dlna.profile.info.display.plainFolder.text')
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.info.display.plainFolder.info')
+                  "
+                />
+              </v-list-item-content>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-action>
+                <v-checkbox v-model="currentProfile.RequiresPlainVideoItems" />
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="
+                    $t('settings.dlna.profile.info.display.plainVideo.text')
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.info.display.plainVideo.info')
+                  "
+                />
+              </v-list-item-content>
+            </v-list-item>
+          </v-list-group>
+
+          <!-- Image Settings -->
+          <v-list-group :value="false">
+            <template #activator>
+              <v-list-item-title>
+                {{ $t('settings.dlna.profile.info.image.title') }}
+              </v-list-item-title>
+            </template>
+            <v-list-item>
+              <v-list-item-action>
+                <v-checkbox v-model="currentProfile.EnableAlbumArtInDidl" />
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="$t('settings.dlna.profile.info.image.embedDidl.text')"
+                />
+                <v-list-item-subtitle
+                  v-text="$t('settings.dlna.profile.info.image.embedDidl.info')"
+                />
+              </v-list-item-content>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-action>
+                <v-checkbox
+                  v-model="currentProfile.EnableSingleAlbumArtLimit"
+                />
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="
+                    $t('settings.dlna.profile.info.image.singleEmbed.text')
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.info.image.singleEmbed.info')
+                  "
+                />
+              </v-list-item-content>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="$t('settings.dlna.profile.info.image.albumPN.text')"
+                />
+                <v-list-item-subtitle
+                  v-text="$t('settings.dlna.profile.info.image.albumPN.info')"
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.AlbumArtPn"
+                  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.image.albumArtMaxWidth')
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.info.image.albumMaxDimension')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.MaxAlbumArtWidth"
+                  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.image.albumArtMaxHeight')
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.info.image.albumMaxDimension')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.MaxAlbumArtHeight"
+                  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.image.iconMaxWidth')"
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.info.image.iconMaxDimension')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.MaxIconWidth"
+                  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.image.iconMaxHeight')"
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.info.image.iconMaxDimension')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.MaxIconHeight"
+                  outlined
+                  dense
+                />
+              </v-list-item-action>
+            </v-list-item>
+          </v-list-group>
+        </v-list>
+      </v-tab-item>
+
+      <v-tab-item value="tab-2">
+        <v-list>
+          <!-- Identification -->
+          <v-list-group :value="true">
+            <template #activator>
+              <v-list-item-title>
+                {{ $t('settings.dlna.profile.identification.device.title') }}
+              </v-list-item-title>
+            </template>
+            <v-card-text>
+              {{ $t('settings.dlna.profile.identification.device.info') }}
+            </v-card-text>
+            <v-list-item>
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="
+                    $t(
+                      'settings.dlna.profile.identification.device.friendlyName'
+                    )
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.identification.device.infoText')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.Identification.FriendlyName"
+                  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.identification.device.manufacturer'
+                    )
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.identification.device.infoText')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.Identification.Manufacturer"
+                  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.identification.device.manufacturerUrl'
+                    )
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.identification.device.infoText')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.Identification.ManufacturerUrl"
+                  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.identification.device.modelName')
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.identification.device.infoText')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.Identification.ModelName"
+                  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.identification.device.modelNumber'
+                    )
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.identification.device.infoText')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.Identification.ModelNumber"
+                  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.identification.device.modelDescription'
+                    )
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.identification.device.infoText')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.Identification.ModelDescription"
+                  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.identification.device.modelUrl')
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.identification.device.infoText')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.Identification.ModelUrl"
+                  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.identification.device.serialNumber'
+                    )
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.identification.device.infoText')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.Identification.SerialNumber"
+                  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.identification.device.deviceDescription'
+                    )
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.identification.device.infoText')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.Identification.ModelDescription"
+                  outlined
+                  dense
+                />
+              </v-list-item-action>
+            </v-list-item>
+          </v-list-group>
+
+          <!-- Server Settings -->
+          <v-list-group :value="false">
+            <template #activator>
+              <v-list-item-title>
+                {{ $t('settings.dlna.profile.identification.server.title') }}
+              </v-list-item-title>
+            </template>
+            <v-card-text>
+              {{ $t('settings.dlna.profile.identification.server.info') }}
+            </v-card-text>
+            <v-list-item>
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="
+                    $t(
+                      'settings.dlna.profile.identification.server.friendlyName'
+                    )
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.FriendlyName"
+                  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.identification.server.manufacturer'
+                    )
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.Manufacturer"
+                  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.identification.server.manufacturerUrl'
+                    )
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.ManufacturerUrl"
+                  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.identification.server.modelName')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.ModelName"
+                  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.identification.server.modelNumber'
+                    )
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.ModelNumber"
+                  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.identification.server.modelDescription'
+                    )
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.ModelDescription"
+                  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.identification.server.modelUrl')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.ModelUrl"
+                  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.identification.server.serialNumber'
+                    )
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.SerialNumber"
+                  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.identification.server.protocolInfo.text'
+                    )
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t(
+                      'settings.dlna.profile.identification.server.protocolInfo.info'
+                    )
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.ProtocolInfo"
+                  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.identification.server.sonyAggregationFlags.text'
+                    )
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t(
+                      'settings.dlna.profile.identification.server.sonyAggregationFlags.info'
+                    )
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.SonyAggregationFlags"
+                  outlined
+                  dense
+                />
+              </v-list-item-action>
+            </v-list-item>
+          </v-list-group>
+        </v-list>
+      </v-tab-item>
+
+      <v-tab-item value="tab-3">
+        <v-card>
+          <v-card-text>
+            {{ $t('settings.dlna.profile.subtitle.text') }}
+          </v-card-text>
+        </v-card>
+      </v-tab-item>
+
+      <v-tab-item value="tab-4">
+        <v-card>
+          <v-card-text>
+            {{ $t('settings.dlna.profile.directPlay.text') }}
+          </v-card-text>
+        </v-card>
+      </v-tab-item>
+
+      <v-tab-item value="tab-5">
+        <v-card>
+          <v-card-text>
+            {{ $t('settings.dlna.profile.transcoding.text') }}
+          </v-card-text>
+        </v-card>
+      </v-tab-item>
+
+      <v-tab-item value="tab-6">
+        <v-card>
+          <v-card-text>
+            {{ $t('settings.dlna.profile.containers.text') }}
+          </v-card-text>
+        </v-card>
+      </v-tab-item>
+
+      <v-tab-item value="tab-7">
+        <v-card>
+          <v-card-text>
+            {{ $t('settings.dlna.profile.codecs.text') }}
+          </v-card-text>
+        </v-card>
+      </v-tab-item>
+
+      <v-tab-item value="tab-8">
+        <v-card>
+          <v-card-text>
+            {{ $t('settings.dlna.profile.responses.text') }}
+          </v-card-text>
+        </v-card>
+      </v-tab-item>
+
+      <v-tab-item value="tab-9">
+        <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)">
+        {{
+          isCustomProfile
+            ? $t('settings.dlna.profile.save')
+            : $t('settings.dlna.profile.saveNew')
+        }}
+      </v-btn>
+      <v-btn
+        v-if="isCustomProfile"
+        color="error"
+        @click="$emit('delete-selected')"
+      >
+        {{ $t('settings.devices.delete') }}
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { DeviceProfile, UserDto } from '@jellyfin/client-axios';
+
+enum DlnaProfileCategories {
+  info,
+  identification,
+  subtitle,
+  directPlay,
+  transcoding,
+  containers,
+  codecs,
+  responses,
+  xml
+}
+
+export default Vue.extend({
+  props: {
+    selectedProfile: {
+      type: Object as () => DeviceProfile,
+      default: (): DeviceProfile => {
+        return {};
+      }
+    },
+    isCustomProfile: {
+      default: false,
+      type: Boolean
+    },
+    users: {
+      type: Array as () => UserDto[],
+      default: () => undefined
+    },
+    isDialog: {
+      default: false,
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      categories: DlnaProfileCategories,
+      tab: null,
+      currentProfile: undefined as DeviceProfile | undefined,
+      supportedMediaTypes: [] as Array<string> | undefined
+    };
+  },
+  watch: {
+    supportedMediaTypes() {
+      if (this.currentProfile) {
+        this.currentProfile.SupportedMediaTypes =
+          this.supportedMediaTypes?.join(',');
+      }
+    }
+  },
+  beforeMount() {
+    this.bindToData();
+  },
+  methods: {
+    bindToData() {
+      const tempProfile = JSON.parse(JSON.stringify(this.selectedProfile));
+
+      this.currentProfile = tempProfile;
+      this.supportedMediaTypes =
+        tempProfile.SupportedMediaTypes?.split(',') || [];
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.selected-dlna-profile {
+  width: 80em;
+}
+</style>
diff --git a/frontend/locales/en-US.json b/frontend/locales/en-US.json
index 6f397f8e98b..6906ddd483f 100644
--- a/frontend/locales/en-US.json
+++ b/frontend/locales/en-US.json
@@ -323,6 +323,175 @@
       "revokeFailure": "Error revoking API key",
       "revokeSuccess": "Successfully revoked API key"
     },
+    "dlna": {
+      "dlna": "DLNA",
+      "EnablePlayTo": {
+        "text": "Enable DLNA Play To",
+        "description": "Detect devices within your network and offer the ability to control them remotely."
+      },
+      "EnableDebugLog": {
+        "text": "Enable DLNA debug logging",
+        "description": "Create large log files and should only be used as needed for troubleshooting purposes."
+      },
+      "ClientDiscoveryIntervalSeconds": {
+        "text": "Client discovery interval",
+        "description": "Determines the duration in seconds between SSDP searches."
+      },
+      "EnableServer": {
+        "text": "Enable DLNA server",
+        "description": "Allows UPnP devices on your network to browse and play content."
+      },
+      "BlastAliveMessages": {
+        "text": "Blast alive messages",
+        "description": "Enable this if the server is not detected reliably by other UPnP devices on your network."
+      },
+      "AliveMessageIntervalSeconds": {
+        "text": "Alive message interval",
+        "description": "Determines the duration in seconds between blast alive messages."
+      },
+      "DefaultUserId": {
+        "text": "Default user",
+        "description": "Determines which user library should be displayed on connected devices. This can be overridden for each device using profiles.",
+        "selector": "Select default user"
+      },
+      "profile": {
+        "new": "New Profile",
+        "name": "Profile name",
+        "custom": {
+          "text": "Custom profiles",
+          "subtitle": "Create a custom profile to target a new device or override a system profile."
+        },
+        "system": {
+          "text": "System profiles",
+          "subtitle": "System profiles are read-only. Changes to a system profile will be saved to a new custom profile."
+        },
+        "saveNew": "Save as new custom profile",
+        "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."
+            }
+          },
+          "display": {
+            "title": "Display Settings",
+            "plainFolder": {
+              "text": "Display all folders as plain storage folders",
+              "info": "All folders are represented in DIDL as \"object.container.storageFolder\" instead of a more specific type, such as \"object.container.person.musicArtist\"."
+            },
+            "plainVideo": {
+              "text": "Display all videos as plain video items",
+              "info": "All videos are represented in DIDL as \"object.item.videoItem\" instead of a more specific type, such as \"object.item.videoItem.movie\"."
+            }
+          },
+          "image": {
+            "title": "Image Settings",
+            "albumMaxDimension": "Maximum resolution of album art exposed via the upnp:albumArtURI property.",
+            "iconMaxDimension": "Maximum resolution of icons exposed via the upnp:icon property.",
+            "embedDidl": {
+              "text": "Embed album art in Didl",
+              "info": "Some devices prefer this method for obtaining album art. Others may fail to play with this option enabled."
+            },
+            "singleEmbed": {
+              "text": "Limit to single embedded image",
+              "info": "Some devices will not render properly if multiple images are embedded within Didl."
+            },
+            "albumPN": {
+              "text": "Album art PN",
+              "info": "PN used for album art, within the dlna:profileID attribute on upnp:albumArtURI. Some devices require a specific value, regardless of the size of the image."
+            },
+            "albumArtMaxWidth": "Album art max width",
+            "albumArtMaxHeight": "Album art max height",
+            "iconMaxWidth": "Icon maximum width",
+            "iconMaxHeight": "Icon maximum height"
+          }
+        },
+        "identification": {
+          "title": "Identification",
+          "device": {
+            "title": "Device identification",
+            "info": "Enter at least one identification criteria.",
+            "infoText": "A case-insensitive substring or regex expression.",
+            "friendlyName": "Friendly name",
+            "manufacturer": "Manufacturer",
+            "manufacturerUrl": "Manufacturer URL",
+            "modelName": "Model name",
+            "modelNumber": "Model number",
+            "modelDescription": "Model description",
+            "modelUrl": "Model URL",
+            "serialNumber": "Serial number",
+            "deviceDescription": "Device description"
+          },
+          "server": {
+            "title": "Server identification",
+            "info": "These values control how the server will present itself to clients.",
+            "friendlyName": "Friendly name",
+            "manufacturer": "Manufacturer",
+            "manufacturerUrl": "Manufacturer URL",
+            "modelName": "Model name",
+            "modelNumber": "Model number",
+            "modelDescription": "Model description",
+            "modelUrl": "Model URL",
+            "serialNumber": "Serial number",
+            "protocolInfo": {
+              "text": "Protocol info",
+              "info": "The value that will be used when responding to GetProtocolInfo requests from the device."
+            },
+            "sonyAggregationFlags": {
+              "text": "Sony aggregation flags",
+              "info": "Determines the content of the aggreagationFlags element in the urn:schemas-sonycom:av namespace."
+            }
+          }
+        },
+        "subtitle": {
+          "title": "Subtitle"
+        },
+        "directPlay": {
+          "title": "Direct Play",
+          "text": "Add direct play profiles to indicate which formats the device can handle natively."
+        },
+        "transcoding": {
+          "title": "Transcoding",
+          "text": "Add transcoding profiles to indicate which formats should be used when transcoding is required."
+        },
+        "containers": {
+          "title": "Containers",
+          "text": "Container profiles indicate the limitations of a device when playing specific formats. If a limitation applies then the media will be transcoded, even if the format is configured for direct play."
+        },
+        "codecs": {
+          "title": "Codecs",
+          "text": "Codec profiles indicate the limitations of a device when playing specific codecs. If a limitation applies then the media will be transcoded, even if the codec is configured for direct play."
+        },
+        "responses": {
+          "title": "Responses",
+          "text": "Response profiles provide a way to customize information sent to the device when playing certain kinds of media."
+        },
+        "xml": {
+          "title": "XML"
+        }
+      }
+    },
     "devices": {
       "appName": "App name",
       "appVersion": "App version",
diff --git a/frontend/pages/settings/dlna.vue b/frontend/pages/settings/dlna.vue
new file mode 100644
index 00000000000..c9f41db5e92
--- /dev/null
+++ b/frontend/pages/settings/dlna.vue
@@ -0,0 +1,249 @@
+<template>
+  <settings-page page-title="settings.dlna.dlna">
+    <template #actions>
+      <v-btn
+        rel="noreferrer noopener"
+        href="https://jellyfin.org/docs/general/networking/dlna.html"
+        target="_blank"
+      >
+        {{ $t('settings.help') }}
+      </v-btn>
+    </template>
+    <template #content>
+      <v-col cols="12" md="6" lg="5" class="py-4">
+        <v-card class="mb-4">
+          <v-list two-line flat>
+            <v-list-item-group>
+              <v-list-item
+                v-for="dlnaSettingName in Object.keys(bindToRelevantConfig)"
+                :key="dlnaSettingName"
+              >
+                <v-list-item-content>
+                  <v-list-item-title
+                    v-text="$t('settings.dlna.' + dlnaSettingName + '.text')"
+                  />
+                  <v-list-item-subtitle
+                    v-text="
+                      $t('settings.dlna.' + dlnaSettingName + '.description')
+                    "
+                  />
+                </v-list-item-content>
+                <v-list-item-action>
+                  <v-switch
+                    v-if="typeof dlnaSettings[dlnaSettingName] === 'boolean'"
+                    v-model="dlnaSettings[dlnaSettingName]"
+                    @change="storeDlnaConfiguration"
+                  />
+                  <v-text-field
+                    v-if="typeof dlnaSettings[dlnaSettingName] === 'number'"
+                    v-model.number="dlnaSettings[dlnaSettingName]"
+                    type="number"
+                    outlined
+                    reverse
+                    dense
+                    @change="storeDlnaConfiguration"
+                  />
+                  <v-select
+                    v-if="
+                      typeof dlnaSettings[dlnaSettingName] === 'string' ||
+                      typeof dlnaSettings[dlnaSettingName] === 'undefined'
+                    "
+                    v-model="dlnaSettings[dlnaSettingName]"
+                    :items="users"
+                    item-text="Name"
+                    item-value="Id"
+                    :label="$t('settings.dlna.DefaultUserId.selector')"
+                    reverse
+                    dense
+                    outlined
+                    @change="storeDlnaConfiguration"
+                  />
+                </v-list-item-action>
+              </v-list-item>
+            </v-list-item-group>
+          </v-list>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="6" lg="5" class="py-4">
+        <v-card class="mb-4">
+          <v-card-title>
+            {{ $t('settings.dlna.profile.custom.text') }}
+            <v-spacer />
+            <v-btn class="ml-a" color="primary">
+              {{ $t('settings.dlna.profile.new') }}
+            </v-btn>
+          </v-card-title>
+          <v-data-table
+            :headers="headers"
+            :items="userProfiles"
+            :items-per-page="4"
+            :footer-props="{
+              itemsPerPageOptions: [4, 8, 12, 16, -1]
+            }"
+            @click:row="setSelectedDevice"
+          />
+        </v-card>
+        <v-card class="mb-4">
+          <v-card-title>
+            {{ $t('settings.dlna.profile.system.text') }}
+          </v-card-title>
+          <v-data-table
+            :headers="headers"
+            :items="systemProfiles"
+            :items-per-page="4"
+            :footer-props="{
+              itemsPerPageOptions: [4, 8, 12, 16, -1]
+            }"
+            @click:row="setSelectedDevice"
+          />
+        </v-card>
+      </v-col>
+      <v-dialog v-model="deviceInfoDialog" width="fit-content">
+        <selected-dlna-profile
+          v-if="selectedProfile.Name"
+          :selected-profile="selectedProfile"
+          :is-dialog="true"
+          :is-custom-profile="isCustomProfile"
+          :users="users"
+          @close-dialog="closeDialog"
+          @save-selected="saveProfile"
+          @delete-selected="deleteSelectedProfile"
+        />
+      </v-dialog>
+    </template>
+  </settings-page>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import {
+  DeviceProfile,
+  DeviceProfileInfo,
+  DeviceProfileType,
+  UserDto
+} from '@jellyfin/client-axios';
+import isNil from 'lodash/isNil';
+import SelectedDlnaProfile from '~/components/System/SelectedDlnaProfile.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 {
+  EnablePlayTo: boolean;
+  EnableDebugLog: boolean;
+  ClientDiscoveryIntervalSeconds: number;
+  EnableServer: boolean;
+  BlastAliveMessages: boolean;
+  AliveMessageIntervalSeconds: number;
+  DefaultUserId: string;
+}
+
+interface DlnaNamedConfiguration extends RelevantConfig {
+  EnablePlayToTracing: boolean;
+  BlastAliveMessageIntervalSeconds: number;
+  AutoCreatePlayToProfiles: boolean;
+  SendOnlyMatchedHost: boolean;
+}
+
+export default Vue.extend({
+  components: { SelectedDlnaProfile },
+  async asyncData({ $api }) {
+    const dlnaSettings = (
+      await $api.configuration.getNamedConfiguration({ key: 'dlna' })
+    ).data;
+
+    const dlnaProfiles = (await $api.dlna.getProfileInfos()).data;
+    const users = (await $api.user.getUsers()).data;
+
+    return { dlnaSettings, dlnaProfiles, users };
+  },
+  data() {
+    return {
+      dlnaSettings: {} as DlnaNamedConfiguration,
+      dlnaProfiles: [] as DeviceProfileInfo[],
+      users: [] as UserDto[],
+      selectedProfile: {} as DeviceProfile,
+      deviceInfoDialog: false,
+      isCustomProfile: false,
+      currentProfileId: ''
+    };
+  },
+  computed: {
+    headers(): { text: string; value: string }[] {
+      return [
+        {
+          text: this.$t('settings.dlna.profile.name'),
+          value: 'Name'
+        }
+      ];
+    },
+    userProfiles(): DeviceProfileInfo[] {
+      return this.dlnaProfiles.filter(
+        (profile) => profile.Type === DeviceProfileType.User
+      );
+    },
+    systemProfiles(): DeviceProfileInfo[] {
+      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: {
+    async storeDlnaConfiguration(): Promise<void> {
+      await this.$api.configuration.updateNamedConfiguration(
+        {
+          key: 'dlna'
+        },
+        { data: this.dlnaSettings }
+      );
+    },
+    async setSelectedDevice(selectedDevice: DeviceProfileInfo): Promise<void> {
+      if (!isNil(selectedDevice)) {
+        this.currentProfileId = selectedDevice.Id as string;
+        this.selectedProfile = (
+          await this.$api.dlna.getProfile({
+            profileId: selectedDevice.Id as string
+          })
+        ).data;
+        this.isCustomProfile = this.userProfiles.includes(selectedDevice);
+        this.deviceInfoDialog = true;
+      }
+    },
+    async saveProfile(profile: DeviceProfile): Promise<void> {
+      await this.$api.dlna.updateProfile({
+        profileId: this.currentProfileId,
+        deviceProfile: profile
+      });
+      this.dlnaProfiles = (await this.$api.dlna.getProfileInfos()).data;
+      this.closeDialog();
+    },
+    async deleteSelectedProfile(): Promise<void> {
+      await this.$api.dlna.deleteProfile({
+        profileId: this.currentProfileId
+      });
+      this.dlnaProfiles = (await this.$api.dlna.getProfileInfos()).data;
+      this.closeDialog();
+    },
+    closeDialog(): void {
+      this.deviceInfoDialog = false;
+      this.isCustomProfile = false;
+      this.selectedProfile = {};
+    }
+  }
+});
+</script>
diff --git a/frontend/pages/settings/index.vue b/frontend/pages/settings/index.vue
index 6c1ab67b66a..d8c18e49c25 100644
--- a/frontend/pages/settings/index.vue
+++ b/frontend/pages/settings/index.vue
@@ -191,7 +191,8 @@ export default Vue.extend({
           {
             icon: 'mdi-dlna',
             name: this.$t('settingsSections.dlna.name'),
-            description: this.$t('settingsSections.dlna.description')
+            description: this.$t('settingsSections.dlna.description'),
+            link: 'settings/dlna'
           },
           {
             icon: 'mdi-television-classic',

From 8da21e2d4dac6f26fc42164ad921b8ad4a195b48 Mon Sep 17 00:00:00 2001
From: Martin Schmidt <martin.schmidt@freemine.de>
Date: Mon, 9 May 2022 14:31:07 +0200
Subject: [PATCH 2/5] feat(DLNA): loop through values, rename dlna profile
 editor

---
 .../components/System/DlnaProfileEditor.vue   | 610 ++++++++++++
 .../components/System/SelectedDlnaProfile.vue | 924 ------------------
 frontend/locales/en-US.json                   | 101 +-
 frontend/pages/settings/dlna.vue              |   6 +-
 4 files changed, 664 insertions(+), 977 deletions(-)
 create mode 100644 frontend/components/System/DlnaProfileEditor.vue
 delete mode 100644 frontend/components/System/SelectedDlnaProfile.vue

diff --git a/frontend/components/System/DlnaProfileEditor.vue b/frontend/components/System/DlnaProfileEditor.vue
new file mode 100644
index 00000000000..8adbb614ed3
--- /dev/null
+++ b/frontend/components/System/DlnaProfileEditor.vue
@@ -0,0 +1,610 @@
+<template>
+  <v-card class="dlnaProfileEditor">
+    <v-row v-if="isDialog" 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">
+        {{ $t('settings.dlna.profile.' + i + '.title') }}
+      </v-tab>
+    </v-tabs>
+    <v-tabs-items v-model="tab">
+      <v-tab-item value="tab-info">
+        <v-list>
+          <!-- General -->
+          <v-list-group :value="true">
+            <template #activator>
+              <v-list-item-title>
+                {{ $t('settings.dlna.profile.info.general.title') }}
+              </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-content>
+                <v-list-item-title
+                  v-text="
+                    $t('settings.dlna.profile.info.general.userLibrary.text')
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.info.general.userLibrary.info')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-select
+                  v-model="currentProfile.UserId"
+                  :items="users"
+                  item-text="Name"
+                  item-value="Id"
+                  outlined
+                  dense
+                  clearable
+                  :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"
+                  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
+                  "
+                  type="number"
+                  outlined
+                  dense
+                />
+              </v-list-item-action>
+            </v-list-item>
+          </v-list-group>
+
+          <!-- Supported Media Types -->
+          <v-list-group :value="false">
+            <template #activator>
+              <v-list-item-title>
+                {{ $t('settings.dlna.profile.info.general.mediaTypes.text') }}
+              </v-list-item-title>
+            </template>
+            <v-list-item v-for="key in Object.keys(mediaTypes)" :key="key">
+              <v-list-item-action>
+                <v-checkbox v-model="supportedMediaTypes" :value="key" />
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="
+                    $t('settings.dlna.profile.info.general.mediaTypes.' + key)
+                  "
+                />
+              </v-list-item-content>
+            </v-list-item>
+          </v-list-group>
+
+          <!-- Display -->
+          <v-list-group :value="false">
+            <template #activator>
+              <v-list-item-title>
+                {{ $t('settings.dlna.profile.info.display.title') }}
+              </v-list-item-title>
+            </template>
+            <v-list-item v-for="key in Object.keys(displaySettings)" :key="key">
+              <v-list-item-action>
+                <v-checkbox v-model="currentProfile[key]" />
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="
+                    $t('settings.dlna.profile.info.display.' + key + '.text')
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.info.display.' + key + '.info')
+                  "
+                />
+              </v-list-item-content>
+            </v-list-item>
+          </v-list-group>
+
+          <!-- Image Settings -->
+          <v-list-group :value="false">
+            <template #activator>
+              <v-list-item-title>
+                {{ $t('settings.dlna.profile.info.image.title') }}
+              </v-list-item-title>
+            </template>
+            <v-list-item v-for="key in Object.keys(imageSettings)" :key="key">
+              <v-list-item-action
+                v-if="typeof currentProfile[key] === 'boolean'"
+              >
+                <v-checkbox v-model="currentProfile[key]" />
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="
+                    $t('settings.dlna.profile.info.image.' + key + '.text')
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.info.image.' + key + '.info')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action
+                v-if="typeof currentProfile[key] !== 'boolean'"
+              >
+                <v-text-field v-model="currentProfile[key]" outlined dense />
+              </v-list-item-action>
+            </v-list-item>
+          </v-list-group>
+        </v-list>
+      </v-tab-item>
+
+      <v-tab-item value="tab-identification">
+        <v-list>
+          <!-- Identification -->
+          <v-list-group :value="true">
+            <template #activator>
+              <v-list-item-title>
+                {{ $t('settings.dlna.profile.identification.device.title') }}
+              </v-list-item-title>
+            </template>
+            <v-card-text>
+              {{ $t('settings.dlna.profile.identification.device.info') }}
+            </v-card-text>
+            <v-list-item
+              v-for="key in Object.keys(currentProfile.Identification)"
+              :key="key"
+            >
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="$t('settings.dlna.profile.identification.' + key)"
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.identification.device.infoText')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.Identification[key]"
+                  outlined
+                  dense
+                />
+              </v-list-item-action>
+            </v-list-item>
+          </v-list-group>
+
+          <!-- Server Settings -->
+          <v-list-group :value="false">
+            <template #activator>
+              <v-list-item-title>
+                {{ $t('settings.dlna.profile.identification.server.title') }}
+              </v-list-item-title>
+            </template>
+            <v-card-text>
+              {{ $t('settings.dlna.profile.identification.server.info') }}
+            </v-card-text>
+            <v-list-item
+              v-for="key in Object.keys(serverIdentification)"
+              :key="key"
+            >
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="$t('settings.dlna.profile.identification.' + key)"
+                />
+                <v-list-item-subtitle
+                  v-if="
+                    key === 'ProtocolInfo' || key === 'SonyAggregationFlags'
+                  "
+                  v-text="
+                    $t('settings.dlna.profile.identification.extra.' + key)
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field v-model="currentProfile[key]" outlined dense />
+              </v-list-item-action>
+            </v-list-item>
+          </v-list-group>
+        </v-list>
+      </v-tab-item>
+
+      <v-tab-item
+        v-for="section in [
+          'SubtitleProfiles',
+          'DirectPlayProfiles',
+          'TranscodingProfiles',
+          'ContainerProfiles',
+          'CodecProfiles',
+          'ResponseProfiles',
+          'XmlRootAttributes'
+        ]"
+        :key="section"
+        :value="'tab-' + section"
+      >
+        <v-data-table
+          :headers="headers[section]"
+          :items="currentProfile[section]"
+        >
+          <template #top>
+            <v-toolbar flat color="secondary">
+              <v-toolbar-title>
+                {{ $t('settings.dlna.profile.' + section + '.text') }}
+              </v-toolbar-title>
+              <v-spacer />
+            </v-toolbar>
+          </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)">
+        {{
+          isCustomProfile
+            ? $t('settings.dlna.profile.save')
+            : $t('settings.dlna.profile.saveNew')
+        }}
+      </v-btn>
+      <v-btn
+        v-if="isCustomProfile"
+        color="error"
+        @click="$emit('delete-selected')"
+      >
+        {{ $t('settings.devices.delete') }}
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import {
+  DeviceProfile,
+  DlnaProfileType,
+  UserDto
+} from '@jellyfin/client-axios';
+
+enum DlnaProfileCategories {
+  info = 'info',
+  identification = 'identification',
+  subtitle = 'SubtitleProfiles',
+  directPlay = 'DirectPlayProfiles',
+  transcoding = 'TranscodingProfiles',
+  containers = 'ContainerProfiles',
+  codecs = 'CodecProfiles',
+  responses = 'ResponseProfiles',
+  xml = 'XmlRootAttributes'
+}
+
+enum ServerIdentification {
+  FriendlyName = 'FriendlyName',
+  Manufacturer = 'Manufacturer',
+  ManufacturerUrl = 'ManufacturerUrl',
+  ModelName = 'ModelName',
+  ModelNumber = 'ModelNumber',
+  ModelDescription = 'ModelDescription',
+  ModelUrl = 'ModelUrl',
+  SerialNumber = 'SerialNumber',
+  ProtocolInfo = 'ProtocolInfo',
+  SonyAggregationFlags = 'SonyAggregationFlags'
+}
+
+enum DisplaySettings {
+  RequiresPlainFolders = 'RequiresPlainFolders',
+  RequiresPlainVideoItems = 'RequiresPlainVideoItems'
+}
+
+enum ImageSettings {
+  EnableAlbumArtInDidl = 'EnableAlbumArtInDidl',
+  EnableSingleAlbumArtLimit = 'EnableSingleAlbumArtLimit',
+  AlbumArtPn = 'AlbumArtPn',
+  MaxAlbumArtWidth = 'MaxAlbumArtWidth',
+  MaxAlbumArtHeight = 'MaxAlbumArtHeight',
+  MaxIconWidth = 'MaxIconWidth',
+  MaxIconHeight = 'MaxIconHeight'
+}
+
+export default Vue.extend({
+  props: {
+    selectedProfile: {
+      type: Object as () => DeviceProfile,
+      default: (): DeviceProfile => {
+        return {};
+      }
+    },
+    isCustomProfile: {
+      default: false,
+      type: Boolean
+    },
+    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'
+          }
+        ]
+      },
+      mediaTypes: DlnaProfileType,
+      serverIdentification: ServerIdentification,
+      categories: DlnaProfileCategories,
+      displaySettings: DisplaySettings,
+      imageSettings: ImageSettings,
+      tab: null,
+      currentProfile: undefined as DeviceProfile | undefined,
+      supportedMediaTypes: [] as Array<string> | undefined
+    };
+  },
+  watch: {
+    supportedMediaTypes() {
+      if (this.currentProfile) {
+        this.currentProfile.SupportedMediaTypes =
+          this.supportedMediaTypes?.join(',');
+      }
+    }
+  },
+  beforeMount() {
+    this.bindToData();
+  },
+  methods: {
+    bindToData() {
+      const tempProfile = JSON.parse(JSON.stringify(this.selectedProfile));
+
+      this.currentProfile = tempProfile;
+      this.supportedMediaTypes =
+        tempProfile.SupportedMediaTypes?.split(',') || [];
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.dlnaProfileEditor {
+  width: 80em;
+}
+</style>
diff --git a/frontend/components/System/SelectedDlnaProfile.vue b/frontend/components/System/SelectedDlnaProfile.vue
deleted file mode 100644
index 6106f87de82..00000000000
--- a/frontend/components/System/SelectedDlnaProfile.vue
+++ /dev/null
@@ -1,924 +0,0 @@
-<template>
-  <v-card class="selected-dlna-profile">
-    <v-row v-if="isDialog" 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 9" :key="i" :href="'#tab-' + i">
-        {{
-          $t(
-            'settings.dlna.profile.' +
-              categories[i - 1].toLocaleString() +
-              '.title'
-          )
-        }}
-      </v-tab>
-    </v-tabs>
-    <v-tabs-items v-model="tab">
-      <v-tab-item value="tab-1">
-        <v-list>
-          <!-- General -->
-          <v-list-group :value="true">
-            <template #activator>
-              <v-list-item-title>
-                {{ $t('settings.dlna.profile.info.general.title') }}
-              </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-content>
-                <v-list-item-title
-                  v-text="
-                    $t('settings.dlna.profile.info.general.userLibrary.text')
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.info.general.userLibrary.info')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-select
-                  v-model="currentProfile.UserId"
-                  :items="users"
-                  item-text="Name"
-                  item-value="Id"
-                  outlined
-                  dense
-                  clearable
-                  :label="$t('settings.dlna.DefaultUserId.selector')"
-                  reverse
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <!-- Supported Media Types -->
-            <v-list-group :value="true" no-action sub-group>
-              <template #activator>
-                <v-list-item-title>
-                  {{ $t('settings.dlna.profile.info.general.mediaTypes.text') }}
-                </v-list-item-title>
-              </template>
-              <v-list-item>
-                <v-list-item-action>
-                  <v-checkbox v-model="supportedMediaTypes" value="Audio" />
-                </v-list-item-action>
-                <v-list-item-content>
-                  <v-list-item-title
-                    v-text="
-                      $t('settings.dlna.profile.info.general.mediaTypes.audio')
-                    "
-                  />
-                </v-list-item-content>
-              </v-list-item>
-              <v-list-item>
-                <v-list-item-action>
-                  <v-checkbox v-model="supportedMediaTypes" value="Photo" />
-                </v-list-item-action>
-                <v-list-item-content>
-                  <v-list-item-title
-                    v-text="
-                      $t('settings.dlna.profile.info.general.mediaTypes.photo')
-                    "
-                  />
-                </v-list-item-content>
-              </v-list-item>
-              <v-list-item>
-                <v-list-item-action>
-                  <v-checkbox v-model="supportedMediaTypes" value="Video" />
-                </v-list-item-action>
-                <v-list-item-content>
-                  <v-list-item-title
-                    v-text="
-                      $t('settings.dlna.profile.info.general.mediaTypes.video')
-                    "
-                  />
-                </v-list-item-content>
-              </v-list-item>
-            </v-list-group>
-            <!-- back to normal -->
-            <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"
-                  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
-                  "
-                  type="number"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-          </v-list-group>
-
-          <!-- Display -->
-          <v-list-group :value="false">
-            <template #activator>
-              <v-list-item-title>
-                {{ $t('settings.dlna.profile.info.display.title') }}
-              </v-list-item-title>
-            </template>
-            <v-list-item>
-              <v-list-item-action>
-                <v-checkbox v-model="currentProfile.RequiresPlainFolders" />
-              </v-list-item-action>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t('settings.dlna.profile.info.display.plainFolder.text')
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.info.display.plainFolder.info')
-                  "
-                />
-              </v-list-item-content>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-action>
-                <v-checkbox v-model="currentProfile.RequiresPlainVideoItems" />
-              </v-list-item-action>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t('settings.dlna.profile.info.display.plainVideo.text')
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.info.display.plainVideo.info')
-                  "
-                />
-              </v-list-item-content>
-            </v-list-item>
-          </v-list-group>
-
-          <!-- Image Settings -->
-          <v-list-group :value="false">
-            <template #activator>
-              <v-list-item-title>
-                {{ $t('settings.dlna.profile.info.image.title') }}
-              </v-list-item-title>
-            </template>
-            <v-list-item>
-              <v-list-item-action>
-                <v-checkbox v-model="currentProfile.EnableAlbumArtInDidl" />
-              </v-list-item-action>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="$t('settings.dlna.profile.info.image.embedDidl.text')"
-                />
-                <v-list-item-subtitle
-                  v-text="$t('settings.dlna.profile.info.image.embedDidl.info')"
-                />
-              </v-list-item-content>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-action>
-                <v-checkbox
-                  v-model="currentProfile.EnableSingleAlbumArtLimit"
-                />
-              </v-list-item-action>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t('settings.dlna.profile.info.image.singleEmbed.text')
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.info.image.singleEmbed.info')
-                  "
-                />
-              </v-list-item-content>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="$t('settings.dlna.profile.info.image.albumPN.text')"
-                />
-                <v-list-item-subtitle
-                  v-text="$t('settings.dlna.profile.info.image.albumPN.info')"
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.AlbumArtPn"
-                  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.image.albumArtMaxWidth')
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.info.image.albumMaxDimension')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.MaxAlbumArtWidth"
-                  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.image.albumArtMaxHeight')
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.info.image.albumMaxDimension')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.MaxAlbumArtHeight"
-                  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.image.iconMaxWidth')"
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.info.image.iconMaxDimension')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.MaxIconWidth"
-                  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.image.iconMaxHeight')"
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.info.image.iconMaxDimension')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.MaxIconHeight"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-          </v-list-group>
-        </v-list>
-      </v-tab-item>
-
-      <v-tab-item value="tab-2">
-        <v-list>
-          <!-- Identification -->
-          <v-list-group :value="true">
-            <template #activator>
-              <v-list-item-title>
-                {{ $t('settings.dlna.profile.identification.device.title') }}
-              </v-list-item-title>
-            </template>
-            <v-card-text>
-              {{ $t('settings.dlna.profile.identification.device.info') }}
-            </v-card-text>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.device.friendlyName'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.identification.device.infoText')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.Identification.FriendlyName"
-                  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.identification.device.manufacturer'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.identification.device.infoText')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.Identification.Manufacturer"
-                  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.identification.device.manufacturerUrl'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.identification.device.infoText')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.Identification.ManufacturerUrl"
-                  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.identification.device.modelName')
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.identification.device.infoText')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.Identification.ModelName"
-                  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.identification.device.modelNumber'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.identification.device.infoText')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.Identification.ModelNumber"
-                  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.identification.device.modelDescription'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.identification.device.infoText')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.Identification.ModelDescription"
-                  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.identification.device.modelUrl')
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.identification.device.infoText')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.Identification.ModelUrl"
-                  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.identification.device.serialNumber'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.identification.device.infoText')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.Identification.SerialNumber"
-                  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.identification.device.deviceDescription'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.identification.device.infoText')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.Identification.ModelDescription"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-          </v-list-group>
-
-          <!-- Server Settings -->
-          <v-list-group :value="false">
-            <template #activator>
-              <v-list-item-title>
-                {{ $t('settings.dlna.profile.identification.server.title') }}
-              </v-list-item-title>
-            </template>
-            <v-card-text>
-              {{ $t('settings.dlna.profile.identification.server.info') }}
-            </v-card-text>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.server.friendlyName'
-                    )
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.FriendlyName"
-                  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.identification.server.manufacturer'
-                    )
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.Manufacturer"
-                  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.identification.server.manufacturerUrl'
-                    )
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.ManufacturerUrl"
-                  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.identification.server.modelName')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.ModelName"
-                  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.identification.server.modelNumber'
-                    )
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.ModelNumber"
-                  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.identification.server.modelDescription'
-                    )
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.ModelDescription"
-                  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.identification.server.modelUrl')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.ModelUrl"
-                  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.identification.server.serialNumber'
-                    )
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.SerialNumber"
-                  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.identification.server.protocolInfo.text'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.server.protocolInfo.info'
-                    )
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.ProtocolInfo"
-                  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.identification.server.sonyAggregationFlags.text'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.server.sonyAggregationFlags.info'
-                    )
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.SonyAggregationFlags"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-          </v-list-group>
-        </v-list>
-      </v-tab-item>
-
-      <v-tab-item value="tab-3">
-        <v-card>
-          <v-card-text>
-            {{ $t('settings.dlna.profile.subtitle.text') }}
-          </v-card-text>
-        </v-card>
-      </v-tab-item>
-
-      <v-tab-item value="tab-4">
-        <v-card>
-          <v-card-text>
-            {{ $t('settings.dlna.profile.directPlay.text') }}
-          </v-card-text>
-        </v-card>
-      </v-tab-item>
-
-      <v-tab-item value="tab-5">
-        <v-card>
-          <v-card-text>
-            {{ $t('settings.dlna.profile.transcoding.text') }}
-          </v-card-text>
-        </v-card>
-      </v-tab-item>
-
-      <v-tab-item value="tab-6">
-        <v-card>
-          <v-card-text>
-            {{ $t('settings.dlna.profile.containers.text') }}
-          </v-card-text>
-        </v-card>
-      </v-tab-item>
-
-      <v-tab-item value="tab-7">
-        <v-card>
-          <v-card-text>
-            {{ $t('settings.dlna.profile.codecs.text') }}
-          </v-card-text>
-        </v-card>
-      </v-tab-item>
-
-      <v-tab-item value="tab-8">
-        <v-card>
-          <v-card-text>
-            {{ $t('settings.dlna.profile.responses.text') }}
-          </v-card-text>
-        </v-card>
-      </v-tab-item>
-
-      <v-tab-item value="tab-9">
-        <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)">
-        {{
-          isCustomProfile
-            ? $t('settings.dlna.profile.save')
-            : $t('settings.dlna.profile.saveNew')
-        }}
-      </v-btn>
-      <v-btn
-        v-if="isCustomProfile"
-        color="error"
-        @click="$emit('delete-selected')"
-      >
-        {{ $t('settings.devices.delete') }}
-      </v-btn>
-    </v-card-actions>
-  </v-card>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { DeviceProfile, UserDto } from '@jellyfin/client-axios';
-
-enum DlnaProfileCategories {
-  info,
-  identification,
-  subtitle,
-  directPlay,
-  transcoding,
-  containers,
-  codecs,
-  responses,
-  xml
-}
-
-export default Vue.extend({
-  props: {
-    selectedProfile: {
-      type: Object as () => DeviceProfile,
-      default: (): DeviceProfile => {
-        return {};
-      }
-    },
-    isCustomProfile: {
-      default: false,
-      type: Boolean
-    },
-    users: {
-      type: Array as () => UserDto[],
-      default: () => undefined
-    },
-    isDialog: {
-      default: false,
-      type: Boolean
-    }
-  },
-  data() {
-    return {
-      categories: DlnaProfileCategories,
-      tab: null,
-      currentProfile: undefined as DeviceProfile | undefined,
-      supportedMediaTypes: [] as Array<string> | undefined
-    };
-  },
-  watch: {
-    supportedMediaTypes() {
-      if (this.currentProfile) {
-        this.currentProfile.SupportedMediaTypes =
-          this.supportedMediaTypes?.join(',');
-      }
-    }
-  },
-  beforeMount() {
-    this.bindToData();
-  },
-  methods: {
-    bindToData() {
-      const tempProfile = JSON.parse(JSON.stringify(this.selectedProfile));
-
-      this.currentProfile = tempProfile;
-      this.supportedMediaTypes =
-        tempProfile.SupportedMediaTypes?.split(',') || [];
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.selected-dlna-profile {
-  width: 80em;
-}
-</style>
diff --git a/frontend/locales/en-US.json b/frontend/locales/en-US.json
index 6906ddd483f..6db6c99d805 100644
--- a/frontend/locales/en-US.json
+++ b/frontend/locales/en-US.json
@@ -381,9 +381,9 @@
             },
             "mediaTypes": {
               "text": "Supported Media Types",
-              "audio": "Audio",
-              "video": "Video",
-              "photo": "Photo"
+              "Audio": "Audio",
+              "Video": "Video",
+              "Photo": "Photo"
             },
             "maxStreamQuality": {
               "text": "Maximum streaming quality",
@@ -396,99 +396,100 @@
           },
           "display": {
             "title": "Display Settings",
-            "plainFolder": {
+            "RequiresPlainFolders": {
               "text": "Display all folders as plain storage folders",
               "info": "All folders are represented in DIDL as \"object.container.storageFolder\" instead of a more specific type, such as \"object.container.person.musicArtist\"."
             },
-            "plainVideo": {
+            "RequiresPlainVideoItems": {
               "text": "Display all videos as plain video items",
               "info": "All videos are represented in DIDL as \"object.item.videoItem\" instead of a more specific type, such as \"object.item.videoItem.movie\"."
             }
           },
           "image": {
             "title": "Image Settings",
-            "albumMaxDimension": "Maximum resolution of album art exposed via the upnp:albumArtURI property.",
-            "iconMaxDimension": "Maximum resolution of icons exposed via the upnp:icon property.",
-            "embedDidl": {
+            "EnableAlbumArtInDidl": {
               "text": "Embed album art in Didl",
               "info": "Some devices prefer this method for obtaining album art. Others may fail to play with this option enabled."
             },
-            "singleEmbed": {
+            "EnableSingleAlbumArtLimit": {
               "text": "Limit to single embedded image",
               "info": "Some devices will not render properly if multiple images are embedded within Didl."
             },
-            "albumPN": {
+            "AlbumArtPn": {
               "text": "Album art PN",
               "info": "PN used for album art, within the dlna:profileID attribute on upnp:albumArtURI. Some devices require a specific value, regardless of the size of the image."
             },
-            "albumArtMaxWidth": "Album art max width",
-            "albumArtMaxHeight": "Album art max height",
-            "iconMaxWidth": "Icon maximum width",
-            "iconMaxHeight": "Icon maximum height"
+            "MaxAlbumArtWidth": {
+              "text": "Album art max width",
+              "info": "Maximum resolution of album art exposed via the upnp:albumArtURI property."
+            },
+            "MaxAlbumArtHeight": {
+              "text": "Album art max height",
+              "info": "Maximum resolution of album art exposed via the upnp:albumArtURI property."
+            },
+            "MaxIconWidth": {
+              "text": "Icon maximum width",
+              "info": "Maximum resolution of icons exposed via the upnp:icon property."
+            },
+            "MaxIconHeight": {
+              "text": "Icon maximum height",
+              "info": "Maximum resolution of icons exposed via the upnp:icon property."
+            }
           }
         },
         "identification": {
           "title": "Identification",
+          "FriendlyName": "Friendly name",
+          "Manufacturer": "Manufacturer",
+          "ManufacturerUrl": "Manufacturer URL",
+          "ModelName": "Model name",
+          "ModelNumber": "Model number",
+          "ModelDescription": "Model description",
+          "ModelUrl": "Model URL",
+          "SerialNumber": "Serial number",
+          "ProtocolInfo": "Protocol info",
+          "SonyAggregationFlags": "Sony aggregation flags",
+          "extra": {
+            "ProtocolInfo": "The value that will be used when responding to GetProtocolInfo requests from the device.",
+            "SonyAggregationFlags": "Determines the content of the aggreagationFlags element in the urn:schemas-sonycom:av namespace."
+          },
           "device": {
             "title": "Device identification",
             "info": "Enter at least one identification criteria.",
-            "infoText": "A case-insensitive substring or regex expression.",
-            "friendlyName": "Friendly name",
-            "manufacturer": "Manufacturer",
-            "manufacturerUrl": "Manufacturer URL",
-            "modelName": "Model name",
-            "modelNumber": "Model number",
-            "modelDescription": "Model description",
-            "modelUrl": "Model URL",
-            "serialNumber": "Serial number",
-            "deviceDescription": "Device description"
+            "infoText": "A case-insensitive substring or regex expression."
           },
           "server": {
             "title": "Server identification",
-            "info": "These values control how the server will present itself to clients.",
-            "friendlyName": "Friendly name",
-            "manufacturer": "Manufacturer",
-            "manufacturerUrl": "Manufacturer URL",
-            "modelName": "Model name",
-            "modelNumber": "Model number",
-            "modelDescription": "Model description",
-            "modelUrl": "Model URL",
-            "serialNumber": "Serial number",
-            "protocolInfo": {
-              "text": "Protocol info",
-              "info": "The value that will be used when responding to GetProtocolInfo requests from the device."
-            },
-            "sonyAggregationFlags": {
-              "text": "Sony aggregation flags",
-              "info": "Determines the content of the aggreagationFlags element in the urn:schemas-sonycom:av namespace."
-            }
+            "info": "These values control how the server will present itself to clients."
           }
         },
-        "subtitle": {
-          "title": "Subtitle"
+        "SubtitleProfiles": {
+          "title": "Subtitle",
+          "text": "Subtitle profiles describe the subtitle formats supported by the device."
         },
-        "directPlay": {
+        "DirectPlayProfiles": {
           "title": "Direct Play",
           "text": "Add direct play profiles to indicate which formats the device can handle natively."
         },
-        "transcoding": {
+        "TranscodingProfiles": {
           "title": "Transcoding",
           "text": "Add transcoding profiles to indicate which formats should be used when transcoding is required."
         },
-        "containers": {
+        "ContainerProfiles": {
           "title": "Containers",
           "text": "Container profiles indicate the limitations of a device when playing specific formats. If a limitation applies then the media will be transcoded, even if the format is configured for direct play."
         },
-        "codecs": {
+        "CodecProfiles": {
           "title": "Codecs",
           "text": "Codec profiles indicate the limitations of a device when playing specific codecs. If a limitation applies then the media will be transcoded, even if the codec is configured for direct play."
         },
-        "responses": {
+        "ResponseProfiles": {
           "title": "Responses",
           "text": "Response profiles provide a way to customize information sent to the device when playing certain kinds of media."
         },
-        "xml": {
-          "title": "XML"
+        "XmlRootAttributes": {
+          "title": "XML",
+          "text": "These attributes are applied to the root element of every XML response."
         }
       }
     },
diff --git a/frontend/pages/settings/dlna.vue b/frontend/pages/settings/dlna.vue
index c9f41db5e92..414dfe81922 100644
--- a/frontend/pages/settings/dlna.vue
+++ b/frontend/pages/settings/dlna.vue
@@ -99,7 +99,7 @@
         </v-card>
       </v-col>
       <v-dialog v-model="deviceInfoDialog" width="fit-content">
-        <selected-dlna-profile
+        <dlna-profile-editor
           v-if="selectedProfile.Name"
           :selected-profile="selectedProfile"
           :is-dialog="true"
@@ -123,7 +123,7 @@ import {
   UserDto
 } from '@jellyfin/client-axios';
 import isNil from 'lodash/isNil';
-import SelectedDlnaProfile from '~/components/System/SelectedDlnaProfile.vue';
+import DlnaProfileEditor from '~/components/System/DlnaProfileEditor.vue';
 
 /**
  * We need to define those interfaces here as the axios hook for
@@ -148,7 +148,7 @@ interface DlnaNamedConfiguration extends RelevantConfig {
 }
 
 export default Vue.extend({
-  components: { SelectedDlnaProfile },
+  components: { DlnaProfileEditor },
   async asyncData({ $api }) {
     const dlnaSettings = (
       await $api.configuration.getNamedConfiguration({ key: 'dlna' })

From 48cefe63029fbea64db7fd261b2009e1ba028790 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 3/5] 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 6db6c99d805..59d64766725 100644
--- a/frontend/locales/en-US.json
+++ b/frontend/locales/en-US.json
@@ -326,7 +326,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": {
@@ -354,6 +354,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",
@@ -369,30 +381,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",
@@ -491,7 +501,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: {

From 52fc1e81eb48f52feec0d24e7f75d5c0917fff41 Mon Sep 17 00:00:00 2001
From: Martin Schmidt <martin.schmidt@freemine.de>
Date: Wed, 22 Jun 2022 07:59:20 +0200
Subject: [PATCH 4/5] translation: add SendOnlyMatchedHosts fix: remove
 deprecated BlastAliveMessageIntervalSeconds from config

---
 frontend/locales/en-US.json      | 4 ++++
 frontend/pages/settings/dlna.vue | 4 +++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/locales/en-US.json b/frontend/locales/en-US.json
index 59d64766725..6ac7555f8a8 100644
--- a/frontend/locales/en-US.json
+++ b/frontend/locales/en-US.json
@@ -362,6 +362,10 @@
         "text": "[deprecated] Alive message interval",
         "description": "MIGRATING - TO BE REMOVED ONCE WEB HAS BEEN ALTERED"
       },
+      "SendOnlyMatchedHost": {
+        "text": "Send only matched host",
+        "description": "Only send data if the host matches"
+      },
       "AutoCreatePlayToProfiles": {
         "text": "Automatically create PlayTo device profiles",
         "description": ""
diff --git a/frontend/pages/settings/dlna.vue b/frontend/pages/settings/dlna.vue
index 22784ace9e6..c2bcc18dc73 100644
--- a/frontend/pages/settings/dlna.vue
+++ b/frontend/pages/settings/dlna.vue
@@ -140,7 +140,6 @@ interface DlnaNamedConfiguration {
   EnableServer: boolean;
   AliveMessageIntervalSeconds: number;
   BlastAliveMessages: boolean;
-  BlastAliveMessageIntervalSeconds: number;
   DefaultUserId: string;
   AutoCreatePlayToProfiles: boolean;
   SendOnlyMatchedHost: boolean;
@@ -152,6 +151,9 @@ export default Vue.extend({
       await $api.configuration.getNamedConfiguration({ key: 'dlna' })
     ).data;
 
+    // remove deprecated duplicate option
+    delete dlnaSettings.BlastAliveMessageIntervalSeconds;
+
     const dlnaProfiles = (await $api.dlna.getProfileInfos()).data;
     const users = (await $api.user.getUsers()).data;
 

From bbf0119dd906731c4813e92ec7cce525b94750b2 Mon Sep 17 00:00:00 2001
From: Martin Schmidt <martin.schmidt@freemine.de>
Date: Wed, 22 Jun 2022 08:01:13 +0200
Subject: [PATCH 5/5] fix: now displays all configurations

feat: add snackbar for api call feedback

chore: remove unused translation keys
---
 frontend/locales/en-US.json      | 10 ++--
 frontend/pages/settings/dlna.vue | 78 ++++++++++++++++++++++++++------
 2 files changed, 71 insertions(+), 17 deletions(-)

diff --git a/frontend/locales/en-US.json b/frontend/locales/en-US.json
index 6ac7555f8a8..e4d3c729235 100644
--- a/frontend/locales/en-US.json
+++ b/frontend/locales/en-US.json
@@ -329,6 +329,12 @@
         "text": "Enable DLNA PlayTo",
         "description": "Detect devices within your network and offer the ability to control them remotely."
       },
+      "savedSuccess": "Settings saved",
+      "savedError": "An error occurred saving the configuration",
+      "savedProfileSuccess": "Profile saved",
+      "savedProfileError": "An error occurred saving the profile",
+      "deleteSuccess": "Deleted profile",
+      "deleteError": "An error occurred deleting the profile",
       "EnableDebugLog": {
         "text": "Enable DLNA debug logging",
         "description": "Create large log files and should only be used as needed for troubleshooting purposes."
@@ -358,10 +364,6 @@
         "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"
-      },
       "SendOnlyMatchedHost": {
         "text": "Send only matched host",
         "description": "Only send data if the host matches"
diff --git a/frontend/pages/settings/dlna.vue b/frontend/pages/settings/dlna.vue
index c2bcc18dc73..1b809fa31d0 100644
--- a/frontend/pages/settings/dlna.vue
+++ b/frontend/pages/settings/dlna.vue
@@ -126,6 +126,8 @@ import {
   UserDto
 } from '@jellyfin/client-axios';
 import isNil from 'lodash/isNil';
+import { mapStores } from 'pinia';
+import { snackbarStore } from '~/store';
 
 /**
  * We need to define those interfaces here as the axios hook for
@@ -145,6 +147,24 @@ interface DlnaNamedConfiguration {
   SendOnlyMatchedHost: boolean;
 }
 
+/**
+ * FIXME: this is a short term hack in order for it to display all entries
+ * needs architectural change.
+ */
+const identification = {
+  Identification: {
+    FriendlyName: '',
+    ModelNumber: '',
+    SerialNumber: '',
+    ModelName: '',
+    ModelDescription: '',
+    ModelUrl: '',
+    Manufacturer: '',
+    ManufacturerUrl: '',
+    Headers: []
+  }
+};
+
 export default Vue.extend({
   async asyncData({ $api }) {
     const dlnaSettings = (
@@ -171,6 +191,7 @@ export default Vue.extend({
     };
   },
   computed: {
+    ...mapStores(snackbarStore),
     headers(): { text: string; value: string }[] {
       return [
         {
@@ -192,12 +213,19 @@ export default Vue.extend({
   },
   methods: {
     async storeDlnaConfiguration(): Promise<void> {
-      await this.$api.configuration.updateNamedConfiguration(
-        {
-          key: 'dlna'
-        },
-        { data: this.dlnaSettings }
-      );
+      await this.$api.configuration
+        .updateNamedConfiguration(
+          {
+            key: 'dlna'
+          },
+          { data: this.dlnaSettings }
+        )
+        .then(() =>
+          this.snackbar.push(this.$t('settings.dlna.savedSuccess'), 'success')
+        )
+        .catch(() =>
+          this.snackbar.push(this.$t('settings.dlna.savedError'), 'error')
+        );
     },
     async setSelectedDevice(selectedDevice: DeviceProfileInfo): Promise<void> {
       if (!isNil(selectedDevice)) {
@@ -207,22 +235,46 @@ export default Vue.extend({
             profileId: selectedDevice.Id as string
           })
         ).data;
+        this.selectedProfile = {
+          ...selectedDevice,
+          ...identification
+        };
         this.isCustomProfile = this.userProfiles.includes(selectedDevice);
         this.deviceInfoDialog = true;
       }
     },
     async saveProfile(profile: DeviceProfile): Promise<void> {
-      await this.$api.dlna.updateProfile({
-        profileId: this.currentProfileId,
-        deviceProfile: profile
-      });
+      await this.$api.dlna
+        .updateProfile({
+          profileId: this.currentProfileId,
+          deviceProfile: profile
+        })
+        .then(() =>
+          this.snackbar.push(
+            this.$t('settings.dlna.savedProfileSuccess'),
+            'success'
+          )
+        )
+        .catch(() =>
+          this.snackbar.push(
+            this.$t('settings.dlna.savedProfileError'),
+            'error'
+          )
+        );
       this.dlnaProfiles = (await this.$api.dlna.getProfileInfos()).data;
       this.closeDialog();
     },
     async deleteSelectedProfile(): Promise<void> {
-      await this.$api.dlna.deleteProfile({
-        profileId: this.currentProfileId
-      });
+      await this.$api.dlna
+        .deleteProfile({
+          profileId: this.currentProfileId
+        })
+        .then(() =>
+          this.snackbar.push(this.$t('settings.dlna.deleteSuccess'), 'success')
+        )
+        .catch(() =>
+          this.snackbar.push(this.$t('settings.dlna.deleteError'), 'error')
+        );
       this.dlnaProfiles = (await this.$api.dlna.getProfileInfos()).data;
       this.closeDialog();
     },