Arcadia-Solutions · FrenchGithubUser · Apr 30, 2025 · Apr 30, 2025 · Apr 30, 2025 · Apr 30, 2025
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -18,6 +18,8 @@
     "check-format": "prettier --check src"
   },
   "dependencies": {
+    "@bbob/html": "^4.2.0",
+    "@bbob/preset-html5": "^4.2.0",
     "@primeuix/themes": "^1.0.0",
     "@primevue/forms": "^4.3.3",
     "axios": "^1.8.3",

diff --git a/frontend/src/components/BBCodeRenderer.vue b/frontend/src/components/BBCodeRenderer.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="bbcode-content" v-html="parsedContent"></div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { parseBBCode } from '@/services/bbcode'
+
+const props = defineProps<{
+  content: string | null | undefined
+}>()
+
+const parsedContent = computed(() => {
+  return parseBBCode(props.content || '')
+})
+</script>
+
+<style scoped>
+.bbcode-content {
+  width: 100%;
+  overflow-wrap: break-word;
+}
+
+.bbcode-content :deep(img) {
+  max-width: 100%;
+  height: auto;
+}
+
+.bbcode-content :deep(blockquote) {
+  border-left: 3px solid var(--surface-border);
+  margin-left: 0;
+  padding-left: 1rem;
+  color: var(--text-color-secondary);
+}
+
+.bbcode-content :deep(pre) {
+  background-color: var(--surface-ground);
+  padding: 1rem;
+  border-radius: 6px;
+  overflow-x: auto;
+}
+</style>
diff --git a/frontend/src/components/artist/ArtistFullHeader.vue b/frontend/src/components/artist/ArtistFullHeader.vue
@@ -13,13 +13,16 @@
       </Image>
       <div class="textual-information">
         <div class="name">{{ artist.name }}</div>
-        <div class="description">{{ artist.description }}</div>
+        <div class="description">
+          <BBCodeRenderer :content="artist.description" />
+        </div>
       </div>
     </div>
   </ContentContainer>
 </template>
 <script setup lang="ts">
 import ContentContainer from '@/components/ContentContainer.vue'
+import BBCodeRenderer from '@/components/BBCodeRenderer.vue'
 import { type Artist } from '@/services/api/artistService'
 import { Image } from 'primevue'
 

diff --git a/frontend/src/components/artist/ArtistSidebar.vue b/frontend/src/components/artist/ArtistSidebar.vue
@@ -6,12 +6,15 @@
       </template>
     </Image>
     <ContentContainer v-if="artist.description">
-      <div class="description">{{ artist.description }}</div>
+      <div class="description">
+        <BBCodeRenderer :content="artist.description" />
+      </div>
     </ContentContainer>
   </div>
 </template>
 <script setup lang="ts">
 import ContentContainer from '@/components/ContentContainer.vue'
+import BBCodeRenderer from '@/components/BBCodeRenderer.vue'
 import { type Artist } from '@/services/api/artistService'
 import { Image } from 'primevue'
 

diff --git a/frontend/src/components/community/GeneralComment.vue b/frontend/src/components/community/GeneralComment.vue
@@ -15,14 +15,15 @@
        </span>
       </div>
       <div class="comment-body">
-        <div>{{ comment.content }}</div>
+        <BBCodeRenderer :content="comment.content" />
       </div>
     </div>
   </ContentContainer>
 </template>
 
 <script setup lang="ts">
 import ContentContainer from '@/components/ContentContainer.vue'
+import BBCodeRenderer from '@/components/BBCodeRenderer.vue'
 import type { TitleGroupCommentHierarchy } from '@/services/api/commentService'
 
 defineProps<{

diff --git a/frontend/src/components/series/SeriesFullHeader.vue b/frontend/src/components/series/SeriesFullHeader.vue
@@ -8,14 +8,17 @@
       </Image>
       <div class="textual-information">
         <div class="name">{{ series.name }}</div>
-        <div class="description">{{ series.description }}</div>
+        <div class="description">
+          <BBCodeRenderer :content="series.description" />
+        </div>
       </div>
     </div>
   </ContentContainer>
 </template>
 
 <script setup lang="ts">
 import ContentContainer from '@/components/ContentContainer.vue'
+import BBCodeRenderer from '@/components/BBCodeRenderer.vue'
 import type { Series } from '@/services/api/seriesService'
 import { Image } from 'primevue'
 

diff --git a/frontend/src/components/series/SeriesSidebar.vue b/frontend/src/components/series/SeriesSidebar.vue
@@ -6,13 +6,16 @@
       </template>
     </Image>
     <ContentContainer class="header-wrapper" container-title="Description">
-      <div class="description">{{ series.description }}</div>
+      <div class="description">
+        <BBCodeRenderer :content="series.description" />
+      </div>
     </ContentContainer>
   </div>
 </template>
 
 <script setup lang="ts">
 import ContentContainer from '@/components/ContentContainer.vue'
+import BBCodeRenderer from '@/components/BBCodeRenderer.vue'
 import type { Series } from '@/services/api/seriesService'
 import { Image } from 'primevue'
 

diff --git a/frontend/src/components/title_group/TitleGroupTable.vue b/frontend/src/components/title_group/TitleGroupTable.vue
@@ -107,13 +107,7 @@
     </Column>
     <template #groupheader="slotProps" v-if="isGrouped">
       <div class="edition-group-header">
-        {{
-          getEditionGroupSlug(
-            title_group.edition_groups.find(
-              (group: EditionGroupInfoLite) => group.id === slotProps.data.edition_group_id,
-            ),
-          )
-        }}
+        {{ getEditionGroupSlugById(slotProps.data.edition_group_id) }}
       </div>
     </template>
     <template #expansion="slotProps" v-if="!preview">
@@ -137,13 +131,28 @@
         <AccordionPanel v-if="slotProps.data.description" value="2">
           <AccordionHeader>{{ $t('general.description') }}</AccordionHeader>
           <AccordionContent>
-            <div>{{ slotProps.data.description }}</div>
+            <BBCodeRenderer :content="slotProps.data.description" />
           </AccordionContent>
         </AccordionPanel>
-        <AccordionPanel v-if="slotProps.data.screenshots" value="3">
+        <AccordionPanel
+          v-if="slotProps.data.screenshots && slotProps.data.screenshots.length > 0"
+          value="3"
+        >
           <AccordionHeader>{{ $t('general.screenshots') }}</AccordionHeader>
           <AccordionContent>
-            <div>{{ slotProps.data.screenshots }}</div>
+            <div class="screenshots-container">
+              <div
+                v-for="(screenshot, index) in slotProps.data.screenshots"
+                :key="index"
+                class="screenshot"
+              >
+                <Image :src="screenshot" preview class="screenshot-image">
+                  <template #previewicon>
+                    <i class="pi pi-search"></i>
+                  </template>
+                </Image>
+              </div>
+            </div>
           </AccordionContent>
         </AccordionPanel>
         <AccordionPanel value="4">
@@ -179,6 +188,8 @@
 import { computed, onMounted, ref } from 'vue'
 import DataTable from 'primevue/datatable'
 import Column from 'primevue/column'
+import Image from 'primevue/image'
+import BBCodeRenderer from '@/components/BBCodeRenderer.vue'
 import DOMPurify from 'dompurify'
 import Accordion from 'primevue/accordion'
 import AccordionPanel from 'primevue/accordionpanel'
@@ -191,7 +202,6 @@ import {
   type EditionGroupHierarchyLite,
   type EditionGroupInfoLite,
   type TitleGroupAndAssociatedData,
-  type Torrent,
   type TorrentHierarchyLite,
   type TorrentReport,
 } from '@/services/api/torrentService'
@@ -207,7 +217,7 @@ interface Props {
 const { title_group, preview = false, sortBy = 'edition' } = defineProps<Props>()
 
 const reportTorrentDialogVisible = ref(false)
-const expandedRows = ref<Torrent[]>([])
+const expandedRows = ref<TorrentHierarchyLite[]>([])
 const reportingTorrentId = ref(0)
 const route = useRoute()
 
@@ -230,7 +240,7 @@ const reportTorrent = (id: number) => {
   reportingTorrentId.value = id
   reportTorrentDialogVisible.value = true
 }
-const toggleRow = (torrent: Torrent) => {
+const toggleRow = (torrent: TorrentHierarchyLite) => {
   if (!expandedRows.value.some((expandedTorrent) => expandedTorrent.id === torrent.id)) {
     expandedRows.value = [...expandedRows.value, torrent]
   } else {
@@ -240,13 +250,24 @@ const toggleRow = (torrent: Torrent) => {
 const purifyHtml = (html: string) => {
   return DOMPurify.sanitize(html)
 }
+const getEditionGroupSlugById = (editionGroupId: number): string => {
+  const editionGroup = title_group.edition_groups.find(
+    (group: EditionGroupInfoLite) => group.id === editionGroupId,
+  )
+  return editionGroup ? getEditionGroupSlug(editionGroup) : ''
+}
+
 onMounted(() => {
-  if (route.query.torrentId) {
-    toggleRow(
-      title_group.edition_groups
-        .flatMap((edition_group) => edition_group.torrents)
-        .find((torrent) => torrent.id === parseInt(route.query.torrentId.toString())),
-    )
+  const torrentIdParam = route.query.torrentId?.toString()
+  if (torrentIdParam) {
+    const torrentId = parseInt(torrentIdParam)
+    const matchingTorrent = title_group.edition_groups
+      .flatMap((edition_group) => edition_group.torrents)
+      .find((torrent) => torrent.id === torrentId)
+
+    if (matchingTorrent) {
+      toggleRow(matchingTorrent)
+    }
   }
 })
 const isGrouped = computed(() => sortBy === 'edition')
@@ -273,4 +294,21 @@ const isGrouped = computed(() => sortBy === 'edition')
   margin-bottom: 10px;
   margin-left: 7px;
 }
+
+.screenshots-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.screenshot {
+  max-width: 200px;
+}
+
+.screenshot-image {
+  width: 100%;
+  height: auto;
+  border-radius: 4px;
+}
 </style>
diff --git a/frontend/src/services/bbcode.ts b/frontend/src/services/bbcode.ts
@@ -0,0 +1,12 @@
+import bbobHTML from '@bbob/html'
+import presetHTML5 from '@bbob/preset-html5'
+import DOMPurify from 'dompurify'
+
+export function parseBBCode(bbcode: string): string {
+  if (!bbcode) return ''
+
+  const html = bbobHTML(bbcode, presetHTML5())
+
+  // sanitize html to prevent xss attacks
+  return DOMPurify.sanitize(html)
+}