Warning: No spectrograms found
; + const images = props.images; + if (!images) { + returnWarning: No images found
; } - const labels = props.playConfig.spectrogram_labels; + const labels = props.image_labels; - if (index >= 0 && index < spectrograms.length) { + if (index >= 0 && index < images.length) { return ( -
+
{
playSection(index);
}}
@@ -32,14 +32,14 @@ const SpectrogramPlayer = (props) => {
return
Warning: No spectrograms available for index {index}
; } }, - [props.playConfig.spectrograms, props.playConfig.spectrogram_labels, playSection] + [props.images, props.image_labels, playSection] ); return ( -
+
{
- setView(playerType);
+ {
+ setView(playbackArgs.view);
onPreloadReady();
}}
/>
);
case AUTOPLAY:
- return -1}
- disabled={playConfig.play_once && hasPlayed.includes(0)}
+ disabled={playbackArgs.play_once && hasPlayed.includes(0)}
/>
);
case MULTIPLAYER:
return (
= 1 &&
-
);
};
diff --git a/frontend/src/components/Playback/Playback.test.js b/frontend/src/components/Playback/Playback.test.js
new file mode 100644
index 000000000..52a56aa72
--- /dev/null
+++ b/frontend/src/components/Playback/Playback.test.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, wait } from '@testing-library/react';
+
+import Playback from './Playback';
+
+describe('Playback', () => {
+
+ const basicProps = {
+ autoAdvance: false,
+ responseTime: 42,
+ onPreloadReady: jest.fn(),
+ startedPlaying: jest.fn(),
+ finishedPlaying: jest.fn(),
+ submitResult: jest.fn(),
+ }
+
+ let playbackArgs = {
+ view: 'BUTTON',
+ show_animation: false,
+ instruction: 'Listen, just listen!',
+ play_method: 'HTML',
+ ready_time: 1,
+ preload_message: 'Get ready',
+ sections: [{id: 13, url: 'some/fancy/tune.mp3'}]
+ };
+
+ it('renders itself', () => {
+ const { container } = render(
+ {render(playerType)}
{" "}
+ {render(playbackArgs.view)}
{" "}
{playback && (
{
setPreloadReady(true);
}}
- preloadMessage={playback.preload_message}
autoAdvance={config.auto_advance}
responseTime={config.response_time}
- playConfig={playback.play_config}
- sections={playback.sections}
submitResult={makeResult}
startedPlaying={startTimer}
finishedPlaying={finishedPlaying}
diff --git a/frontend/src/components/components.scss b/frontend/src/components/components.scss
index 393489d5b..1100b623a 100644
--- a/frontend/src/components/components.scss
+++ b/frontend/src/components/components.scss
@@ -34,7 +34,7 @@
@import "./Playback/Multiplayer";
@import "./Playback/Playback";
@import "./Playback/MatchingPairs";
-@import "./Playback/SpectrogramPlayer";
+@import "./Playback/ImagePlayer";
@import "./Question/Question";
@import "./Score/Score";
@import "./Trial/Trial";
diff --git a/frontend/src/util/audio.js b/frontend/src/util/audio.js
index 72ffb8f6b..271f35fbe 100644
--- a/frontend/src/util/audio.js
+++ b/frontend/src/util/audio.js
@@ -1,4 +1,4 @@
-import { API_ROOT, SILENT_MP3 } from "../config.js";
+import { API_ROOT, MEDIA_ROOT, SILENT_MP3 } from "../config.js";
import Timer from "./timer";
// Audio provides function around a shared audio object
@@ -170,7 +170,7 @@ export const loadUntilAvailable = (src, canPlay) => {
// without having to stop for further buffering of content.
const removeListener = listenOnce("canplaythrough", canPlay);
- load(src);
+ load(MEDIA_ROOT + src);
// If the ready state is already > 3, data is already loaded;
// Call canPlay right away
diff --git a/frontend/src/util/audioControl.js b/frontend/src/util/audioControl.js
index 0e8b61458..ce1e8ed4a 100644
--- a/frontend/src/util/audioControl.js
+++ b/frontend/src/util/audioControl.js
@@ -1,22 +1,21 @@
import * as audio from "./audio";
import * as webAudio from "./webAudio";
-export const playAudio = (playConfig, section, playheadShift=0) => {
+export const playAudio = (section, playMethod, playheadShift=0) => {
let latency = 0;
- const playhead = playConfig.playhead + playheadShift
- if (playConfig.play_method === 'BUFFER') {
+ if (playMethod === 'BUFFER') {
// Determine latency for current audio device
latency = webAudio.getTotalLatency()
// Play audio
- webAudio.playBufferFrom(section.id, playhead);
+ webAudio.playBufferFrom(section.id, playheadShift);
return latency
} else {
// Only initialize webaudio if section is hosted local
- if (playConfig.play_method !== 'EXTERNAL') {
+ if (playMethod !== 'EXTERNAL') {
// Determine latency for current audio device
latency = webAudio.getTotalLatency()
webAudio.initWebAudio();
@@ -26,14 +25,14 @@ export const playAudio = (playConfig, section, playheadShift=0) => {
audio.setVolume(1);
// Play audio
- audio.playFrom(Math.max(0, playhead));
+ audio.playFrom(Math.max(0, playheadShift));
return latency
}
}
-export const pauseAudio = (playConfig) => {
- if (playConfig.play_method === 'BUFFER') {
+export const pauseAudio = (playMethod) => {
+ if (playMethod === 'BUFFER') {
webAudio.stopBuffer();
} else {
audio.stop();
diff --git a/frontend/src/util/label.js b/frontend/src/util/label.js
index eec6271fb..86ea9cf3b 100644
--- a/frontend/src/util/label.js
+++ b/frontend/src/util/label.js
@@ -1,32 +1,3 @@
-import { romanNumeral } from "./roman";
-
-export const LABEL_NUMERIC = "NUMERIC";
-export const LABEL_ALPHABETIC = "ALPHABETIC";
-export const LABEL_CUSTOM = "CUSTOM";
-export const LABEL_ROMAN = "ROMAN";
-
-/**
- * @deprecated This function is deprecated and will be removed in the future.
- * See also https://github.com/Amsterdam-Music-Lab/MUSCLE/pull/640
- * Get a player label, based on index, labelstyle and customLabels
- */
-export const getPlayerLabel = (index, labelStyle, customLabels) => {
- index = parseInt(index);
-
- switch (labelStyle) {
- case LABEL_NUMERIC:
- return parseInt(index) + 1;
- case LABEL_ALPHABETIC:
- return String.fromCharCode(65 + index);
- case LABEL_ROMAN:
- return romanNumeral(index + 1);
- case LABEL_CUSTOM:
- return customLabels[index] || "";
- default:
- return "";
- }
-};
-
export const renderLabel = (label, size="fa-lg") => {
if (!label) return label
if (label.startsWith('fa-')) return
diff --git a/frontend/src/util/label.test.js b/frontend/src/util/label.test.js
index e27736501..b97f434d7 100644
--- a/frontend/src/util/label.test.js
+++ b/frontend/src/util/label.test.js
@@ -1,35 +1,5 @@
import { render } from '@testing-library/react';
-import { getPlayerLabel, LABEL_NUMERIC, LABEL_ALPHABETIC, LABEL_ROMAN, LABEL_CUSTOM, renderLabel } from "./label";
-
-describe('getPlayerLabel', () => {
-
- it('returns numeric label correctly', () => {
- expect(getPlayerLabel(0, LABEL_NUMERIC)).toBe(1);
- expect(getPlayerLabel(1, LABEL_NUMERIC)).toBe(2);
- });
-
- it('returns alphabetic label correctly', () => {
- expect(getPlayerLabel(0, LABEL_ALPHABETIC)).toBe('A');
- expect(getPlayerLabel(25, LABEL_ALPHABETIC)).toBe('Z');
- });
-
- it('returns roman label correctly', () => {
- expect(getPlayerLabel(0, LABEL_ROMAN)).toBe('I');
- expect(getPlayerLabel(3, LABEL_ROMAN)).toBe('IV');
- });
-
- it('returns custom label correctly', () => {
- const customLabels = ['One', 'Two', 'Three'];
- expect(getPlayerLabel(0, LABEL_CUSTOM, customLabels)).toBe('One');
- expect(getPlayerLabel(2, LABEL_CUSTOM, customLabels)).toBe('Three');
- });
-
- it('returns empty string for unknown label style', () => {
- expect(getPlayerLabel(1, 'UNKNOWN')).toBe('');
- });
-
-});
-
+import { renderLabel } from "./label";
describe('renderLabel', () => {
diff --git a/frontend/src/util/roman.js b/frontend/src/util/roman.js
deleted file mode 100644
index 6663a95eb..000000000
--- a/frontend/src/util/roman.js
+++ /dev/null
@@ -1,21 +0,0 @@
-export const romanNumeral = (int) => {
- let roman = '';
-
- if (int < 0 || !int) return roman;
-
- roman += 'M'.repeat(int / 1000); int %= 1000;
- roman += 'CM'.repeat(int / 900); int %= 900;
- roman += 'D'.repeat(int / 500); int %= 500;
- roman += 'CD'.repeat(int / 400); int %= 400;
- roman += 'C'.repeat(int / 100); int %= 100;
- roman += 'XC'.repeat(int / 90); int %= 90;
- roman += 'L'.repeat(int / 50); int %= 50;
- roman += 'XL'.repeat(int / 40); int %= 40;
- roman += 'X'.repeat(int / 10); int %= 10;
- roman += 'IX'.repeat(int / 9); int %= 9;
- roman += 'V'.repeat(int / 5); int %= 5;
- roman += 'IV'.repeat(int / 4); int %= 4;
- roman += 'I'.repeat(int);
-
- return roman;
-}
diff --git a/frontend/src/util/roman.test.js b/frontend/src/util/roman.test.js
deleted file mode 100644
index 322b6ffe2..000000000
--- a/frontend/src/util/roman.test.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { romanNumeral } from './roman';
-
-describe('romanNumeral', () => {
- it('converts basic numbers correctly', () => {
- expect(romanNumeral(1)).toBe('I');
- expect(romanNumeral(5)).toBe('V');
- expect(romanNumeral(10)).toBe('X');
- expect(romanNumeral(50)).toBe('L');
- expect(romanNumeral(100)).toBe('C');
- expect(romanNumeral(500)).toBe('D');
- expect(romanNumeral(1000)).toBe('M');
- });
-
- it('converts composite numbers correctly', () => {
- expect(romanNumeral(23)).toBe('XXIII');
- expect(romanNumeral(44)).toBe('XLIV');
- expect(romanNumeral(89)).toBe('LXXXIX');
- expect(romanNumeral(199)).toBe('CXCIX');
- expect(romanNumeral(499)).toBe('CDXCIX');
- });
-
- it('handles subtractive notation correctly', () => {
- expect(romanNumeral(4)).toBe('IV');
- expect(romanNumeral(9)).toBe('IX');
- expect(romanNumeral(40)).toBe('XL');
- expect(romanNumeral(90)).toBe('XC');
- expect(romanNumeral(400)).toBe('CD');
- expect(romanNumeral(900)).toBe('CM');
- expect(romanNumeral(444)).toBe('CDXLIV');
- expect(romanNumeral(999)).toBe('CMXCIX');
- });
-
- it('converts large numbers correctly', () => {
- expect(romanNumeral(1984)).toBe('MCMLXXXIV');
- expect(romanNumeral(2022)).toBe('MMXXII');
- expect(romanNumeral(3999)).toBe('MMMCMXCIX');
- expect(romanNumeral(4444)).toBe('MMMMCDXLIV');
- expect(romanNumeral(9999)).toBe('MMMMMMMMMCMXCIX');
- });
-
- it('handles edge cases correctly', () => {
- expect(romanNumeral(0)).toBe('');
- expect(romanNumeral(-1)).toBe('');
- });
-});
diff --git a/frontend/src/util/webAudio.js b/frontend/src/util/webAudio.js
index d34450b3e..a113a3ec7 100644
--- a/frontend/src/util/webAudio.js
+++ b/frontend/src/util/webAudio.js
@@ -105,14 +105,6 @@ export const stopBuffer = () => {
}
}
-// play buffer by section.id
-export const playBuffer = (id) => {
- source = audioContext.createBufferSource();
- source.buffer = buffers[id];
- source.connect(audioContext.destination);
- source.start();
-}
-
// Play buffer from given time
export const playBufferFrom = (id, time) => {
source = audioContext.createBufferSource();