Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added logic to support all audio formats in the player #4676

Merged
merged 6 commits into from Nov 14, 2023
Merged

Added logic to support all audio formats in the player #4676

Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
26789bf
Added logic to send unsupported audio filetypes to the api point to c…
srartese Oct 4, 2023
7dd0c31
Merge branch 'beta' into 4597-data-tab-view-using-the-wrong-endpoint-…
srartese Oct 5, 2023
8b03952
Formatted with Prettier and added solve for filenames not matching an…
srartese Oct 17, 2023
5f7d251
Merge branch 'beta' into 4597-data-tab-view-using-the-wrong-endpoint-…
srartese Oct 18, 2023
77ec466
add error handling for play action to MiniAudioPlayer
magicznyleszek Oct 19, 2023
ffc638e
Merge branch 'beta' into 4597-data-tab-view-using-the-wrong-endpoint-…
magicznyleszek Nov 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
29 changes: 27 additions & 2 deletions jsapp/js/components/submissions/submissionUtils.ts
View file
Open in desktop
Expand Up @@ -15,6 +15,7 @@ import {
GROUP_TYPES_BEGIN,
QUESTION_TYPES,
CHOICE_LISTS,
ROOT_URL
} from 'js/constants';
import type {AnyRowTypeName} from 'js/constants';
import type {
Expand Down Expand Up @@ -531,11 +532,35 @@ export function getMediaAttachment(
);

submission._attachments.forEach((attachment) => {

if (attachment.filename.includes(validFileName)) {
mediaAttachment = attachment;
// Check if the audio filetype is of type not supported by player and send it to format to mp3
if(attachment.mimetype.includes('audio/')
srartese marked this conversation as resolved.
Show resolved Hide resolved
&& !attachment.mimetype.includes('/mp3')
&& !attachment.mimetype.includes('mpeg')
&& !attachment.mimetype.includes('/wav')
&& !attachment.mimetype.includes('ogg')
)
{
const lastItem = attachment.filename.split("/").pop();
const questionPath = Object.keys(submission).find(key => submission[key] === lastItem);

const newAudioURL =
`${ROOT_URL}/api/v2/assets/${submission._xform_id_string}/data/${attachment.instance}/attachments/?xpath=${questionPath}&format=mp3`;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When questionPath is undefined, this will crash the app.

Steps to break it:

  1. Use a simple form with audio question
    simple-audio-form.xlsx
  2. Add submission using flac file (e.g. https://github.com/ietf-wg-cellar/flac-test-files/blob/main/subset/01%20-%20blocksize%204096.flac)
  3. Go to Data Table and click this tiny play button. You will see 400 error on this:
    GET http://kf.kobo.local/api/v2/assets/aJpiarEu6gxjLrg7wuXpDq/data/34/attachments/?xpath=undefined&format=mp3 and another error: Uncaught (in promise) DOMException: The media resource indicated by the src attribute or assigned media provider object was not suitable.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure, but perhaps Object.keys above should be Object.values?

Copy link
Contributor Author

@srartese srartese Oct 16, 2023 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this problem is because when you upload the file it gets renamed by removing the '_' in the file. Unfortunately it's not as simple as just replacing the _ with spaces because it only does it for the original file name but numeric values are getting added to the end of the file and that is our new file name.

For example:
We upload: 01 - blocksize 4096.flac
The attachment file name is 01_-_blocksize_4096-12_47_9.flac
The question value is: 01 - blocksize 4096-12_47_9.flac

Additionally if the file name has a - originally that does not get removed, only the spaces that were replaced with the hyphen.

We were comparing the file name to the question value in order to get the question path name but clearly that doesn't work when the name of the file is changing between the file name and the actual value of the question file.
I'm working on the solution now. Stay tuned

const newAttachment = {
...attachment,
download_url: newAudioURL,
download_large_url: newAudioURL,
download_medium_url: newAudioURL,
download_small_url: newAudioURL,
mimetype: 'audio/mp3',
}
mediaAttachment = newAttachment;
} else {
mediaAttachment = attachment;
}
}
});

return mediaAttachment;
}

Expand Down