search

codeSessionsP2 / masimapage

masima landing page
MIT License
1 stars 2 forks source link

Audio Embbed #5

Closed mxklb closed 7 years ago

mxklb commented 8 years ago

The mp3 audio shall be embedded into the page to directly play it. Therefore I already started an audio branch. Based on this there shall be a new version with fallback to soundcloud link instead of the html5 audio tag.

mxklb commented 8 years ago

Actually this is nearly finished in a first shot. There are some more optimizations which are still missing:

mxklb commented 8 years ago

@smnwndrr Can you provide something similar like the hover implementation (#6) for onclick() to make it correctly cross platform?

mxklb commented 8 years ago

Actually play & pause buttons are PNG files. These should be vectors too .. and maybe light grey transparent background like previous version for the inner circle is 'better' (tbd).

mxklb commented 8 years ago

todo: The soundcloud HTML5 audio fallback link has to be corrected if it finally exists...

smnwndrr commented 8 years ago

I don't think there is an equal implementation like in #6. Somehow Chrome incompatibility seems to rely on flipping thing. Wasn't able to solve this issue today.

mxklb commented 8 years ago

I think we just need to throw away the button and substitute it with an input or a link or something else (tbd) this should be more cross platform then, still using onclick. I think I had some kind of similar issue with my insulinboluscalculator webapp ... we should try this, I think this will fix it (just guessing) ..

smnwndrr commented 8 years ago

The problem was, in chrome the button was not receiving a click event, due to browser difference in rendering. Z-index didn't resolve the issue, hence the attachment to another object.

mxklb commented 8 years ago

Please review my comment for your commit above. I'll give it a try if I find time to .. if you're faster you could try this as well. I believe this would be a more reliable - straight forward - solution...

mxklb commented 8 years ago

So I was wrong. Both, links as well as buttons behave strange 'on the backside' of the logo/turnaround! Your 9c25d21 commit corrected it using a workaround. At least it is now working on my phone and desktop ubuntu chromium. Now it behaves as I expected, it directly plays when the logo is clicked/touched on mobile. I think this is not really the desired behaviour, but ey it actually works.. so far so good .. it's working!

I had some trouble directly cherry-picking your changes due to some artefacts of #13 issue etc.. So I had to merge the relevant changes manually. Next time try to get more clean single purpose commits, doing so manual merging may then be obsolete .. simply using git cherry-pick to merge certain commits while leaving some others should then work flawlessly.

Final steps to really close this issue

This behaviour could be applied by an simple if else clause in the playAudio js that checks which of the divs is actually shown and which not (maybe reading out ccs transform state 0 ..180 is possible?) and only performs the actual implementation if player is already shown while else doing nothing.

smnwndrr commented 8 years ago

I don't know which artifacts you mean! on my branch i took your gh-pages branch and made only single purpose commits.

mxklb commented 8 years ago

Your are right but you had/have the gulp-gh-pages module within your gitignore but it was missing in the readme. So I was unsure if there is something messed up or at least not clearly separated, so I decided to simply move the relevant diffs and avoided git cherry-pick therefore. Neverminds your commits are correctly single purpose (but contained older artefacts which I worried about) - sorry for my single purpose critics! Next time I'll try to stick to the cherry picking if needed at all ..

mxklb commented 8 years ago

Start stop play behaviour is still messed up ..

mxklb commented 7 years ago

As far as I have tested - seen on multiple phones - actually its working correctly .. @smnwndrr if you can confirm finally close this again ;)