Initial UI fixes - Display artist name, album name, durations, various other stuff #71

Zorlin · 2025-08-02T15:14:35Z

No description provided.

Zorlin · 2025-08-02T15:15:04Z

will need to be cleaned up and deployed when the new Lens SDK version is published.

Copilot

Pull Request Overview

This PR implements various UI fixes to improve the display and handling of artist names, album information, track durations, and metadata across the music player application. The changes focus on enhancing the user experience by showing more relevant information and fixing data display issues.

Key changes:

Replace category ID checks with category slug lookups for proper content type detection
Add comprehensive track metadata handling including ID3 tag verification and duration calculation
Improve release form field mapping and metadata parsing throughout the application

Reviewed Changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
releasePage.vue	Updates category checks to use slugs instead of IDs for proper content type detection
categoryPage.vue	Fixes category filtering to use actual category IDs instead of slugs
albumViewer.vue	Major enhancement adding track metadata display, ID3 tag verification, and duration calculations
releaseForm.vue	Improves metadata field handling with better parsing and user-friendly field labels
featuredSlider.vue	Updates category checks to use slug-based lookups for proper content display
router.ts	Adds data transformation for prefetched releases and categories to parse JSON metadata
hooks.ts	Adds cache invalidation for featured releases when editing releases
maintenanceManagement.vue	Implements category slug-to-ID mapping for data import functionality
preload/index.ts	Adds editRelease method to the electron API bridge
main/index.ts	Implements IPC handler for the editRelease functionality
package.json	Updates lens-sdk dependency and adds jsmediatags library

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Copilot · 2025-08-02T15:16:02Z

packages/renderer/src/views/releasePage.vue

+const categorySlug = computed(() => {
+  if (!targetRelease.value || !contentCategories.value) return null;
+  const category = contentCategories.value.find(cat => cat.id === targetRelease.value.categoryId);
+  return category?.categoryId || null;


The computed property returns category?.categoryId but should return category?.categoryId (slug) for consistency with the variable name categorySlug. However, the logic appears to be looking for the category's slug field, but it's accessing categoryId which might be the ID, not the slug.

Suggested change

return category?.categoryId || null;

return category?.slug || null;

Copilot · 2025-08-02T15:16:02Z

packages/renderer/src/components/releases/albumViewer.vue

  try {
    const ipfsFiles: AudioTrack[] = [];
-    const response = await fetch(url);
+    const response = await fetch(url, { method: 'HEAD' });


Using HEAD request to check content-type but then making another full GET request on line 301. This creates unnecessary network calls. Consider using a single GET request or handle the HEAD response properly.

Suggested change

const response = await fetch(url, { method: 'HEAD' });

const response = await fetch(url, { method: 'GET' });

Copilot · 2025-08-02T15:16:03Z

packages/renderer/src/components/releases/albumViewer.vue

+// Check if user is admin or moderator
+const { data: accountStatus } = useAccountStatusQuery();
+const isAdmin = computed(() => accountStatus.value?.isAdmin || false);
+const isModerator = computed(() => accountStatus.value?.hasRole?.('moderator') || false);


The hasRole method call syntax hasRole?.('moderator') suggests hasRole might be a function, but the optional chaining is applied incorrectly. If hasRole is a function, it should be accountStatus.value?.hasRole?.('moderator') or if it's a property containing roles, the syntax should be different.

Suggested change

const isModerator = computed(() => accountStatus.value?.hasRole?.('moderator') || false);

const isModerator = computed(() => typeof accountStatus.value?.hasRole === 'function' && accountStatus.value.hasRole('moderator') || false);

Copilot · 2025-08-02T15:16:03Z

packages/renderer/src/components/releases/releaseForm.vue

-  };
+  
+  // Only update fields that are defined in the schema
+  if (selectedContentCategory.value && fieldName in selectedContentCategory.value) {


The condition checks if fieldName exists in selectedContentCategory.value, but this could allow setting arbitrary fields. Consider validating against a whitelist of expected field names or the schema definition to prevent unexpected metadata fields.

Suggested change

if (selectedContentCategory.value && fieldName in selectedContentCategory.value) {

if (

selectedContentCategory.value &&

Object.keys(selectedContentCategory.value).includes(fieldName)

) {

Copilot · 2025-08-02T15:16:03Z

packages/renderer/src/components/releases/albumViewer.vue

 import { parseUrlOrCid } from '/@/utils';
 import type { ReleaseItem } from '/@/types';
+import { useAccountStatusQuery, useEditReleaseMutation } from '/@/plugins/lensService/hooks';
+// @ts-ignore


Using @ts-ignore to suppress TypeScript errors for jsmediatags import. Consider adding proper type definitions or using a more specific import statement to avoid suppressing all TypeScript checks.

Copilot · 2025-08-02T15:16:04Z

packages/main/src/index.ts

      ipcMain.handle('peerbit:add-release', async (_event, releaseData: ReleaseData) =>
        lensService?.addRelease(releaseData),
      );
+      ipcMain.handle('peerbit:edit-release', async (_event, releaseData: ReleaseData) =>


The type annotation uses ReleaseData but the preload file imports EditInput<ReleaseData>. The main process should use the same type for consistency and proper type safety.

Suggested change

ipcMain.handle('peerbit:edit-release', async (_event, releaseData: ReleaseData) =>

ipcMain.handle('peerbit:edit-release', async (_event, releaseData: EditInput<ReleaseData>) =>

Copilot · 2025-08-02T15:16:04Z

package.json

  "dependencies": {
    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-    "@riffcc/lens-sdk": "^0.1.32",
+    "@riffcc/lens-sdk": "file:../lens-sdk",


Using a local file path dependency instead of a published version. This should be changed back to a proper version number before production deployment to ensure reproducible builds.

Suggested change

"@riffcc/lens-sdk": "file:../lens-sdk",

"@riffcc/lens-sdk": "^1.0.0",

Zorlin added 2 commits August 2, 2025 14:46

Content category fixes, frontpage and card view rendering fixes

827867a

Automatically discover mismatched tag/track names

d96636e

Zorlin requested review from benya7 and Copilot August 2, 2025 15:14

Zorlin self-assigned this Aug 2, 2025

Copilot AI reviewed Aug 2, 2025

View reviewed changes

Zorlin added 15 commits August 2, 2025 16:42

Match categories by UUID on frontpage

f84f827

Docker improvements

b5dcd1d

Docker fixes

7bdfaf1

Rebase UI fixes

ae72fce

Improved releases view - CSS grid

fe938ec

Full UI redesign

277c1be

Update for Firefox - temporary hacks

558e295

Partial gamepad support

0780628

Draggable video player

4ff243c

Update Dockerfile for new builds, improve maintenance import/export

99c80a9

Check in new UI work

beba02a

Update structures panel

a371540

Full defederated filtering, half working TV shows implementation

49c950e

Improve TV shows structures

7a758da

Displayname stuff

34e8cea

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Initial UI fixes - Display artist name, album name, durations, various other stuff #71

Initial UI fixes - Display artist name, album name, durations, various other stuff #71

Uh oh!

Zorlin commented Aug 2, 2025

Uh oh!

Zorlin commented Aug 2, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Aug 2, 2025

Uh oh!

Copilot AI Aug 2, 2025

Uh oh!

Copilot AI Aug 2, 2025

Uh oh!

Copilot AI Aug 2, 2025

Uh oh!

Copilot AI Aug 2, 2025

Uh oh!

Copilot AI Aug 2, 2025

Uh oh!

Copilot AI Aug 2, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	return category?.categoryId \|\| null;
	return category?.slug \|\| null;

	const response = await fetch(url, { method: 'HEAD' });
	const response = await fetch(url, { method: 'GET' });

	const isModerator = computed(() => accountStatus.value?.hasRole?.('moderator') \|\| false);
	const isModerator = computed(() => typeof accountStatus.value?.hasRole === 'function' && accountStatus.value.hasRole('moderator') \|\| false);

	ipcMain.handle('peerbit:edit-release', async (_event, releaseData: ReleaseData) =>
	ipcMain.handle('peerbit:edit-release', async (_event, releaseData: EditInput<ReleaseData>) =>

	"@riffcc/lens-sdk": "file:../lens-sdk",
	"@riffcc/lens-sdk": "^1.0.0",

Initial UI fixes - Display artist name, album name, durations, various other stuff #71

Are you sure you want to change the base?

Initial UI fixes - Display artist name, album name, durations, various other stuff #71

Uh oh!

Conversation

Zorlin commented Aug 2, 2025

Uh oh!

Zorlin commented Aug 2, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 2, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants