added star rating to comments

client/pages/item/_id/index.vue

@@ -148,37 +148,104 @@
           </div>
           <div class="grow px-2 md:px-10">
             <div class="mt-12">
-              <h3 class="text-xl font-semibold mb-4">{{ $strings.LabelComments }}</h3>
+              <div class="comments-section mt-4 border-t border-gray-700 pt-4">
+                <h3 class="text-xl font-semibold mb-4">{{ $strings.LabelComments }}</h3>
 
-              <!-- Add comment form -->
+                <!-- Average Rating Display -->
-              <div class="mb-6">
+                <div v-if="comments.length" class="mb-4">
-                <div class="bg-bg rounded-lg border border-gray-600 p-4">
+                  <p class="text-lg">
-                  <textarea v-model="newCommentText" placeholder="Add a comment... (Ctrl+Enter to post)" class="w-full bg-bg text-white resize-y min-h-[80px] focus:outline-none" @keydown.ctrl.enter="logNewComment"></textarea>
+                    {{ $strings.LabelAverageRating.replace('{0}', averageRating.toFixed(1)) }}
-                  <div class="flex justify-end mt-2">
+                    <span class="inline-flex ml-2">
-                    <button class="px-4 py-2 bg-success text-white rounded-md hover:bg-success/80" @click="logNewComment">
+                      <i v-for="i in 5" :key="i" class="fas fa-star" :class="i <= Math.round(averageRating) ? 'text-yellow-500' : 'text-gray-500'"></i>
-                      {{ $strings.ButtonPost }}
+                    </span>
-                    </button>
+                  </p>
-                  </div>
                 </div>
-              </div>
 
-              <!-- Comments list -->
+                <!-- Add Comment Form -->
-              <div v-if="libraryItem.comments && libraryItem.comments.length" class="space-y-4">
+                <div class="mb-6">
-                <div v-for="comment in libraryItem.comments" :key="comment.id" class="bg-bg rounded-lg p-4 border border-gray-600">
+                  <div class="bg-bg border border-gray-700 rounded-lg p-4">
-                  <div class="flex justify-between items-start mb-2">
+                    <textarea v-model="newComment" :placeholder="$strings.PlaceholderAddComment" class="w-full p-2 bg-transparent border border-gray-600 rounded resize-none focus:outline-none mb-3" rows="3"></textarea>
-                    <div>
+
-                      <span class="font-medium">{{ comment.user.username }}</span>
+                    <!-- Star Rating Input -->
-                      <span class="text-gray-400 text-sm ml-2">{{ formatDate(comment.createdAt) }}</span>
+                    <div class="flex items-center mb-3">
+                      <span class="mr-2">{{ $strings.LabelRating }}:</span>
+                      <div class="flex">
+                        <button v-for="star in 5" :key="star" class="text-2xl focus:outline-none" :class="star <= (hoverRating || newRating) ? 'text-yellow-500' : 'text-gray-500'" @click="newRating = star" @mouseover="hoverRating = star" @mouseleave="hoverRating = 0">
+                          <span class="abs-icons icon-star"></span>
+                        </button>
+                      </div>
+                      <button v-if="newRating" class="ml-2 text-sm text-gray-400 hover:text-white" @click="newRating = 0">({{ $strings.ButtonClear }})</button>
+                    </div>
+
+                    <div class="flex justify-end">
+                      <button class="px-4 py-2 bg-primary text-white rounded hover:bg-opacity-75" @click="postComment">
+                        {{ $strings.ButtonPost }}
+                      </button>
                     </div>
-                    <button v-if="canDeleteComment(comment)" @click="deleteComment(comment.id)" class="text-red-500 hover:text-red-400">
-                      {{ $strings.ButtonDelete }}
-                    </button>
                   </div>
-                  <p class="text-gray-200 whitespace-pre-wrap">{{ comment.text }}</p>
                 </div>
-              </div>
+
-              <div v-else class="text-gray-400 text-center py-4">
+                <!-- Comments List -->
-                {{ $strings.MessageNoComments }}
+                <div v-if="comments.length" class="space-y-4">
+                  <div v-for="comment in comments" :key="comment.id" class="bg-bg border border-gray-700 rounded-lg p-4">
+                    <div class="flex justify-between items-start mb-2">
+                      <div>
+                        <span class="font-semibold">{{ comment.user.username }}</span>
+                        <span class="text-sm text-gray-400 ml-2">
+                          {{ formatDate(comment.createdAt) }}
+                        </span>
+                      </div>
+                      <div class="flex items-center">
+                        <!-- Star Rating Display -->
+                        <div v-if="comment.rating" class="flex mr-4">
+                          <span v-for="star in 5" :key="star" class="abs-icons icon-star" :class="star <= comment.rating ? 'text-yellow-500' : 'text-gray-500'"></span>
+                        </div>
+
+                        <div v-if="canEditComment(comment)" class="space-x-2">
+                          <button v-if="editingCommentId !== comment.id" class="text-gray-400 hover:text-white" @click="startEditing(comment)">
+                            {{ $strings.ButtonEdit }}
+                          </button>
+                          <button class="text-gray-400 hover:text-white" @click="deleteComment(comment)">
+                            {{ $strings.ButtonDelete }}
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Edit Comment Form -->
+                    <div v-if="editingCommentId === comment.id">
+                      <textarea v-model="editCommentText" class="w-full p-2 bg-gray-800 rounded mb-2 resize-none focus:outline-none" rows="3"></textarea>
+
+                      <!-- Edit Rating -->
+                      <div class="flex items-center mb-2">
+                        <span class="mr-2">{{ $strings.LabelRating }}:</span>
+                        <div class="flex">
+                          <button v-for="star in 5" :key="star" class="text-2xl focus:outline-none" :class="star <= editRating ? 'text-yellow-500' : 'text-gray-500'" @click="editRating = star">
+                            <span class="abs-icons icon-star"></span>
+                          </button>
+                        </div>
+                        <button v-if="editRating" class="ml-2 text-sm text-gray-400 hover:text-white" @click="editRating = 0">({{ $strings.ButtonClear }})</button>
+                      </div>
+
+                      <div class="flex space-x-2">
+                        <button class="px-4 py-2 bg-primary text-white rounded hover:bg-opacity-75" @click="saveEdit(comment)">
+                          {{ $strings.ButtonSave }}
+                        </button>
+                        <button class="px-4 py-2 bg-gray-700 text-white rounded hover:bg-opacity-75" @click="cancelEdit">
+                          {{ $strings.ButtonCancel }}
+                        </button>
+                      </div>
+                    </div>
+
+                    <!-- Comment Text Display -->
+                    <div v-else class="text-gray-300">
+                      {{ comment.text }}
+                    </div>
+                  </div>
+                </div>
+                <div v-else class="text-gray-400">
+                  {{ $strings.MessageNoComments }}
+                </div>
               </div>
             </div>
           </div>
@@ -231,10 +298,13 @@ export default {
       showBookmarksModal: false,
       isDescriptionClamped: false,
       showFullDescription: false,
-      newCommentText: '',
+      newComment: '',
-      editingComment: null,
+      newRating: 0,
-      isAddingComment: false,
+      hoverRating: 0,
-      isUpdatingComment: false
+      editingCommentId: null,
+      editCommentText: '',
+      editRating: 0,
+      comments: []
     }
   },
   computed: {
@@ -486,6 +556,12 @@ export default {
     },
     currentUser() {
       return this.$store.state.user.user
+    },
+    averageRating() {
+      const ratedComments = this.comments.filter((c) => c.rating)
+      if (!ratedComments.length) return 0
+      const sum = ratedComments.reduce((acc, comment) => acc + comment.rating, 0)
+      return sum / ratedComments.length
     }
   },
   methods: {
@@ -833,68 +909,90 @@ export default {
         this.$store.commit('globals/setShareModal', this.mediaItemShare)
       }
     },
-    async logNewComment() {
+    async postComment() {
-      if (!this.newCommentText.trim()) return
+      if (!this.newComment.trim()) return
 
       try {
-        // Save the comment first
+        console.log('Posting comment:', {
-        const savedComment = await this.$axios.$post(`/api/items/${this.libraryItemId}/comments`, {
+          text: this.newComment.trim(),
-          text: this.newCommentText
+          rating: this.newRating || null
         })
 
-        // Initialize comments array if it doesn't exist
+        const response = await this.$axios.$post(`/api/items/${this.libraryItemId}/comments`, {
-        if (!this.libraryItem.comments) {
+          text: this.newComment.trim(),
-          this.libraryItem.comments = []
+          rating: this.newRating || null
+        })
+
+        // Load comments if they haven't been loaded yet
+        if (!this.comments) {
+          this.comments = []
         }
 
-        // Add the saved comment to the beginning of the array
+        this.comments.unshift(response)
-        this.libraryItem.comments.unshift(savedComment)
+        this.newComment = ''
-
+        this.newRating = 0
-        // Clear the input after successful save
-        this.newCommentText = ''
         this.$toast.success(this.$strings.MessageCommentAdded)
       } catch (error) {
-        console.error('Error saving comment:', error)
+        console.error('Error posting comment:', error)
         this.$toast.error(this.$strings.ErrorAddingComment)
       }
     },
-    formatDate(dateString) {
+    startEditing(comment) {
-      return new Date(dateString).toLocaleDateString(undefined, {
+      this.editingCommentId = comment.id
-        year: 'numeric',
+      this.editCommentText = comment.text
-        month: 'short',
+      this.editRating = comment.rating || 0
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit'
-      })
     },
-    canDeleteComment(comment) {
+    async saveEdit(comment) {
-      return this.currentUser.id === comment.userId || this.currentUser.isAdmin
+      try {
+        const response = await this.$axios.put(`/api/items/${this.libraryItem.id}/comments/${comment.id}`, {
+          text: this.editCommentText.trim(),
+          rating: this.editRating || null
+        })
+
+        const index = this.comments.findIndex((c) => c.id === comment.id)
+        this.comments.splice(index, 1, response.data)
+        this.cancelEdit()
+        this.$toast.success(this.$strings.MessageCommentUpdated)
+      } catch (error) {
+        this.$toast.error(this.$strings.ErrorUpdatingComment)
+      }
     },
-    async deleteComment(commentId) {
+    cancelEdit() {
+      this.editingCommentId = null
+      this.editCommentText = ''
+      this.editRating = 0
+    },
+    async deleteComment(comment) {
       if (!confirm(this.$strings.ConfirmDeleteComment)) return
 
       try {
-        // Remove comment from the array
+        await this.$axios.delete(`/api/items/${this.libraryItem.id}/comments/${comment.id}`)
-        const index = this.libraryItem.comments.findIndex((c) => c.id === commentId)
+        const index = this.comments.findIndex((c) => c.id === comment.id)
-        if (index !== -1) {
+        this.comments.splice(index, 1)
-          this.libraryItem.comments.splice(index, 1)
+        this.$toast.success(this.$strings.MessageCommentDeleted)
-
-          // Delete the comment
-          await this.$axios.$delete(`/api/items/${this.libraryItemId}/comments/${commentId}`)
-          this.$toast.success(this.$strings.MessageCommentDeleted)
-        }
       } catch (error) {
-        console.error('Error deleting comment:', error)
         this.$toast.error(this.$strings.ErrorDeletingComment)
-        // Restore the comment if the delete failed
+      }
-        if (this.editingComment) {
+    },
-          this.libraryItem.comments.splice(index, 0, this.editingComment)
+    canEditComment(comment) {
-        }
+      return this.$store.state.user.user.id === comment.userId || this.$store.state.user.user.type === 'admin'
+    },
+    formatDate(date) {
+      return new Date(date).toLocaleDateString()
+    },
+    async loadComments() {
+      try {
+        const response = await this.$axios.$get(`/api/items/${this.libraryItemId}/comments`)
+        this.comments = response || []
+      } catch (error) {
+        console.error('Error loading comments:', error)
+        this.$toast.error(this.$strings.ErrorLoadingComments)
       }
     }
   },
-  mounted() {
+  async mounted() {
     this.checkDescriptionClamped()
+    await this.loadComments()
 
     this.episodeDownloadsQueued = this.libraryItem.episodeDownloadsQueued || []
     this.episodesDownloading = this.libraryItem.episodesDownloading || []
@@ -948,4 +1046,9 @@ export default {
   -webkit-line-clamp: unset;
   max-height: 999rem;
 }
-</style>
+
+.comments-section {
+  max-width: 800px;
+  margin: 0 auto;
+}
+</style>

client/strings/en-us.json

@@ -1115,5 +1115,9 @@
   "ErrorAddingComment": "Error adding comment",
   "ErrorUpdatingComment": "Error updating comment",
   "ErrorDeletingComment": "Error deleting comment",
-  "ConfirmDeleteComment": "Are you sure you want to delete this comment?"
+  "ConfirmDeleteComment": "Are you sure you want to delete this comment?",
+  "LabelRating": "Rating",
+  "LabelStarRating": "{0} stars",
+  "LabelNoRating": "No rating",
+  "LabelAverageRating": "Average rating: {0}"
 }

server/controllers/LibraryItemController.js

@@ -1242,6 +1242,7 @@ class LibraryItemController {
     try {
       const comment = await Database.commentModel.create({
         text: req.body.text,
+        rating: req.body.rating,
         libraryItemId: req.params.id,
         userId: req.user.id
       })
@@ -1287,7 +1288,10 @@ class LibraryItemController {
         return res.status(403).json({ error: 'Not authorized to update this comment' })
       }
 
-      await comment.update({ text: req.body.text })
+      await comment.update({ 
+        text: req.body.text,
+        rating: req.body.rating
+      })
       res.json(comment)
     } catch (error) {
       Logger.error('[LibraryItemController] updateComment error:', error)

server/migrations/v2.20.2-add-comment-ratings.js

@@ -0,0 +1,18 @@
+const { DataTypes } = require('sequelize')
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    await queryInterface.addColumn('comments', 'rating', {
+      type: DataTypes.INTEGER,
+      allowNull: true,
+      validate: {
+        min: 1,
+        max: 5
+      }
+    })
+  },
+
+  down: async (queryInterface, Sequelize) => {
+    await queryInterface.removeColumn('comments', 'rating')
+  }
+} 

server/models/Comment.js

@@ -13,6 +13,14 @@ class Comment extends Model {
           type: DataTypes.TEXT,
           allowNull: false
         },
+        rating: {
+          type: DataTypes.INTEGER,
+          allowNull: true,
+          validate: {
+            min: 1,
+            max: 5
+          }
+        },
         libraryItemId: {
           type: DataTypes.UUID,
           allowNull: false,
@@ -68,6 +76,7 @@ class Comment extends Model {
     return {
       id: this.id,
       text: this.text,
+      rating: this.rating,
       userId: this.userId,
       libraryItemId: this.libraryItemId,
       createdAt: this.createdAt,