feat(series): improve release popup navigation and controls

frontend/src/components/MediaDetail.vue

@@ -87,49 +87,17 @@
                 >
               </div>
               <div v-if="movieVersions.length > 0" class="versions-list versions-list-sidebar">
-                <div
+                <ReleaseVersionCard
                   v-for="(version, index) in movieVersions"
                   :key="index"
-                  class="version-row"
+                  :torrent="version"
-                  :class="{
+                  :best="index === 0"
-                    'version-best': index === 0,
+                  :selectable="!!version.playable_file"
-                    'version-selectable': !!version.playable_file,
+                  :disabled="!version.playable_file"
-                    'version-disabled': !version.playable_file,
-                  }"
-                  tabindex="0"
                   v-bind="navAttrs(2, index)"
-                  @click="handleVersionActivate(version, $event)"
+                  @activate="handleVersionActivate(version, $event)"
-                  @keydown.enter.prevent="handleVersionActivate(version, $event)"
-                  @keydown.space.prevent="handleVersionActivate(version, $event)"
                   :title="version.playable_file ? 'Click to play/continue. Alt+Click to open folder.' : 'No playable file'"
-                >
+                />
-                  <div class="version-main">
-                    <div class="version-badges">
-                      <span v-if="version.resolution" class="v-badge res">{{ version.resolution }}</span>
-                      <span v-if="getDisplayQualityBadge(version)" class="v-badge qual">{{ getDisplayQualityBadge(version) }}</span>
-                      <span v-if="getDisplayCodecBadge(version)" class="v-badge codec">{{ getDisplayCodecBadge(version) }}</span>
-                      <span v-if="getShowHdrBadge(version)" class="v-badge hdr">HDR</span>
-                      <span v-if="getDisplayAudioBadge(version)" class="v-badge audio">{{ getDisplayAudioBadge(version) }}</span>
-                      <span v-if="isVersionDisc(version)" class="v-disc">💿</span>
-                    </div>
-                    <div class="version-language-flags">
-                      <LanguageFlags class="language-flags-audio" :codes="version.audio_languages" />
-                      <span
-                        v-if="hasLanguageDisplay(version.audio_languages) && hasLanguageDisplay(version.subtitle_languages)"
-                        class="language-separator"
-                      >•</span>
-                      <LanguageFlags class="language-flags-subs" :codes="version.subtitle_languages" />
-                    </div>
-                  </div>
-                  <div class="version-dolby-cell">
-                    <DolbyBadges
-                      class="version-dolby"
-                      :has-dolby-vision="getHasDolbyVision(version)"
-                      :has-dolby-atmos="getHasDolbyAtmos(version)"
-                      :is-hdr="getHasHdr(version)"
-                    />
-                  </div>
-                </div>
               </div>
             </div>
 
@@ -192,10 +160,8 @@ import { getCoverUrl, getVideoPreviewUrl, getVideoSourceAttributes, isSafariBrow
 import castPlaceholderFemaleUrl from '../assets/cast-placeholder-female.svg';
 import castPlaceholderMaleUrl from '../assets/cast-placeholder-male.svg';
 import SeriesFullView from './SeriesFullView.vue';
-import LanguageFlags from './LanguageFlags.vue';
+import ReleaseVersionCard from './ReleaseVersionCard.vue';
-import DolbyBadges from './DolbyBadges.vue';
 import { navAttrs } from '../composables/useKeyboardNavigation';
-import { buildLanguageFlags } from '../utils/languageFlags';
 
 const props = defineProps<{
   item: MediaItem;
@@ -402,81 +368,6 @@ const synopsisPosterUrl = computed(() => {
   return getCoverUrl(props.item.cover_path);
 });
 
-const dolbyTagPattern = /\b(dolby|atmos|vision|dovi|dv)\b/i;
-const dolbyVisionPattern = /\b(dolby\s*vision|dovi|\bdv\b)\b/i;
-const dolbyAtmosPattern = /\b(dolby\s*atmos|atmos)\b/i;
-const hdrPattern = /\bhdr\b|smpte\s*2084|bt\s*2020|hlg/i;
-const blurayTagPattern = /\bblu[\s.-]*ray\b/i;
-
-function hasDolbyTag(value: string | null | undefined): boolean {
-  return Boolean(value && dolbyTagPattern.test(value));
-}
-
-function hasAnyTag(
-  pattern: RegExp,
-  ...values: Array<string | null | undefined>
-): boolean {
-  return values.some((value) => Boolean(value && pattern.test(value)));
-}
-
-function getHasDolbyVision(version: Torrent): boolean {
-  return (
-    version.has_dolby_vision === true
-    || hasAnyTag(dolbyVisionPattern, version.quality, version.codec, version.audio, version.title)
-  );
-}
-
-function getHasDolbyAtmos(version: Torrent): boolean {
-  return (
-    version.has_dolby_atmos === true
-    || hasAnyTag(dolbyAtmosPattern, version.quality, version.codec, version.audio, version.title)
-  );
-}
-
-function getHasHdr(version: Torrent): boolean {
-  return (
-    version.is_hdr === true
-    || hasAnyTag(hdrPattern, version.quality, version.codec, version.audio, version.title)
-  );
-}
-
-function getDisplayQualityBadge(version: Torrent): string | null {
-  if (!version.quality || hasDolbyTag(version.quality)) return null;
-  if (blurayTagPattern.test(version.quality) && !isVersionDisc(version)) return null;
-  return version.quality;
-}
-
-function getDisplayCodecBadge(version: Torrent): string | null {
-  if (!version.codec || hasDolbyTag(version.codec)) return null;
-  return version.codec;
-}
-
-function getDisplayAudioBadge(version: Torrent): string | null {
-  if (!version.audio || hasDolbyTag(version.audio)) return null;
-  return version.audio;
-}
-
-function hasLanguageDisplay(codes: string[] | null | undefined): boolean {
-  const mapped = buildLanguageFlags(codes);
-  return mapped.flags.length > 0 || mapped.unmappedCodes.length > 0;
-}
-
-function hasHdrTag(value: string | null | undefined): boolean {
-  return Boolean(value && hdrPattern.test(value));
-}
-
-function getShowHdrBadge(version: Torrent): boolean {
-  if (!getHasHdr(version)) return false;
-  return !hasHdrTag(version.quality) && !hasHdrTag(version.codec) && !hasHdrTag(version.audio);
-}
-
-// Check if a specific version is a disc format (Blu-ray disc has index.bdmv)
-function isVersionDisc(version: Torrent): boolean {
-  if (!version.playable_file) return false;
-  const filename = version.playable_file.toLowerCase();
-  return filename.endsWith('index.bdmv') || filename.endsWith('.iso');
-}
-
 const movieGenres = computed(() => {
   if (props.item.type !== 'movies') return null;
   return (props.item.data as Movie).info?.genres;
@@ -1556,127 +1447,4 @@ function handleOpenFolder(folderPath: string) {
   gap: 8px;
 }
 
-.versions-list-sidebar .version-row {
-  padding: 10px 12px;
-}
-
-.version-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) max-content;
-  align-items: stretch;
-  column-gap: 8px;
-  row-gap: 6px;
-  padding: 12px 16px;
-  background: rgba(10, 14, 22, 0.2);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  transition: background 0.2s, border-color 0.2s;
-}
-
-.version-row:hover {
-  background: rgba(10, 14, 22, 0.28);
-  border-color: rgba(255, 255, 255, 0.2);
-}
-
-.version-row.version-best {
-  border-color: rgba(255, 255, 255, 0.1);
-  background: rgba(10, 14, 22, 0.2);
-}
-
-.version-row.version-best:hover {
-  background: rgba(10, 14, 22, 0.28);
-  border-color: rgba(255, 255, 255, 0.2);
-}
-
-.version-row.version-selectable {
-  cursor: pointer;
-}
-
-.version-row.version-selectable:focus-visible {
-  outline: 2px solid rgba(255, 255, 255, 0.85);
-  outline-offset: 2px;
-}
-
-.version-row.version-disabled {
-  cursor: not-allowed;
-  opacity: 0.75;
-}
-
-.version-main {
-  grid-column: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 6px;
-  min-width: 0;
-}
-
-.version-dolby-cell {
-  grid-column: 2;
-  display: flex;
-  align-items: stretch;
-  justify-content: flex-end;
-  min-width: 0;
-}
-
-.version-dolby {
-  align-self: stretch;
-}
-
-.btn-small {
-  padding: 6px 12px;
-  font-size: 0.8rem;
-}
-
-.version-badges {
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  gap: 6px;
-}
-
-.v-badge {
-  display: flex;
-  align-items: center;
-  font-size: 0.7rem;
-  padding: 3px 8px;
-  border-radius: 4px;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-.v-disc {
-  display: flex;
-  align-items: center;
-  font-size: 1.1rem;
-  line-height: 1;
-}
-
-.v-badge.res {
-  background: #1d4ed8;
-  color: #eff6ff;
-}
-
-.v-badge.qual {
-  background: #7c3aed;
-  color: #f5f3ff;
-}
-
-.v-badge.codec {
-  background: #0f766e;
-  color: #ecfeff;
-}
-
-.v-badge.audio {
-  background: #b45309;
-  color: #fffbeb;
-}
-
-.v-badge.hdr {
-  background: #166534;
-  color: #dcfce7;
-}
-
 </style>

frontend/src/components/ReleaseVersionCard.vue

@@ -0,0 +1,393 @@
+<template>
+  <div
+    class="version-row"
+    :class="{
+      'version-best': best,
+      'version-selectable': isSelectable,
+      'version-disabled': isDisabled,
+      'version-menu': variant === 'menu',
+      'version-with-actions': showActions,
+    }"
+    tabindex="0"
+    :title="resolvedTitle"
+    v-bind="$attrs"
+    @click="handleActivate"
+    @keydown.enter.prevent="handleActivate"
+    @keydown.space.prevent="handleActivate"
+  >
+    <div class="version-main">
+      <div class="version-badges">
+        <span v-if="torrent.resolution" class="v-badge res">{{ torrent.resolution }}</span>
+        <span v-if="displayQualityBadge" class="v-badge qual">{{ displayQualityBadge }}</span>
+        <span v-if="displayCodecBadge" class="v-badge codec">{{ displayCodecBadge }}</span>
+        <span v-if="showHdrBadge" class="v-badge hdr">HDR</span>
+        <span v-if="displayAudioBadge" class="v-badge audio">{{ displayAudioBadge }}</span>
+        <span v-if="isDisc" class="v-disc">💿</span>
+      </div>
+      <div class="version-language-flags">
+        <LanguageFlags class="language-flags-audio" :codes="torrent.audio_languages" :compact="compactFlags" />
+        <span
+          v-if="hasLanguageDisplay(torrent.audio_languages) && hasLanguageDisplay(torrent.subtitle_languages)"
+          class="language-separator"
+        >•</span>
+        <LanguageFlags class="language-flags-subs" :codes="torrent.subtitle_languages" :compact="compactFlags" />
+      </div>
+    </div>
+    <div class="version-dolby-cell">
+      <DolbyBadges
+        class="version-dolby"
+        :has-dolby-vision="hasDolbyVision"
+        :has-dolby-atmos="hasDolbyAtmos"
+        :is-hdr="hasHdr"
+      />
+    </div>
+    <div v-if="showActions" class="version-actions">
+      <button
+        class="ctx-btn ctx-btn-play"
+        tabindex="0"
+        @click.stop="emit('play')"
+        :disabled="!torrent.playable_file"
+      >▶ {{ playLabel }}</button>
+      <button
+        class="ctx-btn ctx-btn-folder"
+        tabindex="0"
+        @click.stop="emit('openFolder')"
+        :disabled="!torrent.playable_file"
+      >📁</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Torrent } from '../types';
+import LanguageFlags from './LanguageFlags.vue';
+import DolbyBadges from './DolbyBadges.vue';
+import { buildLanguageFlags } from '../utils/languageFlags';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<{
+  torrent: Torrent;
+  best?: boolean;
+  selectable?: boolean;
+  disabled?: boolean;
+  compactFlags?: boolean;
+  showActions?: boolean;
+  playLabel?: string;
+  title?: string;
+  variant?: 'default' | 'menu';
+}>(), {
+  best: false,
+  selectable: undefined,
+  disabled: undefined,
+  compactFlags: false,
+  showActions: false,
+  playLabel: 'Play',
+  title: undefined,
+  variant: 'default',
+});
+
+const emit = defineEmits<{
+  activate: [MouseEvent | KeyboardEvent];
+  play: [];
+  openFolder: [];
+}>();
+
+const dolbyTagPattern = /\b(dolby|atmos|vision|dovi|dv)\b/i;
+const dolbyVisionPattern = /\b(dolby\s*vision|dovi|\bdv\b)\b/i;
+const dolbyAtmosPattern = /\b(dolby\s*atmos|atmos)\b/i;
+const hdrPattern = /\bhdr\b|smpte\s*2084|bt\s*2020|hlg/i;
+const blurayTagPattern = /\bblu[\s.-]*ray\b/i;
+
+function hasDolbyTag(value: string | null | undefined): boolean {
+  return Boolean(value && dolbyTagPattern.test(value));
+}
+
+function hasAnyTag(
+  pattern: RegExp,
+  ...values: Array<string | null | undefined>
+): boolean {
+  return values.some((value) => Boolean(value && pattern.test(value)));
+}
+
+function hasLanguageDisplay(codes: string[] | null | undefined): boolean {
+  const mapped = buildLanguageFlags(codes);
+  return mapped.flags.length > 0 || mapped.unmappedCodes.length > 0;
+}
+
+function hasHdrTag(value: string | null | undefined): boolean {
+  return Boolean(value && hdrPattern.test(value));
+}
+
+const hasDolbyVision = computed(() => {
+  return (
+    props.torrent.has_dolby_vision === true
+    || hasAnyTag(dolbyVisionPattern, props.torrent.quality, props.torrent.codec, props.torrent.audio, props.torrent.title)
+  );
+});
+
+const hasDolbyAtmos = computed(() => {
+  return (
+    props.torrent.has_dolby_atmos === true
+    || hasAnyTag(dolbyAtmosPattern, props.torrent.quality, props.torrent.codec, props.torrent.audio, props.torrent.title)
+  );
+});
+
+const hasHdr = computed(() => {
+  return (
+    props.torrent.is_hdr === true
+    || hasAnyTag(hdrPattern, props.torrent.quality, props.torrent.codec, props.torrent.audio, props.torrent.title)
+  );
+});
+
+const displayQualityBadge = computed(() => {
+  if (!props.torrent.quality || hasDolbyTag(props.torrent.quality)) return null;
+  if (blurayTagPattern.test(props.torrent.quality) && !isDisc.value) return null;
+  return props.torrent.quality;
+});
+
+const displayCodecBadge = computed(() => {
+  if (!props.torrent.codec || hasDolbyTag(props.torrent.codec)) return null;
+  return props.torrent.codec;
+});
+
+const displayAudioBadge = computed(() => {
+  if (!props.torrent.audio || hasDolbyTag(props.torrent.audio)) return null;
+  return props.torrent.audio;
+});
+
+const showHdrBadge = computed(() => {
+  if (!hasHdr.value) return false;
+  return !hasHdrTag(props.torrent.quality) && !hasHdrTag(props.torrent.codec) && !hasHdrTag(props.torrent.audio);
+});
+
+const isDisc = computed(() => {
+  if (!props.torrent.playable_file) return false;
+  const filename = props.torrent.playable_file.toLowerCase();
+  return filename.endsWith('index.bdmv') || filename.endsWith('.iso');
+});
+
+const isSelectable = computed(() => {
+  if (props.selectable !== undefined) return props.selectable;
+  return Boolean(props.torrent.playable_file);
+});
+
+const isDisabled = computed(() => {
+  if (props.disabled !== undefined) return props.disabled;
+  return !isSelectable.value;
+});
+
+const resolvedTitle = computed(() => {
+  if (props.title !== undefined) return props.title;
+  return isSelectable.value ? 'Click to play/continue. Alt+Click to open folder.' : 'No playable file';
+});
+
+function handleActivate(event: MouseEvent | KeyboardEvent) {
+  if (!isSelectable.value || isDisabled.value) return;
+  emit('activate', event);
+}
+</script>
+
+<style scoped>
+.version-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) max-content;
+  align-items: stretch;
+  column-gap: 8px;
+  row-gap: 6px;
+  padding: 10px 12px;
+  background: rgba(10, 14, 22, 0.2);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.version-row.version-menu {
+  padding: 10px 16px;
+}
+
+.version-row.version-with-actions {
+  grid-template-columns: minmax(0, 1fr) max-content max-content;
+}
+
+.version-row:hover {
+  background: rgba(10, 14, 22, 0.28);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.version-row.version-best {
+  border-color: rgba(255, 255, 255, 0.1);
+  background: rgba(10, 14, 22, 0.2);
+}
+
+.version-row.version-best:hover {
+  background: rgba(10, 14, 22, 0.28);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.version-row.version-selectable {
+  cursor: pointer;
+}
+
+.version-row.version-selectable:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.85);
+  outline-offset: 2px;
+}
+
+.version-row.version-disabled {
+  cursor: not-allowed;
+  opacity: 0.75;
+}
+
+.version-main {
+  grid-column: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.version-dolby-cell {
+  grid-column: 2;
+  display: flex;
+  align-items: stretch;
+  justify-content: flex-end;
+  min-width: 0;
+}
+
+.version-dolby {
+  align-self: stretch;
+}
+
+.version-badges {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.v-badge {
+  display: flex;
+  align-items: center;
+  font-size: 0.7rem;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.v-disc {
+  display: flex;
+  align-items: center;
+  font-size: 1.1rem;
+  line-height: 1;
+}
+
+.v-badge.res {
+  background: #1d4ed8;
+  color: #eff6ff;
+}
+
+.v-badge.qual {
+  background: #7c3aed;
+  color: #f5f3ff;
+}
+
+.v-badge.codec {
+  background: #0f766e;
+  color: #ecfeff;
+}
+
+.v-badge.audio {
+  background: #b45309;
+  color: #fffbeb;
+}
+
+.v-badge.hdr {
+  background: #166534;
+  color: #dcfce7;
+}
+
+.version-language-flags {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.version-language-flags > .language-flags-audio {
+  flex: 0 0 auto;
+}
+
+.version-language-flags > .language-flags-subs {
+  flex: 1 1 auto;
+  min-width: 0;
+  -webkit-mask-image: linear-gradient(to right, black calc(100% - 14px), transparent);
+  mask-image: linear-gradient(to right, black calc(100% - 14px), transparent);
+}
+
+.version-language-flags > .language-flags-subs :deep(.language-flags) {
+  display: inline-flex;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.version-language-flags > .language-flags-subs :deep(.language-flag-list) {
+  width: max-content;
+  max-width: none;
+  overflow: hidden;
+}
+
+.language-separator {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 1;
+  margin: 0;
+}
+
+.version-actions {
+  grid-column: 3;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ctx-btn {
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+  border-radius: 6px;
+  padding: 6px 10px;
+  font-size: 0.78rem;
+  cursor: pointer;
+}
+
+.ctx-btn:hover:not(:disabled),
+.ctx-btn.nav-focused:not(:disabled),
+.ctx-btn:focus-visible:not(:disabled) {
+  background: rgba(255, 255, 255, 0.16);
+  border-color: rgba(255, 255, 255, 0.35);
+  outline: none;
+}
+
+.ctx-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ctx-btn-folder {
+  width: 34px;
+  text-align: center;
+  padding: 6px 0;
+}
+</style>

frontend/src/components/SeriesFullView.vue

@@ -67,7 +67,7 @@
             tabindex="0"
             v-bind="navAttrs(sIndex + 2, eIndex)"
             @click="handlePlay(episode)"
-            @keydown.enter.prevent="handlePlay(episode)"
+            @keydown.enter.prevent="handleEpisodeEnter($event, episode)"
             @mouseenter="handleEpisodeHover(`${sIndex}-${eIndex}`, true)"
             @mouseleave="handleEpisodeHover(`${sIndex}-${eIndex}`, false)"
             @contextmenu="handleContextMenu($event, episode)"
@@ -133,61 +133,53 @@
           {{ contextMenu.episode.name || `Episode ${contextMenu.episode.episode_number}` }}
         </div>
         <div v-if="Object.values(contextMenu.episode.torrents || {}).length > 0">
-          <div
+          <ReleaseVersionCard
             v-for="(torrent, index) in Object.values(contextMenu.episode.torrents || {})"
             :key="index"
             class="context-menu-version"
-          >
+            :torrent="torrent"
-            <div class="version-main">
+            variant="menu"
-              <div class="version-label">{{ getVersionLabel(torrent) }}</div>
+            compact-flags
-              <div class="version-language-flags">
+            :title="torrent.playable_file ? 'Click to play/continue. Alt+Click, Alt+Enter, or Cmd/Ctrl+E to open folder. Right-click for actions.' : 'No playable file'"
-                <LanguageFlags class="language-flags-audio" :codes="torrent.audio_languages" compact />
+            @activate="handleVersionActivate(torrent, $event)"
-                <span
+            @keydown="handleVersionShortcutKeydown($event, torrent)"
-                  v-if="hasLanguageDisplay(torrent.audio_languages) && hasLanguageDisplay(torrent.subtitle_languages)"
+            @contextmenu="handleVersionContextMenu($event, torrent)"
-                  class="language-separator"
+          />
-                >•</span>
-                <LanguageFlags class="language-flags-subs" :codes="torrent.subtitle_languages" compact />
-              </div>
-            </div>
-            <div class="version-dolby-cell">
-              <DolbyBadges
-                class="version-dolby"
-                :has-dolby-vision="getHasDolbyVision(torrent)"
-                :has-dolby-atmos="getHasDolbyAtmos(torrent)"
-                :is-hdr="getHasHdr(torrent)"
-              />
-            </div>
-            <div class="version-actions">
-              <button
-                class="ctx-btn ctx-btn-play"
-                tabindex="0"
-                @click="handlePlayVersion(torrent.playable_file)"
-                :disabled="!torrent.playable_file"
-              >▶ {{ getPlayLabel(torrent.playable_file) }}</button>
-              <button
-                class="ctx-btn ctx-btn-folder"
-                tabindex="0"
-                @click="handleOpenFolder(torrent.playable_file || '')"
-              >📁</button>
-            </div>
-          </div>
         </div>
         <div v-else class="context-menu-empty">
           No versions available
         </div>
       </div>
+      <div
+        v-if="versionActionMenu.visible && versionActionMenu.torrent"
+        class="version-action-menu"
+        :style="{ left: versionActionMenu.x + 'px', top: versionActionMenu.y + 'px' }"
+      >
+        <button
+          class="version-action-item"
+          :disabled="!versionActionMenu.torrent.playable_file"
+          @click="handlePlayVersion(versionActionMenu.torrent.playable_file)"
+        >
+          {{ getPlayLabel(versionActionMenu.torrent.playable_file) }}
+        </button>
+        <button
+          class="version-action-item"
+          :disabled="!versionActionMenu.torrent.playable_file"
+          @click="handleOpenFolder(versionActionMenu.torrent.playable_file || '')"
+        >
+          Open Folder
+        </button>
+      </div>
     </Teleport>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, nextTick, watch } from 'vue';
+import { computed, ref, nextTick, watch, onMounted, onUnmounted } from 'vue';
 import type { Series, Season, Episode, Torrent } from '../types';
 import { getCoverUrl, getVideoPreviewUrl, getVideoSourceAttributes, isSafariBrowser } from '../api';
 import { navAttrs } from '../composables/useKeyboardNavigation';
-import LanguageFlags from './LanguageFlags.vue';
+import ReleaseVersionCard from './ReleaseVersionCard.vue';
-import DolbyBadges from './DolbyBadges.vue';
-import { buildLanguageFlags } from '../utils/languageFlags';
 
 const props = defineProps<{
   series: Series;
@@ -239,88 +231,143 @@ const contextMenu = ref<{
   episode: null,
 });
 
+const versionActionMenu = ref<{
+  visible: boolean;
+  x: number;
+  y: number;
+  torrent: Torrent | null;
+}>({
+  visible: false,
+  x: 0,
+  y: 0,
+  torrent: null,
+});
+
+const releaseMenuOriginElement = ref<HTMLElement | null>(null);
+
 // Show context menu on right-click
 function handleContextMenu(event: MouseEvent, episode: Episode) {
   event.preventDefault();
+  releaseMenuOriginElement.value = event.currentTarget as HTMLElement | null;
+  openEpisodeReleaseMenu(episode, event.clientX, event.clientY);
+}
+
+function openEpisodeReleaseMenu(episode: Episode, x: number, y: number) {
+  closeVersionActionMenu();
   contextMenu.value = {
     visible: true,
-    x: event.clientX,
+    x,
-    y: event.clientY,
+    y,
     episode,
   };
   // Add Escape key listener (capturing phase to intercept before other handlers)
   nextTick(() => {
     document.addEventListener('keydown', handleContextMenuKeydown, true);
-    // Focus first play button in the menu
+    // Focus first selectable version card.
-    const firstBtn = document.querySelector('.context-menu .ctx-btn-play:not(:disabled)') as HTMLElement;
+    const firstCard = document.querySelector('.context-menu .version-row.version-selectable') as HTMLElement;
-    if (firstBtn) {
+    if (firstCard) {
-      firstBtn.focus();
+      firstCard.focus();
-      firstBtn.classList.add('nav-focused');
     }
   });
 }
 
+function openEpisodeReleaseMenuFromElement(episode: Episode, element: HTMLElement | null) {
+  releaseMenuOriginElement.value = element;
+  if (!element) {
+    openEpisodeReleaseMenu(episode, window.innerWidth / 2, window.innerHeight / 2);
+    return;
+  }
+  const rect = element.getBoundingClientRect();
+  openEpisodeReleaseMenu(episode, rect.left + rect.width / 2, rect.top + rect.height / 2);
+}
+
 // Handle Escape and arrow keys in context menu (capturing phase to intercept before global handler)
 function handleContextMenuKeydown(event: KeyboardEvent) {
-  if (!contextMenu.value.visible || !contextMenu.value.episode) return;
+  if (!contextMenu.value.visible) return;
+
+  const popupFocusable = getPopupFocusableElements();
+
+  if (event.key === 'Tab') {
+    if (popupFocusable.length === 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+
+    const currentIndex = popupFocusable.findIndex((el) => el === document.activeElement);
+    const delta = event.shiftKey ? -1 : 1;
+    const nextIndex = currentIndex < 0
+      ? 0
+      : (currentIndex + delta + popupFocusable.length) % popupFocusable.length;
+    popupFocusable[nextIndex].focus();
+    return;
+  }
+
+  if (event.key === 'ArrowDown' || event.key === 'ArrowRight' || event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+    if (popupFocusable.length === 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+
+    const currentIndex = popupFocusable.findIndex((el) => el === document.activeElement);
+    const delta = (event.key === 'ArrowDown' || event.key === 'ArrowRight') ? 1 : -1;
+    const nextIndex = currentIndex < 0
+      ? 0
+      : (currentIndex + delta + popupFocusable.length) % popupFocusable.length;
+    popupFocusable[nextIndex].focus();
+    return;
+  }
 
   if (event.key === 'Escape') {
     event.preventDefault();
     event.stopPropagation();
+    if (versionActionMenu.value.visible) {
+      closeVersionActionMenu();
+      return;
+    }
     closeContextMenu();
-    return;
   }
+}
 
-  // Handle arrow key navigation within the menu
+function getPopupFocusableElements(): HTMLElement[] {
-  if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+  const releaseItems = Array.from(
-    event.preventDefault();
+    document.querySelectorAll<HTMLElement>('.context-menu .version-row.version-selectable')
-    event.stopPropagation();
+  );
-
+  const actionItems = versionActionMenu.value.visible
-    const menu = document.querySelector('.context-menu');
+    ? Array.from(document.querySelectorAll<HTMLElement>('.version-action-menu .version-action-item:not(:disabled)'))
-    if (!menu) return;
+    : [];
-
+  return [...releaseItems, ...actionItems];
-    const buttons = Array.from(menu.querySelectorAll('.ctx-btn:not(:disabled)')) as HTMLElement[];
-    if (buttons.length === 0) return;
-
-    const currentIndex = buttons.findIndex(btn => btn === document.activeElement);
-    let nextIndex = currentIndex;
-
-    // Each row has 2 buttons (play, folder), navigate accordingly
-    const buttonsPerRow = 2;
-
-    switch (event.key) {
-      case 'ArrowRight':
-        // Move to next button (play -> folder)
-        nextIndex = Math.min(currentIndex + 1, buttons.length - 1);
-        break;
-      case 'ArrowLeft':
-        // Move to previous button (folder -> play)
-        nextIndex = Math.max(currentIndex - 1, 0);
-        break;
-      case 'ArrowDown':
-        // Move to same column in next row
-        nextIndex = Math.min(currentIndex + buttonsPerRow, buttons.length - 1);
-        break;
-      case 'ArrowUp':
-        // Move to same column in previous row
-        nextIndex = Math.max(currentIndex - buttonsPerRow, 0);
-        break;
-    }
-
-    if (nextIndex >= 0 && nextIndex < buttons.length) {
-      buttons[nextIndex].focus();
-      buttons[nextIndex].classList.add('nav-focused');
-      if (currentIndex >= 0 && currentIndex !== nextIndex) {
-        buttons[currentIndex].classList.remove('nav-focused');
-      }
-    }
-  }
 }
 
 // Close context menu
 function closeContextMenu() {
+  closeVersionActionMenu();
   contextMenu.value.visible = false;
   document.removeEventListener('keydown', handleContextMenuKeydown, true);
+  nextTick(() => {
+    releaseMenuOriginElement.value?.focus();
+  });
+}
+
+function closeVersionActionMenu() {
+  versionActionMenu.value.visible = false;
+  versionActionMenu.value.torrent = null;
+}
+
+function handleGamepadAction(event: Event) {
+  const actionEvent = event as CustomEvent<{ action?: string }>;
+  if (actionEvent.detail?.action !== 'menu') return;
+
+  const active = document.activeElement as HTMLElement | null;
+  if (!active || !active.classList.contains('episode-tile')) return;
+
+  const row = parseInt(active.getAttribute('data-nav-row') || '-1', 10);
+  const col = parseInt(active.getAttribute('data-nav-col') || '-1', 10);
+  if (row < 2 || col < 0) return;
+
+  const season = props.series.seasons?.[row - 2];
+  const episode = season?.episodes?.[col];
+  if (!episode) return;
+
+  actionEvent.preventDefault();
+  openEpisodeReleaseMenuFromElement(episode, active);
 }
 
 // Play specific version
@@ -328,6 +375,7 @@ function handlePlayVersion(filePath: string | null) {
   if (filePath) {
     emit('play', filePath);
   }
+  closeVersionActionMenu();
   closeContextMenu();
 }
 
@@ -337,64 +385,44 @@ function getPlayLabel(filePath: string | null): string {
 
 // Open folder for a version
 function handleOpenFolder(folderPath: string) {
+  if (!folderPath) return;
   emit('openFolder', folderPath);
+  closeVersionActionMenu();
   closeContextMenu();
 }
 
-const dolbyTagPattern = /\b(dolby|atmos|vision|dovi|dv)\b/i;
+function handleVersionActivate(torrent: Torrent, event: MouseEvent | KeyboardEvent) {
-const dolbyVisionPattern = /\b(dolby\s*vision|dovi|\bdv\b)\b/i;
+  if (!torrent.playable_file) return;
-const dolbyAtmosPattern = /\b(dolby\s*atmos|atmos)\b/i;
+  if (event.altKey) {
-const hdrPattern = /\bhdr\b|smpte\s*2084|bt\s*2020|hlg/i;
+    handleOpenFolder(torrent.playable_file);
-
+    return;
-function hasDolbyTag(value: string | null | undefined): boolean {
+  }
-  return Boolean(value && dolbyTagPattern.test(value));
+  handlePlayVersion(torrent.playable_file);
 }
 
-function hasAnyTag(
+function handleVersionShortcutKeydown(event: KeyboardEvent, torrent: Torrent) {
-  pattern: RegExp,
+  if (!torrent.playable_file) return;
-  ...values: Array<string | null | undefined>
+  const key = event.key.toLowerCase();
-): boolean {
+  if (key === 'e' && (event.metaKey || event.ctrlKey)) {
-  return values.some((value) => Boolean(value && pattern.test(value)));
+    event.preventDefault();
+    event.stopPropagation();
+    handleOpenFolder(torrent.playable_file);
+  }
 }
 
-function getHasDolbyVision(torrent: Torrent): boolean {
+function handleVersionContextMenu(event: MouseEvent, torrent: Torrent) {
-  return (
+  event.preventDefault();
-    torrent.has_dolby_vision === true
+  event.stopPropagation();
-    || hasAnyTag(dolbyVisionPattern, torrent.quality, torrent.codec, torrent.audio, torrent.title)
+  versionActionMenu.value = {
-  );
+    visible: true,
-}
+    x: event.clientX,
-
+    y: event.clientY,
-function getHasDolbyAtmos(torrent: Torrent): boolean {
+    torrent,
-  return (
+  };
-    torrent.has_dolby_atmos === true
+  nextTick(() => {
-    || hasAnyTag(dolbyAtmosPattern, torrent.quality, torrent.codec, torrent.audio, torrent.title)
+    const firstAction = document.querySelector('.version-action-menu .version-action-item:not(:disabled)') as HTMLElement | null;
-  );
+    firstAction?.focus();
-}
+  });
-
-function getHasHdr(torrent: Torrent): boolean {
-  return (
-    torrent.is_hdr === true
-    || hasAnyTag(hdrPattern, torrent.quality, torrent.codec, torrent.audio, torrent.title)
-  );
-}
-
-function hasLanguageDisplay(codes: string[] | null | undefined): boolean {
-  const mapped = buildLanguageFlags(codes);
-  return mapped.flags.length > 0 || mapped.unmappedCodes.length > 0;
-}
-
-// Get version display label
-function getVersionLabel(torrent: Torrent): string {
-  const parts: string[] = [];
-  if (torrent.resolution) parts.push(torrent.resolution);
-  if (torrent.quality && !hasDolbyTag(torrent.quality)) parts.push(torrent.quality);
-  if (torrent.codec && !hasDolbyTag(torrent.codec)) parts.push(torrent.codec);
-  if (torrent.audio && !hasDolbyTag(torrent.audio)) parts.push(torrent.audio);
-  const hasExistingHdr = [torrent.quality, torrent.codec, torrent.audio].some(
-    (value) => Boolean(value && hdrPattern.test(value))
-  );
-  if (getHasHdr(torrent) && !hasExistingHdr) parts.push('HDR');
-  return parts.length > 0 ? parts.join(' • ') : 'Unknown';
 }
 
 // Video refs for hover effects
@@ -540,6 +568,22 @@ function handlePlay(episode: Episode) {
     emit('play', playableFile);
   }
 }
+
+function handleEpisodeEnter(event: KeyboardEvent, episode: Episode) {
+  if (event.altKey || event.metaKey || event.ctrlKey) {
+    openEpisodeReleaseMenuFromElement(episode, event.currentTarget as HTMLElement | null);
+    return;
+  }
+  handlePlay(episode);
+}
+
+onMounted(() => {
+  window.addEventListener('mediahive:gamepad-action', handleGamepadAction as EventListener);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('mediahive:gamepad-action', handleGamepadAction as EventListener);
+});
 </script>
 
 <style scoped>
@@ -983,169 +1027,68 @@ function handlePlay(episode: Episode) {
   min-width: 280px;
   max-width: 400px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
-  overflow: hidden;
+  overflow: visible;
+  padding: 8px;
 }
 
 .context-menu-header {
-  padding: 12px 16px;
+  padding: 10px 12px;
   font-weight: 600;
   font-size: 0.9rem;
   background: rgba(255, 255, 255, 0.05);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  margin-bottom: 8px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .context-menu-version {
-  display: grid;
+  margin-bottom: 6px;
-  grid-template-columns: minmax(0, 1fr) max-content max-content;
-  align-items: stretch;
-  padding: 10px 16px;
-  column-gap: 8px;
-  row-gap: 6px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  transition: background-color 0.15s ease;
 }
 
 .context-menu-version:last-child {
-  border-bottom: none;
+  margin-bottom: 0;
-}
-
-.version-label {
-  font-size: 0.8rem;
-  color: rgba(255, 255, 255, 0.8);
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-}
-
-.version-main {
-  grid-column: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 6px;
-  min-width: 0;
-}
-
-.version-dolby-cell {
-  grid-column: 2;
-  display: flex;
-  align-items: stretch;
-  justify-content: flex-end;
-  min-width: 0;
-}
-
-.version-dolby {
-  align-self: stretch;
-}
-
-.version-language-flags {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  min-width: 0;
-}
-
-.version-language-flags > .language-flags-audio {
-  flex: 0 0 auto;
-}
-
-.version-language-flags > .language-flags-subs {
-  flex: 1 1 auto;
-  min-width: 0;
-  -webkit-mask-image: linear-gradient(to right, black calc(100% - 14px), transparent);
-  mask-image: linear-gradient(to right, black calc(100% - 14px), transparent);
-}
-
-.version-language-flags > .language-flags-subs :deep(.language-flags) {
-  display: inline-flex;
-  max-width: 100%;
-  overflow: hidden;
-}
-
-.version-language-flags > .language-flags-subs :deep(.language-flag-list) {
-  width: max-content;
-  max-width: none;
-  overflow: hidden;
-}
-
-.language-separator {
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 0.9rem;
-  font-weight: 700;
-  line-height: 1;
-  margin: 0;
-}
-
-.version-actions {
-  grid-column: 3;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-.ctx-btn {
-  padding: 6px 12px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.75rem;
-  font-weight: 600;
-  transition: all 0.2s ease;
-  position: relative;
-  outline: none;
-}
-
-/* Blinking animation for button focus */
-@keyframes btn-outline-blink {
-  0%, 100% {
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
-  }
-  50% {
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
-  }
-}
-
-.ctx-btn-play {
-  background: #e50914;
-  color: white;
-}
-
-.ctx-btn-play:hover:not(:disabled),
-.ctx-btn-play.nav-focused:not(:disabled) {
-  background: #f40612;
-  animation: btn-outline-blink 1s ease-in-out infinite;
-}
-
-.ctx-btn-play:disabled {
-  background: rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.4);
-  cursor: not-allowed;
-}
-
-.ctx-btn-folder {
-  background: rgba(255, 255, 255, 0.1);
-  color: white;
-}
-
-.ctx-btn-folder:hover,
-.ctx-btn-folder.nav-focused {
-  background: rgba(255, 255, 255, 0.2);
-  animation: btn-outline-blink 1s ease-in-out infinite;
 }
 
 .context-menu-empty {
-  padding: 16px;
+  padding: 12px;
   text-align: center;
   color: rgba(255, 255, 255, 0.5);
   font-size: 0.85rem;
 }
+
+.version-action-menu {
+  position: fixed;
+  z-index: 1001;
+  min-width: 180px;
+  background: rgba(18, 20, 28, 0.98);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 8px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
+  overflow: hidden;
+}
+
+.version-action-item {
+  width: 100%;
+  border: none;
+  background: transparent;
+  color: #fff;
+  text-align: left;
+  padding: 10px 12px;
+  font-size: 0.82rem;
+  cursor: pointer;
+}
+
+.version-action-item:hover:not(:disabled),
+.version-action-item:focus-visible:not(:disabled) {
+  background: rgba(255, 255, 255, 0.12);
+  outline: none;
+}
+
+.version-action-item:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
 </style>

frontend/src/composables/useGamepadNavigation.ts

@@ -1,9 +1,9 @@
-type GamepadAction = 'up' | 'down' | 'left' | 'right' | 'select' | 'back';
+type GamepadAction = 'up' | 'down' | 'left' | 'right' | 'select' | 'back' | 'menu';
 
 const GAMEPAD_AXIS_THRESHOLD = 0.55;
 const GAMEPAD_REPEAT_MS = 180;
 
-const KEY_BY_ACTION: Record<GamepadAction, string> = {
+const KEY_BY_ACTION: Partial<Record<GamepadAction, string>> = {
   up: 'ArrowUp',
   down: 'ArrowDown',
   left: 'ArrowLeft',
@@ -19,6 +19,7 @@ const gamepadPressedState: Record<GamepadAction, boolean> = {
   right: false,
   select: false,
   back: false,
+  menu: false,
 };
 
 const gamepadLastTriggerAt: Record<GamepadAction, number> = {
@@ -28,6 +29,7 @@ const gamepadLastTriggerAt: Record<GamepadAction, number> = {
   right: 0,
   select: 0,
   back: 0,
+  menu: 0,
 };
 
 let gamepadFrameId: number | null = null;
@@ -61,7 +63,10 @@ function applyGamepadAction(action: GamepadAction, isPressed: boolean, now: numb
   const shouldContinueWithKeyboard = window.dispatchEvent(actionEvent);
   if (!shouldContinueWithKeyboard) return;
 
-  dispatchKey(KEY_BY_ACTION[action]);
+  const key = KEY_BY_ACTION[action];
+  if (key) {
+    dispatchKey(key);
+  }
 }
 
 function resetPressedState() {
@@ -71,6 +76,7 @@ function resetPressedState() {
   gamepadPressedState.right = false;
   gamepadPressedState.select = false;
   gamepadPressedState.back = false;
+  gamepadPressedState.menu = false;
 }
 
 function pollGamepad() {
@@ -85,6 +91,7 @@ function pollGamepad() {
     let right = false;
     let select = false;
     let back = false;
+    let menu = false;
 
     for (const gamepad of connectedGamepads) {
       const axisX = gamepad.axes[0] ?? 0;
@@ -98,6 +105,8 @@ function pollGamepad() {
       // Xbox mapping on standard gamepads: A=0, B=1
       select = select || Boolean(gamepad.buttons[0]?.pressed);
       back = back || Boolean(gamepad.buttons[1]?.pressed);
+      // Y/Triangle button opens contextual release list where supported.
+      menu = menu || Boolean(gamepad.buttons[3]?.pressed);
     }
 
     applyGamepadAction('up', up, now);
@@ -106,6 +115,7 @@ function pollGamepad() {
     applyGamepadAction('right', right, now);
     applyGamepadAction('select', select, now);
     applyGamepadAction('back', back, now);
+    applyGamepadAction('menu', menu, now);
   } else {
     resetPressedState();
   }