jellyfin/jellyfin-vue
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-vue.git synced 2024-11-30 17:51:14 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(JSafeHtml): create and use component (#2312)

Browse Source
This commit is contained in:
Fernando Fernández 2024-04-18 12:32:25 +02:00 committed by GitHub
parent 69f987468b
commit 3149266062
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 32 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/Dialogs/ConfirmDialog.vue
View File

@ -16,11 +16,10 @@
</VCardSubtitle>
<VDivider />
<!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
<VCardText
class="d-flex text-center align-center justify-center"
v-html="sanitizeHtml(innerHtml)" />
<!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
class="d-flex text-center align-center justify-center">
<JSafeHtml :html="innerHtml" />
</VCardText>
<VCardActions class="align-center justify-center">
<VBtn
variant="elevated"
@ -45,7 +44,6 @@
import { reactive, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useConfirmDialog as vUseConfirmDialog } from '@vueuse/core';
import { sanitizeHtml } from '@/utils/html';
interface ConfirmDialogState {
title: string;

16
frontend/src/components/lib/JSafeHtml.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<span v-html="sanitizeHtml(html, markdown)" />
</template>
<script setup lang="ts">
import { sanitizeHtml } from '@/utils/html';
defineOptions({
inheritAttrs: false
});
defineProps<{
html: string
markdown?: boolean
}>();
</script>

9
frontend/src/pages/artist/[itemId].vue
View File

@ -117,13 +117,11 @@
<VCol
cols="12"
md="7">
<!-- eslint-disable vue/no-v-html -
Output is properly sanitized using sanitizeHtml -->
<span
v-if="item.Overview"
class="item-overview"
v-html="sanitizeHtml(item.Overview, true)" />
<!-- eslint-enable vue/no-v-html -->
class="item-overview">
<JSafeHtml :html="item.Overview" markdown />
</span>
</VCol>
</VCol>
</VRow>
@ -158,7 +156,6 @@ import { useRoute } from 'vue-router/auto';
import { msToTicks } from '@/utils/time';
import { defaultSortOrder as sortBy } from '@/utils/items';
import { getBlurhash } from '@/utils/images';
import { sanitizeHtml } from '@/utils/html';
import { useBaseItem } from '@/composables/apis';
const SINGLE_MAX_LENGTH_MS = 600_000;

9
frontend/src/pages/item/[itemId].vue
View File

@ -258,13 +258,11 @@
class="text-subtitle-1 text-truncate">
{{ item.Taglines[0] }}
</p>
<!-- eslint-disable vue/no-v-html -
Output is properly sanitized using sanitizeHtml -->
<p
v-if="item.Overview"
class="item-overview"
v-html="sanitizeHtml(item.Overview, true)" />
<!-- eslint-enable vue/no-v-html -->
class="item-overview">
<JSafeHtml :html="item.Overview" markdown />
</p>
</div>
</VCol>
</VRow>
@ -309,7 +307,6 @@ import { computed, ref } from 'vue';
import { useRoute } from 'vue-router/auto';
import { getItemDetailsLink, getMediaStreams } from '@/utils/items';
import { getBlurhash } from '@/utils/images';
import { sanitizeHtml } from '@/utils/html';
import { getItemizedSelect } from '@/utils/forms';
import { useBaseItem } from '@/composables/apis';

9
frontend/src/pages/person/[itemId].vue
View File

@ -101,13 +101,11 @@
<VCol
cols="12"
md="7">
<!-- eslint-disable vue/no-v-html -
Output is properly sanitized using sanitizeHtml -->
<span
v-if="item.Overview"
class="item-overview"
v-html="sanitizeHtml(item.Overview, true)" />
<!-- eslint-enable vue/no-v-html -->
class="item-overview">
<JSafeHtml :html="item.Overview" markdown />
</span>
</VCol>
<VCol
cols="12"
@ -179,7 +177,6 @@ import { computed, ref } from 'vue';
import { useRoute } from 'vue-router/auto';
import { defaultSortOrder as sortBy } from '@/utils/items';
import { getBlurhash } from '@/utils/images';
import { sanitizeHtml } from '@/utils/html';
import { useDateFns } from '@/composables/use-datefns';
import { useBaseItem } from '@/composables/apis';

9
frontend/src/pages/series/[itemId].vue
View File

@ -142,13 +142,11 @@
class="text-subtitle-1 text-truncate">
{{ item.Taglines[0] }}
</p>
<!-- eslint-disable vue/no-v-html -
Output is properly sanitized using sanitizeHtml -->
<p
v-if="item.Overview"
class="item-overview"
v-html="sanitizeHtml(item.Overview, true)" />
<!-- eslint-enable vue/no-v-html -->
class="item-overview">
<JSafeHtml :html="item.Overview" markdown />
</p>
</div>
</VCol>
</VRow>
@ -191,7 +189,6 @@ import { computed } from 'vue';
import { useRoute } from 'vue-router/auto';
import { getItemDetailsLink } from '@/utils/items';
import { getBlurhash } from '@/utils/images';
import { sanitizeHtml } from '@/utils/html';
import { useBaseItem } from '@/composables/apis';
const route = useRoute('/series/[itemId]');

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

@ -99,6 +99,7 @@ declare module 'vue' {
JHover: typeof import('./../../src/components/lib/JHover.vue')['default']
JImg: typeof import('./../../src/components/lib/JImg.vue')['default']
JNoop: typeof import('./../../src/components/lib/JNoop.vue')['default']
JSafeHtml: typeof import('./../../src/components/lib/JSafeHtml.vue')['default']
JTransition: typeof import('./../../src/components/lib/JTransition.vue')['default']
LikeButton: typeof import('./../../src/components/Buttons/LikeButton.vue')['default']
LoadingIndicator: typeof import('./../../src/components/System/LoadingIndicator.vue')['default']