1001459 - Comedy Central "The Daily Show" web site has no content when loaded in Firefox for Android (or with Firefox for Android user agent string)

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Daniel Holbert [:dholbert]]

STR:
 1. Visit http://thedailyshow.cc.com/ in Firefox for Android
    OR:
    Visit http://thedailyshow.cc.com/ in a desktop Firefox browser, with your user agent set to Firefox for Android's string.[1] (e.g. with "User Agent Overrider" addon)

ACTUAL RESULTS:
 - The page header & footer loads, but the content area is blank.
 - Moreover, these errors show up in my error console (which don't show up when I load the page with the normal desktop User Agent string):
> TypeError: t.exec(...) is null                            base.js:1894
> TypeError: w[namespace][moduleName] is not a constructor  base.js:304

So I think they might hit an unexpected JS error partway through loading dynamic content, and that interrupts the dynamic loading and leaves the content blank. Or something like that.

[1] Mozilla/5.0 (Android; Mobile; rv:28.0) Gecko/28.0 Firefox/28.0

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot of page loaded with desktop browser UA string (correct)

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot of page loaded with mobile browser UA string (broken)

Comment 3

[Daniel Holbert [:dholbert]]

Note: This works correctly on Chrome for Android, since they seem to serve working content to that UA string.  At least, if I make my Firefox Desktop browser use Chrome for Android's UA string, I get a working page that looks like attachment 8412658 [details].

So they're serving different content to Chrome for Android vs. Firefox for Android, based on UA string. (and the content served to Firefox for Android is broken)

Comment 4

[Daniel Holbert [:dholbert]]

The Chrome UA string that I tested was the following (taken from Chrome on my own Nexus 4):
Mozilla/5.0 (Linux; Android 4.4.2; Nexus 4 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.114 Mobile Safari/537.36

Comment 5

[Daniel Holbert [:dholbert]]

I posted the following via their "feedback" button, on the right side of the functional version of their site:

======
http://thedailyshow.cc.com serves broken content to Firefox for Android (but not to Firefox for Desktop, and not to Chrome for Android).

See https://bugzilla.mozilla.org/show_bug.cgi?id=1001459

If I change my Dekstop Firefox browser to pretend it's Firefox for Android (by changing its UA string), then I get the broken content. If I make it pretend it's Chrome for Android, I get working content.

Hopefully you can test / debug this using the Firefox for Android UA string that I provided on the bug page linked above.

Thanks!
======

Comment 6

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #0)
>  - Moreover, these errors show up in my error console (which don't show up
> when I load the page with the normal desktop User Agent string):
> > TypeError: t.exec(...) is null                            base.js:1894
> > TypeError: w[namespace][moduleName] is not a constructor  base.js:304

For the record: both of those are pointing to this JS file:
  http://thedailyshow.cc.com/media/base.js

The first error is for something in an extremely long (50,000-character) line of minimized JS, just below this comment:
/* http://media.mtvnservices.com/player/api/2.10.0/api.min.js */

(And the line does seem to match the JS file at that URL.

The second error points to the last line quoted here:
>/* triforce.js */
>(function($,w) {
> [SNIP]
>	$Crabapple.extend($Crabapple.Class, $Crabapple.Triforce, {
> [SNIP]
>		initializeMediator: function() {
>			var mms = this.mediatorName.split('.');
>			var namespace = mms[0];
>			var moduleName = mms[1];
>			this.mediator = new w[namespace][moduleName]();

Comment 7

[Daniel Holbert [:dholbert]]

Also: if I set Firefox for Android's about:config pref "general.useragent.override" to match Chrome for Android's user agent, then we receive a functional site (except the videos don't play; that's probably a codec/plugin issue, and I'll consider it outside the scope of this bug). I see lists of recent episodes, can browse through clips, etc.

So this is definitely a user-agent-sniffing problem on the web site's side.

Comment 8

[Mike Taylor [:miketaylr]]

Thanks for the awesome analysis Daniel. :) Taking a closer look now.

Comment 9

[Mike Taylor [:miketaylr]]

As for the first issue, `t.exec(...) is null`, their t.isHTML5Player method is trying to sniff the UA string to figure out if you're using Android 4+:

r = function (e) {
  if (e.indexOf('android') !== - 1) {
    var t = /android (\d)/gi,
    n = parseInt(t.exec(e) [1], 10);
    return !isNaN(n) && n >= 4
  }
  return !1
},

exec() returns null because there's no match (as we don't include OS version numbers in the UA string).

I wonder why they aren't detecting for video support via canPlayType?

Comment 10

[Mike Taylor [:miketaylr]]

As for the other error, it goes away if you fix the sniffing bug in my previous comment - not sure why $Crabapple.TriforceMediator was undefined in $Crapapple.Triforce.initializeMediator, but it doesn't really matter.

Once that's fixed, clicking on a video, e.g. [1], gives you the following message: 

"Don't freak out but videos don't play on this device.
The website requires at least Android 4.2 or iOS 6."

[1] http://thedailyshow.cc.com/guests/william-cohan/69gtli/william-d--cohan

So we should reach out to them and ask them to fix their UA sniffing to accommodate for browsers that don't have Android OS version info in the UA string.

Comment 11

[Mike Taylor [:miketaylr]]

Similar code on that video page,

checkAgentSupport: function(){
  var agent = navigator.userAgent;
  if(agent.indexOf('Android') !== -1){
    var name = 'Android',
      min_version = '4.0.3';
  } else if(agent.indexOf('Mac OS') !== -1){
    var name = 'OS',
      min_version = '6';
  } else {
    return false;
  }
  var tmp_version = agent.substring( agent.indexOf(name) + name.length + 1 ) + ' _;',
    version_len = Math.min( tmp_version.indexOf(' '), tmp_version.indexOf(';'), tmp_version.indexOf('_') ),
    version = tmp_version.substring(0, version_len);

  return version < min_version;
},

Comment 12

[Karl Dubost💡 :karlcow]

"The Daily Show" belongs to "Comedy Central" which belongs to "MTV Networks" which belongs to "ViaCom".
I tried to find a couple of contacts, but not there yet. :)

Example
http://www.linkedin.com/in/ericsalernonyc

Comment 13

[Mike Taylor [:miketaylr]]

Was passed the contact info of someone who works at Viacom, and sent them a description of the issue.

reply:

> I see what the problem is.  I¹ll make sure this gets forwarded to the
> appropriate team.

Comment 14

[Hallvord R. M. Steen [:hallvors]]

Test passes, site fixed :)

Comment 15

[Daniel Holbert [:dholbert]]

Yup, STR from comment 0 now give me a functional site. Hooray!

Marking FIXED.

Comment 16

[Daniel Holbert [:dholbert]]

(Comment 15 applies to both Firefox release (30) & Nightly on Android, BTW)

Comment 17

[Mike Taylor [:miketaylr]]

See also https://github.com/webcompat/web-bugs/issues/329.