drop soundmanager2 and bar-ui for HTML5 audio

[Rello]

the old and unmaintained soundmanager2 + bar-ui libraries will be removed.
Standard HTML5 will be used

[Rello]

@r4sas
Did you upgrade AP already? Does everything work for you?

[r4sas]

@r4sas
Did you upgrade AP already? Does everything work for you?

Didn't checked for updates. When I checked in 8 hours after release, it wasn't available on NC. Will do againg later today.

[r4sas]

Works for me, but current progress bar is not usable with high resolution, huge dot like in previous variant is needed.
add: endTime evement also need some checks to prevent printing NaN:NaN while track loading.
add 2: one more thing here: seconds need to be parsed with prepending zero (when lesser then 10 seconds it prints X:6 for six seconds).

[Rello]

Ok. Thank you!

What happens with the bar in your case? Too small? I read something about resolution scaling - but I have only HD

The others: ok. Little finetuning. Will take care
The rework was quite big - the codebase is now SO MUCH smaller/simpler. Thats why I could include so many pending features.

Happy that it works in general.
Will look at the details...

[r4sas]

That's in chromium.

add: current track position saving code sending request four times instead one.

[r4sas]

555f9b8#diff-783b03491a86df59900aedf1a46bce10R175-R183
Too wrong code... I think we can use calculateCurrentValue because it doing same thing...

https://stackoverflow.com/a/6313008

[r4sas]

Something like this:

    function formatSecondsToTime (seconds) {
        if (seconds <= 0) return "00:00";
        var hours = Math.floor(seconds / 3600),
            minutes = Math.floor(seconds / 60 % 60),
            seconds = (seconds % 60),
            time = (hours !== 0 ? String(hours).padStart(2, '0')+ ":" : "") + String(minutes).padStart(2, '0') + ":" + String(seconds).padStart(2, '0');
        return time;
    }

[r4sas]

Ah, also volume control is not visible and not works.

[Rello]

thank you for the pull requests. they look good. I like the idea with the rounded cover!

yes, volume control did not make it into the release. will have a look.
the question is, do you thing this is actually useful at all? I never used it

[r4sas]

Sometimes it useful if didn't want mess with system volume levels when few applications with sound output works at same time (example: voice conference and music).

[r4sas]

One more bug: track info is not updating in audio element, browsers always shows first track info.

[Rello]

One more bug: track info is not updating in audio element, browsers always shows first track info.

got it. the currentTrackIndexUiChange() is only triggered when clicking on a title - not when the playback changes. will fix it

[Rello]

fyi: the player gets confused when the playlist is sorted. I am working on this

[Rello]

Hi,
I hope I got the issues fixed not. volume is still pending

[Rello]

volume is back.
for simplicity I switched to the standard slider. the old code was so huge...
not yet 100% perfect, but getting there

[Rello]

@r4sas hey, do you have the chance to test the current status? I think it should be complete now

[r4sas]

I'll check it later today.

[r4sas]

add: current track position saving code sending request four times instead one.

Still exists. Problem in updating playback status 4 times in second (at least on my PC).

one more thing: If I'm starting playing track from saved state, I'm not able seek to track begining till switch to other track and return back.

Is here any ability to change view of slider (volume regulation button)? Doesn't match the NC style.

[r4sas]

I did not find a usefull other formular yet to trigger the timing only once. I need to connect to the timeupdate but this is fireing more often
https://github.com/Rello/audioplayer/blob/master/js/player.js#L235-L236

Make something like temporary variable where you will store latest update second on call, if it != current, update, otherwise ignore call.

whcih NC-Style are you referring to?

I'm testing in chromium, about styling I mean that this is flat button, when other buttons ans NC using rounded dots, etc. See for input[type=range]:: with -webkit-slider-thumb, -moz-range-thumb and -ms-thumb.

[r4sas]

Hm, I found that my browser messing with styles, investigating now...

add: user agent stylesheet, integrated in browser, overwriting any styles if no input[type="range"] is defined.

add2:

[Deprecation] '-webkit-appearance: sliderthumb-horizontal' for elements other than ::-webkit-slider-thumb and ::-webkit-media-slider-thumb is deprecated and will be removed in M79, around December 2019.
[Deprecation] '-webkit-appearance: sliderthumb-vertical' for elements other than ::-webkit-slider-thumb and ::-webkit-media-slider-thumb is deprecated and will be removed in M79, around December 2019

Testing on 78.0.3904.97.

add3:

input[type=range].volume-slider {
  -webkit-appearance: none;
}

input[type=range].volume-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: var(--color-background-dark);
  border-radius: var(--border-radius);
}

input[type=range].volume-slider::-webkit-slider-thumb {
  border: 1px solid var(--color-border-dark);
  height: 14px;
  width: 14px;
  border-radius: 7px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3px;
}

[r4sas]

audioplayer/js/app.js

Line 792 in 67adb14

document.title = currentTrack.dataset.title + ' (' + currentTrack.dataset.artist + ' ) @ ' + OCA.Audioplayer.Core.initialDocumentTitle;

Extra space before ).

[r4sas]

add3:

Good example for all browsers: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

[Rello]

oh wow. going out for dinner; coming back; and seeing all this stuff!?
thank you for looking at this in this level of detail.
I really appreciate your effort and support here!

[Rello]

it looks like this on my chrome now

[r4sas]

Yes, it must be like this, but I dont seen how remove transparancy when not hovered.

[Rello]

do you also have this blue frame after you clicked the slider - until you click somewhere else?

[r4sas]

See #488, that was fixed here. Also try drop cache in your browser if you already applied it.

[Rello]

ah, now. I merged the pull via my phpStorm.
I expected it to be clever enough to apply the patch also to my local files...
I updated everything. looks clean now!

[Rello]

what do you think?
are you happy now with this? you are the quality gate for the release :-)

[r4sas]

Is bar-ui styles still used?
I'm now looking in Firefox and Edge CSSs

[Rello]

hello,
yes, the bar-header still uses the old ones. I did not want to start that work for now and put it on backlog.
i need to check which ones are really required and migrate them to the styles.css
for the moment I would suggest to live with it

[r4sas]

With #489 I'm ending row of changes. I think we can do that 2.11.1.

[Rello]

thank you. I also added you as contributor to the readme and authors.md
i hope its ok for you

[r4sas]

No problems.

[Rello]

hey,
I did not check it before the release. but for it looks like this now in chrome/safari

[r4sas]

Yup, that's what I mention in #490

[Rello]

so I will push a .2 quickly

[Rello]

can you check the dark-mode?
white mode looks good now

[r4sas]

ohh... That's strange... Let me check.