Prevent blank playlist names

src/components/playlisteditor/playlisteditor.ts

@@ -11,6 +11,7 @@ import globalize from 'lib/globalize';
 import { currentSettings as userSettings } from 'scripts/settings/userSettings';
 import { PluginType } from 'types/plugin';
 import { toApi } from 'utils/jellyfin-apiclient/compat';
+import { isBlank } from 'utils/string';
 
 import dialogHelper from '../dialogHelper/dialogHelper';
 import loading from '../loading/loading';
@@ -86,12 +87,15 @@ function createPlaylist(dlg: DialogElement) {
     const apiClient = ServerConnections.getApiClient(currentServerId);
     const api = toApi(apiClient);
 
+    const name = dlg.querySelector<HTMLInputElement>('#txtNewPlaylistName')?.value;
+    if (isBlank(name)) return Promise.reject(new Error('Playlist name should not be blank'));
+
     const itemIds = dlg.querySelector<HTMLInputElement>('.fldSelectedItemIds')?.value || undefined;
 
     return getPlaylistsApi(api)
         .createPlaylist({
             createPlaylistDto: {
-                Name: dlg.querySelector<HTMLInputElement>('#txtNewPlaylistName')?.value,
+                Name: name,
                 IsPublic: dlg.querySelector<HTMLInputElement>('#chkPlaylistPublic')?.checked,
                 Ids: itemIds?.split(','),
                 UserId: apiClient.getCurrentUserId()
@@ -115,11 +119,14 @@ function updatePlaylist(dlg: DialogElement) {
 
     if (!dlg.playlistId) return Promise.reject(new Error('Missing playlist ID'));
 
+    const name = dlg.querySelector<HTMLInputElement>('#txtNewPlaylistName')?.value;
+    if (isBlank(name)) return Promise.reject(new Error('Playlist name should not be blank'));
+
     return getPlaylistsApi(api)
         .updatePlaylist({
             playlistId: dlg.playlistId,
             updatePlaylistDto: {
-                Name: dlg.querySelector<HTMLInputElement>('#txtNewPlaylistName')?.value,
+                Name: name,
                 IsPublic: dlg.querySelector<HTMLInputElement>('#chkPlaylistPublic')?.checked
             }
         })

src/utils/string.test.ts

@@ -1,6 +1,24 @@
 import { describe, expect, it } from 'vitest';
 
-import { toBoolean, toFloat } from './string';
+import { isBlank, toBoolean, toFloat } from './string';
+
+describe('isBlank', () => {
+    it('Should return true if the string is blank', () => {
+        let check = isBlank(undefined);
+        expect(check).toBe(true);
+        check = isBlank(null);
+        expect(check).toBe(true);
+        check = isBlank('');
+        expect(check).toBe(true);
+        check = isBlank(' \t\t   ');
+        expect(check).toBe(true);
+    });
+
+    it('Should return false if the string is not blank', () => {
+        const check = isBlank('not an empty string');
+        expect(check).toBe(false);
+    });
+});
 
 describe('toBoolean', () => {
     it('Should return the boolean represented by the string', () => {

src/utils/string.ts

@@ -1,3 +1,12 @@
+/**
+ * Checks if a string is empty or contains only whitespace.
+ * @param {string} value The string to test.
+ * @returns {boolean} True if the string is blank.
+ */
+export function isBlank(value: string | undefined | null) {
+    return !value?.trim().length;
+}
+
 /**
  * Gets the value of a string as boolean.
  * @param {string} name The value as a string.