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 }
  25
  26 #shielding {
  27   background-color: rgba(0, 0, 0, 0.5);
  28   height: 100%;
  29   left: 0px;
  30   position: absolute;
  31   top: 0px;
  32   width: 100%;
  33   z-index: 2;
  34 }
  35
  36 #plugin-icon {
  37   display: block;
  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   align-items: center;
  54   display: flex;
  55   justify-content: center;
  56   left: 0px;
  57   position: absolute;
  58   top: 0px;
  59   z-index: 2;
  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"></div>
  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              i18n-values=".style.maxWidth:visibleWidth;
  74                           .style.maxHeight:visibleHeight" />
  75       </div>
  76     </div>
  77   </div>
  78   <script>
  79     document.getElementById('poster').onerror = function() {
  80       this.hidden = true;
  81     };
  82
  83     document.getElementById('outer').onclick = function() {
  84       plugin.load();
  85     };
  86
  87     window.setPosterMargin = function(marginLeft, marginTop) {
  88       var container = document.getElementById('inner-container');
  89       container.style.marginLeft = marginLeft;
  90       container.style.marginTop = marginTop;
  91     };
  92   </script>
  93 </body>
  94 </html>