starred/koel-koel

Fork 0

mirror of https://github.com/koel/koel.git synced 2026-04-25 16:56:02 +03:00

[GH-ISSUE #525] Strange behavior with equalizer #370

New issue

Closed

opened 2026-02-26 02:32:59 +03:00 by kerem · 4 comments

kerem commented

2026-02-26 02:32:59 +03:00

Owner

Originally created by @X-Ryl669 on GitHub (Jan 23, 2017).
Original GitHub issue: https://github.com/koel/koel/issues/525

Depending on the browser, I'm experiencing a strange behavior with the resources/assets/js/components/site-footer/equalizer.vue

On some faulty browser, it seems that loadPreset() is called before createSliders().
This causes an exception when it tries to access el.noUiSlider that's undefined.
This then prevents Koel to start.

loadPreset() is triggered by the watch::selectedPresetIndex

I'm not sure about this interpretation, but it seems that the watched's property is used before the player is even created.

What's strange, is that it does not happen on some other computers.

I've traced it a bit more. It happens on the computers were an equalizer preset was set (not -1), and Koel is reloaded (cmd + r)

I've put a breakpoint on the init(player) method, and it's called and the createSliders() is scheduled in this.$nextTick(this.createSliders).
However, the watcher is triggered before the "nextTick" functions' list is called, leading to using an undefined property in loadPreset() of el.noUiSlider

What is the expected ordering of method here ? Shouldn't watch'ed properties be postponed until the complete component is created, including async creation (as the code is expecting), or is the code wrong and instead, loadPreset() should be ignored in the watcher and be called in the end of createSlider() ?

Edit: Ok, I think I've a solution. Because of the watcher, the line that set the selectedPresetIndex should be in the createSlider() method.
Thus, the change should be:

diff --git a/resources/assets/js/components/site-footer/equalizer.vue b/resources/assets/js/components/site-footer/equalizer.vue
index 49b781d..f1e51be 100644
--- a/resources/assets/js/components/site-footer/equalizer.vue
+++ b/resources/assets/js/components/site-footer/equalizer.vue
@@ -125,9 +125,6 @@ export default {
       prevFilter.connect(context.destination)

       this.$nextTick(this.createSliders)
-
-      // Now we set this value to trigger the audio processing.
-      this.selectedPresetIndex = preferences.selectedPreset
     },

     /**
@@ -166,6 +163,9 @@ export default {
           this.save()
         })
       })
+
+      // Now we set this value to trigger the audio processing.
+      this.selectedPresetIndex = preferences.selectedPreset
     },

     /**

Originally created by @X-Ryl669 on GitHub (Jan 23, 2017). Original GitHub issue: https://github.com/koel/koel/issues/525 Depending on the browser, I'm experiencing a strange behavior with the `resources/assets/js/components/site-footer/equalizer.vue` On some faulty browser, it seems that `loadPreset()` is called before `createSliders()`. This causes an exception when it tries to access el.noUiSlider that's undefined. This then prevents Koel to start. `loadPreset()` is triggered by the `watch::selectedPresetIndex` I'm not sure about this interpretation, but it seems that the watched's property is used before the player is even created. What's strange, is that it does not happen on some other computers. I've traced it a bit more. It happens on the computers were an equalizer preset was set (not -1), and Koel is reloaded (cmd + r) I've put a breakpoint on the `init(player)` method, and it's called and the `createSliders()` is scheduled in `this.$nextTick(this.createSliders)`. However, the watcher is triggered before the "nextTick" functions' list is called, leading to using an undefined property in `loadPreset()` of `el.noUiSlider` What is the expected ordering of method here ? Shouldn't watch'ed properties be postponed until the complete component is created, including async creation (as the code is expecting), or is the code wrong and instead, `loadPreset()` should be ignored in the watcher and be called in the end of `createSlider()` ? Edit: Ok, I think I've a solution. Because of the watcher, the line that set the `selectedPresetIndex` should be in the `createSlider()` method. Thus, the change should be: ``` diff --git a/resources/assets/js/components/site-footer/equalizer.vue b/resources/assets/js/components/site-footer/equalizer.vue index 49b781d..f1e51be 100644 --- a/resources/assets/js/components/site-footer/equalizer.vue +++ b/resources/assets/js/components/site-footer/equalizer.vue @@ -125,9 +125,6 @@ export default { prevFilter.connect(context.destination) this.$nextTick(this.createSliders) - - // Now we set this value to trigger the audio processing. - this.selectedPresetIndex = preferences.selectedPreset }, /** @@ -166,6 +163,9 @@ export default { this.save() }) }) + + // Now we set this value to trigger the audio processing. + this.selectedPresetIndex = preferences.selectedPreset }, /** ```

kerem closed this issue

2026-02-26 02:32:59 +03:00

kerem commented

2026-02-26 02:32:59 +03:00

Author

Owner

@thallian commented on GitHub (Jan 25, 2017):

I can confirm that this patch resolved the issue for me with Koel v3.5.4 (it occurred with Firefox Nightly).

@thallian commented on GitHub (Jan 25, 2017): I can confirm that this patch resolved the issue for me with Koel v3.5.4 (it occurred with Firefox Nightly).

kerem commented

2026-02-26 02:32:59 +03:00

Author

Owner

@daniele-athome commented on GitHub (Jan 30, 2017):

Confirming the bug on latest Google Chrome. And the patch provided by @X-Ryl669 fixes it on Koel v3.5.4.

@daniele-athome commented on GitHub (Jan 30, 2017): Confirming the bug on latest Google Chrome. And the patch provided by @X-Ryl669 fixes it on Koel v3.5.4.

kerem commented

2026-02-26 02:32:59 +03:00

Author

Owner

@phanan commented on GitHub (Feb 1, 2017):

Weird, I don't experience this bug at all. Anyway, @X-Ryl669 can you send a PR over? Thanks!

@phanan commented on GitHub (Feb 1, 2017): Weird, I don't experience this bug at all. Anyway, @X-Ryl669 can you send a PR over? Thanks!

kerem commented

2026-02-26 02:32:59 +03:00

Author

Owner

@X-Ryl669 commented on GitHub (Feb 9, 2017):

Ok, please check PR#538

@X-Ryl669 commented on GitHub (Feb 9, 2017): Ok, please check PR#538

No milestone

No project

No assignees

1 participant

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

starred/koel-koel#370

No description provided.

Rows
Columns