WIP

wagtailvideos/static/wagtailvideos/js/vendor/load-image.min.js

+!function(a){"use strict";var b=function(a,c,d){var e,f,g=document.createElement("img");if(g.onerror=c,g.onload=function(){!f||d&&d.noRevoke||b.revokeObjectURL(f),c&&c(b.scale(g,d))},b.isInstanceOf("Blob",a)||b.isInstanceOf("File",a))e=f=b.createObjectURL(a),g._type=a.type;else{if("string"!=typeof a)return!1;e=a,d&&d.crossOrigin&&(g.crossOrigin=d.crossOrigin)}return e?(g.src=e,g):b.readFile(a,function(a){var b=a.target;b&&b.result?g.src=b.result:c&&c(a)})},c=window.createObjectURL&&window||window.URL&&URL.revokeObjectURL&&URL||window.webkitURL&&webkitURL;b.isInstanceOf=function(a,b){return Object.prototype.toString.call(b)==="[object "+a+"]"},b.transformCoordinates=function(){},b.getTransformedOptions=function(a){return a},b.renderImageToCanvas=function(a,b,c,d,e,f,g,h,i,j){return a.getContext("2d").drawImage(b,c,d,e,f,g,h,i,j),a},b.hasCanvasOption=function(a){return a.canvas||a.crop},b.scale=function(a,c){c=c||{};var d,e,f,g,h,i,j,k,l,m=document.createElement("canvas"),n=a.getContext||b.hasCanvasOption(c)&&m.getContext,o=a.naturalWidth||a.width,p=a.naturalHeight||a.height,q=o,r=p,s=function(){var a=Math.max((f||q)/q,(g||r)/r);a>1&&(q=Math.ceil(q*a),r=Math.ceil(r*a))},t=function(){var a=Math.min((d||q)/q,(e||r)/r);1>a&&(q=Math.ceil(q*a),r=Math.ceil(r*a))};return n&&(c=b.getTransformedOptions(c),j=c.left||0,k=c.top||0,c.sourceWidth?(h=c.sourceWidth,void 0!==c.right&&void 0===c.left&&(j=o-h-c.right)):h=o-j-(c.right||0),c.sourceHeight?(i=c.sourceHeight,void 0!==c.bottom&&void 0===c.top&&(k=p-i-c.bottom)):i=p-k-(c.bottom||0),q=h,r=i),d=c.maxWidth,e=c.maxHeight,f=c.minWidth,g=c.minHeight,n&&d&&e&&c.crop?(q=d,r=e,l=h/i-d/e,0>l?(i=e*h/d,void 0===c.top&&void 0===c.bottom&&(k=(p-i)/2)):l>0&&(h=d*i/e,void 0===c.left&&void 0===c.right&&(j=(o-h)/2))):((c.contain||c.cover)&&(f=d=d||f,g=e=e||g),c.cover?(t(),s()):(s(),t())),n?(m.width=q,m.height=r,b.transformCoordinates(m,c),b.renderImageToCanvas(m,a,j,k,h,i,0,0,q,r)):(a.width=q,a.height=r,a)},b.createObjectURL=function(a){return c?c.createObjectURL(a):!1},b.revokeObjectURL=function(a){return c?c.revokeObjectURL(a):!1},b.readFile=function(a,b,c){if(window.FileReader){var d=new FileReader;if(d.onload=d.onerror=b,c=c||"readAsDataURL",d[c])return d[c](a),d}return!1},"function"==typeof define&&define.amd?define(function(){return b}):a.loadImage=b}(this),function(a){"use strict";"function"==typeof define&&define.amd?define(["load-image"],a):a(window.loadImage)}(function(a){"use strict";if(window.navigator&&window.navigator.platform&&/iP(hone|od|ad)/.test(window.navigator.platform)){var b=a.renderImageToCanvas;a.detectSubsampling=function(a){var b,c;return a.width*a.height>1048576?(b=document.createElement("canvas"),b.width=b.height=1,c=b.getContext("2d"),c.drawImage(a,-a.width+1,0),0===c.getImageData(0,0,1,1).data[3]):!1},a.detectVerticalSquash=function(a,b){var c,d,e,f,g,h=a.naturalHeight||a.height,i=document.createElement("canvas"),j=i.getContext("2d");for(b&&(h/=2),i.width=1,i.height=h,j.drawImage(a,0,0),c=j.getImageData(0,0,1,h).data,d=0,e=h,f=h;f>d;)g=c[4*(f-1)+3],0===g?e=f:d=f,f=e+d>>1;return f/h||1},a.renderImageToCanvas=function(c,d,e,f,g,h,i,j,k,l){if("image/jpeg"===d._type){var m,n,o,p,q=c.getContext("2d"),r=document.createElement("canvas"),s=1024,t=r.getContext("2d");if(r.width=s,r.height=s,q.save(),m=a.detectSubsampling(d),m&&(e/=2,f/=2,g/=2,h/=2),n=a.detectVerticalSquash(d,m),m||1!==n){for(f*=n,k=Math.ceil(s*k/g),l=Math.ceil(s*l/h/n),j=0,p=0;h>p;){for(i=0,o=0;g>o;)t.clearRect(0,0,s,s),t.drawImage(d,e,f,g,h,-o,-p,g,h),q.drawImage(r,0,0,s,s,i,j,k,l),o+=s,i+=k;p+=s,j+=l}return q.restore(),c}}return b(c,d,e,f,g,h,i,j,k,l)}}}),function(a){"use strict";"function"==typeof define&&define.amd?define(["load-image"],a):a(window.loadImage)}(function(a){"use strict";var b=a.hasCanvasOption;a.hasCanvasOption=function(a){return b(a)||a.orientation},a.transformCoordinates=function(a,b){var c=a.getContext("2d"),d=a.width,e=a.height,f=b.orientation;if(f)switch(f>4&&(a.width=e,a.height=d),f){case 2:c.translate(d,0),c.scale(-1,1);break;case 3:c.translate(d,e),c.rotate(Math.PI);break;case 4:c.translate(0,e),c.scale(1,-1);break;case 5:c.rotate(.5*Math.PI),c.scale(1,-1);break;case 6:c.rotate(.5*Math.PI),c.translate(0,-e);break;case 7:c.rotate(.5*Math.PI),c.translate(d,-e),c.scale(-1,1);break;case 8:c.rotate(-.5*Math.PI),c.translate(-d,0)}},a.getTransformedOptions=function(a){if(!a.orientation||1===a.orientation)return a;var b,c={};for(b in a)a.hasOwnProperty(b)&&(c[b]=a[b]);switch(a.orientation){case 2:c.left=a.right,c.right=a.left;break;case 3:c.left=a.right,c.top=a.bottom,c.right=a.left,c.bottom=a.top;break;case 4:c.top=a.bottom,c.bottom=a.top;break;case 5:c.left=a.top,c.top=a.left,c.right=a.bottom,c.bottom=a.right;break;case 6:c.left=a.top,c.top=a.right,c.right=a.bottom,c.bottom=a.left;break;case 7:c.left=a.bottom,c.top=a.right,c.right=a.top,c.bottom=a.left;break;case 8:c.left=a.bottom,c.top=a.left,c.right=a.top,c.bottom=a.right}return a.orientation>4&&(c.maxWidth=a.maxHeight,c.maxHeight=a.maxWidth,c.minWidth=a.minHeight,c.minHeight=a.minWidth,c.sourceWidth=a.sourceHeight,c.sourceHeight=a.sourceWidth),c}}),function(a){"use strict";"function"==typeof define&&define.amd?define(["load-image"],a):a(window.loadImage)}(function(a){"use strict";var b=window.Blob&&(Blob.prototype.slice||Blob.prototype.webkitSlice||Blob.prototype.mozSlice);a.blobSlice=b&&function(){var a=this.slice||this.webkitSlice||this.mozSlice;return a.apply(this,arguments)},a.metaDataParsers={jpeg:{65505:[]}},a.parseMetaData=function(b,c,d){d=d||{};var e=this,f=d.maxMetaDataSize||262144,g={},h=!(window.DataView&&b&&b.size>=12&&"image/jpeg"===b.type&&a.blobSlice);(h||!a.readFile(a.blobSlice.call(b,0,f),function(b){if(b.target.error)return console.log(b.target.error),c(g),void 0;var f,h,i,j,k=b.target.result,l=new DataView(k),m=2,n=l.byteLength-4,o=m;if(65496===l.getUint16(0)){for(;n>m&&(f=l.getUint16(m),f>=65504&&65519>=f||65534===f);){if(h=l.getUint16(m+2)+2,m+h>l.byteLength){console.log("Invalid meta data: Invalid segment size.");break}if(i=a.metaDataParsers.jpeg[f])for(j=0;j<i.length;j+=1)i[j].call(e,l,m,h,g,d);m+=h,o=m}!d.disableImageHead&&o>6&&(g.imageHead=k.slice?k.slice(0,o):new Uint8Array(k).subarray(0,o))}else console.log("Invalid JPEG file: Missing JPEG marker.");c(g)},"readAsArrayBuffer"))&&c(g)}}),function(a){"use strict";"function"==typeof define&&define.amd?define(["load-image","load-image-meta"],a):a(window.loadImage)}(function(a){"use strict";a.ExifMap=function(){return this},a.ExifMap.prototype.map={Orientation:274},a.ExifMap.prototype.get=function(a){return this[a]||this[this.map[a]]},a.getExifThumbnail=function(a,b,c){var d,e,f;if(!c||b+c>a.byteLength)return console.log("Invalid Exif data: Invalid thumbnail data."),void 0;for(d=[],e=0;c>e;e+=1)f=a.getUint8(b+e),d.push((16>f?"0":"")+f.toString(16));return"data:image/jpeg,%"+d.join("%")},a.exifTagTypes={1:{getValue:function(a,b){return a.getUint8(b)},size:1},2:{getValue:function(a,b){return String.fromCharCode(a.getUint8(b))},size:1,ascii:!0},3:{getValue:function(a,b,c){return a.getUint16(b,c)},size:2},4:{getValue:function(a,b,c){return a.getUint32(b,c)},size:4},5:{getValue:function(a,b,c){return a.getUint32(b,c)/a.getUint32(b+4,c)},size:8},9:{getValue:function(a,b,c){return a.getInt32(b,c)},size:4},10:{getValue:function(a,b,c){return a.getInt32(b,c)/a.getInt32(b+4,c)},size:8}},a.exifTagTypes[7]=a.exifTagTypes[1],a.getExifValue=function(b,c,d,e,f,g){var h,i,j,k,l,m,n=a.exifTagTypes[e];if(!n)return console.log("Invalid Exif data: Invalid tag type."),void 0;if(h=n.size*f,i=h>4?c+b.getUint32(d+8,g):d+8,i+h>b.byteLength)return console.log("Invalid Exif data: Invalid data offset."),void 0;if(1===f)return n.getValue(b,i,g);for(j=[],k=0;f>k;k+=1)j[k]=n.getValue(b,i+k*n.size,g);if(n.ascii){for(l="",k=0;k<j.length&&(m=j[k],"\x00"!==m);k+=1)l+=m;return l}return j},a.parseExifTag=function(b,c,d,e,f){var g=b.getUint16(d,e);f.exif[g]=a.getExifValue(b,c,d,b.getUint16(d+2,e),b.getUint32(d+4,e),e)},a.parseExifTags=function(a,b,c,d,e){var f,g,h;if(c+6>a.byteLength)return console.log("Invalid Exif data: Invalid directory offset."),void 0;if(f=a.getUint16(c,d),g=c+2+12*f,g+4>a.byteLength)return console.log("Invalid Exif data: Invalid directory size."),void 0;for(h=0;f>h;h+=1)this.parseExifTag(a,b,c+2+12*h,d,e);return a.getUint32(g,d)},a.parseExifData=function(b,c,d,e,f){if(!f.disableExif){var g,h,i,j=c+10;if(1165519206===b.getUint32(c+4)){if(j+8>b.byteLength)return console.log("Invalid Exif data: Invalid segment size."),void 0;if(0!==b.getUint16(c+8))return console.log("Invalid Exif data: Missing byte alignment offset."),void 0;switch(b.getUint16(j)){case 18761:g=!0;break;case 19789:g=!1;break;default:return console.log("Invalid Exif data: Invalid byte alignment marker."),void 0}if(42!==b.getUint16(j+2,g))return console.log("Invalid Exif data: Missing TIFF marker."),void 0;h=b.getUint32(j+4,g),e.exif=new a.ExifMap,h=a.parseExifTags(b,j,j+h,g,e),h&&!f.disableExifThumbnail&&(i={exif:{}},h=a.parseExifTags(b,j,j+h,g,i),i.exif[513]&&(e.exif.Thumbnail=a.getExifThumbnail(b,j+i.exif[513],i.exif[514]))),e.exif[34665]&&!f.disableExifSub&&a.parseExifTags(b,j,j+e.exif[34665],g,e),e.exif[34853]&&!f.disableExifGps&&a.parseExifTags(b,j,j+e.exif[34853],g,e)}}},a.metaDataParsers.jpeg[65505].push(a.parseExifData)}),function(a){"use strict";"function"==typeof define&&define.amd?define(["load-image","load-image-exif"],a):a(window.loadImage)}(function(a){"use strict";a.ExifMap.prototype.tags={256:"ImageWidth",257:"ImageHeight",34665:"ExifIFDPointer",34853:"GPSInfoIFDPointer",40965:"InteroperabilityIFDPointer",258:"BitsPerSample",259:"Compression",262:"PhotometricInterpretation",274:"Orientation",277:"SamplesPerPixel",284:"PlanarConfiguration",530:"YCbCrSubSampling",531:"YCbCrPositioning",282:"XResolution",283:"YResolution",296:"ResolutionUnit",273:"StripOffsets",278:"RowsPerStrip",279:"StripByteCounts",513:"JPEGInterchangeFormat",514:"JPEGInterchangeFormatLength",301:"TransferFunction",318:"WhitePoint",319:"PrimaryChromaticities",529:"YCbCrCoefficients",532:"ReferenceBlackWhite",306:"DateTime",270:"ImageDescription",271:"Make",272:"Model",305:"Software",315:"Artist",33432:"Copyright",36864:"ExifVersion",40960:"FlashpixVersion",40961:"ColorSpace",40962:"PixelXDimension",40963:"PixelYDimension",42240:"Gamma",37121:"ComponentsConfiguration",37122:"CompressedBitsPerPixel",37500:"MakerNote",37510:"UserComment",40964:"RelatedSoundFile",36867:"DateTimeOriginal",36868:"DateTimeDigitized",37520:"SubSecTime",37521:"SubSecTimeOriginal",37522:"SubSecTimeDigitized",33434:"ExposureTime",33437:"FNumber",34850:"ExposureProgram",34852:"SpectralSensitivity",34855:"PhotographicSensitivity",34856:"OECF",34864:"SensitivityType",34865:"StandardOutputSensitivity",34866:"RecommendedExposureIndex",34867:"ISOSpeed",34868:"ISOSpeedLatitudeyyy",34869:"ISOSpeedLatitudezzz",37377:"ShutterSpeedValue",37378:"ApertureValue",37379:"BrightnessValue",37380:"ExposureBias",37381:"MaxApertureValue",37382:"SubjectDistance",37383:"MeteringMode",37384:"LightSource",37385:"Flash",37396:"SubjectArea",37386:"FocalLength",41483:"FlashEnergy",41484:"SpatialFrequencyResponse",41486:"FocalPlaneXResolution",41487:"FocalPlaneYResolution",41488:"FocalPlaneResolutionUnit",41492:"SubjectLocation",41493:"ExposureIndex",41495:"SensingMethod",41728:"FileSource",41729:"SceneType",41730:"CFAPattern",41985:"CustomRendered",41986:"ExposureMode",41987:"WhiteBalance",41988:"DigitalZoomRatio",41989:"FocalLengthIn35mmFilm",41990:"SceneCaptureType",41991:"GainControl",41992:"Contrast",41993:"Saturation",41994:"Sharpness",41995:"DeviceSettingDescription",41996:"SubjectDistanceRange",42016:"ImageUniqueID",42032:"CameraOwnerName",42033:"BodySerialNumber",42034:"LensSpecification",42035:"LensMake",42036:"LensModel",42037:"LensSerialNumber",0:"GPSVersionID",1:"GPSLatitudeRef",2:"GPSLatitude",3:"GPSLongitudeRef",4:"GPSLongitude",5:"GPSAltitudeRef",6:"GPSAltitude",7:"GPSTimeStamp",8:"GPSSatellites",9:"GPSStatus",10:"GPSMeasureMode",11:"GPSDOP",12:"GPSSpeedRef",13:"GPSSpeed",14:"GPSTrackRef",15:"GPSTrack",16:"GPSImgDirectionRef",17:"GPSImgDirection",18:"GPSMapDatum",19:"GPSDestLatitudeRef",20:"GPSDestLatitude",21:"GPSDestLongitudeRef",22:"GPSDestLongitude",23:"GPSDestBearingRef",24:"GPSDestBearing",25:"GPSDestDistanceRef",26:"GPSDestDistance",27:"GPSProcessingMethod",28:"GPSAreaInformation",29:"GPSDateStamp",30:"GPSDifferential",31:"GPSHPositioningError"},a.ExifMap.prototype.stringValues={ExposureProgram:{0:"Undefined",1:"Manual",2:"Normal program",3:"Aperture priority",4:"Shutter priority",5:"Creative program",6:"Action program",7:"Portrait mode",8:"Landscape mode"},MeteringMode:{0:"Unknown",1:"Average",2:"CenterWeightedAverage",3:"Spot",4:"MultiSpot",5:"Pattern",6:"Partial",255:"Other"},LightSource:{0:"Unknown",1:"Daylight",2:"Fluorescent",3:"Tungsten (incandescent light)",4:"Flash",9:"Fine weather",10:"Cloudy weather",11:"Shade",12:"Daylight fluorescent (D 5700 - 7100K)",13:"Day white fluorescent (N 4600 - 5400K)",14:"Cool white fluorescent (W 3900 - 4500K)",15:"White fluorescent (WW 3200 - 3700K)",17:"Standard light A",18:"Standard light B",19:"Standard light C",20:"D55",21:"D65",22:"D75",23:"D50",24:"ISO studio tungsten",255:"Other"},Flash:{0:"Flash did not fire",1:"Flash fired",5:"Strobe return light not detected",7:"Strobe return light detected",9:"Flash fired, compulsory flash mode",13:"Flash fired, compulsory flash mode, return light not detected",15:"Flash fired, compulsory flash mode, return light detected",16:"Flash did not fire, compulsory flash mode",24:"Flash did not fire, auto mode",25:"Flash fired, auto mode",29:"Flash fired, auto mode, return light not detected",31:"Flash fired, auto mode, return light detected",32:"No flash function",65:"Flash fired, red-eye reduction mode",69:"Flash fired, red-eye reduction mode, return light not detected",71:"Flash fired, red-eye reduction mode, return light detected",73:"Flash fired, compulsory flash mode, red-eye reduction mode",77:"Flash fired, compulsory flash mode, red-eye reduction mode, return light not detected",79:"Flash fired, compulsory flash mode, red-eye reduction mode, return light detected",89:"Flash fired, auto mode, red-eye reduction mode",93:"Flash fired, auto mode, return light not detected, red-eye reduction mode",95:"Flash fired, auto mode, return light detected, red-eye reduction mode"},SensingMethod:{1:"Undefined",2:"One-chip color area sensor",3:"Two-chip color area sensor",4:"Three-chip color area sensor",5:"Color sequential area sensor",7:"Trilinear sensor",8:"Color sequential linear sensor"},SceneCaptureType:{0:"Standard",1:"Landscape",2:"Portrait",3:"Night scene"},SceneType:{1:"Directly photographed"},CustomRendered:{0:"Normal process",1:"Custom process"},WhiteBalance:{0:"Auto white balance",1:"Manual white balance"},GainControl:{0:"None",1:"Low gain up",2:"High gain up",3:"Low gain down",4:"High gain down"},Contrast:{0:"Normal",1:"Soft",2:"Hard"},Saturation:{0:"Normal",1:"Low saturation",2:"High saturation"},Sharpness:{0:"Normal",1:"Soft",2:"Hard"},SubjectDistanceRange:{0:"Unknown",1:"Macro",2:"Close view",3:"Distant view"},FileSource:{3:"DSC"},ComponentsConfiguration:{0:"",1:"Y",2:"Cb",3:"Cr",4:"R",5:"G",6:"B"},Orientation:{1:"top-left",2:"top-right",3:"bottom-right",4:"bottom-left",5:"left-top",6:"right-top",7:"right-bottom",8:"left-bottom"}},a.ExifMap.prototype.getText=function(a){var b=this.get(a);switch(a){case"LightSource":case"Flash":case"MeteringMode":case"ExposureProgram":case"SensingMethod":case"SceneCaptureType":case"SceneType":case"CustomRendered":case"WhiteBalance":case"GainControl":case"Contrast":case"Saturation":case"Sharpness":case"SubjectDistanceRange":case"FileSource":case"Orientation":return this.stringValues[a][b];case"ExifVersion":case"FlashpixVersion":return String.fromCharCode(b[0],b[1],b[2],b[3]);case"ComponentsConfiguration":return this.stringValues[a][b[0]]+this.stringValues[a][b[1]]+this.stringValues[a][b[2]]+this.stringValues[a][b[3]];case"GPSVersionID":return b[0]+"."+b[1]+"."+b[2]+"."+b[3]}return String(b)},function(a){var b,c=a.tags,d=a.map;for(b in c)c.hasOwnProperty(b)&&(d[c[b]]=b)}(a.ExifMap.prototype),a.ExifMap.prototype.getAll=function(){var a,b,c={};for(a in this)this.hasOwnProperty(a)&&(b=this.tags[a],b&&(c[b]=this.getText(b)));return c}});
\ No newline at end of file

wagtailvideos/static/wagtailvideos/js/video-chooser.js

+function createVideoChooser(id) {
+    var chooserElement = $('#' + id + '-chooser');
+    var previewVideo = chooserElement.find('.preview-video img');
+    var input = $('#' + id);
+    var editLink = chooserElement.find('.edit-link');
+
+    $('.action-choose', chooserElement).click(function() {
+        ModalWorkflow({
+            url: window.chooserUrls.videoChooser,
+            responses: {
+                videoChosen: function(videoData) {
+                    input.val(videoData.id);
+                    previewVideo.attr({
+                        src: videoData.preview.url,
+                        width: videoData.preview.width,
+                        height: videoData.preview.height,
+                        alt: videoData.title
+                    });
+                    chooserElement.removeClass('blank');
+                    editLink.attr('href', videoData.edit_link);
+                }
+            }
+        });
+    });
+
+    $('.action-clear', chooserElement).click(function() {
+        input.val('');
+        chooserElement.addClass('blank');
+    });
+}

wagtailvideos/static/wagtailvideos/js/video-url-generator.js

+$(function() {
+    'use strict';
+
+    $('.video-url-generator').each(function() {
+        var $this = $(this);
+        var $form = $this.find('form');
+        var $filterMethodField = $form.find('select#id_filter_method');
+        var $widthField = $form.find('input#id_width');
+        var $heightField = $form.find('input#id_height');
+        var $closenessField = $form.find('input#id_closeness');
+        var $result = $this.find('#result-url');
+        var $loadingMask = $this.find('.loading-mask')
+        var $preview = $this.find('img.preview');
+        var $sizeNote = $('#note-size')
+
+        var generatorUrl = $this.data('generatorUrl');
+
+        function formChangeHandler() {
+            var filterSpec = $filterMethodField.val();
+
+            $loadingMask.addClass('loading');
+
+            if (filterSpec == 'original') {
+                $widthField.prop('disabled', true);
+                $heightField.prop('disabled', true);
+                $closenessField.prop('disabled', true);
+            } else if (filterSpec == 'width') {
+                $widthField.prop('disabled', false);
+                $heightField.prop('disabled', true);
+                $closenessField.prop('disabled', true);
+                filterSpec += '-' + $widthField.val();
+            } else if (filterSpec == 'height') {
+                $widthField.prop('disabled', true);
+                $heightField.prop('disabled', false);
+                $closenessField.prop('disabled', true);
+                filterSpec += '-' + $heightField.val();
+            } else if (filterSpec == 'min' || filterSpec == 'max' || filterSpec == 'fill') {
+                $widthField.prop('disabled', false);
+                $heightField.prop('disabled', false);
+
+                if (filterSpec == 'fill') {
+                    $closenessField.prop('disabled', false);
+                    filterSpec += '-' + $widthField.val() + 'x' + $heightField.val() + '-c' + $closenessField.val()
+                } else {
+                    $closenessField.prop('disabled', true);
+                    filterSpec += '-' + $widthField.val() + 'x' + $heightField.val();
+                }
+            }
+
+            // Display note about scaled down images if image is large
+            if ($widthField.val() > $(window).width()) {
+                $sizeNote.show();
+            } else {
+                $sizeNote.hide();
+            }
+
+            // Fields with width and height
+            $.getJSON(generatorUrl.replace('__filterspec__', filterSpec))
+                .done(function(data) {
+                    $result.val(data.url);
+                    $preview.attr('src', data.preview_url);
+                    $loadingMask.removeClass('loading');
+                })
+                .fail(function(data) {
+                    $result.val(data.responseJSON.error);
+                    $preview.attr('src', '');
+                    $loadingMask.removeClass('loading');
+                });
+        }
+
+        $form.change($.debounce(500, formChangeHandler));
+        $form.keyup($.debounce(500, formChangeHandler));
+        formChangeHandler();
+
+        // When the user clicks the URL, automatically select the whole thing (for easier copying)
+        $result.click(function() {
+            $(this).select();
+        });
+    });
+});

wagtailvideos/static/wagtailvideos/scss/add-multiple.scss

+@import 'wagtailadmin/scss/variables';
+@import 'wagtailadmin/scss/mixins';
+@import 'wagtailadmin/scss/grid';
+
+.replace-file-input {
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+    padding-bottom: 2px;
+
+    [type=file] {
+        padding: 0;
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        right: 0;
+        direction: ltr;
+        width: auto;
+        display: block;
+        font-size: 5em;
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
+
+    &:hover {
+        cursor: pointer;
+
+        button {
+            background-color: $color-teal-darker;
+        }
+    }
+}
+
+.upload-list {
+    > li {
+        padding: 1em;
+    }
+
+    .left {
+        text-align: center;
+    }
+
+    .preview {
+        width: 150px;
+        min-height: 150px;
+        display: block;
+        position: relative;
+        text-align: center;
+        max-width: 100%;
+        margin: auto;
+    }
+
+    .progress, 
+    .thumb, 
+    .thumb:before, 
+    canvas, 
+    img {
+        position: absolute;
+        max-width: 100%;
+    }
+
+    .progress {
+        box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.4);
+        z-index: 4;
+        top: 60%;
+        left: 20%;
+        right: 20%;
+        width: 60%;
+    }
+
+    .thumb {
+        top: 0; 
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1;
+        width: 100%;
+    }
+
+    .thumb:before, 
+    canvas, 
+    img {
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+    }
+
+    .thumb:before {
+        z-index: 2;
+        top: 0;
+        width: 1em;
+        font-size: 10em;
+        line-height: 1.4em;
+        color: lighten($color-grey-4, 4%);
+    }
+
+    canvas, 
+    img {
+        z-index: 3;
+    }
+
+    .hasthumb {
+        &:before {
+            display: none;        
+        }
+    }
+
+    .status-msg {
+        display: none;
+    }
+
+    .upload-complete {
+        .progress {
+            opacity: 0;
+        }
+    }
+
+    .upload-success {
+        .status-msg.success {
+            display: block;
+        }
+    }
+
+    .upload-failure {
+        border-color: $color-red;
+
+        .preview {
+            display: none;
+        }
+        
+        .status-msg.failure {
+            display: block;
+        }
+    }
+}

wagtailvideos/static/wagtailvideos/scss/focal-point-chooser.scss

+@import 'wagtailadmin/scss/variables';
+@import 'wagtailadmin/scss/mixins';
+
+.focal-point-chooser {
+    position: relative;
+
+    .current-focal-point-indicator {
+        @include transition(opacity 0.2s ease);
+        box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 1);
+        position: absolute;
+        border: 1px solid $color-teal;
+        opacity: 0.5;
+
+        .hidden {
+            display: none;
+        }
+    }
+
+    &:hover .current-focal-point-indicator {
+        opacity: 0;
+    }
+}

wagtailvideos/templates/wagtailvideos/chooser/chooser.html

+{% load wagtailimages_tags %}
+{% load i18n %}
+{% trans "Choose a video" as choose_str %}
+{% include "wagtailadmin/shared/header.html" with title=choose_str merged=1 tabbed=1 icon="image" %}
+
+{% if uploadform %}
+    <ul class="tab-nav merged">
+        <li class="{% if not uploadform.errors %}active{% endif %}"><a href="#search" >{% trans "Search" %}</a></li>
+        <li class="{% if uploadform.errors %}active{% endif %}"><a href="#upload">{% trans "Upload" %}</a></li>
+    </ul>
+{% endif %}
+
+<div class="tab-content">
+    <section id="search" class="{% if not uploadform.errors %}active{% endif %} nice-padding">
+        <form class="image-search search-bar" action="{% url 'wagtailimages:chooser' %}{% if will_select_format %}?select_format=true{% endif %}" method="GET" autocomplete="off">
+            <ul class="fields">
+                {% for field in searchform %}
+                    {% include "wagtailadmin/shared/field_as_li.html" with field=field %}
+                {% endfor %}
+                {% if collections %}
+                    {% include "wagtailadmin/shared/collection_chooser.html" %}
+                {% endif %}
+                {% if popular_tags %}
+                    <li class="taglist">
+                        <h3>{% trans 'Popular tags' %}</h3>
+                        {% for tag in popular_tags %}
+                            <a class="suggested-tag tag" href="{% url 'wagtailimages:index' %}?tag={{ tag.name|urlencode }}">{{ tag.name }}</a>
+                        {% endfor %}
+                    </li>
+                {% endif %}
+            </ul>
+        </form>
+        <div id="image-results">
+            {% include "wagtailimages/chooser/results.html" %}
+        </div>
+    </section>
+    {% if uploadform %}
+        <section id="upload" class="{% if uploadform.errors %}active{% endif %} nice-padding">
+            <form class="image-upload" action="{% url 'wagtailimages:chooser_upload' %}{% if will_select_format %}?select_format=true{% endif %}" method="POST" enctype="multipart/form-data">
+                {% csrf_token %}
+                <ul class="fields">
+                    {% for field in uploadform %}
+                        {% if field.is_hidden %}
+                            {{ field }}
+                        {% else %}
+                            {% include "wagtailadmin/shared/field_as_li.html" with field=field %}
+                        {% endif %}
+                    {% endfor %}
+                    <li>
+                        <button type="submit" class="button-longrunning" data-clicked-text="{% trans 'Uploading...' %}"><span class="icon icon-spinner"></span><em>{% trans 'Upload' %}</em></button>
+                    </li>
+                </ul>
+            </form>
+        </section>
+    {% endif %}
+</div>

wagtailvideos/templates/wagtailvideos/chooser/chooser.js

+{% load i18n %}
+function(modal) {
+    var searchUrl = $('form.image-search', modal.body).attr('action');
+
+    /* currentTag stores the tag currently being filtered on, so that we can
+    preserve this when paginating */
+    var currentTag;
+
+    function ajaxifyLinks (context) {
+        $('.listing a', context).click(function() {
+            modal.loadUrl(this.href);
+            return false;
+        });
+
+        $('.pagination a', context).click(function() {
+            var page = this.getAttribute("data-page");
+            setPage(page);
+            return false;
+        });
+    }
+
+    function fetchResults(requestData) {
+        $.ajax({
+            url: searchUrl,
+            data: requestData,
+            success: function(data, status) {
+                $('#image-results').html(data);
+                ajaxifyLinks($('#image-results'));
+            }
+        });
+    }
+
+    function search() {
+        /* Searching causes currentTag to be cleared - otherwise there's
+        no way to de-select a tag */
+        currentTag = null;
+        fetchResults({
+            q: $('#id_q').val(),
+            collection_id: $('#collection_chooser_collection_id').val()
+        });
+        return false;
+    }
+
+    function setPage(page) {
+        params = {p: page};
+        if ($('#id_q').val().length){
+            params['q'] = $('#id_q').val();
+        }
+        if (currentTag) {
+            params['tag'] = currentTag;
+        }
+        params['collection_id'] = $('#collection_chooser_collection_id').val();
+        fetchResults(params);
+        return false;
+    }
+
+    ajaxifyLinks(modal.body);
+
+    $('form.image-upload', modal.body).submit(function() {
+        var formdata = new FormData(this);
+
+        $.ajax({
+            url: this.action,
+            data: formdata,
+            processData: false,
+            contentType: false,
+            type: 'POST',
+            dataType: 'text',
+            success: function(response){
+                modal.loadResponseText(response);
+            },
+            error: function(response, textStatus, errorThrown) {
+                {% trans "Server Error" as error_label %}
+                {% trans "Report this error to your webmaster with the following information:" as error_message %}
+                message = '{{ error_message|escapejs }}<br />' + errorThrown + ' - ' + response.status;
+                $('#upload').append(
+                    '<div class="help-block help-critical">' +
+                    '<strong>{{ error_label|escapejs }}: </strong>' + message + '</div>');
+            }
+        });
+
+        return false;
+    });
+
+    $('form.image-search', modal.body).submit(search);
+
+    $('#id_q').on('input', function() {
+        clearTimeout($.data(this, 'timer'));
+        var wait = setTimeout(search, 200);
+        $(this).data('timer', wait);
+    });
+    $('#collection_chooser_collection_id').change(search);
+    $('a.suggested-tag').click(function() {
+        currentTag = $(this).text();
+        $('#id_q').val('');
+        fetchResults({
+            'tag': currentTag,
+            collection_id: $('#collection_chooser_collection_id').val()
+        });
+        return false;
+    });
+
+    {% url 'wagtailadmin_tag_autocomplete' as autocomplete_url %}
+
+    /* Add tag entry interface (with autocompletion) to the tag field of the image upload form */
+    $('#id_tags', modal.body).tagit({
+        autocomplete: {source: "{{ autocomplete_url|addslashes }}"}
+    });
+}

wagtailvideos/templates/wagtailvideos/chooser/image_chosen.js

+function(modal) {
+    modal.respond('imageChosen', {{ image_json|safe }});
+    modal.close();
+}

wagtailvideos/templates/wagtailvideos/chooser/results.html

+{% load wagtailimages_tags wagtailadmin_tags %}
+{% load i18n %}
+{% if videos %}
+    {% if is_searching %}
+        <h2>
+        {% blocktrans count counter=videos.paginator.count %}
+            There is one match
+        {% plural %}
+            There are {{ counter }} matches
+        {% endblocktrans %}
+        </h2>
+    {% else %}
+        <h2>{% trans "Latest videos" %}</h2>
+    {% endif %}
+
+    <ul class="listing horiz images chooser">
+        {% for video in videos %}
+            <li>
+                <a class="image-choice" href="{% if will_select_format %}{% url 'wagtailimages:chooser_select_format' image.id %}{% else %}{% url 'wagtailimages:image_chosen' image.id %}{% endif %}">
+                    <div class="image">{% image image max-165x165 class="show-transparency" %}</div>
+                    <h3>{{ video.title|ellipsistrim:60 }}</h3>
+                </a>
+            </li>
+        {% endfor %}
+    </ul>
+
+    {% include "wagtailadmin/shared/pagination_nav.html" with items=videos is_ajax=1 %}
+{% endif %}

wagtailvideos/templates/wagtailvideos/chooser/select_format.html

+{% load wagtailimages_tags %}
+{% load i18n %}
+{% trans "Choose a format" as choose_str %}
+{% include "wagtailadmin/shared/header.html" with title=choose_str %}
+
+<div class="row row-flush nice-padding">
+    <div class="col6">
+        {% image image max-800x600 %}
+    </div>
+    <div class="col6">
+        <form action="{% url 'wagtailimages:chooser_select_format' image.id %}" method="POST">
+            {% csrf_token %}
+            <ul class="fields">
+                {% for field in form %}
+                    {% include "wagtailadmin/shared/field_as_li.html" with field=field %}
+                {% endfor %}
+                <li><input type="submit" value="{% trans 'Insert image' %}" /></li>
+            </ul>
+        </form>
+    </div>
+</div>

wagtailvideos/templates/wagtailvideos/chooser/select_format.js

+function(modal) {
+    $('form', modal.body).submit(function() {
+        var formdata = new FormData(this);
+
+        $.post(this.action, $(this).serialize(), function(response){
+            modal.loadResponseText(response);
+        }, 'text');
+
+        return false;
+    });
+}

wagtailvideos/templates/wagtailvideos/edit_handlers/image_chooser_panel.html

+{# Image chooser is now implemented as an entirely standard form widget - image_chooser_panel.html is redundant #}
+{% include "wagtailadmin/shared/field.html" %}

wagtailvideos/templates/wagtailvideos/homepage/site_summary_images.html

+{% load i18n wagtailadmin_tags %}
+
+<li class="icon icon-image">
+    <a href="{% url 'wagtailimages:index' %}">
+    {% blocktrans count counter=total_images with total_images|intcomma as total %}
+        <span>{{ total }}</span> Image
+    {% plural %}
+        <span>{{ total }}</span> Images
+    {% endblocktrans %}
+    </a>
+</li>

wagtailvideos/templates/wagtailvideos/multiple/add.html

+{% extends "wagtailadmin/base.html" %}
+{% load wagtailimages_tags i18n staticfiles %}
+{% block titletag %}{% trans "Add multiple videos" %}{% endblock %}
+{% block extra_css %}
+    {{ block.super }}
+
+    <link rel="stylesheet" href="{% static 'wagtailvideos/css/add-multiple.css' %}" type="text/css" />
+{% endblock %}
+
+{% block content %}
+    {% trans "Add videos" as add_str %}
+    {% include "wagtailadmin/shared/header.html" with title=add_str icon="video" %}
+
+    <div class="nice-padding">
+        <div class="drop-zone">
+            <p>{% trans "Drag and drop videos into this area to upload immediately." %}</p>
+            <p>{{ help_text }}
+
+            <form action="{% url 'wagtailvideos:add_multiple' %}" method="POST" enctype="multipart/form-data">
+                <div class="replace-file-input">
+                    <button class="bicolor icon icon-plus">{% trans "Or choose from your computer" %}</button>
+                    <input id="fileupload" type="file" name="files[]" data-url="{% url 'wagtailvideos:add_multiple' %}" multiple>
+                </div>
+                {% csrf_token %}
+                {% if collections %}
+                    <div class="field">
+                        <label for="id_addimage_collection">{% trans "Add to collection:" %}</label>
+                        <div class="field-content">
+                            <select id="id_addimage_collection" name="collection">
+                                {% for collection in collections %}
+                                    <option value="{{ collection.id }}">{{ collection.name }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+                {% endif %}
+            </form>
+        </div>
+
+        <div id="overall-progress" class="progress progress-secondary">
+            <div class="bar" style="width: 0%;">0%</div>
+        </div>
+
+        <ul id="upload-list" class="upload-list multiple"></ul>
+    </div>
+
+    <script id="upload-list-item" type="text/template">
+        <li class="row">
+            <div class="left col3">
+                <div class="preview">
+                    <div class="thumb icon icon-image"></div>
+                    <div class="progress">
+                        <div class="bar" style="width: 0%;"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="right col9">
+                <p class="status-msg success">{% trans "Upload successful. Please update this video with a more appropriate title, if necessary. You may also delete the video completely if the upload wasn't required." %}</p>
+                <p class="status-msg failure">{% trans "Sorry, upload failed." %}</p>
+                <p class="status-msg update-success">{% trans "Video updated." %}</p>
+                <p class="status-msg failure error_messages"></p>
+            </div>
+        </li>
+    </script>
+{% endblock %}
+
+{% block extra_js %}
+    {{ block.super }}
+
+    <!-- this exact order of plugins is vital -->
+    <script src="{% static 'wagtailvideos/js/vendor/load-image.min.js' %}"></script>
+    <script src="{% static 'wagtailvideos/js/vendor/canvas-to-blob.min.js' %}"></script>
+    <script src="{% static 'wagtailadmin/js/vendor/jquery.iframe-transport.js' %}"></script>
+    <script src="{% static 'wagtailadmin/js/vendor/jquery.fileupload.js' %}"></script>
+    <script src="{% static 'wagtailadmin/js/vendor/jquery.fileupload-process.js' %}"></script>
+    <script src="{% static 'wagtailvideos/js/vendor/jquery.fileupload-image.js' %}"></script>
+    <script src="{% static 'wagtailvideos/js/vendor/jquery.fileupload-validate.js' %}"></script>
+    <script src="{% static 'wagtailadmin/js/vendor/tag-it.js' %}"></script>
+
+    <!-- Main script -->
+    <script src="{% static 'wagtailvideos/js/add-multiple.js' %}"></script>
+
+    {% url 'wagtailadmin_tag_autocomplete' as autocomplete_url %}
+    <script>
+        window.fileupload_opts = {
+            simple_upload_url: "{% url 'wagtailvideos:add' %}",
+            accepted_file_types: /\.({{ allowed_extensions|join:"|" }})$/i, //must be regex
+            max_file_size: {{ max_filesize|stringformat:"s"|default:"null" }}, //numeric format
+            errormessages: {
+                max_file_size: "{{ error_max_file_size }}",
+                accepted_file_types: "{{ error_accepted_file_types }}"
+            }
+        }
+        window.tagit_opts = {
+            autocomplete: {source: "{{ autocomplete_url|addslashes }}"}
+        };
+    </script>
+{% endblock %}

wagtailvideos/templates/wagtailvideos/multiple/edit_form.html

+{% load i18n %}
+
+<form action="{% url 'wagtailvideos:edit_multiple' video.id %}" method="POST" enctype="multipart/form-data">
+    <ul class="fields">
+        {% csrf_token %}
+        {% for field in form %}
+            {% if field.is_hidden %}
+                {{ field }}
+            {% else %}
+                {% include "wagtailadmin/shared/field_as_li.html" %}
+            {% endif %}
+        {% endfor %}
+        <li>
+            <input type="submit" value="{% trans 'Update' %}" />
+            <a href="{% url 'wagtailvideos:delete_multiple' video.id %}" class="delete button button-secondary no">{% trans "Delete" %}</a>
+        </li>
+    </ul>
+</form>

wagtailvideos/templates/wagtailvideos/permissions/includes/image_permissions_formset.html

+{% extends "wagtailadmin/permissions/includes/collection_member_permissions_formset.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Image permissions" %}{% endblock %}
+{% block add_button_label %}{% trans "Add an image permission" %}{% endblock %}

wagtailvideos/templates/wagtailvideos/videos/_file_field.html

+{% extends "wagtailadmin/shared/field.html" %}
+{% load i18n wagtailimages_tags %}
+{% block form_field %}
+	{% image image original as original_image %}
+
+    <a href="{{ original_image.url }}" class="icon icon-image">{{ image.filename }}</a> ({{ original_image.width }}x{{ original_image.height}})<br /><br />
+
+    {% trans "Change image file:" %}
+    {{ field }}
+{% endblock %}

wagtailvideos/templates/wagtailvideos/videos/_file_field_as_li.html

+{% load wagtailadmin_tags %}
+<li class="{% if field.field.required %}required{% endif %} {{ wrapper_classes }} {{ li_classes }} {% if field.errors %}error{% endif %}">
+    {% include "wagtailimages/images/_file_field.html" %}
+</li>
\ No newline at end of file

wagtailvideos/templates/wagtailvideos/videos/add.html

+{% extends "wagtailadmin/base.html" %}
+{% load wagtailimages_tags %}
+{% load i18n %}
+{% block titletag %}{% trans "Add an image" %}{% endblock %}
+
+{% block extra_js %}
+    {{ block.super }}
+
+    {% url 'wagtailadmin_tag_autocomplete' as autocomplete_url %}
+    <script>
+        $(function() {
+            $('#id_tags').tagit({
+                autocomplete: {source: "{{ autocomplete_url|addslashes }}"}
+            });
+        });
+    </script>
+{% endblock %}
+
+{% block content %}
+    {% trans "Add image" as add_str %}
+    {% include "wagtailadmin/shared/header.html" with title=add_str icon="image" %}
+
+    <div class="nice-padding">
+        <form action="{% url 'wagtailimages:add' %}" method="POST" enctype="multipart/form-data">
+            {% csrf_token %}
+            <ul class="fields">
+                {% for field in form %}
+                    {% if field.is_hidden %}
+                        {{ field }}
+                    {% else %}
+                        {% include "wagtailadmin/shared/field_as_li.html" with field=field %}
+                    {% endif %}
+                {% endfor %}
+                <li><input type="submit" value="{% trans 'Save' %}" /></li>
+            </ul>
+        </form>
+    </div>
+{% endblock %}

wagtailvideos/templates/wagtailvideos/videos/confirm_delete.html

+{% extends "wagtailadmin/base.html" %}
+{% load wagtailimages_tags %}
+{% load i18n %}
+{% block titletag %}{% trans "Delete image" %}{% endblock %}
+
+{% block content %}
+    {% trans "Delete image" as del_str %}
+    {% include "wagtailadmin/shared/header.html" with title=del_str icon="image" %}
+
+    <div class="row row-flush nice-padding">
+        <div class="col6">
+            {% image image max-800x600 %}
+        </div>
+        <div class="col6">
+            <p>{% trans "Are you sure you want to delete this image?" %}</p>
+            <form action="{% url 'wagtailimages:delete' image.id %}" method="POST">
+                {% csrf_token %}
+                <input type="submit" value="{% trans 'Yes, delete' %}" class="serious" />
+            </form>
+        </div>
+    </div>
+{% endblock %}