fix: Instagram audio rendering issues (#9957)

We are using `audio` component for rendering audio files in dashboard.

```
<audio v-else-if="isAudio" controls>
   <source :src="`${dataUrl}?t=${Date.now()}`" />
</audio>
```
We have added the timestamp for every audio URL for cache busting. For
Instagram, we are getting a signature URL. When we add any value and
access the URL, it results in an "Invalid signature. If I remove the
timestamp, the audio is rendering properly. This PR will change the
logic to construct the URL properly instead of direct string
manipulation.
This commit is contained in:
Muhsin Keloth
2024-08-14 13:24:00 +05:30
committed by GitHub
parent dd8abe975c
commit 06a362318c
3 changed files with 62 additions and 1 deletions

View File

@@ -5,6 +5,7 @@ import {
conversationListPageURL,
getArticleSearchURL,
hasValidAvatarUrl,
timeStampAppendedURL,
} from '../URLHelper';
describe('#URL Helpers', () => {
@@ -190,4 +191,51 @@ describe('#URL Helpers', () => {
expect(hasValidAvatarUrl()).toBe(false);
});
});
describe('timeStampAppendedURL', () => {
const FIXED_TIMESTAMP = 1234567890000;
beforeEach(() => {
vi.spyOn(Date, 'now').mockImplementation(() => FIXED_TIMESTAMP);
});
afterEach(() => {
vi.restoreAllMocks();
});
it('should append timestamp to a URL without query parameters', () => {
const input = 'https://example.com/audio.mp3';
const expected = `https://example.com/audio.mp3?t=${FIXED_TIMESTAMP}`;
expect(timeStampAppendedURL(input)).toBe(expected);
});
it('should append timestamp to a URL with existing query parameters', () => {
const input = 'https://example.com/audio.mp3?volume=50';
const expected = `https://example.com/audio.mp3?volume=50&t=${FIXED_TIMESTAMP}`;
expect(timeStampAppendedURL(input)).toBe(expected);
});
it('should not append timestamp if it already exists', () => {
const input = 'https://example.com/audio.mp3?t=9876543210';
expect(timeStampAppendedURL(input)).toBe(input);
});
it('should handle URLs with hash fragments', () => {
const input = 'https://example.com/audio.mp3#section1';
const expected = `https://example.com/audio.mp3?t=${FIXED_TIMESTAMP}#section1`;
expect(timeStampAppendedURL(input)).toBe(expected);
});
it('should handle complex URLs', () => {
const input =
'https://example.com/path/to/audio.mp3?key1=value1&key2=value2#fragment';
const expected = `https://example.com/path/to/audio.mp3?key1=value1&key2=value2&t=${FIXED_TIMESTAMP}#fragment`;
expect(timeStampAppendedURL(input)).toBe(expected);
});
it('should throw an error for invalid URLs', () => {
const input = 'not a valid url';
expect(() => timeStampAppendedURL(input)).toThrow();
});
});
});