From 3d3d48ea183e83bf1663f935e6001526076b54bf Mon Sep 17 00:00:00 2001
From: Joey Parrish <joeyparrish@google.com>
Date: Fri, 5 May 2017 16:23:21 -0700
Subject: [PATCH] Fix poster visibility in fullscreen mode

This reverts part of a060bf2e, in which we stopped using the poster
attribute in favor of CSS background-image.  We are now using poster
again.  This fixes the visibility of the poster in fullscreen mode.

Closes #778
Fixes: 38004161

Change-Id: I4b8cbb771cd435a04dda5b298cf4daea0ed6f516
---
 demo/asset_section.js |  8 ++++----
 demo/demo.css         | 10 ----------
 demo/main.js          | 18 ++++++++++++++++++
 demo/receiver_app.css |  8 --------
 demo/receiver_app.js  |  8 +++++---
 5 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/demo/asset_section.js b/demo/asset_section.js
index 544cef274..900e7e8eb 100644
--- a/demo/asset_section.js
+++ b/demo/asset_section.js
@@ -191,8 +191,8 @@ shakaDemo.load = function() {
 
   var asset = shakaDemo.preparePlayer_(option.asset);
 
-  // Revert to default styles while we load.
-  shakaDemo.localVideo_.classList.remove('audioOnly');
+  // Revert to default poster while we load.
+  shakaDemo.localVideo_.poster = shakaDemo.mainPoster_;
 
   // Load the manifest.
   player.load(asset.manifestUri).then(function() {
@@ -205,9 +205,9 @@ shakaDemo.load = function() {
     var videoTracks =
         player.getVariantTracks().filter(function(t) { return t.width; });
 
-    // Style the video element differently for audio-only assets.
+    // Set a different poster for audio-only assets.
     if (videoTracks.length == 0) {
-      shakaDemo.localVideo_.classList.add('audioOnly');
+      shakaDemo.localVideo_.poster = shakaDemo.audioOnlyPoster_;
     }
 
     // Disallow casting of offline content.
diff --git a/demo/demo.css b/demo/demo.css
index 4ed5f03cd..9c0f63f7e 100644
--- a/demo/demo.css
+++ b/demo/demo.css
@@ -270,16 +270,6 @@ summary {
   width: 100%;
   height: 100%;
   margin: auto;
-
-  background-color: transparent;
-  background-position: 50% 50%;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-image: url('//shaka-player-demo.appspot.com/assets/poster.jpg');
-}
-
-#video.audioOnly {
-  background-image: url('//shaka-player-demo.appspot.com/assets/audioOnly.gif');
 }
 
 .errorLog {
diff --git a/demo/main.js b/demo/main.js
index eb506af47..6d5455477 100644
--- a/demo/main.js
+++ b/demo/main.js
@@ -63,6 +63,21 @@ shakaDemo.hashCanChange_ = false;
 shakaDemo.suppressHashChangeEvent_ = false;
 
 
+/**
+ * @private
+ * @const {string}
+ */
+shakaDemo.mainPoster_ = '//shaka-player-demo.appspot.com/assets/poster.jpg';
+
+
+/**
+ * @private
+ * @const {string}
+ */
+shakaDemo.audioOnlyPoster_ =
+    '//shaka-player-demo.appspot.com/assets/audioOnly.gif';
+
+
 /**
  * The registered ID of the v2.1 Chromecast receiver demo.
  * @const {string}
@@ -144,6 +159,9 @@ shakaDemo.init = function() {
       shakaDemo.localVideo_ = localVideo;
       shakaDemo.localPlayer_ = localPlayer;
 
+      // Set the default poster.
+      shakaDemo.localVideo_.poster = shakaDemo.mainPoster_;
+
       var asyncSetup = shakaDemo.setupAssets_();
       shakaDemo.setupOffline_();
       shakaDemo.setupConfiguration_();
diff --git a/demo/receiver_app.css b/demo/receiver_app.css
index be5fefd9f..30243873b 100644
--- a/demo/receiver_app.css
+++ b/demo/receiver_app.css
@@ -46,14 +46,6 @@ body {
   margin: auto;
 }
 
-#video.audioOnly {
-  background-color: transparent;
-  background-position: 50% 50%;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-image: url('//shaka-player-demo.appspot.com/assets/audioOnly.gif');
-}
-
 #controlsContainer {
   padding: 0 3%;
   height: auto;
diff --git a/demo/receiver_app.js b/demo/receiver_app.js
index ed5fb65d5..995cbcdb4 100644
--- a/demo/receiver_app.js
+++ b/demo/receiver_app.js
@@ -131,11 +131,13 @@ ShakaReceiver.prototype.checkIdle_ = function() {
     var videoTracks =
         this.player_.getVariantTracks().filter(function(t) { return t.width; });
 
-    // Style the video element differently for audio-only assets.
+    // Set a special poster for audio-only assets.
     if (videoTracks.length == 0) {
-      this.video_.classList.add('audioOnly');
+      this.video_.poster =
+          '//shaka-player-demo.appspot.com/assets/audioOnly.gif';
     } else {
-      this.video_.classList.remove('audioOnly');
+      // The cast receiver never shows the poster for assets with video streams.
+      this.video_.removeAttribute('poster');
     }
   }
 };