| OLD | NEW |
|---|
| (Empty) |
| 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 -webkit-transform: translateZ(0); | |
| 31 } | |
| 32 | |
| 33 #playercontrols { | |
| 34 bottom: 0; | |
| 35 left: 0; | |
| 36 z-index: 999; | |
| 37 height: 30px; | |
| 38 opacity: .9; | |
| 39 right: 0; | |
| 40 align:center; | |
| 41 -webkit-box-align: center; | |
| 42 -webkit-box-pack: center; | |
| 43 display: -webkit-box; | |
| 44 position: absolute; | |
| 45 background: -webkit-linear-gradient(#323232, #070707); | |
| 46 } | |
| 47 | |
| 48 #prevbutton > div { | |
| 49 background: url('images/mediaplayer_prev.png'); | |
| 50 background-repeat: no-repeat; | |
| 51 background-position: 4px 8px; | |
| 52 width: 100%; | |
| 53 height: 30px; | |
| 54 z-index: 9999; | |
| 55 } | |
| 56 | |
| 57 .currentpicture { | |
| 58 width: 100%; | |
| 59 height: 100%; | |
| 60 position: absolute; | |
| 61 top: 0; | |
| 62 -webkit-transition-property: left; | |
| 63 -webkit-transition-duration: 1s; | |
| 64 display: -webkit-box; | |
| 65 -webkit-box-align: center; | |
| 66 -webkit-box-pack: center; | |
| 67 pointer-events: none; | |
| 68 } | |
| 69 | |
| 70 .comingfromleft { | |
| 71 left: -100%; | |
| 72 } | |
| 73 | |
| 74 .comingfromright { | |
| 75 left: 100%; | |
| 76 } | |
| 77 | |
| 78 #nextbutton > div { | |
| 79 background: url('images/mediaplayer_next.png'); | |
| 80 background-repeat: no-repeat; | |
| 81 background-position: 4px 8px; | |
| 82 width: 100%; | |
| 83 height: 30px; | |
| 84 z-index: 9999; | |
| 85 } | |
| 86 | |
| 87 button { | |
| 88 z-index: 9999; | |
| 89 cursor: pointer; | |
| 90 width: 28px; | |
| 91 height: 30px; | |
| 92 webkit-appearance: none; | |
| 93 padding: 0; | |
| 94 border: 0; | |
| 95 background: transparent; | |
| 96 } | |
| 97 | |
| 98 button:hover { | |
| 99 background: -webkit-linear-gradient(#6a7eac, #000000); | |
| 100 } | |
| 101 | |
| 102 </style> | |
| 103 <script src="chrome://resources/js/local_strings.js"></script> | |
| 104 <script src="chrome://resources/js/media_common.js"></script> | |
| 105 <script> | |
| 106 | |
| 107 document.addEventListener('DOMContentLoaded', load); | |
| 108 | |
| 109 document.onselectstart = function(e) { | |
| 110 e.preventDefault(); | |
| 111 }; | |
| 112 | |
| 113 function $(o) { | |
| 114 return document.getElementById(o); | |
| 115 } | |
| 116 | |
| 117 /////////////////////////////////////////////////////////////////////////////// | |
| 118 // Document Functions: | |
| 119 | |
| 120 var currentPicture = null; | |
| 121 var prevPicture = null; | |
| 122 var currentFileOffset = 0; | |
| 123 var filelist = []; | |
| 124 var moveRight = false; | |
| 125 var lastimg = null; | |
| 126 | |
| 127 function loadedPicture() { | |
| 128 if (prevPicture) { | |
| 129 if (moveRight) { | |
| 130 prevPicture.style.left = '-100%'; | |
| 131 } else { | |
| 132 prevPicture.style.left = '100%'; | |
| 133 } | |
| 134 } | |
| 135 if (window.innerHeight < lastimg.height || | |
| 136 window.innerWidth < lastimg.width) { | |
| 137 if (lastimg.width > lastimg.height) { | |
| 138 lastimg.style.height = 'auto'; | |
| 139 lastimg.style.width = '100%'; | |
| 140 } else { | |
| 141 lastimg.style.width = 'auto'; | |
| 142 lastimg.style.height = '100%'; | |
| 143 } | |
| 144 } | |
| 145 setTimeout(function() { | |
| 146 currentPicture.style.left = '0'; | |
| 147 }, 10); | |
| 148 } | |
| 149 | |
| 150 function transitionTo(filePath, fromTheRight) { | |
| 151 if (currentPicture) { | |
| 152 if (prevPicture) { | |
| 153 $('main').removeChild(prevPicture); | |
| 154 } | |
| 155 prevPicture = currentPicture; | |
| 156 } | |
| 157 | |
| 158 currentPicture = document.createElement('div'); | |
| 159 | |
| 160 $('main').appendChild(currentPicture); | |
| 161 if (fromTheRight) { | |
| 162 currentPicture.className = 'currentpicture comingfromright'; | |
| 163 } else { | |
| 164 currentPicture.className = 'currentpicture comingfromleft'; | |
| 165 } | |
| 166 var image = document.createElement('img'); | |
| 167 lastimg = image; | |
| 168 image.onload = loadedPicture; | |
| 169 image.onerror = loadedPicture; | |
| 170 image.src = filePath; | |
| 171 currentPicture.appendChild(image); | |
| 172 moveRight = fromTheRight; | |
| 173 } | |
| 174 | |
| 175 function browseFileResult() { | |
| 176 currentFileOffset = 0; | |
| 177 if (filelist.length > 0) { | |
| 178 transitionTo(filelist[currentFileOffset], true); | |
| 179 } | |
| 180 } | |
| 181 | |
| 182 function keyPressed(e) { | |
| 183 // Left Pressed | |
| 184 if (e.keyCode == 37) { | |
| 185 if (currentFileOffset > 0) { | |
| 186 currentFileOffset--; | |
| 187 transitionTo(filelist[currentFileOffset], false); | |
| 188 } | |
| 189 } | |
| 190 // Right Pressed | |
| 191 if (e.keyCode == 39) { | |
| 192 if (currentFileOffset < (filelist.length - 1)) { | |
| 193 currentFileOffset++; | |
| 194 transitionTo(filelist[currentFileOffset], true); | |
| 195 } | |
| 196 } | |
| 197 } | |
| 198 | |
| 199 /** | |
| 200 * Pattern of siblibng files to be shown. It should match exactly the same files | |
| 201 * that matches the appropriate "file_filters" section in the manifest. We want | |
| 202 * to avoid situation whan a file is accessible via "prev"/"next" button but not | |
| 203 * accessible via the File Browser directly (and vise versa). | |
| 204 */ | |
| 205 const imageFilesPattern = /\.(jpg|jpeg|png|gif|webp|JPG|JPEG|PNG|GIF|WEBP)$/; | |
| 206 | |
| 207 /** | |
| 208 * Loads directory siblings of the file what match the filePattern. | |
| 209 * Sets filelist. Sets currentFileOffset to index of the fileUrl. | |
| 210 * @param {string} fileUrl The file to show. | |
| 211 */ | |
| 212 function loadDirectorySiblings(fileUrl) { | |
| 213 var fileUrlFixed; | |
| 214 webkitResolveLocalFileSystemURL(fileUrl, function(entry) { | |
| 215 fileUrlFixed = entry.toURL(); // Make sure the URL has canonical shape. | |
| 216 entry.getParent(function(entry) { | |
| 217 readAllEntries(entry.createReader()); | |
| 218 }, onError); | |
| 219 }, onError); | |
| 220 | |
| 221 function readAllEntries(directoryReader) { | |
| 222 directoryReader.readEntries(function(entries) { | |
| 223 if (entries.length > 0) { | |
| 224 onReadSome(entries); | |
| 225 readAllEntries(directoryReader); | |
| 226 } else { | |
| 227 onReadDone(); | |
| 228 } | |
| 229 }, onError); | |
| 230 } | |
| 231 | |
| 232 function onError() { | |
| 233 console.error('Error reading directory content'); | |
| 234 } | |
| 235 | |
| 236 var siblings = []; | |
| 237 function onReadSome(entries) { | |
| 238 for (var i = 0; i < entries.length; i++) { | |
| 239 var entry = entries[i]; | |
| 240 if (entry.isFile && imageFilesPattern.test(entry.name)) { | |
| 241 siblings.push(entry.toURL()); | |
| 242 } | |
| 243 } | |
| 244 } | |
| 245 | |
| 246 function onReadDone() { | |
| 247 // Only change the filelist if siblings have read successfully. | |
| 248 if (siblings.indexOf(fileUrl) >= 0) { | |
| 249 filelist = siblings; | |
| 250 currentFileOffset = filelist.indexOf(fileUrlFixed); | |
| 251 } | |
| 252 } | |
| 253 } | |
| 254 | |
| 255 function load() { | |
| 256 localStrings = new LocalStrings(); | |
| 257 | |
| 258 var views = chrome.extension.getViews(); | |
| 259 for (var i = 0; i < views.length; i++) { | |
| 260 if (views[i].g_slideshow_data) { | |
| 261 filelist = views[i].g_slideshow_data; | |
| 262 views[i].g_slideshow_data = null; | |
| 263 | |
| 264 // If selected exactly one file allow user to navigate to | |
| 265 // directory siblings. | |
| 266 if (filelist && filelist.length == 1) loadDirectorySiblings(filelist[0]); | |
| 267 } | |
| 268 } | |
| 269 | |
| 270 browseFileResult(); | |
| 271 } | |
| 272 | |
| 273 function prevButtonClick() { | |
| 274 if (currentFileOffset > 0) { | |
| 275 currentFileOffset--; | |
| 276 transitionTo(filelist[currentFileOffset], false); | |
| 277 } | |
| 278 } | |
| 279 | |
| 280 function nextButtonClick() { | |
| 281 if (currentFileOffset < (filelist.length - 1)) { | |
| 282 currentFileOffset++; | |
| 283 transitionTo(filelist[currentFileOffset], true); | |
| 284 } | |
| 285 } | |
| 286 | |
| 287 </script> | |
| 288 <body onkeydown="keyPressed(event)"> | |
| 289 <div id="main"></div> | |
| 290 <div id="glow"></div> | |
| 291 <div id="playercontrols"> | |
| 292 <button id="prevbutton" onclick="prevButtonClick()"> | |
| 293 <div></div> | |
| 294 </button> | |
| 295 <button id="nextbutton" onclick="nextButtonClick()"> | |
| 296 <div></div> | |
| 297 </button> | |
| 298 </div> | |
| 299 </body> | |
| 300 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
