add matchesRating

Author: mythz

MyApp/wwwroot/pages/components/ArtifactMenu.mjs

@@ -1,7 +1,7 @@
 import { ref, inject, onUnmounted } from "vue"
 import { useClient, useAuth } from "@servicestack/vue"
 import { SubmitArtifactModeration, RequeueGeneration } from "dtos.mjs"
-import { formatRating } from "../lib/utils.mjs"
+import { formatRating, matchesRating } from "../lib/utils.mjs"
 
 export default {
     template:`
@@ -33,11 +33,11 @@ export default {
                             @click="handleAction('rating', menu.artifact, { rating })"
                             :class="[
                                 'w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center',
-                                menu.artifact?.rating === rating
+                                matchesRating(menu.artifact?.rating, rating)
                                     ? 'text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-900/20'
                                     : 'text-gray-700 dark:text-gray-200'
                             ]">
-                        <svg v-if="menu.artifact?.rating === rating" class="size-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <svg v-if="matchesRating(menu.artifact?.rating, rating)" class="size-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                             <path d="M20 6L9 17l-5-5"/>
                         </svg>
                         <span v-else class="size-4 mr-2"></span>
@@ -328,6 +328,7 @@ export default {
             isType,
             isRegenerating,
             formatRating,
+            matchesRating,
             handleAction,
             hideToastError,
             toggleRatingSubmenu,

MyApp/wwwroot/pages/components/Feed.mjs

@@ -3,13 +3,13 @@ import { useRoute, useRouter } from "vue-router"
 import { useAuth, useUtils } from "@servicestack/vue"
 import { lastRightPart } from "@servicestack/client";
 import { ArtifactGallery, ArtifactDownloads } from "./Artifacts.mjs"
-import { AllRatings, toArtifacts, formatDuration, formatRating, sortByCreatedDesc, sortByCreatedAsc, sortByModifiedDesc, sortByModifiedAsc } from "../lib/utils.mjs"
+import { AllRatings, toArtifacts, formatDuration, formatRating, matchesRating, sortByCreatedDesc, sortByCreatedAsc, sortByModifiedDesc, sortByModifiedAsc } from "../lib/utils.mjs"
 
 import AudioPlayer from "./AudioPlayer.mjs"
 import ListenButton from "./ListenButton.mjs"
 
 const PlayButton = {
-    template:`
+    template: `
       <button data-slug="@episode.Slug" data-title="@episode.Title" data-url="@episode.Url"
               type="button" aria-label="Play episode @episode.Title"
               onclick="togglePlayButton(this)"
@@ -50,7 +50,7 @@ export default {
         ListenButton,
         PlayButton,
     },
-    template:`
+    template: `
     <ErrorSummary :status="error" />
     <div class="relative mt-2 border-b border-gray-200 dark:border-gray-700 min-h-full flex justify-between">
         <nav class="flex space-x-8" aria-label="Tabs">
@@ -208,7 +208,7 @@ export default {
                                 </div>
                                 <div class="flex flex-wrap">
                                     <template v-for="(desc, rating) of AllRatings">
-                                    <span v-if="artifact.rating == rating" :class="gen.publishedDate ? 'bg-yellow-600/50 dark:bg-yellow-300/30' : 'bg-gray-300 dark:bg-gray-600'" class="text-gray-600 dark:text-gray-300  inline-flex items-center rounded-md px-1 py-0.5 text-xs font-medium ring-1 ring-inset ring-gray-500/10 dark:ring-gray-700/10" :title="formatRating(rating) + ' - Suggested Rating'">
+                                    <span v-if="matchesRating(artifact.rating, rating)" :class="gen.publishedDate ? 'bg-yellow-600/50 dark:bg-yellow-300/30' : 'bg-gray-300 dark:bg-gray-600'" class="text-gray-600 dark:text-gray-300  inline-flex items-center rounded-md px-1 py-0.5 text-xs font-medium ring-1 ring-inset ring-gray-500/10 dark:ring-gray-700/10" :title="formatRating(rating) + ' - Suggested Rating'">
                                         {{formatRating(rating)}}
                                     </span>
                                     <button v-else type="button" @click="changeRating(gen, artifact, rating)" class="m-0 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 inline-flex items-center rounded-md px-1 py-0.5 text-xs font-medium ring-1 ring-inset ring-gray-500/10 dark:ring-gray-700/10"
@@ -265,7 +265,7 @@ export default {
     props: {
         thread: Object,
     },
-    emits:['selectGeneration','retryGeneration'],
+    emits: ['selectGeneration', 'retryGeneration'],
     setup(props, { emit }) {
         const store = inject('store')
         const events = inject('events')
@@ -293,16 +293,16 @@ export default {
 
         // Initialize sort from query parameter, default to '-created' if invalid
         const validSorts = ['-created', 'created', '-modified', 'modified']
-        const initialSort = validSorts.includes(route.query.sort) 
-            ? route.query.sort 
+        const initialSort = validSorts.includes(route.query.sort)
+            ? route.query.sort
             : '-created'
         const sortBy = ref(initialSort)
-        
+
         const visibleGenerations = ref(50)
         const pagedGenerations = computed(() => {
             return generations.value.slice(0, visibleGenerations.value)
         })
-        
+
         const generations = computed(() => {
             let filtered = store.threadGenerations
 
@@ -362,7 +362,7 @@ export default {
                 query: { ...route.query, sort }
             })
         }
-        
+
         function togglePlayButton(url, title) {
             if (refAudio.value?.player) {
                 if (playAudio.value?.src === url) {
@@ -383,11 +383,11 @@ export default {
             }
             emit('selectGeneration', gen)
         }
-        
+
         function isRegenerating(gen) {
             return regeneratingIdMap.value[gen.id] && new Date(regeneratingIdMap.value[gen.id]) >= new Date(gen.modifiedDate)
         }
-        
+
         async function retryGeneration(gen) {
             regeneratingIdMap.value[gen.id] = gen.modifiedDate
             if (gen.result?.assets?.length) {
@@ -525,6 +525,7 @@ export default {
             toArtifacts,
             formatDuration,
             formatRating,
+            matchesRating,
             setFilter,
             setSortBy,
             selectGeneration,

MyApp/wwwroot/pages/lib/utils.mjs

@@ -216,6 +216,12 @@ export function formatRating(rating) {
     return rating?.replace('PG13', 'PG-13')
 }
 
+export function matchesRating(a, b) {
+    if (!a || !b) return true
+    const normalize = r => r === 'PG-13' ? 'PG13' : r
+    return normalize(a) === normalize(b)
+}
+
 export function getRandomInt(min, max) {
     min = Math.ceil(min);
     max = Math.floor(max);