BIV v1.4.0 fix canary crashes
This commit is contained in:
parent
e2b0d72d73
commit
2d7640f038
|
@ -37,7 +37,7 @@ module.exports = (() => {
|
||||||
twitter_username: ''
|
twitter_username: ''
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
version: '1.3.9',
|
version: '1.4.0',
|
||||||
description: 'Move between images in the entire channel with arrow keys, image zoom enabled by clicking and holding, scroll wheel to zoom in and out, hold shift to change lens size. Image previews will look sharper no matter what scaling you have, and will take up as much space as possible.',
|
description: 'Move between images in the entire channel with arrow keys, image zoom enabled by clicking and holding, scroll wheel to zoom in and out, hold shift to change lens size. Image previews will look sharper no matter what scaling you have, and will take up as much space as possible.',
|
||||||
github: 'https://github.com/1Lighty',
|
github: 'https://github.com/1Lighty',
|
||||||
github_raw: 'https://raw.githubusercontent.com/1Lighty/BetterDiscordPlugins/master/Plugins/BetterImageViewer/BetterImageViewer.plugin.js'
|
github_raw: 'https://raw.githubusercontent.com/1Lighty/BetterDiscordPlugins/master/Plugins/BetterImageViewer/BetterImageViewer.plugin.js'
|
||||||
|
@ -46,7 +46,12 @@ module.exports = (() => {
|
||||||
{
|
{
|
||||||
title: 'fixed',
|
title: 'fixed',
|
||||||
type: 'fixed',
|
type: 'fixed',
|
||||||
items: ['Fixed incorrect positioning of the image on canary']
|
items: ['Fixed crashes on canary.', 'Fixed image zoom not working on canary.', 'Fixed image zoom not working quite right if you zoomed too early when opening an image (thx A User for reporting this obscure bug).']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Appropriate backports',
|
||||||
|
type: 'added',
|
||||||
|
items: ['Image zoom will now show the already loaded image first while it\'s loading the full image, for a smoother experience. After the full image is loaded, it quickly switches to it as it\'s obviously higher quality.']
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
defaultConfig: [
|
defaultConfig: [
|
||||||
|
@ -287,7 +292,7 @@ module.exports = (() => {
|
||||||
})() {
|
})() {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = { zooming: false, visible: false, panelWH: props.__BIV_hiddenSettings.panelWH, zoom: 1.5 };
|
this.state = { zooming: false, visible: false, panelWH: props.__BIV_hiddenSettings.panelWH, zoom: 1.5, loaded: false, failedLoad: false };
|
||||||
XenoLib._.bindAll(this, ['handleMouseDown', 'handleMouseUp', 'handleMouseWheel', 'setRef']);
|
XenoLib._.bindAll(this, ['handleMouseDown', 'handleMouseUp', 'handleMouseWheel', 'setRef']);
|
||||||
try {
|
try {
|
||||||
this._handleMouseMove = this.handleMouseMove.bind(this);
|
this._handleMouseMove = this.handleMouseMove.bind(this);
|
||||||
|
@ -317,9 +322,11 @@ module.exports = (() => {
|
||||||
window.removeEventListener('mousewheel', this.handleMouseWheel);
|
window.removeEventListener('mousewheel', this.handleMouseWheel);
|
||||||
this._handleSaveLensWHChangeDC.cancel();
|
this._handleSaveLensWHChangeDC.cancel();
|
||||||
this._handleSaveLensWHChange();
|
this._handleSaveLensWHChange();
|
||||||
this._controller.destroy();
|
if (typeof this._controller.destroy === 'function') this._controller.destroy();
|
||||||
|
else this._controller.dispose();
|
||||||
this._controller = null;
|
this._controller = null;
|
||||||
this._zoomController.destroy();
|
if (typeof this._zoomController.destroy === 'function') this._zoomController.destroy();
|
||||||
|
else this._zoomController.dispose();
|
||||||
this._zoomController = null;
|
this._zoomController = null;
|
||||||
}
|
}
|
||||||
componentDidUpdate(prevProps, prevState, snapshot) {
|
componentDidUpdate(prevProps, prevState, snapshot) {
|
||||||
|
@ -330,6 +337,27 @@ module.exports = (() => {
|
||||||
this.updateZoomController({ zoom: 1.5, immediate: !this.state.zooming });
|
this.updateZoomController({ zoom: 1.5, immediate: !this.state.zooming });
|
||||||
if (this.state.zooming) this.setState({ zooming: false });
|
if (this.state.zooming) this.setState({ zooming: false });
|
||||||
this.getRawImage();
|
this.getRawImage();
|
||||||
|
} else if (this.state.zooming !== prevState.zooming && !this.state.loaded && this.state.raw && !this.state.failedLoad && !this.props.__BIV_animated) {
|
||||||
|
/* only trigger if zoom state changed, raw image not loaded, raw link set, didn't fail and is not a GIFV */
|
||||||
|
if (this.state.zooming) {
|
||||||
|
if (ImageUtils.isImageLoaded(this.state.raw)) this.setState({ loaded: true });
|
||||||
|
else {
|
||||||
|
/* zoom started, try to load raw */
|
||||||
|
this._loadCancel = ImageUtils.loadImage(this.state.raw, failed => {
|
||||||
|
console.log('Full loaded!', failed);
|
||||||
|
this._loadCancel = null;
|
||||||
|
/* load failed, either the URL is invalid, host is dead or it's e621/e926, which is a special case
|
||||||
|
* do note, the special cases are not handled if SaveToRedux is not present */
|
||||||
|
if ((this.state.failedLoad = failed)) return this.updateRawImage(true, true);
|
||||||
|
this.setState({ loaded: true });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (typeof this._loadCancel === 'function') {
|
||||||
|
this._loadCancel();
|
||||||
|
this._loadCancel = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if (!this._ref) return Logger.warn('this._ref is null!');
|
if (!this._ref) return Logger.warn('this._ref is null!');
|
||||||
this._bcr = this._ref.getBoundingClientRect();
|
this._bcr = this._ref.getBoundingClientRect();
|
||||||
|
@ -362,7 +390,7 @@ module.exports = (() => {
|
||||||
this.setState({ zooming: false });
|
this.setState({ zooming: false });
|
||||||
}
|
}
|
||||||
handleMouseMove(cx, cy, start) {
|
handleMouseMove(cx, cy, start) {
|
||||||
if (!this._bcr) this._bcr = this._ref.getBoundingClientRect();
|
this._bcr = this._ref.getBoundingClientRect();
|
||||||
if (!this.props.__BIV_settings.outOfBounds) {
|
if (!this.props.__BIV_settings.outOfBounds) {
|
||||||
cx = Math.min(this._bcr.left + this._bcr.width, Math.max(this._bcr.left, cx));
|
cx = Math.min(this._bcr.left + this._bcr.width, Math.max(this._bcr.left, cx));
|
||||||
cy = Math.min(this._bcr.top + this._bcr.height, Math.max(this._bcr.top, cy));
|
cy = Math.min(this._bcr.top + this._bcr.height, Math.max(this._bcr.top, cy));
|
||||||
|
@ -436,6 +464,8 @@ module.exports = (() => {
|
||||||
} catch (_) {}
|
} catch (_) {}
|
||||||
return split + (needsSize ? '?size=2048' : '');
|
return split + (needsSize ? '?size=2048' : '');
|
||||||
})();
|
})();
|
||||||
|
this.state.failedLoad = false;
|
||||||
|
this.state.loaded = ImageUtils.isImageLoaded(fullSource);
|
||||||
this.state.raw = fullSource;
|
this.state.raw = fullSource;
|
||||||
}
|
}
|
||||||
renderLens(ea, props) {
|
renderLens(ea, props) {
|
||||||
|
@ -454,18 +484,19 @@ module.exports = (() => {
|
||||||
ReactSpring.animated.div,
|
ReactSpring.animated.div,
|
||||||
{
|
{
|
||||||
style: {
|
style: {
|
||||||
transform: ReactSpring.to([props.imgLeft, props.imgTop], (x, y) => `translate3d(${x}px, ${y}px, 0)`)
|
transform: ReactSpring.to([props.imgContainerLeft, props.imgContainerTop], (x, y) => `translate3d(${-x}px, ${-y}px, 0)`)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
React.createElement(this.props.__BIV_animated ? ReactSpring.animated.video : ReactSpring.animated.img, {
|
React.createElement(this.props.__BIV_animated ? ReactSpring.animated.video : ReactSpring.animated.img, {
|
||||||
onError: _ => this.getRawImage(true),
|
onError: _ => this.getRawImage(true),
|
||||||
src: this.props.__BIV_animated ? this.props.__BIV_src : this.state.raw,
|
src: this.props.__BIV_animated ? this.props.__BIV_src : this.state.loaded ? this.state.raw : this.props.src,
|
||||||
width: props.imgWidth,
|
width: props.imgWidth.to(e => e),
|
||||||
height: props.imgHeight,
|
height: props.imgHeight.to(e => e),
|
||||||
style: this.props.__BIV_settings.interp
|
style: this.props.__BIV_settings.interp
|
||||||
? undefined
|
? { transform: ReactSpring.to([props.imgLeft, props.imgTop], (x, y) => `translate3d(${x}px, ${y}px, 0)`) }
|
||||||
: {
|
: {
|
||||||
imageRendering: 'pixelated'
|
imageRendering: 'pixelated',
|
||||||
|
transform: ReactSpring.to([props.imgLeft, props.imgTop], (x, y) => `translate3d(${x}px, ${y}px, 0)`)
|
||||||
},
|
},
|
||||||
...(this.props.__BIV_animated ? { autoPlay: true, muted: true, loop: true } : {})
|
...(this.props.__BIV_animated ? { autoPlay: true, muted: true, loop: true } : {})
|
||||||
})
|
})
|
||||||
|
@ -500,7 +531,7 @@ module.exports = (() => {
|
||||||
to: { opacity: this.state.zooming ? 1 : 0 },
|
to: { opacity: this.state.zooming ? 1 : 0 },
|
||||||
config: { duration: 100 },
|
config: { duration: 100 },
|
||||||
onRest: () => {
|
onRest: () => {
|
||||||
!this.state.zooming && this.setState({ visible: false });
|
if (!this.state.zooming) this.setState({ visible: false });
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
ea => [
|
ea => [
|
||||||
|
@ -511,13 +542,15 @@ module.exports = (() => {
|
||||||
className: 'BIV-zoom-backdrop'
|
className: 'BIV-zoom-backdrop'
|
||||||
}),
|
}),
|
||||||
this.renderLens(ea, {
|
this.renderLens(ea, {
|
||||||
imgLeft: ReactSpring.to([this._zoomController.animated.zoom, this._controller.animated.offsetX, this._controller.animated.panelX], (z, x, a) => -a + (this._bcr.left - ((this._bcr.width * z - this._bcr.width) / (this._bcr.width * z)) * x * z)),
|
imgContainerLeft:(this._controller.animated || this._controller.springs).panelX,
|
||||||
imgTop: ReactSpring.to([this._zoomController.animated.zoom, this._controller.animated.offsetY, this._controller.animated.panelY], (z, y, a) => -a + (this._bcr.top - ((this._bcr.height * z - this._bcr.height) / (this._bcr.height * z)) * y * z)),
|
imgContainerTop:(this._controller.animated || this._controller.springs).panelY,
|
||||||
imgWidth: this._zoomController.animated.zoom.to(e => e * this.props.width),
|
imgLeft: ReactSpring.to([(this._zoomController.animated || this._zoomController.springs).zoom, (this._controller.animated || this._controller.springs).offsetX], (z, x) => (this._bcr.left - ((this._bcr.width * z - this._bcr.width) / (this._bcr.width * z)) * x * z)),
|
||||||
imgHeight: this._zoomController.animated.zoom.to(e => e * this.props.height),
|
imgTop: ReactSpring.to([(this._zoomController.animated || this._zoomController.springs).zoom, (this._controller.animated || this._controller.springs).offsetY], (z, y) => (this._bcr.top - ((this._bcr.height * z - this._bcr.height) / (this._bcr.height * z)) * y * z)),
|
||||||
panelX: this._controller.animated.panelX,
|
imgWidth: ReactSpring.to([(this._zoomController.animated || this._zoomController.springs).zoom], e => e * this.props.width),
|
||||||
panelY: this._controller.animated.panelY,
|
imgHeight: ReactSpring.to([(this._zoomController.animated || this._zoomController.springs).zoom], e => e * this.props.height),
|
||||||
panelWH: this._controller.animated.panelWH
|
panelX: (this._controller.animated || this._controller.springs).panelX,
|
||||||
|
panelY: (this._controller.animated || this._controller.springs).panelY,
|
||||||
|
panelWH: (this._controller.animated || this._controller.springs).panelWH
|
||||||
})
|
})
|
||||||
]
|
]
|
||||||
),
|
),
|
||||||
|
@ -1866,7 +1899,7 @@ module.exports = (() => {
|
||||||
else if (!animated) _this.unobserveVisibility();
|
else if (!animated) _this.unobserveVisibility();
|
||||||
});
|
});
|
||||||
// Patcher.before(LazyImage.prototype, 'getRatio', _this => {
|
// Patcher.before(LazyImage.prototype, 'getRatio', _this => {
|
||||||
// if (typeof _this.props.__BIV_index !== 'undefined' /* || _this.props.__BIV_isVideo */ || (_this.props.className && _this.props.className.indexOf('embedThumbnail') !== -1)) return;
|
// if (!_this.handleSidebarChange || typeof _this.props.__BIV_index !== 'undefined' /* || _this.props.__BIV_isVideo */ || (_this.props.className && _this.props.className.indexOf('embedThumbnail') !== -1)) return;
|
||||||
// if (typeof _this.state.__BIV_sidebarType === 'undefined') _this.handleSidebarChange(true);
|
// if (typeof _this.state.__BIV_sidebarType === 'undefined') _this.handleSidebarChange(true);
|
||||||
// if (_this.state.__BIV_sidebarMultiplier === null) return;
|
// if (_this.state.__BIV_sidebarMultiplier === null) return;
|
||||||
// const scale = window.innerWidth / (window.innerWidth * window.devicePixelRatio);
|
// const scale = window.innerWidth / (window.innerWidth * window.devicePixelRatio);
|
||||||
|
|
|
@ -1,4 +1,10 @@
|
||||||
# [BetterImageViewer](https://1lighty.github.io/BetterDiscordStuff/?plugin=BetterImageViewer "BetterImageViewer") Changelog
|
# [BetterImageViewer](https://1lighty.github.io/BetterDiscordStuff/?plugin=BetterImageViewer "BetterImageViewer") Changelog
|
||||||
|
### 1.4.0
|
||||||
|
- Fixed crashes on canary.
|
||||||
|
- Fixed image zoom not working on canary.
|
||||||
|
- Fixed image zoom not working quite right if you zoomed too early when opening an image (thx A User for reporting this obscure bug).
|
||||||
|
- Image zoom will now show the already loaded image first while it's loading the full image, for a smoother experience. After the full image is loaded, it quickly switches to it as it's obviously higher quality.
|
||||||
|
|
||||||
### 1.3.9
|
### 1.3.9
|
||||||
- Fixed incorrect positioning of the image on canary
|
- Fixed incorrect positioning of the image on canary
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue