1010614 - [B2G][Mobile] now playing graphic will become transparent in SoundCloud and overlap the download app button

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[pete siphantong [:Petes]]

Attachment: 1970-01-01-02-03-45.png

Description:
When the user plays music on SoundCloud, the now playing graphic will become transparent and overlap the download app button


Repro Steps:
1. Go to SoundCloud
2. Choose a artist and play the music
3. Tap on the artist/song banner.


Actual:
The now playing graphic is transparent and overlap the download app button


Expected:
User should see the now playing graphic and the graphic should not overlap the download app button


1.4 Environmental Variables:
Device: Open_c 1.4 MOZ
BuildID: 20140512000204
Gaia: 17fb44880e95bc7ae363a609d811bf5a9a067b5b
Gecko: ec24f847e7c0
Version: 30.0
Firmware Version: P821A10v1.0.0B06_LOG_DL


1.3 Environmental Variables:
Device: Open_C 1.3 MOZ
BuildID: 20140505052400
Gaia: Unknown Git commit; build date shown here.
Gecko:
Version: 28.0
Firmware Version: P821A10V1.0.0B06_LOG_DL

 
Repro frequency: 100%
See attached: Screenshot

Comment 1

[Karl Dubost💡 :karlcow]

Other layout issues in that screenshot: the interactions icons, number of views, favs, etc. :)

 psiphantong,
do not forget to put the full URI, when you create a bug report.
It helps to find out where is the issue.

Comment 2

[pete siphantong [:Petes]]

http://m.soundcloud.com/hanszimmer/a-storm-is-coming

Comment 3

[Mike Taylor [:miketaylr]]

#header #now-playing {
  ...
  right: 80px;
  ...
}

Needs to be adjusted--but the header isn't well suited to handle narrow widths. 

Furthermore, clicking "Download App" just reloads the page (and is present when you're looking at the installed Soundcloud app...). Do we have an open bug for that?

Here's the code that handles that:

SC.OpenInApp = {
    className: '.open-in-app',
    iTunesUrl: 'itms://itunes.apple.com/us/app/soundcloud/id336353151?mt=8&uo=6',
    marketUrl: 'market://details?id=com.soundcloud.android',
    $el: null,
    clicked: null,
    initialize: function () {
        this.$el = $(this.className);
        this.decorate()
    },
    decorate: function () {
        if (SC.isAndroid) this.$el.attr('href', this.marketUrl);
         else SC.isIOS && this.$el.attr('href', this.iTunesUrl);
        SC.authorization.isLoggedIn || $(document.body) .addClass('showAppButton')
    }
};

Comment 4

[Karl Dubost💡 :karlcow]

Yves,
Can you help?
See the screenshot:
https://bugzilla.mozilla.org/attachment.cgi?id=8422829

* Now playing overlapping on download app
* interactions icons, number of views, favs, etc

thanks.

Comment 5

[Karl Dubost💡 :karlcow]

SoundCloud is aware of the issue, but has no specific date planned for resolution.

Comment 6

[Yves Van Goethem]

Karl, this has been fixed and can be closed

Comment 7

[Karl Dubost💡 :karlcow]

Thanks Yves. <3