diff --git a/frontend/locales/en-US.json b/frontend/locales/en-US.json
index 19163d9e9ed..58111ae065e 100644
--- a/frontend/locales/en-US.json
+++ b/frontend/locales/en-US.json
@@ -1,5 +1,4 @@
 {
-  "auto": "Automatic",
   "3DFormat": "3D format",
   "NoMediaSourcesAvailable": "No media sources available",
   "actor": "Actor",
@@ -25,6 +24,7 @@
   "aspectRatio": "Aspect ratio",
   "audio": "Audio",
   "audioCodecNotSupported": "The audio codec is not supported",
+  "auto": "Automatic",
   "badRequest": "Bad request. Try again",
   "books": "Books",
   "browserNotSupported": "Your browser is not supported for playing this file.",
@@ -34,6 +34,9 @@
   "byArtist": "By {artist}",
   "cancel": "Cancel",
   "castAndCrew": "Cast & crew",
+  "clipboardFail": "Failed to copy to clipboard",
+  "clipboardSuccess": "Copied to clipboard",
+  "close": "Close",
   "collectionEmpty": "This collection is empty",
   "collections": "Collections",
   "communityRating": "Community rating",
@@ -58,6 +61,12 @@
   "disabled": "Disabled",
   "discNumber": "Disc {discNumber}",
   "dislikes": "Dislikes",
+  "download": {
+    "copyStreamUrl": "Copy Stream URL",
+    "download": "Download",
+    "downloadAll": "Download all",
+    "failureToGetURL": "Failed to get URL for selected item"
+  },
   "edit": "Edit",
   "editMetadata": "Edit metadata",
   "editPerson": "Edit person",
@@ -198,20 +207,66 @@
       "name": "Audio channels:"
     },
     "audioCodec": {
-      "name": "Audio codec:"
-    },
-    "bitrate": {
-      "name": "Bitrate:"
-    },
-    "container": {
-      "name": "Container:"
+      "channels": "Channels:",
+      "layout": "Layout:",
+      "name": "Audio codec:",
+      "sampleRate": "Sample rate:",
+      "titles": "Audio | Audio {0}"
+    },
+    "embeddedImageCodec": {
+      "name": "Image codec:",
+      "titles": "Image | Image {0}"
+    },
+    "generic": {
+      "bitrate": "Bitrate:",
+      "codec": "Codec:",
+      "codecTag": "Codec tag:",
+      "container": "Container:",
+      "default": "Default:",
+      "external": "External:",
+      "forced": "Forced:",
+      "language": "Language:",
+      "path": "Path:",
+      "profile": "Profile:",
+      "size": "Size:",
+      "title": "Title:"
     },
     "name": "Media",
     "subtitleCodec": {
-      "name": "Subtitle codec:"
+      "name": "Subtitle codec:",
+      "titles": "Subtitle | Subtitle {0}"
     },
+    "title": "Media Info",
     "videoCodec": {
-      "name": "Video codec:"
+      "DoVi": {
+        "blPresent": "DV bl preset flag:",
+        "blSignalCompatibilityId": "DV bl signal compatibility ID:",
+        "elPresent": "DV el preset flag:",
+        "level": "DV level:",
+        "majorVersion": "DV version major:",
+        "minorVersion": "DV version minor:",
+        "profile": "DV profile:",
+        "rpuPresent": "DV rpu preset flag:",
+        "title": "DV title:"
+      },
+      "aspectRatio": "Aspect ratio:",
+      "bitdepth": "Bit depth:",
+      "colorPrimaries": "Color primaries:",
+      "colorRange": "Color range:",
+      "colorSpace": "Color space:",
+      "colorTransfer": "Color transfer:",
+      "frameRate": "Framerate:",
+      "isAnamorphic": "Anamorphic:",
+      "isAvc": "AVC:",
+      "isInterlaced": "Interlaced:",
+      "level": "Level:",
+      "name": "Video codec:",
+      "pixelFormat": "Pixel format:",
+      "refFrames": "Ref frames:",
+      "resolution": "Resolution:",
+      "titles": "Video | Video {0}",
+      "videoRange": "Video range:",
+      "videoRangeType": "Video range type:"
     }
   },
   "menu": "Menu",
@@ -337,9 +392,9 @@
       "refreshKeysFailure": "Error refreshing API keys",
       "revoke": "Revoke",
       "revokeAll": "Revoke all API keys",
-      "revokeConfirm": "Confirm API key revocation",
       "revokeAllFailure": "Error revoking all API keys",
       "revokeAllSuccess": "Successfully revoked all API keys",
+      "revokeConfirm": "Confirm API key revocation",
       "revokeFailure": "Error revoking API key",
       "revokeSuccess": "Successfully revoked API key"
     },
@@ -348,9 +403,9 @@
       "appVersion": "App version",
       "delete": "Delete",
       "deleteAll": "Delete all",
-      "deleteConfirm": "Confirm device deletion",
       "deleteAllDevicesError": "Error deleting all devices",
       "deleteAllDevicesSuccess": "All devices deleted successfully",
+      "deleteConfirm": "Confirm device deletion",
       "deleteDeviceError": "Error deleting device",
       "deleteDeviceSuccess": "Device deleted successfully",
       "deviceName": "Device name",
@@ -465,9 +520,9 @@
   "themeVideo": "Theme Video",
   "tooltips": {
     "changeLanguage": "Language",
+    "switchToAuto": "Follow system theme",
     "switchToDarkMode": "Switch to dark mode",
-    "switchToLightMode": "Switch to light mode",
-    "switchToAuto": "Follow system theme"
+    "switchToLightMode": "Switch to light mode"
   },
   "trailer": "Trailer",
   "transcodingInfo": {
@@ -512,7 +567,6 @@
   "undefined": "Undefined",
   "unexpectedError": "Unexpected error",
   "unhandledException": "Unhandled exception",
-  "unknown": "Unknown",
   "units": {
     "bitrate": {
       "kbps": "{value} kbps",
@@ -522,6 +576,7 @@
       "seconds": "{count} second | {count} seconds"
     }
   },
+  "unknown": "Unknown",
   "unliked": "Unliked",
   "unplayed": "Unplayed",
   "upNext": "Up next",
diff --git a/frontend/src/components/Item/ItemMenu.vue b/frontend/src/components/Item/ItemMenu.vue
index fbe2a8e8ea0..dd3fb8f0ec7 100644
--- a/frontend/src/components/Item/ItemMenu.vue
+++ b/frontend/src/components/Item/ItemMenu.vue
@@ -36,6 +36,10 @@
     v-if="item.Id"
     v-model:dialog="metadataDialog"
     :item-id="item.Id" />
+  <media-detail-dialog
+    v-if="item.Id"
+    v-model:dialog="mediaInfoDialog"
+    :item-id="item.Id" />
 </template>
 
 <script setup lang="ts">
@@ -47,7 +51,11 @@ import { getItemRefreshApi } from '@jellyfin/sdk/lib/utils/api/item-refresh-api'
 import IMdiPlaySpeed from 'virtual:icons/mdi/play-speed';
 import IMdiArrowExpandUp from 'virtual:icons/mdi/arrow-expand-up';
 import IMdiArrowExpandDown from 'virtual:icons/mdi/arrow-expand-down';
+import IMdiContentCopy from 'virtual:icons/mdi/content-copy';
 import IMdiDisc from 'virtual:icons/mdi/disc';
+import IMdiDownload from 'virtual:icons/mdi/download';
+import IMdiDownloadMultiple from 'virtual:icons/mdi/download-multiple';
+import IMdiInformation from 'virtual:icons/mdi/information';
 import IMdiPlaylistMinus from 'virtual:icons/mdi/playlist-minus';
 import IMdiPlaylistPlus from 'virtual:icons/mdi/playlist-plus';
 import IMdiPencilOutline from 'virtual:icons/mdi/pencil-outline';
@@ -55,9 +63,18 @@ import IMdiShuffle from 'virtual:icons/mdi/shuffle';
 import IMdiReplay from 'virtual:icons/mdi/replay';
 import IMdiRefresh from 'virtual:icons/mdi/refresh';
 import { useRemote, useSnackbar } from '@/composables';
-import { canInstantMix, canResume } from '@/utils/items';
+import {
+  canInstantMix,
+  canResume,
+  getItemDownloadObject,
+  getItemSeasonDownloadObjects,
+  getItemSeriesDownloadObjects
+} from '@/utils/items';
 import { TaskType } from '@/store/taskManager';
 import { playbackManagerStore, taskManagerStore } from '@/store';
+import { isEdgeUWP, isPs4, isXbox, isTv } from '@/utils/browser-detection';
+import downloadFiles, { DownloadableFile } from '@/utils/file-download';
+import { writeToClipboard } from '@/utils/clipboard';
 
 type MenuOption = {
   title: string;
@@ -90,6 +107,7 @@ const show = ref(false);
 const positionX = ref<number | undefined>(undefined);
 const positionY = ref<number | undefined>(undefined);
 const metadataDialog = ref(false);
+const mediaInfoDialog = ref(false);
 const playbackManager = playbackManagerStore();
 const taskManager = taskManagerStore();
 const isItemRefreshing = computed(
@@ -224,12 +242,115 @@ function getPlaybackOptions(): MenuOption[] {
   return playbackOptions;
 }
 
+/**
+ * Check if the browser can download the item
+ */
+function browserCanDownload(): boolean {
+  return (
+    !isEdgeUWP() &&
+    !isTv() &&
+    !isXbox() &&
+    !isPs4() &&
+    menuProps.item.Type !== 'Book'
+  );
+}
+
+/**
+ * Download action for the currently selected item
+ */
+async function downloadAction(): Promise<void> {
+  if (menuProps.item.Id && menuProps.item.Type && menuProps.item.Path) {
+    let downloadURLs: DownloadableFile[] = [];
+
+    switch (menuProps.item.Type) {
+      case 'Season': {
+        downloadURLs = await getItemSeasonDownloadObjects(menuProps.item.Id);
+        break;
+      }
+      case 'Series': {
+        downloadURLs = await getItemSeriesDownloadObjects(menuProps.item.Id);
+        break;
+      }
+      default: {
+        const url = getItemDownloadObject(
+          menuProps.item.Id,
+          menuProps.item.Path
+        );
+
+        if (url) {
+          downloadURLs = [url];
+        }
+
+        break;
+      }
+    }
+
+    if (downloadURLs) {
+      await downloadFiles(downloadURLs);
+    } else {
+      useSnackbar(t('download.failureToGetURL'), 'error');
+    }
+  }
+}
+/**
+ * Copy action for the current selected item
+ */
+function getCopyDownloadOptions(): MenuOption[] {
+  const copyDownloadActions: MenuOption[] = [];
+
+  if (menuProps.item.CanDownload) {
+    copyDownloadActions.push({
+      title: t('download.copyStreamUrl'),
+      icon: IMdiContentCopy,
+      action: async (): Promise<void> => {
+        if (menuProps.item.Id) {
+          const downloadHref = getItemDownloadObject(menuProps.item.Id);
+
+          if (downloadHref) {
+            await copy(downloadHref.url);
+          } else {
+            useSnackbar(t('download.failureToGetURL'), 'error');
+          }
+        }
+      }
+    });
+
+    if (browserCanDownload()) {
+      copyDownloadActions.push({
+        title: t('download.download'),
+        icon: IMdiDownload,
+        action: downloadAction
+      });
+
+      if (['Season', 'Series'].includes(menuProps.item.Type || '')) {
+        copyDownloadActions.push({
+          title: t('download.downloadAll'),
+          icon: IMdiDownloadMultiple,
+          action: downloadAction
+        });
+      }
+    }
+  }
+
+  return copyDownloadActions;
+}
+
 /**
  * Library options for libraries
  */
 function getLibraryOptions(): MenuOption[] {
   const libraryOptions: MenuOption[] = [];
 
+  if (menuProps.item.MediaSources) {
+    libraryOptions.push({
+      title: t('mediaInfo.title'),
+      icon: IMdiInformation,
+      action: (): void => {
+        mediaInfoDialog.value = true;
+      }
+    });
+  }
+
   if (
     remote.auth.currentUser?.Policy?.IsAdministrator &&
     ['Folder', 'CollectionFolder', 'UserView'].includes(
@@ -280,7 +401,12 @@ function getLibraryOptions(): MenuOption[] {
 }
 
 const options = computed(() => {
-  return [getQueueOptions(), getPlaybackOptions(), getLibraryOptions()];
+  return [
+    getQueueOptions(),
+    getPlaybackOptions(),
+    getCopyDownloadOptions(),
+    getLibraryOptions()
+  ];
 });
 
 /**
@@ -302,6 +428,15 @@ function onActivatorClick(): void {
   positionY.value = undefined;
 }
 
+const copy = async (text: string): Promise<void> => {
+  try {
+    await writeToClipboard(text);
+    useSnackbar(t('clipboardSuccess'), 'success');
+  } catch {
+    useSnackbar(t('clipboardFail'), 'error');
+  }
+};
+
 onMounted(() => {
   const parentHtml = parent?.subTree.el;
 
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetail.vue b/frontend/src/components/Item/MediaDetail/MediaDetail.vue
new file mode 100644
index 00000000000..0d6f6dd5f67
--- /dev/null
+++ b/frontend/src/components/Item/MediaDetail/MediaDetail.vue
@@ -0,0 +1,100 @@
+<template>
+  <v-card v-if="itemId" height="100%" class="d-flex flex-column media-detail">
+    <v-card-title>{{ t('mediaInfo.title') }}</v-card-title>
+
+    <v-divider />
+
+    <v-card-text
+      v-if="mediaSource.length > 0"
+      class="d-flex flex-column flex-grow-1">
+      <div
+        v-for="(media, idx) in mediaSource"
+        :key="'mediaInfo' + media.Id!!"
+        class="ps-4">
+        <media-detail-content
+          v-if="
+            mediaSourceIndex !== undefined ? mediaSourceIndex === idx : true
+          "
+          :media="media"
+          :parent-name="parentName" />
+        <v-divider v-if="idx < mediaSource.length - 1" class="mt-4 mb-2" />
+      </div>
+    </v-card-text>
+    <v-card-text
+      v-else-if="mediaSource.length === 0 && !isLoading"
+      class="pa-0 flex-grow-1"
+      :class="{
+        'd-flex': !$vuetify.display.mobile,
+        'flex-row': !$vuetify.display.mobile
+      }">
+      <h2 class="no-media">
+        {{ t('NoMediaSourcesAvailable') }}
+      </h2>
+    </v-card-text>
+
+    <v-card-actions
+      class="d-flex align-center pa-3"
+      :class="{
+        'justify-end': !$vuetify.display.mobile,
+        'justify-center': $vuetify.display.mobile
+      }">
+      <v-btn variant="flat" width="8em" color="secondary" @click="emit('hide')">
+        {{ t('close') }}
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { MediaSourceInfo } from '@jellyfin/sdk/lib/generated-client';
+import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
+import { useI18n } from 'vue-i18n';
+import { useRemote } from '@/composables';
+
+const props = defineProps<{
+  itemId: string;
+  mediaSourceIndex?: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'hide'): void;
+}>();
+
+const { t } = useI18n();
+const remote = useRemote();
+
+const isLoading = ref(true);
+const parentName = ref<string>();
+const mediaSource = ref<MediaSourceInfo[]>([]);
+
+/**
+ * Fetches the item data from the server
+ */
+async function getData(): Promise<void> {
+  const itemInfo = (
+    await remote.sdk.newUserApi(getUserLibraryApi).getItem({
+      userId: remote.auth.currentUserId ?? '',
+      itemId: props.itemId
+    })
+  ).data;
+
+  mediaSource.value = itemInfo.MediaSources || [];
+
+  if (mediaSource.value.length > 1) {
+    parentName.value = itemInfo.Name ?? undefined;
+  }
+
+  isLoading.value = false;
+}
+
+watch(() => props.itemId, getData, { immediate: true });
+</script>
+
+<style lang="scss" scoped>
+.no-media {
+  display: block;
+  margin-left: 1rem;
+  margin-top: 1rem;
+}
+</style>
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetailAttr.vue b/frontend/src/components/Item/MediaDetail/MediaDetailAttr.vue
new file mode 100644
index 00000000000..5228e036d0f
--- /dev/null
+++ b/frontend/src/components/Item/MediaDetail/MediaDetailAttr.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="d-flex flex-row">
+    <span class="mdinfo-label">{{ label }}</span>
+    <span class="mdinfo-value">{{ value ?? 'Unknown' }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string;
+  value: string | number | null;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.mdinfo-label {
+  display: inline-block;
+  margin-right: 1rem;
+  font-weight: 600;
+}
+.mdinfo-value {
+  display: inline-block;
+  font-weight: 400;
+}
+</style>
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetailColorSpace.vue b/frontend/src/components/Item/MediaDetail/MediaDetailColorSpace.vue
new file mode 100644
index 00000000000..c2678e04ec1
--- /dev/null
+++ b/frontend/src/components/Item/MediaDetail/MediaDetailColorSpace.vue
@@ -0,0 +1,31 @@
+<template>
+  <media-detail-attr
+    v-if="stream.ColorSpace"
+    :label="t('mediaInfo.videoCodec.colorSpace')"
+    :value="stream.ColorSpace" />
+  <media-detail-attr
+    v-if="stream.ColorTransfer"
+    :label="t('mediaInfo.videoCodec.colorTransfer')"
+    :value="stream.ColorTransfer" />
+  <media-detail-attr
+    v-if="stream.ColorPrimaries"
+    :label="t('mediaInfo.videoCodec.colorPrimaries')"
+    :value="stream.ColorPrimaries" />
+  <media-detail-attr
+    v-if="stream.ColorRange"
+    :label="t('mediaInfo.videoCodec.colorRange')"
+    :value="stream.ColorRange" />
+  <media-detail-attr
+    v-if="stream.PixelFormat"
+    :label="t('mediaInfo.videoCodec.pixelFormat')"
+    :value="stream.PixelFormat" />
+</template>
+
+<script setup lang="ts">
+import { MediaStream } from '@jellyfin/sdk/lib/generated-client';
+import { useI18n } from 'vue-i18n';
+
+defineProps<{ stream: MediaStream }>();
+
+const { t } = useI18n();
+</script>
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetailContent.vue b/frontend/src/components/Item/MediaDetail/MediaDetailContent.vue
new file mode 100644
index 00000000000..066315279f4
--- /dev/null
+++ b/frontend/src/components/Item/MediaDetail/MediaDetailContent.vue
@@ -0,0 +1,391 @@
+<template>
+  <div>
+    <h2 v-if="media.Name" class="d-block my-2">
+      <span class="mr-1">{{ displayName }}</span>
+      <media-detail-copy :text="completeMediainfo" />
+    </h2>
+  </div>
+  <div class="d-flex flex-column mt-2">
+    <media-detail-attr
+      v-if="media.Container"
+      :label="t('mediaInfo.generic.container')"
+      :value="media.Container" />
+    <media-detail-attr
+      v-if="media.Path"
+      :label="t('mediaInfo.generic.path')"
+      :value="media.Path" />
+    <media-detail-attr
+      v-if="media.Size"
+      :label="t('mediaInfo.generic.size')"
+      :value="formatFileSize(media.Size)" />
+    <media-detail-attr
+      v-if="media.Bitrate"
+      :label="t('mediaInfo.generic.bitrate')"
+      :value="(media.Bitrate / 1000).toFixed(2) + ' kbps'" />
+  </div>
+
+  <div class="d-flex flex-row flex-wrap mt-5">
+    <div
+      v-for="(stream, idx) in videoStreams"
+      :key="'mdinfo-video-' + stream.Index ?? idx"
+      class="stream-info">
+      <h3 v-if="media.Name" class="d-block my-2">
+        <span class="mr-1">
+          {{ t('mediaInfo.videoCodec.titles', [idx + 1], videoStreams.length) }}
+        </span>
+        <media-detail-copy
+          :text="
+            makeCopyableStreamInfo(stream, idx + 1, videoStreams.length)
+          " />
+      </h3>
+      <media-detail-generic :stream="stream" />
+      <media-detail-attr
+        :label="t('mediaInfo.videoCodec.isAvc')"
+        :value="formatYesOrNo(stream.IsAVC)" />
+      <media-detail-attr
+        v-if="stream.Profile"
+        :label="t('mediaInfo.generic.profile')"
+        :value="stream.Profile" />
+      <media-detail-attr
+        v-if="stream.Level"
+        :label="t('mediaInfo.videoCodec.level')"
+        :value="stream.Level" />
+      <media-detail-attr
+        v-if="stream.Width || stream.Height"
+        :label="t('mediaInfo.videoCodec.resolution')"
+        :value="`${stream.Width}x${stream.Height}`" />
+      <media-detail-attr
+        v-if="stream.AspectRatio"
+        :label="t('mediaInfo.videoCodec.aspectRatio')"
+        :value="stream.AspectRatio" />
+      <media-detail-attr
+        v-if="typeof stream.IsAnamorphic === 'boolean'"
+        :label="t('mediaInfo.videoCodec.isAnamorphic')"
+        :value="formatYesOrNo(stream.IsAnamorphic)" />
+      <media-detail-attr
+        v-if="stream.IsInterlaced"
+        :label="t('mediaInfo.videoCodec.isInterlaced')"
+        :value="formatYesOrNo(stream.IsInterlaced)" />
+      <media-detail-attr
+        v-if="stream.AverageFrameRate || stream.RealFrameRate"
+        :label="t('mediaInfo.videoCodec.frameRate')"
+        :value="`${(stream.AverageFrameRate || stream.RealFrameRate)?.toFixed(
+          3
+        )} fps`" />
+      <media-detail-attr
+        v-if="stream.BitRate"
+        :label="t('mediaInfo.generic.bitrate')"
+        :value="(stream.BitRate / 1000).toFixed(2) + ' kbps'" />
+      <media-detail-attr
+        v-if="stream.BitDepth"
+        :label="t('mediaInfo.videoCodec.bitdepth')"
+        :value="stream.BitDepth + ' bits'" />
+      <media-detail-attr
+        v-if="stream.VideoRange"
+        :label="t('mediaInfo.videoCodec.videoRange')"
+        :value="stream.VideoRange" />
+      <media-detail-attr
+        v-if="stream.VideoRangeType"
+        :label="t('mediaInfo.videoCodec.videoRangeType')"
+        :value="stream.VideoRangeType" />
+      <media-detail-attr
+        v-if="stream.VideoDoViTitle"
+        :label="t('mediaInfo.videoCodec.DoVi.title')"
+        :value="stream.VideoDoViTitle" />
+      <media-detail-attr
+        v-if="stream.VideoDoViTitle && isNumber(stream.DvVersionMajor)"
+        :label="t('mediaInfo.videoCodec.DoVi.majorVersion')"
+        :value="stream.DvVersionMajor" />
+      <media-detail-attr
+        v-if="stream.VideoDoViTitle && isNumber(stream.DvVersionMinor)"
+        :label="t('mediaInfo.videoCodec.DoVi.minorVersion')"
+        :value="stream.DvVersionMinor" />
+      <media-detail-attr
+        v-if="stream.VideoDoViTitle && isNumber(stream.DvProfile)"
+        :label="t('mediaInfo.videoCodec.DoVi.profile')"
+        :value="stream.DvProfile" />
+      <media-detail-attr
+        v-if="stream.VideoDoViTitle && isNumber(stream.DvLevel)"
+        :label="t('mediaInfo.videoCodec.DoVi.level')"
+        :value="stream.DvLevel" />
+      <media-detail-attr
+        v-if="stream.VideoDoViTitle && isNumber(stream.RpuPresentFlag)"
+        :label="t('mediaInfo.videoCodec.DoVi.rpuPresent')"
+        :value="stream.RpuPresentFlag" />
+      <media-detail-attr
+        v-if="stream.VideoDoViTitle && isNumber(stream.ElPresentFlag)"
+        :label="t('mediaInfo.videoCodec.DoVi.elPresent')"
+        :value="stream.ElPresentFlag" />
+      <media-detail-attr
+        v-if="stream.VideoDoViTitle && isNumber(stream.BlPresentFlag)"
+        :label="t('mediaInfo.videoCodec.DoVi.blPresent')"
+        :value="stream.BlPresentFlag" />
+      <media-detail-attr
+        v-if="
+          stream.VideoDoViTitle && isNumber(stream.DvBlSignalCompatibilityId)
+        "
+        :label="t('mediaInfo.videoCodec.DoVi.blSignalCompatibilityId')"
+        :value="stream.DvBlSignalCompatibilityId" />
+      <media-detail-color-space :stream="stream" />
+      <media-detail-attr
+        v-if="stream.NalLengthSize"
+        label="NAL"
+        :value="stream.NalLengthSize" />
+    </div>
+    <div
+      v-for="(stream, idx) in audioStreams"
+      :key="'mdinfo-audio-' + stream.Index ?? idx"
+      class="stream-info">
+      <h3 v-if="media.Name" class="d-block my-2">
+        <span class="mr-1">
+          {{ t('mediaInfo.audioCodec.titles', [idx + 1], audioStreams.length) }}
+        </span>
+        <media-detail-copy
+          :text="
+            makeCopyableStreamInfo(stream, idx + 1, audioStreams.length)
+          " />
+      </h3>
+      <media-detail-generic :stream="stream" />
+      <media-detail-attr
+        v-if="stream.Profile"
+        :label="t('mediaInfo.generic.profile')"
+        :value="stream.Profile" />
+      <media-detail-attr
+        v-if="stream.ChannelLayout"
+        :label="t('mediaInfo.audioCodec.layout')"
+        :value="stream.ChannelLayout" />
+      <media-detail-attr
+        v-if="stream.Channels"
+        :label="t('mediaInfo.audioCodec.channels')"
+        :value="`${stream.Channels} ch`" />
+      <media-detail-attr
+        v-if="stream.BitRate"
+        :label="t('mediaInfo.generic.bitrate')"
+        :value="(stream.BitRate / 1000).toFixed(2) + ' kbps'" />
+      <media-detail-attr
+        v-if="stream.BitRate"
+        :label="t('mediaInfo.audioCodec.sampleRate')"
+        :value="`${stream.SampleRate} Hz`" />
+      <media-detail-extras :stream="stream" />
+    </div>
+    <div
+      v-for="(stream, idx) in subsStreams"
+      :key="'mdinfo-subs-' + stream.Index ?? idx"
+      class="stream-info">
+      <h3 v-if="media.Name" class="d-block my-2">
+        <span class="mr-1">
+          {{
+            t('mediaInfo.subtitleCodec.titles', [idx + 1], subsStreams.length)
+          }}
+        </span>
+        <media-detail-copy
+          :text="makeCopyableStreamInfo(stream, idx + 1, subsStreams.length)" />
+      </h3>
+      <media-detail-generic :stream="stream" />
+      <media-detail-extras :stream="stream" />
+    </div>
+    <div
+      v-for="(stream, idx) in embeddedStreams"
+      :key="'mdinfo-embedImg-' + stream.Index ?? idx"
+      class="stream-info">
+      <h3 v-if="media.Name" class="d-block my-2">
+        <span class="mr-1">
+          {{
+            t(
+              'mediaInfo.embeddedImageCodec.titles',
+              [idx + 1],
+              embeddedStreams.length
+            )
+          }}
+        </span>
+        <media-detail-copy
+          :text="
+            makeCopyableStreamInfo(stream, idx + 1, embeddedStreams.length)
+          " />
+      </h3>
+      <media-detail-generic :stream="stream" />
+      <media-detail-attr
+        v-if="stream.Profile"
+        :label="t('mediaInfo.generic.profile')"
+        :value="stream.Profile" />
+      <media-detail-attr
+        v-if="stream.Width || stream.Height"
+        :label="t('mediaInfo.videoCodec.resolution')"
+        :value="`${stream.Width}x${stream.Height}`" />
+      <media-detail-attr
+        v-if="stream.BitDepth"
+        :label="t('mediaInfo.videoCodec.bitdepth')"
+        :value="stream.BitDepth + ' bits'" />
+      <media-detail-color-space :stream="stream" />
+      <media-detail-attr
+        v-if="stream.RefFrames"
+        :label="t('mediaInfo.videoCodec.refFrames')"
+        :value="stream.RefFrames" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import {
+  MediaSourceInfo,
+  MediaStream
+} from '@jellyfin/sdk/lib/generated-client';
+import { useI18n } from 'vue-i18n';
+import { formatFileSize, getMediaStreams } from '@/utils/items';
+import {
+  formatYesOrNo,
+  createVideoInformation,
+  createAudioInformation,
+  createSubsInformation,
+  createContainerInformation,
+  createEmbeddedInformation
+} from '@/utils/mediainfo';
+
+const props = defineProps<{
+  media: MediaSourceInfo;
+  parentName?: string;
+}>();
+
+const { t } = useI18n();
+
+const videoStreams = computed<MediaStream[]>(() =>
+  getMediaStreams(props.media.MediaStreams ?? [], 'Video')
+);
+const audioStreams = computed<MediaStream[]>(() =>
+  getMediaStreams(props.media.MediaStreams ?? [], 'Audio')
+);
+const subsStreams = computed<MediaStream[]>(() =>
+  getMediaStreams(props.media.MediaStreams ?? [], 'Subtitle')
+);
+const embeddedStreams = computed<MediaStream[]>(() =>
+  getMediaStreams(props.media.MediaStreams ?? [], 'EmbeddedImage')
+);
+const displayName = computed(() => {
+  if (props.parentName) {
+    return `${props.parentName} - ${props.media.Name}`;
+  }
+
+  return props.media.Name;
+});
+
+/**
+ * Creates a Media info string from a collection of `MediaStream`.
+ *
+ * @param streams - The collection of `MediaStream` to create the string from.
+ * @param type - The type of the stream.
+ * @param stringfier - The function that creates the string for each stream.
+ */
+function makeMediaStreamInfo(
+  streams: MediaStream[],
+  type: string,
+  stringfier: (stream: MediaStream) => string
+): string {
+  let mergedStream = '';
+
+  for (let idx = 1; idx <= streams.length; idx++) {
+    const stream = streams[idx - 1];
+
+    const title = t(`mediaInfo.${type}.titles`, [idx], streams.length);
+
+    mergedStream += `${title}\n`;
+    mergedStream += stringfier(stream) + '\n';
+  }
+
+  return mergedStream;
+}
+
+const completeMediainfo = computed<string>(() => {
+  let mediaInfo = '';
+  const { media } = props;
+
+  if (displayName.value) {
+    mediaInfo += `${displayName.value}\n`;
+  }
+
+  mediaInfo += createContainerInformation(media);
+
+  if (mediaInfo) {
+    mediaInfo += '\n';
+  }
+
+  mediaInfo += makeMediaStreamInfo(
+    videoStreams.value,
+    'videoCodec',
+    createVideoInformation
+  );
+  mediaInfo += makeMediaStreamInfo(
+    audioStreams.value,
+    'audioCodec',
+    createAudioInformation
+  );
+  mediaInfo += makeMediaStreamInfo(
+    subsStreams.value,
+    'subtitleCodec',
+    createSubsInformation
+  );
+  mediaInfo += makeMediaStreamInfo(
+    embeddedStreams.value,
+    'embeddedImageCodec',
+    createEmbeddedInformation
+  );
+
+  return mediaInfo;
+});
+
+const isNumber = (value: unknown): value is number => {
+  return typeof value === 'number' && !Number.isNaN(value);
+};
+
+/**
+ * Make a copyable stream information data
+ */
+function makeCopyableStreamInfo(
+  stream: MediaStream,
+  streamIndex: number,
+  totalLength: number
+): string {
+  switch (stream.Type) {
+    case 'Video': {
+      return (
+        t('mediaInfo.videoCodec.titles', [streamIndex], totalLength) +
+        '\n' +
+        createVideoInformation(stream)
+      );
+    }
+    case 'Audio': {
+      return (
+        t('mediaInfo.audioCodec.titles', [streamIndex], totalLength) +
+        '\n' +
+        createAudioInformation(stream)
+      );
+    }
+    case 'Subtitle': {
+      return (
+        t('mediaInfo.subtitleCodec.titles', [streamIndex], totalLength) +
+        '\n' +
+        createSubsInformation(stream)
+      );
+    }
+    case 'EmbeddedImage': {
+      return (
+        t('mediaInfo.embeddedImageCodec.titles', [streamIndex], totalLength) +
+        '\n' +
+        createEmbeddedInformation(stream)
+      );
+    }
+    default: {
+      return '';
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.stream-info {
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 3rem;
+  margin-top: 0.5rem;
+}
+</style>
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetailCopy.vue b/frontend/src/components/Item/MediaDetail/MediaDetailCopy.vue
new file mode 100644
index 00000000000..0b7b6d855e0
--- /dev/null
+++ b/frontend/src/components/Item/MediaDetail/MediaDetailCopy.vue
@@ -0,0 +1,25 @@
+<template>
+  <v-btn variant="flat" width="1em" color="secondary" @click="copy">
+    <v-icon><i-mdi-content-copy /></v-icon>
+  </v-btn>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { useSnackbar } from '@/composables';
+import { writeToClipboard } from '@/utils/clipboard';
+
+const props = defineProps<{
+  text: string;
+}>();
+
+const { t } = useI18n();
+const copy = async (): Promise<void> => {
+  try {
+    await writeToClipboard(props.text);
+    useSnackbar(t('clipboardSuccess'), 'success');
+  } catch {
+    useSnackbar(t('clipboardFail'), 'error');
+  }
+};
+</script>
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetailDialog.vue b/frontend/src/components/Item/MediaDetail/MediaDetailDialog.vue
new file mode 100644
index 00000000000..bd263e8fac0
--- /dev/null
+++ b/frontend/src/components/Item/MediaDetail/MediaDetailDialog.vue
@@ -0,0 +1,33 @@
+<template>
+  <v-dialog
+    content-class="media-detail-dialog"
+    :model-value="dialog"
+    :fullscreen="$vuetify.display.mobile"
+    @update:model-value="close">
+    <media-detail
+      :item-id="itemId"
+      :media-source-index="mediaSourceIndex"
+      @hide="close" />
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+defineProps<{ dialog: boolean; itemId: string; mediaSourceIndex?: number }>();
+
+const emit = defineEmits<{
+  (e: 'update:dialog', isOpen: boolean): void;
+}>();
+
+/**
+ * Close the dialog
+ */
+function close(): void {
+  emit('update:dialog', false);
+}
+</script>
+
+<style lang="scss" scoped>
+.media-detail-dialog {
+  height: 60vh;
+}
+</style>
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetailExtras.vue b/frontend/src/components/Item/MediaDetail/MediaDetailExtras.vue
new file mode 100644
index 00000000000..db4737a10a1
--- /dev/null
+++ b/frontend/src/components/Item/MediaDetail/MediaDetailExtras.vue
@@ -0,0 +1,21 @@
+<template>
+  <media-detail-attr
+    :label="t('mediaInfo.generic.default')"
+    :value="formatYesOrNo(stream.IsDefault)" />
+  <media-detail-attr
+    :label="t('mediaInfo.generic.forced')"
+    :value="formatYesOrNo(stream.IsForced)" />
+  <media-detail-attr
+    :label="t('mediaInfo.generic.external')"
+    :value="formatYesOrNo(stream.IsExternal)" />
+</template>
+
+<script setup lang="ts">
+import { MediaStream } from '@jellyfin/sdk/lib/generated-client';
+import { useI18n } from 'vue-i18n';
+import { formatYesOrNo } from '@/utils/mediainfo';
+
+defineProps<{ stream: MediaStream }>();
+
+const { t } = useI18n();
+</script>
diff --git a/frontend/src/components/Item/MediaDetail/MediaDetailGeneric.vue b/frontend/src/components/Item/MediaDetail/MediaDetailGeneric.vue
new file mode 100644
index 00000000000..4993a8db719
--- /dev/null
+++ b/frontend/src/components/Item/MediaDetail/MediaDetailGeneric.vue
@@ -0,0 +1,27 @@
+<template>
+  <media-detail-attr
+    v-if="stream.DisplayTitle"
+    :label="t('mediaInfo.generic.title')"
+    :value="stream.DisplayTitle" />
+  <media-detail-attr
+    v-if="stream.Language"
+    :label="t('mediaInfo.generic.language')"
+    :value="stream.Language" />
+  <media-detail-attr
+    v-if="stream.Codec"
+    :label="t('mediaInfo.generic.codec')"
+    :value="stream.Codec.toUpperCase()" />
+  <media-detail-attr
+    v-if="stream.CodecTag"
+    :label="t('mediaInfo.generic.codecTag')"
+    :value="stream.CodecTag" />
+</template>
+
+<script setup lang="ts">
+import { MediaStream } from '@jellyfin/sdk/lib/generated-client';
+import { useI18n } from 'vue-i18n';
+
+defineProps<{ stream: MediaStream }>();
+
+const { t } = useI18n();
+</script>
diff --git a/frontend/src/components/Playback/TrackList.vue b/frontend/src/components/Playback/TrackList.vue
index e3b044eb22c..d6d18406c69 100644
--- a/frontend/src/components/Playback/TrackList.vue
+++ b/frontend/src/components/Playback/TrackList.vue
@@ -69,7 +69,7 @@
                     </template>
                   </div>
                   <v-spacer />
-                  <item-menu v-show="isHovering" :item="item" />
+                  <item-menu v-show="isHovering" :item="track" />
                 </div>
               </td>
               <td class="text-center">
@@ -86,7 +86,11 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { groupBy } from 'lodash-es';
-import { BaseItemDto, SortOrder } from '@jellyfin/sdk/lib/generated-client';
+import {
+  BaseItemDto,
+  ItemFields,
+  SortOrder
+} from '@jellyfin/sdk/lib/generated-client';
 import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
 import { getItemDetailsLink } from '@/utils/items';
 import { formatTicks } from '@/utils/time';
@@ -108,7 +112,8 @@ async function fetch(): Promise<void> {
       userId: remote.auth.currentUserId || '',
       parentId: props.item.Id,
       sortBy: ['SortName'],
-      sortOrder: [SortOrder.Ascending]
+      sortOrder: [SortOrder.Ascending],
+      fields: [ItemFields.MediaSources, ItemFields.CanDownload]
     })
   ).data.Items;
 }
diff --git a/frontend/src/store/userLibraries.ts b/frontend/src/store/userLibraries.ts
index 55727506078..cc9e66c681a 100644
--- a/frontend/src/store/userLibraries.ts
+++ b/frontend/src/store/userLibraries.ts
@@ -148,7 +148,11 @@ class UserLibrariesStore {
         await remote.sdk.newUserApi(getItemsApi).getResumeItems({
           userId: remote.auth.currentUserId || '',
           limit: 24,
-          fields: [ItemFields.PrimaryImageAspectRatio],
+          fields: [
+            ItemFields.PrimaryImageAspectRatio,
+            ItemFields.MediaSources,
+            ItemFields.CanDownload
+          ],
           imageTypeLimit: 1,
           enableImageTypes: [
             ImageType.Primary,
@@ -174,7 +178,11 @@ class UserLibrariesStore {
         await remote.sdk.newUserApi(getItemsApi).getResumeItems({
           userId: remote.auth.currentUserId || '',
           limit: 24,
-          fields: [ItemFields.PrimaryImageAspectRatio],
+          fields: [
+            ItemFields.PrimaryImageAspectRatio,
+            ItemFields.MediaSources,
+            ItemFields.CanDownload
+          ],
           imageTypeLimit: 1,
           enableImageTypes: [
             ImageType.Primary,
@@ -200,7 +208,11 @@ class UserLibrariesStore {
         await remote.sdk.newUserApi(getTvShowsApi).getNextUp({
           userId: remote.auth.currentUserId,
           limit: 24,
-          fields: [ItemFields.PrimaryImageAspectRatio],
+          fields: [
+            ItemFields.PrimaryImageAspectRatio,
+            ItemFields.MediaSources,
+            ItemFields.CanDownload
+          ],
           imageTypeLimit: 1,
           enableImageTypes: [
             ImageType.Primary,
@@ -228,7 +240,11 @@ class UserLibrariesStore {
         await remote.sdk.newUserApi(getUserLibraryApi).getLatestMedia({
           userId: remote.auth.currentUserId || '',
           limit: 24,
-          fields: [ItemFields.PrimaryImageAspectRatio],
+          fields: [
+            ItemFields.PrimaryImageAspectRatio,
+            ItemFields.MediaSources,
+            ItemFields.CanDownload
+          ],
           imageTypeLimit: 1,
           enableImageTypes: [
             ImageType.Primary,
@@ -253,7 +269,12 @@ class UserLibrariesStore {
         await remote.sdk.newUserApi(getUserLibraryApi).getLatestMedia({
           userId: remote.auth.currentUserId || '',
           limit: 10,
-          fields: [ItemFields.Overview, ItemFields.PrimaryImageAspectRatio],
+          fields: [
+            ItemFields.Overview,
+            ItemFields.PrimaryImageAspectRatio,
+            ItemFields.MediaSources,
+            ItemFields.CanDownload
+          ],
           enableImageTypes: [ImageType.Backdrop, ImageType.Logo],
           imageTypeLimit: 1
         })
diff --git a/frontend/src/utils/browser-detection.ts b/frontend/src/utils/browser-detection.ts
index 0fa8d01e535..3df68d1d3b8 100644
--- a/frontend/src/utils/browser-detection.ts
+++ b/frontend/src/utils/browser-detection.ts
@@ -28,10 +28,16 @@ export function supportsMediaSource(): boolean {
  * @private
  * @static
  * @param key - Key for which to perform a check.
+ * @param caseSensitive - Whether the check should be case sensitive.
  * @returns Determines if user agent of navigator contains a key
  */
-function userAgentContains(key: string): boolean {
-  const userAgent = navigator.userAgent || '';
+function userAgentContains(key: string, caseSensitive = true): boolean {
+  let userAgent = navigator.userAgent || '';
+
+  if (!caseSensitive) {
+    key = key.toLowerCase();
+    userAgent = userAgent.toLowerCase();
+  }
 
   return userAgent.includes(key);
 }
@@ -57,6 +63,22 @@ export function isEdge(): boolean {
   return userAgentContains('Edg/') || userAgentContains('Edge/');
 }
 
+/**
+ * Check if the current platform is Microsoft Edge UWP.
+ *
+ * @static
+ * @returns Determines if browser is Microsoft Edge UWP.
+ */
+export function isEdgeUWP(): boolean {
+  if (!isEdge()) {
+    return false;
+  }
+
+  return (
+    userAgentContains('msapphost', false) || userAgentContains('webview', false)
+  );
+}
+
 /**
  * Check if the current platform is Chromium based.
  *
diff --git a/frontend/src/utils/clipboard.ts b/frontend/src/utils/clipboard.ts
new file mode 100644
index 00000000000..ca687ed0de5
--- /dev/null
+++ b/frontend/src/utils/clipboard.ts
@@ -0,0 +1,8 @@
+/**
+ * Write text to the clipboard.
+ *
+ * @param text - The text to write to the clipboard.
+ */
+export async function writeToClipboard(text: string): Promise<void> {
+  await navigator.clipboard.writeText(text);
+}
diff --git a/frontend/src/utils/file-download.ts b/frontend/src/utils/file-download.ts
new file mode 100644
index 00000000000..cfe3fa428f9
--- /dev/null
+++ b/frontend/src/utils/file-download.ts
@@ -0,0 +1,76 @@
+import { isFirefox } from './browser-detection';
+
+export interface DownloadableFile {
+  // The file URL
+  url: string;
+  // The filename, including the file extension
+  fileName: string;
+}
+
+/**
+ * Check if the url is on the same domain as the current page.
+ *
+ * @param url - The url to check.
+ */
+function sameDomain(url: string): boolean {
+  const a = document.createElement('a');
+
+  a.href = url;
+
+  return (
+    window.location.hostname === a.hostname &&
+    window.location.protocol === a.protocol
+  );
+}
+
+/**
+ * Use html <a> tag to download a file.
+ *
+ * @param file - An object with `url` and `fileName` properties.
+ */
+function downloadBrowser(file: DownloadableFile): void {
+  const a = document.createElement('a');
+
+  a.download = file.fileName;
+  a.href = file.url;
+  // firefox doesn't support `a.click()`...
+  a.dispatchEvent(new MouseEvent('click'));
+}
+
+/**
+ * Download multiple files.
+ *
+ * @param filesToDownload - An array of objects with `url` and `fileName` properties.
+ */
+export default async function downloadFiles(
+  filesToDownload: DownloadableFile | DownloadableFile[]
+): Promise<void> {
+  if (!filesToDownload) {
+    throw new Error('`filesToDownload` required');
+  }
+
+  const files = Array.isArray(filesToDownload)
+    ? filesToDownload
+    : [filesToDownload];
+
+  if (files.length === 0) {
+    throw new Error(
+      '`filesToDownload` must be an array with at least one item'
+    );
+  }
+
+  if (document.createElement('a').download === undefined) {
+    throw new Error('Browser does not support downloading files');
+  }
+
+  let delay = 0;
+
+  for (const file of files) {
+    if (isFirefox() && !sameDomain(file.url)) {
+      // the download init has to be sequential for firefox if the urls are not on the same domain
+      setTimeout(downloadBrowser.bind(undefined, file), 100 * ++delay);
+    } else {
+      downloadBrowser(file);
+    }
+  }
+}
diff --git a/frontend/src/utils/items.ts b/frontend/src/utils/items.ts
index 0158d9cee47..3f93e34366c 100644
--- a/frontend/src/utils/items.ts
+++ b/frontend/src/utils/items.ts
@@ -5,6 +5,7 @@ import {
   BaseItemDto,
   BaseItemKind,
   BaseItemPerson,
+  ItemFields,
   MediaStream
 } from '@jellyfin/sdk/lib/generated-client';
 import { useRouter } from 'vue-router';
@@ -26,6 +27,10 @@ import IMdiBookMusic from 'virtual:icons/mdi/book-music';
 import IMdiFolderMultiple from 'virtual:icons/mdi/folder-multiple';
 import IMdiFilmstrip from 'virtual:icons/mdi/filmstrip';
 import IMdiAlbum from 'virtual:icons/mdi/album';
+import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
+import { getTvShowsApi } from '@jellyfin/sdk/lib/utils/api/tv-shows-api';
+import { DownloadableFile } from './file-download';
+import { useRemote } from '@/composables';
 
 /**
  * A list of valid collections that should be treated as folders.
@@ -400,3 +405,120 @@ export function getMediaStreams(
 ): MediaStream[] {
   return mediaStreams.filter((mediaStream) => mediaStream.Type === streamType);
 }
+
+/**
+ * Create an item download object that contains the URL and filename.
+ *
+ * @param itemId - The item ID.
+ * @param itemPath - The item path.
+ * @returns - A download object.
+ */
+export function getItemDownloadObject(
+  itemId: string,
+  itemPath?: string
+): DownloadableFile | undefined {
+  const remote = useRemote();
+
+  const serverAddress = remote.sdk.api?.basePath;
+  const userToken = remote.sdk.api?.accessToken;
+
+  if (!serverAddress || !userToken) {
+    return undefined;
+  }
+
+  const fileName = itemPath?.includes('\\')
+    ? itemPath?.split('\\').pop()
+    : itemPath?.split('/').pop();
+
+  return {
+    url: `${serverAddress}/Items/${itemId}/Download?api_key=${userToken}`,
+    fileName: fileName || ''
+  };
+}
+
+/**
+ * Get multiple download object for seasons.
+ *
+ * @param seasonId - The season ID.
+ * @returns - An array of download objects.
+ */
+export async function getItemSeasonDownloadObjects(
+  seasonId: string
+): Promise<DownloadableFile[]> {
+  const remote = useRemote();
+
+  if (remote.sdk.api === undefined) {
+    return [];
+  }
+
+  const episodes = (
+    await remote.sdk.newUserApi(getItemsApi).getItems({
+      userId: remote.auth.currentUserId,
+      parentId: seasonId,
+      fields: [ItemFields.Overview, ItemFields.CanDownload, ItemFields.Path]
+    })
+  ).data;
+
+  return (
+    episodes.Items?.map((r) => {
+      if (r.Id && r.Path) {
+        return getItemDownloadObject(r.Id, r.Path);
+      }
+    }).filter(
+      (r): r is DownloadableFile =>
+        r !== undefined && r.url.length > 0 && r.fileName.length > 0
+    ) ?? []
+  );
+}
+
+/**
+ * Get download object for a series.
+ * This will fetch every season for all the episodes.
+ *
+ * @param seriesId - The series ID.
+ * @returns - An array of download objects.
+ */
+export async function getItemSeriesDownloadObjects(
+  seriesId: string
+): Promise<DownloadableFile[]> {
+  const remote = useRemote();
+
+  let mergedStreamURLs: DownloadableFile[] = [];
+
+  if (remote.sdk.api === undefined) {
+    return [];
+  }
+
+  const seasons = (
+    await remote.sdk.newUserApi(getTvShowsApi).getSeasons({
+      userId: remote.auth.currentUserId,
+      seriesId: seriesId
+    })
+  ).data;
+
+  for (const season of seasons.Items || []) {
+    const seasonURLs = await getItemSeasonDownloadObjects(season.Id || '');
+
+    mergedStreamURLs = [...mergedStreamURLs, ...seasonURLs];
+  }
+
+  return mergedStreamURLs;
+}
+
+/**
+ * Format a number of bytes into a human readable string
+ *
+ * @param size - The number of bytes to format
+ * @returns - A human readable string
+ */
+export function formatFileSize(size: number): string {
+  if (size === 0) {
+    return '0 B';
+  }
+
+  const i = Math.floor(Math.log(size) / Math.log(1024));
+
+  return `${(size / Math.pow(1024, i)).toFixed(2)} ${
+    ['B', 'kiB', 'MiB', 'GiB', 'TiB', 'PiB'][i]
+  }`;
+}
diff --git a/frontend/src/utils/mediainfo.ts b/frontend/src/utils/mediainfo.ts
new file mode 100644
index 00000000000..550d48aa951
--- /dev/null
+++ b/frontend/src/utils/mediainfo.ts
@@ -0,0 +1,354 @@
+import {
+  MediaSourceInfo,
+  MediaStream
+} from '@jellyfin/sdk/lib/generated-client';
+import { isBoolean, isNil } from 'lodash-es';
+import { formatFileSize } from './items';
+import { usei18n } from '@/composables';
+
+const { t } = usei18n();
+const profileT = t('mediaInfo.generic.profile');
+
+type MediaItem = string | number | boolean;
+type NoneType = null | undefined;
+
+/**
+ * Format a boolean value into a Yes/No string.
+ * @param value - The boolean value to format.
+ */
+export function formatYesOrNo(value: boolean | NoneType): string {
+  return value ? 'Yes' : 'No';
+}
+
+/**
+ * Check if a value is a valid media item.
+ */
+function checkValidValue(value: MediaItem | NoneType): value is MediaItem {
+  if (isNil(value)) {
+    return false;
+  }
+
+  if (typeof value === 'string') {
+    return value.trim().length > 0;
+  }
+
+  return true;
+}
+
+/**
+ * Format a media attribute into a mediainfo text format.
+ * @param key - The key of the attribute.
+ * @param value - The value of the attribute.
+ * @param suffix - An optional suffix to append to the attribute.
+ */
+function formatMediaAttr(
+  key: string,
+  value: MediaItem | NoneType,
+  suffix?: string
+): string {
+  return checkValidValue(value)
+    ? `${key} ${value} ${suffix ?? ''}`.trimEnd() + '\n'
+    : '';
+}
+
+/**
+ * Create generic information about the media stream.
+ * @param stream - The media stream to create information for.
+ */
+function createGenericInfo(stream: MediaStream): string {
+  let mediaInfo = '';
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.title'),
+    stream.DisplayTitle
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.language'),
+    stream.Language
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.codec'),
+    stream.Codec?.toUpperCase()
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.codecTag'),
+    stream.CodecTag
+  );
+
+  return mediaInfo;
+}
+
+/**
+ * Create generic information about the Default/Forced/External status of a stream.
+ * @param stream - The media stream to create information for.
+ */
+function createExtraInformation(stream: MediaStream): string {
+  let mediaInfo = '';
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.default'),
+    formatYesOrNo(stream.IsDefault)
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.forced'),
+    formatYesOrNo(stream.IsForced)
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.external'),
+    formatYesOrNo(stream.IsExternal)
+  );
+
+  return mediaInfo;
+}
+
+/**
+ * Create information about Dolby Vision if exist.
+ * @param stream - The media stream to create information for.
+ */
+function createVideoDoViInformation(stream: MediaStream): string {
+  let mediaInfo = '';
+
+  if (typeof stream.VideoDoViTitle !== 'string') {
+    return mediaInfo;
+  }
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.DoVi.title'),
+    stream.VideoDoViTitle
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.DoVi.majorVersion'),
+    stream.DvVersionMajor
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.DoVi.minorVersion'),
+    stream.DvVersionMinor
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.DoVi.profile'),
+    stream.DvProfile
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.DoVi.level'),
+    stream.DvLevel
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.DoVi.rpuPresent'),
+    stream.RpuPresentFlag
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.DoVi.elPresent'),
+    stream.ElPresentFlag
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.DoVi.blPresent'),
+    stream.BlPresentFlag
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.DoVi.blSignalCompatibilityId'),
+    stream.DvBlSignalCompatibilityId
+  );
+
+  return mediaInfo;
+}
+
+/**
+ * Create information about the color space used in the video stream.
+ * @param stream - The media stream to create information for.
+ */
+function createVideoColorInformation(stream: MediaStream): string {
+  let mediaInfo = '';
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.colorSpace'),
+    stream.ColorSpace
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.colorTransfer'),
+    stream.ColorTransfer
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.colorPrimaries'),
+    stream.ColorPrimaries
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.colorRange'),
+    stream.ColorRange
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.pixelFormat'),
+    stream.PixelFormat
+  );
+
+  return mediaInfo;
+}
+
+/**
+ * Format video media info into a mediainfo text format
+ * @param stream - The media stream to create information for.
+ */
+export function createVideoInformation(stream: MediaStream): string {
+  let mediaInfo = createGenericInfo(stream);
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.isAvc'),
+    formatYesOrNo(stream.IsAVC)
+  );
+  mediaInfo += formatMediaAttr(profileT, stream.Profile);
+  mediaInfo += formatMediaAttr(t('mediaInfo.videoCodec.level'), stream.Level);
+
+  if (stream.Width || stream.Height) {
+    mediaInfo += formatMediaAttr(
+      t('mediaInfo.videoCodec.resolution'),
+      `${stream.Width}x${stream.Height}`
+    );
+  }
+
+  if (stream.AspectRatio) {
+    mediaInfo += formatMediaAttr(
+      t('mediaInfo.videoCodec.aspectRatio'),
+      stream.AspectRatio
+    );
+  }
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.isAnamorphic'),
+    isBoolean(stream.IsAnamorphic)
+      ? formatYesOrNo(stream.IsAnamorphic)
+      : undefined
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.isInterlaced'),
+    formatYesOrNo(stream.IsInterlaced)
+  );
+
+  if (stream.AverageFrameRate || stream.RealFrameRate) {
+    mediaInfo += formatMediaAttr(
+      t('mediaInfo.videoCodec.frameRate'),
+      (stream.AverageFrameRate || stream.RealFrameRate)?.toFixed(3),
+      'fps'
+    );
+  }
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.bitrate'),
+    stream.BitRate ? (stream.BitRate / 1000).toFixed(2) : '',
+    'kbps'
+  );
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.bitdepth'),
+    stream.BitDepth,
+    'bits'
+  );
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.videoRange'),
+    stream.VideoRange
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.videoRangeType'),
+    stream.VideoRangeType
+  );
+
+  mediaInfo += createVideoDoViInformation(stream);
+  mediaInfo += createVideoColorInformation(stream);
+  mediaInfo += formatMediaAttr('NAL', stream.NalLengthSize);
+
+  return mediaInfo;
+}
+
+/**
+ * Format audio media info into a mediainfo text format
+ * @param stream - The media stream to create information for.
+ */
+export function createAudioInformation(stream: MediaStream): string {
+  let mediaInfo = createGenericInfo(stream);
+
+  mediaInfo += formatMediaAttr(profileT, stream.Profile);
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.audioCodec.layout'),
+    stream.ChannelLayout
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.audioCodec.channels'),
+    stream.Channels,
+    'ch'
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.bitrate'),
+    stream.BitRate ? (stream.BitRate / 1000).toFixed(2) : '',
+    'kbps'
+  );
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.audioCodec.sampleRate'),
+    stream.SampleRate,
+    'Hz'
+  );
+
+  mediaInfo += createExtraInformation(stream);
+
+  return mediaInfo;
+}
+
+/**
+ * Format subtitle media info into a mediainfo text format
+ * @param stream - The media stream to create information for.
+ */
+export function createSubsInformation(stream: MediaStream): string {
+  let mediaInfo = createGenericInfo(stream);
+
+  mediaInfo += createExtraInformation(stream);
+
+  return mediaInfo;
+}
+
+/**
+ * Format embbedded media info into a mediainfo text format
+ * @param stream - The media stream to create information for.
+ */
+export function createEmbeddedInformation(stream: MediaStream): string {
+  let mediaInfo = createGenericInfo(stream);
+
+  mediaInfo += formatMediaAttr(profileT, stream.Profile);
+
+  if (stream.Width || stream.Height) {
+    mediaInfo += formatMediaAttr(
+      t('mediaInfo.videoCodec.resolution'),
+      `${stream.Width}x${stream.Height}`
+    );
+  }
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.bitdepth'),
+    stream.BitDepth,
+    'bits'
+  );
+  mediaInfo += createVideoColorInformation(stream);
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.videoCodec.refFrames'),
+    stream.RefFrames
+  );
+
+  return mediaInfo;
+}
+
+/**
+ * Format container media info into a mediainfo text format
+ * @param media - The media source to create information for.
+ */
+export function createContainerInformation(media: MediaSourceInfo): string {
+  let mediaInfo = '';
+
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.container'),
+    media.Container
+  );
+  mediaInfo += formatMediaAttr(t('mediaInfo.generic.path'), media.Path);
+  mediaInfo += formatMediaAttr(
+    t('mediaInfo.generic.size'),
+    media.Size ? formatFileSize(media.Size) : ''
+  );
+
+  return mediaInfo;
+}
diff --git a/frontend/types/global/components.d.ts b/frontend/types/global/components.d.ts
index 87a93e5c61d..2ba655b76f2 100644
--- a/frontend/types/global/components.d.ts
+++ b/frontend/types/global/components.d.ts
@@ -49,6 +49,7 @@ declare module '@vue/runtime-core' {
     IMdiClosedCaptionOutline: typeof import('~icons/mdi/closed-caption-outline')['default']
     IMdiCloudDownload: typeof import('~icons/mdi/cloud-download')['default']
     IMdiCog: typeof import('~icons/mdi/cog')['default']
+    IMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
     IMdiContentSave: typeof import('~icons/mdi/content-save')['default']
     IMdiDelete: typeof import('~icons/mdi/delete')['default']
     IMdiDisc: typeof import('~icons/mdi/disc')['default']
@@ -94,6 +95,14 @@ declare module '@vue/runtime-core' {
     LocaleSwitcher: typeof import('./../../src/components/System/LocaleSwitcher.vue')['default']
     LoginForm: typeof import('./../../src/components/Forms/LoginForm.vue')['default']
     MarkPlayedButton: typeof import('./../../src/components/Buttons/MarkPlayedButton.vue')['default']
+    MediaDetail: typeof import('./../../src/components/Item/MediaDetail/MediaDetail.vue')['default']
+    MediaDetailAttr: typeof import('./../../src/components/Item/MediaDetail/MediaDetailAttr.vue')['default']
+    MediaDetailColorSpace: typeof import('./../../src/components/Item/MediaDetail/MediaDetailColorSpace.vue')['default']
+    MediaDetailContent: typeof import('./../../src/components/Item/MediaDetail/MediaDetailContent.vue')['default']
+    MediaDetailCopy: typeof import('./../../src/components/Item/MediaDetail/MediaDetailCopy.vue')['default']
+    MediaDetailDialog: typeof import('./../../src/components/Item/MediaDetail/MediaDetailDialog.vue')['default']
+    MediaDetailExtras: typeof import('./../../src/components/Item/MediaDetail/MediaDetailExtras.vue')['default']
+    MediaDetailGeneric: typeof import('./../../src/components/Item/MediaDetail/MediaDetailGeneric.vue')['default']
     MediaInfo: typeof import('./../../src/components/Item/MediaInfo.vue')['default']
     MediaStreamSelector: typeof import('./../../src/components/Item/MediaStreamSelector.vue')['default']
     MetadataEditor: typeof import('./../../src/components/Item/Metadata/MetadataEditor.vue')['default']