jellyfin/jellyfin-vue
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-vue.git synced 2024-12-02 19:16:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: switch from VImg to JImg

Browse Source 
Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
This commit is contained in:
Fernando Fernández 2024-04-04 20:47:24 +02:00
parent 1d20465bbf
commit 3cf776d7e9
12 changed files with 54 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/.eslintrc.cjs
View File

@ -65,6 +65,10 @@ module.exports = {
'file-progress'
],
rules: {
/**
* See https://typescript-eslint.io/troubleshooting/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
*/
'no-undef': 'off',
'unicorn/import-style': 'off',
'@stylistic/object-curly-spacing': ['error', 'always'],
'@stylistic/semi': ['error', 'always'],

9
frontend/src/components/Item/Metadata/ImageEditor.vue
View File

@ -14,9 +14,7 @@
<VCard
class="ma-2"
variant="outlined">
<VImg
:src="imageFormat(item)"
:aspect-ratio="getContainerAspectRatioForImageType(item.ImageType)" />
<JImg :src="imageFormat(item)" />
<div class="text-center text-subtitle-1">
{{ item.ImageType }}
</div>
@ -62,9 +60,7 @@
<VCard
class="ma-2"
variant="outlined">
<VImg
:src="imageFormat(item)"
:aspect-ratio="getContainerAspectRatioForImageType(item.ImageType)" />
<JImg :src="imageFormat(item)" />
<div class="text-center text-subtitle-1">
{{ item.ImageType }}
</div>
@ -108,7 +104,6 @@ import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { watchImmediate } from '@vueuse/core';
import {
getContainerAspectRatioForImageType,
getImageInfo
} from '@/utils/images';
import { remote } from '@/plugins/remote';

6
frontend/src/components/Item/Metadata/ImageSearch.vue
View File

@ -67,10 +67,9 @@
sm="6"
cols="12">
<VCard class="ma-2">
<VImg
<JImg
v-if="item.Url"
:src="item.Url"
:aspect-ratio="getContainerAspectRatioForImageType(item.Type)" />
:src="item.Url" />
<div class="text-center text-truncate text-subtitle-1 mt-2">
{{ item.ProviderName }}
</div>
@ -122,7 +121,6 @@ import {
import { getRemoteImageApi } from '@jellyfin/sdk/lib/utils/api/remote-image-api';
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { getContainerAspectRatioForImageType } from '@/utils/images';
import { getLocaleName } from '@/utils/i18n';
import { remote } from '@/plugins/remote';

16
frontend/src/components/Item/Metadata/MetadataEditor.vue
View File

@ -150,19 +150,21 @@
@click="onPersonEdit(item)">
<template #prepend>
<VAvatar>
<VImg
<JImg
v-if="item.Id && item.PrimaryImageTag"
:src="
remote.sdk.api?.getItemImageUrl(
item.Id,
ImageType.Primary
)
" />
<VIcon
v-else
class="bg-grey-darken-3">
<IMdiAccount />
</VIcon>
">
<template #placeholder>
<VIcon
class="bg-grey-darken-3">
<IMdiAccount />
</VIcon>
</template>
</JImg>
</VAvatar>
</template>
<template #append>

19
frontend/src/components/Item/Metadata/PersonEditor.vue
View File

@ -12,16 +12,17 @@
<VAvatar
size="160"
class="ml-2">
<VImg
v-if="person?.Id && person?.PrimaryImageTag"
<JImg
:src="
$remote.sdk.api?.getItemImageUrl(person.Id, ImageType.Primary)
" />
<VIcon
v-else
class="bg-grey-darken-3">
<IMdiAccount />
</VIcon>
person?.Id && $remote.sdk.api?.getItemImageUrl(person.Id, ImageType.Primary)
">
<template #placeholder>
<VIcon
class="bg-grey-darken-3">
<IMdiAccount />
</VIcon>
</template>
</JImg>
</VAvatar>
</VCol>
<VCol>

10
frontend/src/components/Layout/AppBar/Buttons/UserButton.vue
View File

@ -11,12 +11,10 @@
density="compact">
<VListItem>
<template #prepend>
<VAvatar>
<UserImage
:user="auth.currentUser"
:size="40"
rounded />
</VAvatar>
<UserImage
:user="auth.currentUser"
:size="40"
rounded />
</template>
<template #title>
<VListItemTitle class="text-body-1">

2
frontend/src/components/Layout/Carousel/Item/ItemsCarouselTitle.vue
View File

@ -3,7 +3,7 @@
<RouterLink
v-if="logo && logoLink"
:to="logoLink">
<VImg
<JImg
class="mb-2"
data-swiper-parallax="-300"
:style="{

9
frontend/src/components/Layout/Images/UserImage.vue
View File

@ -1,9 +1,10 @@
<template>
<VAvatar :size="size">
<VImg
<JImg
:src="url"
:width="size"
cover>
:transition-props="{
mode: 'out-in'
}">
<template #placeholder>
<VAvatar
color="primary"
@ -13,7 +14,7 @@
</VIcon>
</VAvatar>
</template>
</VImg>
</JImg>
</VAvatar>
</template>

27
frontend/src/components/lib/JImg.vue
View File

@ -7,13 +7,15 @@
:href="src"
@load="onLoad"
@error="onError" />
<JFadeTransition>
<component
:is="props.transitionProps ? JTransition : JNoop"
v-bind="isObj(props.transitionProps) ? props.transitionProps : undefined">
<component
:is="type"
v-if="shown"
key="1"
class="j-img"
v-bind="$attrs"
v-bind="mergeProps($props, $attrs)"
:src="type === 'img' ? src : undefined">
<slot />
</component>
@ -31,7 +33,7 @@
key="4"
name="error" />
</template>
</JFadeTransition>
</component>
</template>
<slot
v-else-if="$slots.placeholder"
@ -40,7 +42,10 @@
</template>
<script setup lang="ts">
import { computed, shallowRef, watch } from 'vue';
import { computed, shallowRef, watch, type ImgHTMLAttributes, mergeProps } from 'vue';
import { isObj } from '@/utils/validation';
import JTransition, { type JTransitionProps } from '@/components/lib/JTransition.vue';
import JNoop from '@/components/lib/JNoop.vue';
/**
* In this component, we use a link element for image preload.
@ -49,7 +54,7 @@ import { computed, shallowRef, watch } from 'vue';
* Given the img at loading is v-show'ed to false (display: none), the load events doesn't trigger either
*/
interface Props {
interface Props extends BetterOmit<ImgHTMLAttributes, 'src'> {
src?: string | null;
/**
* Cover the parent area. This renders the component as a div
@ -60,14 +65,14 @@ interface Props {
* updated in place without showing any of the slots.
*/
once?: boolean;
/**
* Transition between the non-default slot and the image. Uses JTransition with its
* default values (which you can override by passing this prop). If passed false, disables de transition completely.
*/
transitionProps?: JTransitionProps | boolean;
}
defineOptions({
inheritAttrs: false
});
const props = defineProps<Props>();
const props = withDefaults(defineProps<Props>(), { transitionProps: true });
const loading = shallowRef(true);
const error = shallowRef(false);

2
frontend/src/pages/settings/index.vue
View File

@ -12,7 +12,7 @@
systemInfo &&
$remote.auth.currentUser?.Policy?.IsAdministrator
">
<VImg
<JImg
class="logo"
src="/icon.png"
:alt="$t('jellyfinLogo')" />

13
frontend/src/utils/images.ts
View File

@ -131,19 +131,6 @@ export function getBlurhash(
}
}
/**
* Returns the aspect ratio that should be use
*/
export function getContainerAspectRatioForImageType(
imageType?: ImageType
): number {
if (imageType === ImageType.Backdrop) {
return 1.777_777_778;
}
return 0.666_666_667;
}
/**
* Gets the desired aspect ratio based on card shape
* @param shape

1
frontend/types/global/components.d.ts vendored
View File

@ -175,7 +175,6 @@ declare module 'vue' {
VFooter: typeof import('vuetify/components')['VFooter']
VForm: typeof import('vuetify/components')['VForm']
VIcon: typeof import('vuetify/components')['VIcon']
VImg: typeof import('vuetify/components')['VImg']
VirtualGrid: typeof import('./../../src/components/Layout/VirtualGrid/VirtualGrid.vue')['default']
VItemGroup: typeof import('vuetify/components')['VItemGroup']
VList: typeof import('vuetify/components')['VList']