Home | History | Annotate | Download | only in resources 
      1 <!DOCTYPE HTML>
      2 <html i18n-values="dir:textdirection;">
      3 <head>
      4 <meta charset="utf-8">
      5 <title>Slideshow</title>
      6 <style>
      7 
      8 body {
      9   overflow: hidden;
     10   background: black;
     11 }
     12 
     13 #glow {
     14   left: 0;
     15   right: 0;
     16   bottom: 30px;
     17   height: 8px;
     18   opacity: .4;
     19   position: absolute;
     20   background: -webkit-linear-gradient(transparent, white);
     21 }
     22 
     23 #main {
     24   position: absolute;
     25   left: 0;
     26   right:0;
     27   top: 0;
     28   bottom: 30px;
     29   overflow: hidden;
     30 }
     31 
     32 #playercontrols {
     33   bottom: 0;
     34   left: 0;
     35   z-index: 999;
     36   height: 30px;
     37   opacity: .9;
     38   right: 0;
     39   align:center;
     40   -webkit-box-align: center;
     41   -webkit-box-pack: center;
     42   display: -webkit-box;
     43   position: absolute;
     44   background: -webkit-linear-gradient(#323232, #070707);
     45 }
     46 
     47 #prevbutton > div {
     48   background: url('shared/images/mediaplayer_prev.png');
     49   background-repeat: no-repeat;
     50   background-position: 4px 8px;
     51   width: 100%;
     52   height: 30px;
     53   z-index: 9999;
     54 }
     55 
     56 .currentpicture {
     57   width: 100%;
     58   height: 100%;
     59   position: absolute;
     60   top: 0;
     61   -webkit-transition-property: left;
     62   -webkit-transition-duration: 1s;
     63   display: -webkit-box;
     64   -webkit-box-align: center;
     65   -webkit-box-pack: center;
     66   pointer-events: none;
     67 }
     68 
     69 .comingfromleft {
     70   left: -100%;
     71 }
     72 
     73 .comingfromright {
     74   left: 100%;
     75 }
     76 
     77 #nextbutton > div {
     78   background: url('shared/images/mediaplayer_next.png');
     79   background-repeat: no-repeat;
     80   background-position: 4px 8px;
     81   width: 100%;
     82   height: 30px;
     83   z-index: 9999;
     84 }
     85 
     86 button {
     87   z-index: 9999;
     88   cursor: pointer;
     89   width: 28px;
     90   height: 30px;
     91   webkit-appearance: none;
     92   padding: 0;
     93   border: 0;
     94   background: transparent;
     95 }
     96 
     97 button:hover {
     98   background: -webkit-linear-gradient(#6a7eac, #000000);
     99 }
    100 
    101 </style>
    102 <script src="shared/js/local_strings.js"></script>
    103 <script src="shared/js/media_common.js"></script>
    104 <script>
    105 
    106 document.addEventListener('DOMContentLoaded', load);
    107 
    108 document.onselectstart = function(e) {
    109   e.preventDefault();
    110 };
    111 
    112 function $(o) {
    113   return document.getElementById(o);
    114 }
    115 
    116 ///////////////////////////////////////////////////////////////////////////////
    117 // Document Functions:
    118 
    119 var currentPicture = null;
    120 var prevPicture = null;
    121 var currentFileOffset = 0;
    122 var filelist;
    123 var moveRight = false;
    124 var lastimg = null;
    125 
    126 function loadedPicture() {
    127   if (prevPicture) {
    128     if (moveRight) {
    129       prevPicture.style.left = '-100%';
    130     } else {
    131       prevPicture.style.left = '100%';
    132     }
    133   }
    134   if (window.innerHeight < lastimg.height ||
    135       window.innerWidth < lastimg.width) {
    136      if (lastimg.width > lastimg.height) {
    137        lastimg.style.height = 'auto';
    138        lastimg.style.width = '100%';
    139      } else {
    140        lastimg.style.width = 'auto';
    141        lastimg.style.height = '100%';
    142      }
    143   }
    144   setTimeout(function() {
    145       currentPicture.style.left = '0';
    146    }, 10);
    147 }
    148 
    149 function transitionTo(path, fromTheRight) {
    150   if (currentPicture) {
    151     if (prevPicture) {
    152       $('main').removeChild(prevPicture);
    153     }
    154     prevPicture = currentPicture;
    155   }
    156 
    157   currentPicture = document.createElement('div');
    158 
    159   $('main').appendChild(currentPicture);
    160   if (fromTheRight) {
    161     currentPicture.className = 'currentpicture comingfromright';
    162   } else {
    163     currentPicture.className = 'currentpicture comingfromleft';
    164   }
    165   var image = document.createElement('img');
    166   lastimg = image;
    167   image.onload = loadedPicture;
    168   image.onerror = loadedPicture;
    169   document.location.hash = path;
    170   image.src = 'file://' + path;
    171   currentPicture.appendChild(image);
    172   moveRight = fromTheRight;
    173 }
    174 
    175 function browseFileResult(info, results) {
    176   filelist = results;
    177   if (info.currentOffset) {
    178     currentFileOffset = info.currentOffset;
    179   } else {
    180     currentFileOffset = 0;
    181   }
    182   transitionTo(filelist[currentFileOffset].path, true);
    183 }
    184 
    185 function keyPressed(e) {
    186   // Left Pressed
    187   if (e.keyCode == 37) {
    188     if (currentFileOffset > 0) {
    189       currentFileOffset--;
    190       transitionTo(filelist[currentFileOffset].path, false);
    191     }
    192   }
    193   // Right Pressed
    194   if (e.keyCode == 39) {
    195     if (currentFileOffset < (filelist.length - 1)) {
    196       currentFileOffset++;
    197       transitionTo(filelist[currentFileOffset].path, true);
    198     }
    199   }
    200 }
    201 
    202 function load() {
    203   localStrings = new LocalStrings();
    204 
    205   document.onkeydown = keyPressed;
    206   if (document.location.href.indexOf('#') != -1) {
    207     var currentpathArray = document.location.href.split('#');
    208     var path = currentpathArray[1];
    209     chrome.send('getChildren', [path]);
    210   }
    211 }
    212 
    213 function prevButtonClick() {
    214   if (currentFileOffset > 0) {
    215     currentFileOffset--;
    216     transitionTo(filelist[currentFileOffset].path, false);
    217   }
    218 }
    219 
    220 function nextButtonClick() {
    221   if (currentFileOffset < (filelist.length - 1)) {
    222     currentFileOffset++;
    223     transitionTo(filelist[currentFileOffset].path, true);
    224   }
    225 }
    226 
    227 function toggleFullscreen() {
    228   chrome.send('toggleFullscreen', ['']);
    229 }
    230 
    231 </script>
    232 <body>
    233 <div id="main"></div>
    234 <div id="glow"></div>
    235 <div id="playercontrols">
    236   <button id="prevbutton" onclick="prevButtonClick()">
    237     <div></div>
    238   </button>
    239   <button id="nextbutton" onclick="nextButtonClick()">
    240     <div></div>
    241   </button>
    242 </div>
    243 </body>
    244 </html>
    245