FoundKeyGang/FoundKey
FoundKeyGang
/
FoundKey
7
19
Fork 22
Code Issues 37 Pull Requests 4 Releases Activity

Using WaveSurfer for a fancier audio player display #345

Manually merged
Johann150 merged 7 commits from puniko/FoundKey:feature/wavesurfer-js into main 2023-02-19 15:25:52 +00:00
Conversation 0 Commits 7 Files Changed 4 +281 -20
puniko commented 2023-02-19 10:49:01 +00:00
Contributor
Copy Link

Replaces the default audio player with wavesurfer (it still uses the default media element as backend to play the music)

Image attached shows the player. i tried to make it look similar to the module tracker

Replaces the default audio player with wavesurfer (it still uses the default media element as backend to play the music) Image attached shows the player. i tried to make it look similar to the module tracker
Screenshot from 2023-02-19 11-43-33.png
26 KiB
Screenshot from 2023-02-19 11-43-33.png
puniko added 1 commit 2023-02-19 10:49:02 +00:00
ci/woodpecker/pr/lint-foundkey-js Pipeline failed Details
ci/woodpecker/pr/lint-client Pipeline failed Details
ci/woodpecker/pr/lint-backend Pipeline failed Details
ci/woodpecker/pr/build Pipeline was successful Details
ci/woodpecker/pr/lint-sw Pipeline failed Details
ci/woodpecker/pr/test Pipeline failed Details
2da92eb075 lets do some wavesurfin' :3c
Johann150 requested changes 2023-02-19 12:40:34 +00:00
packages/client/src/components/media-banner.vue Outdated
@ -13,4 +9,0 @@
:title="media.name"
controls
preload="metadata"
@volumechange="volumechange"
Johann150 commented 2023-02-19 11:52:57 +00:00
Owner
Copy Link

Please clean up references to audioEl and the volumechange function.

Please clean up references to `audioEl` and the `volumechange` function.
puniko marked this conversation as resolved
packages/client/src/components/wavesurfer.vue Outdated
@ -0,0 +4,4 @@
<div class="controls">
<button class="play" @click="playPause()">
<i class="fas fa-pause" v-if="playing"></i>
<i class="fas fa-play" v-if="!playing"></i>
Johann150 commented 2023-02-19 12:11:21 +00:00
Owner
Copy Link
-			<i class="fas fa-play" v-if="!playing"></i> 
+			<i class="fas fa-play" v-else></i>
```diff - <i class="fas fa-play" v-if="!playing"></i> + <i class="fas fa-play" v-else></i> ```
puniko marked this conversation as resolved
packages/client/src/components/wavesurfer.vue Outdated
@ -0,0 +13,4 @@
<span>
{{ formatTime(duration) }}
</span>
<input class="volume" type="range" min="0" max="1" step="0.1" v-model="volume" @change="player.setVolume(volume)" />
Johann150 commented 2023-02-19 12:40:10 +00:00
Owner
Copy Link

I think you should use @input instead of @change because the latter only updates once you release the mouse.

I would also prefer that kind of behaviour from the position progress thingy. Although it might make less sense there. Maybe pause while seeking? Thats what Firefox seems to do by default.

I think you should use `@input` instead of `@change` because the latter only updates once you release the mouse. I would also prefer that kind of behaviour from the position progress thingy. Although it might make less sense there. Maybe pause while seeking? Thats what Firefox seems to do by default.
puniko commented 2023-02-19 14:37:34 +00:00
Author
Contributor
Copy Link

did the pause while seeking

did the pause while seeking
puniko marked this conversation as resolved
packages/client/src/components/wavesurfer.vue Outdated
@ -0,0 +37,4 @@
let isSeeking = ref(false);
let duration = ref(1);
let display = ref<HTMLDivElement>(null);
let player = ref(null);
Johann150 commented 2023-02-19 12:03:03 +00:00
Owner
Copy Link

Please use ref sugar (i.e. $ref) as mentioned in the contributing guide.

Please use ref sugar (i.e. `$ref`) as mentioned in the [contributing guide](https://akkoma.dev/FoundKeyGang/FoundKey/src/branch/main/CONTRIBUTING.md#vue).
puniko marked this conversation as resolved
packages/client/src/components/wavesurfer.vue Outdated
@ -0,0 +44,4 @@
onMounted(() => {
player.value = WaveSurfer.create({
container: display.value,
barGab: 1,
Johann150 commented 2023-02-19 12:07:53 +00:00
Owner
Copy Link

I think this is a typo? The wavesurfer docs mention a barGap option instead.

I think this is a typo? The [wavesurfer docs](https://wavesurfer-js.org/docs/options.html) mention a `barGap` option instead.
puniko commented 2023-02-19 14:38:59 +00:00
Author
Contributor
Copy Link

siehste, nicht nur du macht typos 🥴

siehste, nicht nur du macht typos 🥴
puniko marked this conversation as resolved
packages/client/src/components/wavesurfer.vue
@ -0,0 +86,4 @@
sec = '0' + sec;
}
if (min < 10) {
sec = '0' + min;
Johann150 commented 2023-02-19 11:58:41 +00:00
Owner
Copy Link

I think this should assign to min?

I think this should assign to `min`?
puniko marked this conversation as resolved
packages/client/src/components/wavesurfer.vue
@ -0,0 +88,4 @@
if (min < 10) {
sec = '0' + min;
}
return min + ':' + sec;
Johann150 commented 2023-02-19 12:04:55 +00:00
Owner
Copy Link

I think it should have an hour part too if the length is >= 1h.

I think it should have an hour part too if the length is >= 1h.
puniko commented 2023-02-19 14:40:30 +00:00
Author
Contributor
Copy Link

not sure if i did the calculation correctly, but i doubt we gonna encounter the case of a track being longer than 1h super often, mostly because of upload limits of most instances and stuff

not sure if i did the calculation correctly, but i doubt we gonna encounter the case of a track being longer than 1h super often, mostly because of upload limits of most instances and stuff
puniko marked this conversation as resolved
puniko added 5 commits 2023-02-19 14:36:59 +00:00
ci/woodpecker/pr/lint-foundkey-js Pipeline failed Details
ci/woodpecker/pr/lint-client Pipeline failed Details
ci/woodpecker/pr/lint-backend Pipeline failed Details
ci/woodpecker/pr/build Pipeline was successful Details
ci/woodpecker/pr/lint-sw Pipeline failed Details
ci/woodpecker/pr/test Pipeline failed Details
5dd2b9ff61 fix duration format and add hours
puniko added 1 commit 2023-02-19 14:38:37 +00:00
puniko requested review from Johann150 2023-02-19 14:41:42 +00:00
Johann150 approved these changes 2023-02-19 15:24:43 +00:00
Johann150 left a comment
Owner
Copy Link

Thanks :3

Thanks :3
Johann150 manually merged commit f103c86d0a into main 2023-02-19 15:25:52 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Johann150
Labels
Clear labels   
feature

task that proposes new feature(s)

  
fix

task to fix behavioral problems in the FoundKey codebase

  
upkeep

task that should make FoundKey smaller and more maintainable

No Label
feature
fix
upkeep
Milestone
Clear milestone
No items
No Milestone
Assignees
Clear assignees
No Assignees
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: FoundKeyGang/FoundKey#345
No description provided.
Delete Branch "puniko/FoundKey:feature/wavesurfer-js"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?