| <!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, user-scalable=no"> |
| <script> |
| window.onload = function() { |
| if (plugin.didFinishLoading) |
| plugin.didFinishLoading(); |
| }; |
| |
| window.onkeydown = function(e) { |
| if (e.key == 'Enter' || e.key == ' ') { |
| plugin.load(); |
| e.preventDefault(); |
| } |
| }; |
| </script> |
| <link rel="stylesheet" href="plugin_placeholders.css"></link> |
| <style> |
| #outer { |
| border: none; |
| cursor: pointer; |
| } |
| |
| #shielding { |
| background-color: rgba(0, 0, 0, 0.5); |
| height: 100%; |
| left: 0px; |
| position: absolute; |
| top: 0px; |
| width: 100%; |
| z-index: 2; |
| } |
| |
| #plugin-icon { |
| opacity: 0.8; |
| max-height: 100%; |
| max-width: 100%; |
| min-width: 0; |
| min-height: 0; |
| } |
| |
| #plugin-icon:hover { |
| opacity: 0.95; |
| } |
| |
| #poster { |
| height: 100%; |
| object-fit: contain; |
| width: 100%; |
| z-index: 1; |
| } |
| |
| #inner-container { |
| align-items: center; |
| display: flex; |
| height: 100%; |
| justify-content: center; |
| left: 0px; |
| max-height: 100%; |
| max-width: 100%; |
| position: absolute; |
| top: 0px; |
| width: 100%; |
| z-index: 2; |
| } |
| </style> |
| <base i18n-values="href:baseurl"> |
| </head> |
| |
| <body> |
| <div i18n-values="title:name" id="outer"> |
| <img id="poster" i18n-values="srcset:poster"> |
| <div id="shielding"></div> |
| <div id="inner-container" |
| i18n-values=".style.width:visibleWidth;.style.height:visibleHeight"> |
| <img id="plugin-icon" src="plugin_power_saver_play.png" /> |
| </div> |
| </div> |
| <script> |
| document.getElementById('poster').onerror = function() { |
| this.hidden = true; |
| }; |
| |
| document.getElementById('outer').onclick = function() { |
| plugin.load(); |
| }; |
| |
| window.resizePoster = function(marginLeft, marginTop, width, height) { |
| var container = document.getElementById('inner-container'); |
| container.style.marginLeft = marginLeft; |
| container.style.marginTop = marginTop; |
| container.style.width = width; |
| container.style.height = height; |
| |
| if (plugin.didFinishIconRepositionForTesting) { |
| // Defer until reflow complete. |
| window.setTimeout(function() { |
| plugin.didFinishIconRepositionForTesting(); |
| }); |
| } |
| }; |
| </script> |
| </body> |
| </html> |