chrome/renderer/resources/plugins/plugin_poster.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <meta name="viewport" content="width=device-width, user-scalable=no">
   6 <script>
   7   window.onload = function() {
   8     if (plugin.didFinishLoading)
   9       plugin.didFinishLoading();
  10   };
  11
  12   window.onkeydown = function(e) {
  13     if (e.keyIdentifier == 'Enter' || e.keyIdentifier == 'U+0020') {
  14       plugin.load();
  15       e.preventDefault();
  16     }
  17   };
  18 </script>
  19 <link rel="stylesheet" href="plugin_placeholders.css"></link>
  20 <style>
  21 #outer {
  22   border: none;
  23   cursor: pointer;
  24   position: relative;
  25 }
  26
  27 #shielding {
  28   background-color: rgba(0, 0, 0, 0.5);
  29   height: 100%;
  30   left: 0px;
  31   position: absolute;
  32   top: 0px;
  33   width: 100%;
  34   z-index: 2;
  35 }
  36
  37 #plugin_icon {
  38   opacity: 0.8;
  39 }
  40
  41 #plugin_icon:hover {
  42   opacity: 0.95;
  43 }
  44
  45 #poster {
  46   height: 100%;
  47   object-fit: contain;
  48   width: 100%;
  49   z-index: 1;
  50 }
  51
  52 #inner_container {
  53   height: 100%;
  54   position: relative;
  55   width: 100%;
  56 }
  57
  58 #inner {
  59   margin-top: -25px;
  60 }
  61 </style>
  62 <base i18n-values="href:baseurl">
  63 </head>
  64
  65 <body>
  66   <div i18n-values="title:name" id="outer">
  67     <img id="poster" i18n-values="srcset:poster">
  68     <div id="shielding">
  69       <div id="inner_container"
  70            i18n-values=".style.width:visibleWidth;.style.height:visibleHeight">
  71         <div id="inner">
  72           <img id="plugin_icon" src="plugin_power_saver_play.png" />
  73         </div>
  74       </div>
  75     </div>
  76   </div>
  77   <script>
  78     document.getElementById('poster').onerror = function() {
  79       this.hidden = true;
  80     };
  81
  82     document.getElementById('outer').onclick = function() {
  83       plugin.load();
  84     };
  85
  86     window.setPosterMargin = function(marginLeft, marginTop) {
  87       var container = document.getElementById('inner_container');
  88       container.style.marginLeft = marginLeft;
  89       container.style.marginTop = marginTop;
  90     };
  91   </script>
  92 </body>
  93 </html>