jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
16f325006781bc7664901585a458ba832eefa915
danbooru/app/javascript/vendor/pixiv-ugoira-player.js
evazion 16f3250067 ugoira: fix player to only use list of frame delays. 
The frame data for Ugoira files is stored like this:

    [{"file"=>"000000.jpg", "delay"=>65},
    {"file"=>"000001.jpg", "delay"=>65},
    {"file"=>"000002.jpg", "delay"=>65},
    {"file"=>"000003.jpg", "delay"=>65},
    {"file"=>"000004.jpg", "delay"=>65},
    {"file"=>"000005.jpg", "delay"=>65},
    {"file"=>"000006.jpg", "delay"=>65},
    {"file"=>"000007.jpg", "delay"=>65},
    {"file"=>"000008.jpg", "delay"=>65},
    {"file"=>"000009.jpg", "delay"=>65},
    {"file"=>"000010.jpg", "delay"=>65}]

This is stored in the pixiv_ugoira_frame_data table in YAML format. This
is a problem because a) we only need the frame delays to play the Ugoira,
not the filenames, and b) storing the data in YAML format is a security
issue that's blocking the upgrade to Rails 7.0.4 (see [1]).

This commit changes the Ugoira Javascript player so that it only uses
the list of frame delays, not the filenames, to play the Ugoira. This
paves the way for storing the frame delays as a simple integer array
instead as a serialized YAML object.

This assumes that the images in a Ugoira zip file are stored in the same
order they should be played back in. This was confirmed by checking every
zip file and verifying that files are actually stored in filename order.

[1]: https://discuss.rubyonrails.org/t/cve-2022-32224-possible-rce-escalation-bug-with-serialized-columns-in-active-record/81017
2022-10-09 18:47:10 -05:00

524 lines
18 KiB
JavaScript
Raw Blame History

// Source: https://github.com/pixiv/zip_player
// Required for iOS <6, where Blob URLs are not available. This is slow...
// Source: https://gist.github.com/jonleighton/958841
function base64ArrayBuffer(arrayBuffer, off, byteLength) {
var base64 = '';
var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
var bytes = new Uint8Array(arrayBuffer);
var byteRemainder = byteLength % 3;
var mainLength = off + byteLength - byteRemainder;
var a, b, c, d;
var chunk;
// Main loop deals with bytes in chunks of 3
for (var i = off; i < mainLength; i = i + 3) {
// Combine the three bytes into a single integer
chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
// Use bitmasks to extract 6-bit segments from the triplet
a = (chunk & 16515072) >> 18; // 16515072 = (2^6 - 1) << 18
b = (chunk & 258048) >> 12; // 258048 = (2^6 - 1) << 12
c = (chunk & 4032) >> 6; // 4032 = (2^6 - 1) << 6
d = chunk & 63; // 63 = 2^6 - 1
// Convert the raw binary segments to the appropriate ASCII encoding
base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];
}
// Deal with the remaining bytes and padding
if (byteRemainder == 1) {
chunk = bytes[mainLength];
a = (chunk & 252) >> 2; // 252 = (2^6 - 1) << 2
// Set the 4 least significant bits to zero
b = (chunk & 3) << 4; // 3 = 2^2 - 1
base64 += encodings[a] + encodings[b] + '==';
} else if (byteRemainder == 2) {
chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];
a = (chunk & 64512) >> 10; // 64512 = (2^6 - 1) << 10
b = (chunk & 1008) >> 4; // 1008 = (2^6 - 1) << 4
// Set the 2 least significant bits to zero
c = (chunk & 15) << 2; // 15 = 2^4 - 1
base64 += encodings[a] + encodings[b] + encodings[c] + '=';
}
return base64;
}
function ZipImagePlayer(options) {
this.op = options;
this._URL = (window.URL || window.webkitURL || window.MozURL
|| window.MSURL);
this._Blob = (window.Blob || window.WebKitBlob || window.MozBlob
|| window.MSBlob);
this._BlobBuilder = (window.BlobBuilder || window.WebKitBlobBuilder
|| window.MozBlobBuilder || window.MSBlobBuilder);
this._Uint8Array = (window.Uint8Array || window.WebKitUint8Array
|| window.MozUint8Array || window.MSUint8Array);
this._DataView = (window.DataView || window.WebKitDataView
|| window.MozDataView || window.MSDataView);
this._ArrayBuffer = (window.ArrayBuffer || window.WebKitArrayBuffer
|| window.MozArrayBuffer || window.MSArrayBuffer);
this._maxLoadAhead = 0;
if (!this._URL) {
this._debugLog("No URL support! Will use slower data: URLs.");
// Throttle loading to avoid making playback stalling completely while
// loading images...
this._maxLoadAhead = 10;
}
if (!this._Blob) {
this._error("No Blob support");
}
if (!this._Uint8Array) {
this._error("No Uint8Array support");
}
if (!this._DataView) {
this._error("No DataView support");
}
if (!this._ArrayBuffer) {
this._error("No ArrayBuffer support");
}
this._isSafari = Object.prototype.toString.call(
window.HTMLElement).indexOf('Constructor') > 0;
this._loadingState = 0;
this._dead = false;
this._context = options.canvas.getContext("2d");
this._files = [];
this._frameCount = this.op.metadata.frames.length;
this._debugLog("Frame count: " + this._frameCount);
this._frame = 0;
this._loadFrame = 0;
this._frameImages = [];
this._paused = false;
this._loadTimer = null;
this._startLoad();
if (this.op.autoStart) {
this.play();
} else {
this._paused = true;
}
}
ZipImagePlayer.prototype = {
_trailerBytes: 30000,
_failed: false,
_mkerr: function(msg) {
var _this = this;
return function() {
_this._error(msg);
}
},
_error: function(msg) {
this._failed = true;
throw Error("ZipImagePlayer error: " + msg);
},
_debugLog: function(msg) {
if (this.op.debug) {
console.log(msg);
}
},
_load: function(offset, length, callback) {
var _this = this;
// Unfortunately JQuery doesn't support ArrayBuffer XHR
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function(ev) {
if (_this._dead) {
return;
}
_this._debugLog("Load: " + offset + " " + length + " status=" +
xhr.status);
if (xhr.status == 200) {
_this._debugLog("Range disabled or unsupported, complete load");
offset = 0;
length = xhr.response.byteLength;
_this._len = length;
_this._buf = xhr.response;
_this._bytes = new _this._Uint8Array(_this._buf);
} else {
if (xhr.status != 206) {
_this._error("Unexpected HTTP status " + xhr.status);
}
if (xhr.response.byteLength != length) {
_this._error("Unexpected length " +
xhr.response.byteLength +
" (expected " + length + ")");
}
_this._bytes.set(new _this._Uint8Array(xhr.response), offset);
}
if (callback) {
callback.apply(_this, [offset, length]);
}
}, false);
xhr.addEventListener("error", this._mkerr("Fetch failed"), false);
xhr.open("GET", this.op.source);
xhr.responseType = "arraybuffer";
if (offset != null && length != null) {
var end = offset + length;
xhr.setRequestHeader("Range", "bytes=" + offset + "-" + (end - 1));
if (this._isSafari) {
// Range request caching is broken in Safari
// https://bugs.webkit.org/show_bug.cgi?id=82672
xhr.setRequestHeader("Cache-control", "no-cache");
xhr.setRequestHeader("If-None-Match", Math.random().toString());
}
}
/*this._debugLog("Load: " + offset + " " + length);*/
xhr.send();
},
_startLoad: function() {
var _this = this;
if (!this.op.source) {
// Unpacked mode (individiual frame URLs) - just load the frames.
this._loadNextFrame();
return;
}
$.ajax({
url: this.op.source,
type: "HEAD"
}).done(function(data, status, xhr) {
if (_this._dead) {
return;
}
_this._pHead = 0;
_this._pNextHead = 0;
_this._pFetch = 0;
var len = parseInt(xhr.getResponseHeader("Content-Length"));
if (!len) {
_this._debugLog("HEAD request failed: invalid file length.");
_this._debugLog("Falling back to full file mode.");
_this._load(null, null, function(off, len) {
_this._pTail = 0;
_this._pHead = len;
_this._findCentralDirectory();
});
return;
}
_this._debugLog("Len: " + len);
_this._len = len;
_this._buf = new _this._ArrayBuffer(len);
_this._bytes = new _this._Uint8Array(_this._buf);
var off = len - _this._trailerBytes;
if (off < 0) {
off = 0;
}
_this._pTail = len;
_this._load(off, len - off, function(off, len) {
_this._pTail = off;
_this._findCentralDirectory();
});
}).fail(this._mkerr("Length fetch failed"));
},
_findCentralDirectory: function() {
// No support for ZIP file comment
var dv = new this._DataView(this._buf, this._len - 22, 22);
if (dv.getUint32(0, true) != 0x06054b50) {
this._error("End of Central Directory signature not found");
}
var cd_count = dv.getUint16(10, true);
var cd_size = dv.getUint32(12, true);
var cd_off = dv.getUint32(16, true);
if (cd_off < this._pTail) {
this._load(cd_off, this._pTail - cd_off, function() {
this._pTail = cd_off;
this._readCentralDirectory(cd_off, cd_size, cd_count);
});
} else {
this._readCentralDirectory(cd_off, cd_size, cd_count);
}
},
_readCentralDirectory: function(offset, size, count) {
var dv = new this._DataView(this._buf, offset, size);
var p = 0;
for (var i = 0; i < count; i++ ) {
if (dv.getUint32(p, true) != 0x02014b50) {
this._error("Invalid Central Directory signature");
}
var compMethod = dv.getUint16(p + 10, true);
var uncompSize = dv.getUint32(p + 24, true);
var nameLen = dv.getUint16(p + 28, true);
var extraLen = dv.getUint16(p + 30, true);
var cmtLen = dv.getUint16(p + 32, true);
var off = dv.getUint32(p + 42, true);
if (compMethod != 0) {
this._error("Unsupported compression method");
}
p += 46;
var nameView = new this._Uint8Array(this._buf, offset + p, nameLen);
var name = "";
for (var j = 0; j < nameLen; j++) {
name += String.fromCharCode(nameView[j]);
}
p += nameLen + extraLen + cmtLen;
/*this._debugLog("File: " + name + " (" + uncompSize +
" bytes @ " + off + ")");*/
this._files[i] = {off: off, len: uncompSize};
}
// Two outstanding fetches at any given time.
// Note: the implementation does not support more than two.
if (this._pHead >= this._pTail) {
this._pHead = this._len;
$(this).triggerHandler("loadProgress", [this._pHead / this._len]);
this._loadNextFrame();
} else {
this._loadNextChunk();
this._loadNextChunk();
}
},
_loadNextChunk: function() {
if (this._pFetch >= this._pTail) {
return;
}
var off = this._pFetch;
var len = this.op.chunkSize;
if (this._pFetch + len > this._pTail) {
len = this._pTail - this._pFetch;
}
this._pFetch += len;
this._load(off, len, function() {
if (off == this._pHead) {
if (this._pNextHead) {
this._pHead = this._pNextHead;
this._pNextHead = 0;
} else {
this._pHead = off + len;
}
if (this._pHead >= this._pTail) {
this._pHead = this._len;
}
/*this._debugLog("New pHead: " + this._pHead);*/
$(this).triggerHandler("loadProgress",
[this._pHead / this._len]);
if (!this._loadTimer) {
this._loadNextFrame();
}
} else {
this._pNextHead = off + len;
}
this._loadNextChunk();
});
},
_fileDataStart: function(offset) {
var dv = new DataView(this._buf, offset, 30);
var nameLen = dv.getUint16(26, true);
var extraLen = dv.getUint16(28, true);
return offset + 30 + nameLen + extraLen;
},
_isFileAvailable: function(index) {
var info = this._files[index];
if (!info) {
this._error("File " + index + " not found in ZIP");
}
if (this._pHead < (info.off + 30)) {
return false;
}
return this._pHead >= (this._fileDataStart(info.off) + info.len);
},
_loadNextFrame: function() {
if (this._dead) {
return;
}
var frame = this._loadFrame;
if (frame >= this._frameCount) {
return;
}
if (!this.op.source) {
// Unpacked mode (individiual frame URLs)
this._loadFrame += 1;
this._loadImage(frame, frame, false);
return;
}
if (!this._isFileAvailable(frame)) {
return;
}
this._loadFrame += 1;
var off = this._fileDataStart(this._files[frame].off);
var end = off + this._files[frame].len;
var url;
var mime_type = this.op.metadata.mime_type || "image/png";
if (this._URL) {
var slice;
if (!this._buf.slice) {
slice = new this._ArrayBuffer(this._files[frame].len);
var view = new this._Uint8Array(slice);
view.set(this._bytes.subarray(off, end));
} else {
slice = this._buf.slice(off, end);
}
var blob;
try {
blob = new this._Blob([slice], {type: mime_type});
}
catch (err) {
this._debugLog("Blob constructor failed. Trying BlobBuilder..."
+ " (" + err.message + ")");
var bb = new this._BlobBuilder();
bb.append(slice);
blob = bb.getBlob();
}
/*_this._debugLog("Loading " + meta.file + " to frame " + frame);*/
url = this._URL.createObjectURL(blob);
this._loadImage(frame, url, true);
} else {
url = ("data:" + mime_type + ";base64,"
+ base64ArrayBuffer(this._buf, off, end - off));
this._loadImage(frame, url, false);
}
},
_loadImage: function(frame, url, isBlob) {
var _this = this;
var image = new Image();
image.addEventListener('load', function() {
_this._debugLog(`Loaded frame ${frame}`);
if (isBlob) {
_this._URL.revokeObjectURL(url);
}
if (_this._dead) {
return;
}
_this._frameImages[frame] = image;
$(_this).triggerHandler("frameLoaded", frame);
if (_this._loadingState == 0) {
_this._displayFrame.apply(_this);
}
if (frame >= (_this._frameCount - 1)) {
_this._setLoadingState(2);
_this._buf = null;
_this._bytes = null;
} else {
if (!_this._maxLoadAhead ||
(frame - _this._frame) < _this._maxLoadAhead) {
_this._loadNextFrame();
} else if (!_this._loadTimer) {
_this._loadTimer = setTimeout(function() {
_this._loadTimer = null;
_this._loadNextFrame();
}, 200);
}
}
});
image.src = url;
},
_setLoadingState: function(state) {
if (this._loadingState != state) {
this._loadingState = state;
$(this).triggerHandler("loadingStateChanged", [state]);
}
},
_displayFrame: function() {
if (this._dead) {
return;
}
var _this = this;
var delay = this.op.metadata.frames[this._frame];
this._debugLog("Displaying frame: " + this._frame);
var image = this._frameImages[this._frame];
if (!image) {
this._debugLog("Image not available!");
this._setLoadingState(0);
return;
}
if (this._loadingState != 2) {
this._setLoadingState(1);
}
if (this.op.autosize) {
if (this._context.canvas.width != image.width || this._context.canvas.height != image.height) {
// make the canvas autosize itself according to the images drawn on it
// should set it once, since we don't have variable sized frames
this._context.canvas.width = image.width;
this._context.canvas.height = image.height;
}
};
this._context.clearRect(0, 0, this.op.canvas.width,
this.op.canvas.height);
this._context.drawImage(image, 0, 0);
$(this).triggerHandler("frame", this._frame);
if (!this._paused) {
this._timer = setTimeout(function() {
_this._timer = null;
_this._nextFrame.apply(_this);
}, delay);
}
},
_nextFrame: function(frame) {
if (this._frame >= (this._frameCount - 1)) {
if (this.op.loop) {
this._frame = 0;
} else {
this.pause();
return;
}
} else {
this._frame += 1;
}
this._displayFrame();
},
play: function() {
if (this._dead) {
return;
}
if (this._paused) {
$(this).triggerHandler("play", [this._frame]);
this._paused = false;
this._displayFrame();
}
},
pause: function() {
if (this._dead) {
return;
}
if (!this._paused) {
if (this._timer) {
clearTimeout(this._timer);
}
this._paused = true;
$(this).triggerHandler("pause", [this._frame]);
}
},
rewind: function() {
if (this._dead) {
return;
}
this._frame = 0;
if (this._timer) {
clearTimeout(this._timer);
}
this._displayFrame();
},
stop: function() {
this._debugLog("Stopped!");
this._dead = true;
if (this._timer) {
clearTimeout(this._timer);
}
if (this._loadTimer) {
clearTimeout(this._loadTimer);
}
this._frameImages = null;
this._buf = null;
this._bytes = null;
$(this).triggerHandler("stop");
},
getCurrentFrame: function() {
return this._frame;
},
getLoadedFrames: function() {
return this._frameImages.length;
},
getFrameCount: function() {
return this._frameCount;
},
hasError: function() {
return this._failed;
}
}
// added
export { ZipImagePlayer };
Reference in New Issue View Git Blame Copy Permalink