fix: soundboard upload in Electron, and Spotify sync/disappearing/progress

Soundboard: naming a clip used window.prompt, which Electron does not implement — it returned nothing, the flow aborted in silence, and adding a sound worked in the browser while doing nothing at all in the desktop app. Replaced with a two-step field inside the popover, identical in both. Spotify, three separate defects behind the two symptoms reported: Out of sync — a 20s poll stacked on the activity store's 5s debounce left everyone else on the previous track for up to 25s. The next poll is now scheduled just past the current track's end instead of on a fixed interval, and a track change bypasses the debounce (it happens once every few minutes; the debounce exists for chatty producers). Vanishing — a paused track, and the silent gap Spotify reports between two songs, both cleared the activity outright. Pausing is now carried as state rather than absence, and an empty answer is tolerated for 25s before the block comes down. Progress bar — timestamps are computed with the server's clock and were drawn against the viewer's, so any drift displaced the bar; and it kept advancing after a pause until the next poll. The ready payload now carries server time so each client can correct its own offset, and the bar freezes when paused. Tray, native notifications and system audio in screen share were all found already implemented and wired end to end; recorded in the roadmap rather than built again.
2026-08-31 22:39:28 -03:00
parent ff55d9d486
commit c899253e52
14 changed files with 214 additions and 36 deletions
@@ -19,6 +19,12 @@ export function SoundboardPopover({ spaceId, canManage, onClose }: SoundboardPop
  const [sounds, setSounds] = useState<SoundboardSound[]>([]);
  const [uploading, setUploading] = useState(false);
  const [error, setError] = useState('');
+  // Two-step add: pick the file, then name it in a field right here. The first
+  // version asked with window.prompt, which Electron does not implement — it
+  // returned nothing and the flow aborted in silence, so adding a sound worked
+  // in the browser and did nothing at all in the desktop app.
+  const [pendingFile, setPendingFile] = useState<File | null>(null);
+  const [pendingName, setPendingName] = useState('');
  const fileRef = useRef<HTMLInputElement>(null);
  const panelRef = useRef<HTMLDivElement>(null);

@@ -50,28 +56,41 @@ export function SoundboardPopover({ spaceId, canManage, onClose }: SoundboardPop
  // including the server's refusal when the cooldown is still running.
  const play = (soundId: string) => wsSend({ type: 'soundboard_play', soundId });

-  const handleFile = async (file: File) => {
+  const pickFile = (file: File) => {
    setError('');
    if (file.size > MAX_SOUND_BYTES) {
      setError(t('soundboard.tooLarge'));
      return;
    }
-    const name = window.prompt(t('soundboard.namePrompt'), file.name.replace(/\.[^.]+$/, ''));
-    if (!name) return;
+    setPendingFile(file);
+    setPendingName(file.name.replace(/\.[^.]+$/, '').slice(0, 32));
+  };
+
+  const cancelPending = () => {
+    setPendingFile(null);
+    setPendingName('');
+    if (fileRef.current) fileRef.current.value = '';
+  };
+
+  const confirmPending = async () => {
+    const file = pendingFile;
+    const name = pendingName.trim();
+    if (!file || !name) return;

    setUploading(true);
+    setError('');
    try {
      const tid = await useTransferStore.getState().startUpload(file, { tray: false });
      const { filename } = await waitForTransferAttachment(tid);
      const created = await api.soundboard.add(spaceId, name, filename);
      setSounds((prev) => [...prev, created]);
+      cancelPending();
    } catch {
      // Distinct from the size check above: reporting every failure as "too
      // large" sends people to shrink a file that was never the problem.
      setError(t('soundboard.uploadFailed'));
    } finally {
      setUploading(false);
-      if (fileRef.current) fileRef.current.value = '';
    }
  };

@@ -111,7 +130,7 @@ export function SoundboardPopover({ spaceId, canManage, onClose }: SoundboardPop
              className="hidden"
              onChange={(e) => {
                const file = e.target.files?.[0];
-                if (file) void handleFile(file);
+                if (file) pickFile(file);
              }}
            />
          </>
@@ -120,6 +139,46 @@ export function SoundboardPopover({ spaceId, canManage, onClose }: SoundboardPop

      {error && <div className="text-[11px] text-txt-danger mb-2">{error}</div>}

+      {pendingFile && (
+        <div className="mb-2 p-2 rounded-lg bg-surface-elevated/60">
+          <label className="block text-[11px] text-txt-tertiary mb-1">
+            {t('soundboard.namePrompt')}
+          </label>
+          <input
+            type="text"
+            value={pendingName}
+            maxLength={32}
+            autoFocus
+            onChange={(e) => setPendingName(e.target.value)}
+            onKeyDown={(e) => {
+              // Scoped here so Enter does not reach the composer behind the popover.
+              e.stopPropagation();
+              if (e.key === 'Enter' && pendingName.trim()) void confirmPending();
+              if (e.key === 'Escape') cancelPending();
+            }}
+            className="input-search w-full mb-2"
+          />
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={() => void confirmPending()}
+              disabled={uploading || !pendingName.trim()}
+              className="px-2.5 py-1 rounded-md text-[11px] font-medium bg-accent-primary text-white disabled:opacity-50"
+            >
+              {uploading ? t('soundboard.adding') : t('soundboard.confirm')}
+            </button>
+            <button
+              type="button"
+              onClick={cancelPending}
+              disabled={uploading}
+              className="px-2.5 py-1 rounded-md text-[11px] font-medium bg-interactive-muted text-txt-secondary disabled:opacity-50"
+            >
+              {t('soundboard.cancel')}
+            </button>
+          </div>
+        </div>
+      )}
+
      {sounds.length === 0 ? (
        <p className="text-[12px] text-txt-tertiary py-2">{t('soundboard.empty')}</p>
      ) : (