nextcloud /
gallery
| Conditions | 1 |
| Paths | 8 |
| Total Lines | 186 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | /** |
||
| 13 | (function ($, SlideShow, LivePhotosKit, OC) {
|
||
| 14 | "use strict"; |
||
| 15 | /** |
||
| 16 | * Creates a zoomable preview |
||
| 17 | * |
||
| 18 | * @param {*} container
|
||
| 19 | * @constructor |
||
| 20 | */ |
||
| 21 | var LivePreview = function (container) {
|
||
| 22 | this.container = container; |
||
| 23 | this.element = this.container.get(0); |
||
| 24 | this.livePhotoContainer = container.find('.livePhotoContainer');
|
||
| 25 | this.livePhotoContainer.css({display: 'block', width: '1px', height: '1px'});
|
||
| 26 | this.player = LivePhotosKit.createPlayer(); |
||
| 27 | |||
| 28 | this.livePhotoContainer.append(this.player); |
||
| 29 | // this.livePhotoContainer.css('display', 'none');
|
||
| 30 | |||
| 31 | this._detectFullscreen(); |
||
| 32 | this._setupControls(); |
||
| 33 | |||
| 34 | // Reset image position and size on orientation change |
||
| 35 | var self = this; |
||
| 36 | $(window).bind('orientationchange resize', function () {
|
||
| 37 | self._resetView(); |
||
| 38 | }); |
||
| 39 | }; |
||
| 40 | |||
| 41 | LivePreview.prototype = {
|
||
| 42 | container: null, |
||
| 43 | element: null, |
||
| 44 | fullScreen: null, |
||
| 45 | currentImage: null, |
||
| 46 | mimeType: null, |
||
| 47 | smallImageDimension: 200 / window.devicePixelRatio, |
||
| 48 | smallImageScale: 2, |
||
| 49 | |||
| 50 | /** |
||
| 51 | * Launches the Bigshot zoomable preview |
||
| 52 | * |
||
| 53 | * @param {*} image
|
||
| 54 | * @param {number} currentImage
|
||
| 55 | * @param {string} mimeType
|
||
| 56 | */ |
||
| 57 | startLivePreview: function (image, currentImage) {
|
||
| 58 | var defer = $.Deferred(); |
||
| 59 | if (image.mimeType === "image/jpeg" && image.name.substr(-5).toLowerCase().indexOf('.jpg') !== -1) {
|
||
| 60 | var videoExt = '.mov'; |
||
| 61 | if (image.name.substr(-4) === '.JPG') |
||
| 62 | videoExt = '.MOV'; |
||
| 63 | var videoUrl = OC.generateUrl(['../remote.php/webdav/', encodeURI(image.path.substr(0, image.path.length - 4) + videoExt)].join(''));
|
||
| 64 | $.ajax({
|
||
| 65 | url: videoUrl, |
||
| 66 | type: 'HEAD', |
||
| 67 | success: function() {
|
||
| 68 | this.livePhotoContainer.css({display: 'block'});
|
||
| 69 | this.currentImage = currentImage; |
||
| 70 | this.mimeType = image.mimeType; |
||
| 71 | |||
| 72 | this._resetView(); |
||
| 73 | |||
| 74 | this.player.photoSrc = this.currentImage.src; |
||
| 75 | this.player.videoSrc = videoUrl; |
||
| 76 | defer.resolve(); |
||
| 77 | }.bind(this), |
||
| 78 | error: function() {
|
||
| 79 | this.livePhotoContainer.css('display', 'none');
|
||
| 80 | defer.reject(); |
||
| 81 | }.bind(this) |
||
| 82 | }); |
||
| 83 | } else {
|
||
| 84 | defer.reject(); |
||
| 85 | } |
||
| 86 | return defer.promise(); |
||
| 87 | }, |
||
| 88 | |||
| 89 | /** |
||
| 90 | * Resets the element for the next image to be displayed |
||
| 91 | */ |
||
| 92 | reset: function () {
|
||
| 93 | this.livePhotoContainer.css('display', 'none');
|
||
| 94 | this.player.photoSrc = null; |
||
| 95 | this.player.videoSrc = null; |
||
| 96 | }, |
||
| 97 | |||
| 98 | /** |
||
| 99 | * Throws away the zoomable preview |
||
| 100 | */ |
||
| 101 | stop: function () {
|
||
| 102 | if (this.fullScreen !== null) {
|
||
| 103 | this._fullScreenExit(); |
||
| 104 | } |
||
| 105 | }, |
||
| 106 | |||
| 107 | /** |
||
| 108 | * Launches fullscreen mode if the browser supports it |
||
| 109 | */ |
||
| 110 | fullScreenToggle: function () {
|
||
| 111 | if (this.zoomable === null) {
|
||
| 112 | return; |
||
| 113 | } |
||
| 114 | if (this.fullScreen !== null) {
|
||
| 115 | this._fullScreenExit(); |
||
| 116 | } else {
|
||
| 117 | this._fullScreenStart(); |
||
| 118 | } |
||
| 119 | }, |
||
| 120 | |||
| 121 | /** |
||
| 122 | * Detect fullscreen capability |
||
| 123 | * @private |
||
| 124 | */ |
||
| 125 | _detectFullscreen: function () {
|
||
| 126 | this.canFullScreen = this.element.requestFullscreen !== undefined || |
||
| 127 | this.element.mozRequestFullScreen !== undefined || |
||
| 128 | this.element.webkitRequestFullscreen !== undefined || |
||
| 129 | this.element.msRequestFullscreen !== undefined; |
||
| 130 | }, |
||
| 131 | |||
| 132 | /** |
||
| 133 | * Makes UI controls work on touchscreens. Pinch only works on iOS |
||
| 134 | * @private |
||
| 135 | */ |
||
| 136 | _setupControls: function () {
|
||
| 137 | this.player.playbackStyle = LivePhotosKit.PlaybackStyle.FULL; |
||
| 138 | }, |
||
| 139 | |||
| 140 | /** |
||
| 141 | * Resets the image to its original zoomed size |
||
| 142 | * |
||
| 143 | * @private |
||
| 144 | */ |
||
| 145 | _resetView: function () {
|
||
| 146 | var imgWidth = this.currentImage.naturalWidth / window.devicePixelRatio; |
||
| 147 | var imgHeight = this.currentImage.naturalHeight / window.devicePixelRatio; |
||
| 148 | |||
| 149 | var origSizeW = imgWidth; |
||
| 150 | var origSizeH = imgHeight; |
||
| 151 | var ratioVt=(origSizeW/origSizeH); |
||
| 152 | var ratioHz=(origSizeH/origSizeW); |
||
| 153 | var winW = $(window).width(); |
||
| 154 | var winH = $(window).height(); |
||
| 155 | var screenSizeW=Math.round(winW); |
||
| 156 | var screenSizeH=Math.round(winH); |
||
| 157 | var wantedWidth, wantedHeight, wantedLeft, wantedTop; |
||
| 158 | |||
| 159 | if (origSizeW>=origSizeH) {
|
||
| 160 | var newHeight = Math.round(screenSizeW*ratioHz); |
||
| 161 | if (newHeight <= screenSizeH){
|
||
| 162 | wantedHeight = newHeight; |
||
| 163 | wantedWidth = screenSizeW; |
||
| 164 | } else{
|
||
| 165 | wantedHeight = screenSizeH; |
||
| 166 | wantedWidth = Math.round(screenSizeH*ratioVt); |
||
| 167 | } |
||
| 168 | } else{
|
||
| 169 | wantedHeight = screenSizeH; |
||
| 170 | wantedWidth = Math.round(screenSizeH*ratioVt); |
||
| 171 | } |
||
| 172 | wantedLeft = Math.round((screenSizeW - wantedWidth) / 2); |
||
| 173 | wantedTop = Math.round((screenSizeH - wantedHeight) / 2); |
||
| 174 | |||
| 175 | $(this.livePhotoContainer.children().get(0)).css({'width': wantedWidth + 'px', 'height': wantedHeight + 'px', 'top': wantedTop + 'px', 'left': wantedLeft + 'px'});
|
||
| 176 | }, |
||
| 177 | |||
| 178 | /** |
||
| 179 | * Starts the fullscreen previews |
||
| 180 | * |
||
| 181 | * @private |
||
| 182 | */ |
||
| 183 | _fullScreenStart: function () {
|
||
| 184 | this._resetView(); |
||
| 185 | }, |
||
| 186 | |||
| 187 | /** |
||
| 188 | * Stops the fullscreen previews |
||
| 189 | * |
||
| 190 | * @private |
||
| 191 | */ |
||
| 192 | _fullScreenExit: function () {
|
||
| 193 | this._resetView(); |
||
| 194 | } |
||
| 195 | }; |
||
| 196 | |||
| 197 | SlideShow.LivePreview = LivePreview; |
||
| 198 | })(jQuery, SlideShow, LivePhotosKit, OC); |
||
| 199 |
Loading history...