feat(ui): add Blu-ray disc logo badge for disc releases
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
@@ -22,7 +22,6 @@
|
|||||||
<span v-if="displayCodecBadge" class="v-badge codec">{{ displayCodecBadge }}</span>
|
<span v-if="displayCodecBadge" class="v-badge codec">{{ displayCodecBadge }}</span>
|
||||||
<span v-if="showHdrBadge" class="v-badge hdr">HDR</span>
|
<span v-if="showHdrBadge" class="v-badge hdr">HDR</span>
|
||||||
<span v-if="displayAudioBadge" class="v-badge audio">{{ displayAudioBadge }}</span>
|
<span v-if="displayAudioBadge" class="v-badge audio">{{ displayAudioBadge }}</span>
|
||||||
<span v-if="isDisc" class="v-disc">💿</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="version-language-flags">
|
<div class="version-language-flags">
|
||||||
<LanguageFlags class="language-flags-audio" :codes="torrent.audio_languages" :compact="compactFlags" />
|
<LanguageFlags class="language-flags-audio" :codes="torrent.audio_languages" :compact="compactFlags" />
|
||||||
@@ -34,6 +33,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="version-dolby-cell">
|
<div class="version-dolby-cell">
|
||||||
|
<img
|
||||||
|
v-if="showBlurayLogo"
|
||||||
|
class="version-bluray-logo"
|
||||||
|
:src="blurayLogoUrl"
|
||||||
|
alt="Blu-ray"
|
||||||
|
>
|
||||||
<DolbyBadges
|
<DolbyBadges
|
||||||
class="version-dolby"
|
class="version-dolby"
|
||||||
:has-dolby-vision="hasDolbyVision"
|
:has-dolby-vision="hasDolbyVision"
|
||||||
@@ -64,6 +69,7 @@ import type { Torrent } from '../types';
|
|||||||
import LanguageFlags from './LanguageFlags.vue';
|
import LanguageFlags from './LanguageFlags.vue';
|
||||||
import DolbyBadges from './DolbyBadges.vue';
|
import DolbyBadges from './DolbyBadges.vue';
|
||||||
import { buildLanguageFlags } from '../utils/languageFlags';
|
import { buildLanguageFlags } from '../utils/languageFlags';
|
||||||
|
import blurayLogoUrl from '../assets/bluray.webp';
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
@@ -143,9 +149,28 @@ const hasHdr = computed(() => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
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 showBlurayLogo = computed(() => {
|
||||||
|
if (!isDisc.value) return false;
|
||||||
|
const filename = (props.torrent.playable_file || '').toLowerCase();
|
||||||
|
if (filename.endsWith('index.bdmv')) return true;
|
||||||
|
return hasAnyTag(
|
||||||
|
blurayTagPattern,
|
||||||
|
props.torrent.quality,
|
||||||
|
props.torrent.codec,
|
||||||
|
props.torrent.audio,
|
||||||
|
props.torrent.title,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
const displayQualityBadge = computed(() => {
|
const displayQualityBadge = computed(() => {
|
||||||
if (!props.torrent.quality || hasDolbyTag(props.torrent.quality)) return null;
|
if (!props.torrent.quality || hasDolbyTag(props.torrent.quality)) return null;
|
||||||
if (blurayTagPattern.test(props.torrent.quality) && !isDisc.value) return null;
|
if (blurayTagPattern.test(props.torrent.quality)) return null;
|
||||||
return props.torrent.quality;
|
return props.torrent.quality;
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -164,12 +189,6 @@ const showHdrBadge = computed(() => {
|
|||||||
return !hasHdrTag(props.torrent.quality) && !hasHdrTag(props.torrent.codec) && !hasHdrTag(props.torrent.audio);
|
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(() => {
|
const isSelectable = computed(() => {
|
||||||
if (props.selectable !== undefined) return props.selectable;
|
if (props.selectable !== undefined) return props.selectable;
|
||||||
return Boolean(props.torrent.playable_file);
|
return Boolean(props.torrent.playable_file);
|
||||||
@@ -258,6 +277,7 @@ function handleActivate(event: MouseEvent | KeyboardEvent) {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
gap: 6px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -265,6 +285,14 @@ function handleActivate(event: MouseEvent | KeyboardEvent) {
|
|||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.version-bluray-logo {
|
||||||
|
align-self: center;
|
||||||
|
width: auto;
|
||||||
|
height: 22px;
|
||||||
|
object-fit: contain;
|
||||||
|
filter: drop-shadow(0 0 0.4px rgba(0, 0, 0, 0.5));
|
||||||
|
}
|
||||||
|
|
||||||
.version-badges {
|
.version-badges {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
@@ -282,13 +310,6 @@ function handleActivate(event: MouseEvent | KeyboardEvent) {
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.v-disc {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-badge.res {
|
.v-badge.res {
|
||||||
background: #1d4ed8;
|
background: #1d4ed8;
|
||||||
color: #eff6ff;
|
color: #eff6ff;
|
||||||
|
|||||||
Reference in New Issue
Block a user