lightcordwarez
/
1Lighty-BetterDiscordPlugins
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

BIV v1.0.1 show as overlay

This commit is contained in:
_Lighty_ 2020-02-26 17:31:45 +01:00
parent a8c94b8874
commit c08eef29d2
2 changed files with 252 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

474
Plugins/BetterImageViewer/BetterImageViewer.plugin.js
View File

@ -37,16 +37,16 @@ var BetterImageViewer = (() => {
twitter_username: '' twitter_username: ''
} }
], ],
version: '1.0.0', version: '1.0.1',
description: 'Telegram image viewer ported to Discord. Adds ability to go between images in the current channel with arrow keys, or on screen buttons. Also provides info about the image, who posted it and when.', description: 'Telegram image viewer ported to Discord. Adds ability to go between images in the current channel with arrow keys, or on screen buttons. Also provides info about the image, who posted it and when.',
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'
}, },
changelog: [ changelog: [
{ {
title: 'Huzzah!', title: "Now you're thinking with portals!",
type: 'added', type: 'fixed',
items: ['Plugin exists. That is all.'] items: ['Nav buttons and info are now an overlay which means, fixed an issue from a certain trash plugin from a certain bad developer of who we do not speak of.']
} }
], ],
defaultConfig: [ defaultConfig: [
@ -120,9 +120,10 @@ var BetterImageViewer = (() => {
/* Build */ /* Build */
const buildPlugin = ([Plugin, Api]) => { const buildPlugin = ([Plugin, Api]) => {
const { Utilities, WebpackModules, DiscordModules, ReactComponents, DiscordAPI, Logger, Patcher, PluginUtilities, PluginUpdater } = Api; const { Utilities, WebpackModules, DiscordModules, ReactComponents, DiscordAPI, Logger, Patcher, PluginUtilities, PluginUpdater } = Api;
const { React, ModalStack, DiscordConstants, Dispatcher, GuildStore, GuildMemberStore, TextElement, MessageStore, APIModule, NavigationUtils } = DiscordModules; const { React, ReactDOM, ModalStack, DiscordConstants, Dispatcher, GuildStore, GuildMemberStore, TextElement, MessageStore, APIModule, NavigationUtils } = DiscordModules;
let PluginBrokenFatal = false; let PluginBrokenFatal = false;
let overlayDOMNode;
const { ARROW_LEFT, ARROW_RIGHT } = DiscordConstants.KeyboardKeys; const { ARROW_LEFT, ARROW_RIGHT } = DiscordConstants.KeyboardKeys;
const Icon = WebpackModules.getByDisplayName('Icon'); const Icon = WebpackModules.getByDisplayName('Icon');
@ -658,225 +659,230 @@ var BetterImageViewer = (() => {
ret.props.children[0].props.id = message.id + currentImage; ret.props.children[0].props.id = message.id + currentImage;
const iMember = DiscordAPI.currentGuild && GuildMemberStore.getMember(DiscordAPI.currentGuild.id, message.author.id); const iMember = DiscordAPI.currentGuild && GuildMemberStore.getMember(DiscordAPI.currentGuild.id, message.author.id);
ret.props.children.push( ret.props.children.push(
this.props.settings.ui.navButtons ReactDOM.createPortal(
? [ [
React.createElement( this.props.settings.ui.navButtons
Clickable, ? [
{ React.createElement(
className: XenoLib.joinClassNames('BIV-left', { 'BIV-disabled': currentImage === this._maxImages && (this._searchCache.noBefore || this.state.rateLimited), 'BIV-inactive': this.state.controlsInactive, 'BIV-hidden': !this.state.controlsHidden }), Clickable,
onClick: this.handlePrevious, {
onContextMenu: () => this.handleFastJump(), className: XenoLib.joinClassNames('BIV-left', { 'BIV-disabled': currentImage === this._maxImages && (this._searchCache.noBefore || this.state.rateLimited), 'BIV-inactive': this.state.controlsInactive, 'BIV-hidden': !this.state.controlsHidden }),
onMouseEnter: () => this.handleMouseEnter(), onClick: this.handlePrevious,
onMouseLeave: this.handleMouseLeave onContextMenu: () => this.handleFastJump(),
}, onMouseEnter: () => this.handleMouseEnter(),
React.createElement(Icon, { name: 'LeftCaret' }) onMouseLeave: this.handleMouseLeave
), },
React.createElement( React.createElement(Icon, { name: 'LeftCaret' })
Clickable, ),
{ React.createElement(
className: XenoLib.joinClassNames('BIV-right', { 'BIV-disabled': currentImage === 1, 'BIV-inactive': this.state.controlsInactive, 'BIV-hidden': !this.state.controlsHidden }), Clickable,
onClick: this.handleNext, {
onContextMenu: () => this.handleFastJump(true), className: XenoLib.joinClassNames('BIV-right', { 'BIV-disabled': currentImage === 1, 'BIV-inactive': this.state.controlsInactive, 'BIV-hidden': !this.state.controlsHidden }),
onMouseEnter: () => this.handleMouseEnter(true), onClick: this.handleNext,
onMouseLeave: this.handleMouseLeave onContextMenu: () => this.handleFastJump(true),
}, onMouseEnter: () => this.handleMouseEnter(true),
React.createElement(Icon, { name: 'RightCaret' }) onMouseLeave: this.handleMouseLeave
) },
] React.createElement(Icon, { name: 'RightCaret' })
: null, )
React.createElement( ]
'div', : null,
{
className: XenoLib.joinClassNames('BIV-info', { 'BIV-inactive': this.state.controlsInactive, 'BIV-hidden': !this.state.controlsHidden })
},
this.props.settings.ui.imageIndex
? React.createElement(
TextElement.default,
{
color: TextElement.Colors.PRIMARY,
weight: TextElement.Weights.SEMIBOLD
},
'Image ',
currentImage,
' of ',
this._maxImages,
this._searchCache._totalResults
? React.createElement(
Tooltip,
{
text: `Estimated ${this._maxImages + this._searchCache._totalResults} images in current channel`,
position: 'top'
},
e => React.createElement('span', e, ' (~', this._maxImages + this._searchCache._totalResults, ')')
)
: undefined
)
: null,
React.createElement(
'div',
{
className: 'BIV-info-wrapper'
},
React.createElement( React.createElement(
TextElement.default, 'div',
{ {
color: TextElement.Colors.PRIMARY, className: XenoLib.joinClassNames('BIV-info', { 'BIV-inactive': this.state.controlsInactive, 'BIV-hidden': !this.state.controlsHidden })
className: ClickableHeaderClassname
}, },
React.createElement( this.props.settings.ui.imageIndex
'span',
{
className: UsernameClassname,
onContextMenu: e => {
WebpackModules.getByProps('openUserContextMenu').openUserContextMenu(e, message.author, DiscordAPI.currentChannel.discordObject);
},
style:
iMember && iMember.colorString
? {
color: iMember.colorString
}
: null,
onClick: () => {
this.props.onClose();
NavigationUtils.transitionTo(`/channels/${(DiscordAPI.currentGuild && DiscordAPI.currentGuild.id) || '@me'}/${DiscordAPI.currentChannel.id}${message.id ? '/' + message.id : ''}`);
}
},
(iMember && iMember.nick) || message.author.username
),
React.createElement(MessageTimestamp, {
timestamp: DiscordModules.Moment(message.timestamp)
}),
this._searchCache.noBefore &&
React.createElement(
'div',
{
className: XenoLib.joinClassNames('BIV-requesting', TextElement.Colors.RED)
},
React.createElement(
Tooltip,
{
text: 'You have reached the start of the channel'
},
e =>
React.createElement(Icon, {
...e,
name: 'LeftCaret'
})
)
),
this.state.isNearingEdge &&
!this.props.settings.behavior.searchAPI &&
React.createElement(
'div',
{
className: XenoLib.joinClassNames('BIV-requesting', TextElement.Colors.YELLOW)
},
React.createElement(
Tooltip,
{
text: 'You are nearing the edge of available images. If you want more, enable search API.'
},
e =>
React.createElement(Icon, {
...e,
name: 'WarningTriangle'
})
)
),
this.state.requesting &&
!this.state.unknownError &&
React.createElement(
'div',
{
className: 'BIV-requesting'
},
React.createElement(
Tooltip,
{
text: 'Requesting more...'
},
e =>
React.createElement(Icon, {
...e,
name: 'UpdateAvailable'
})
)
),
this.state.indexing &&
React.createElement(
'div',
{
className: 'BIV-requesting'
},
React.createElement(
Tooltip,
{
text: 'Indexing channel...'
},
e =>
React.createElement(Icon, {
...e,
name: 'Nova_Search'
})
)
),
this.state.localRateLimited || this.state.rateLimited
? React.createElement( ? React.createElement(
'div', TextElement.default,
{ {
className: XenoLib.joinClassNames('BIV-requesting', TextElement.Colors.RED) color: TextElement.Colors.PRIMARY,
weight: TextElement.Weights.SEMIBOLD
}, },
React.createElement( 'Image ',
Tooltip, currentImage,
{ ' of ',
text: 'You have been rate limited, please wait' this._maxImages,
this._searchCache._totalResults
? React.createElement(
Tooltip,
{
text: `Estimated ${this._maxImages + this._searchCache._totalResults} images in current channel`,
position: 'top'
},
e => React.createElement('span', e, ' (~', this._maxImages + this._searchCache._totalResults, ')')
)
: undefined
)
: null,
React.createElement(
'div',
{
className: 'BIV-info-wrapper'
},
React.createElement(
TextElement.default,
{
color: TextElement.Colors.PRIMARY,
className: ClickableHeaderClassname
},
React.createElement(
'span',
{
className: UsernameClassname,
onContextMenu: e => {
WebpackModules.getByProps('openUserContextMenu').openUserContextMenu(e, message.author, DiscordAPI.currentChannel.discordObject);
}, },
e => style:
React.createElement(Icon, { iMember && iMember.colorString
...e, ? {
name: 'Timer' color: iMember.colorString
}) }
: null,
onClick: () => {
this.props.onClose();
NavigationUtils.transitionTo(`/channels/${(DiscordAPI.currentGuild && DiscordAPI.currentGuild.id) || '@me'}/${DiscordAPI.currentChannel.id}${message.id ? '/' + message.id : ''}`);
}
},
(iMember && iMember.nick) || message.author.username
),
React.createElement(MessageTimestamp, {
timestamp: DiscordModules.Moment(message.timestamp)
}),
this._searchCache.noBefore &&
React.createElement(
'div',
{
className: XenoLib.joinClassNames('BIV-requesting', TextElement.Colors.RED)
},
React.createElement(
Tooltip,
{
text: 'You have reached the start of the channel'
},
e =>
React.createElement(Icon, {
...e,
name: 'LeftCaret'
})
)
),
this.state.isNearingEdge &&
!this.props.settings.behavior.searchAPI &&
React.createElement(
'div',
{
className: XenoLib.joinClassNames('BIV-requesting', TextElement.Colors.YELLOW)
},
React.createElement(
Tooltip,
{
text: 'You are nearing the edge of available images. If you want more, enable search API.'
},
e =>
React.createElement(Icon, {
...e,
name: 'WarningTriangle'
})
)
),
this.state.requesting &&
!this.state.unknownError &&
React.createElement(
'div',
{
className: 'BIV-requesting'
},
React.createElement(
Tooltip,
{
text: 'Requesting more...'
},
e =>
React.createElement(Icon, {
...e,
name: 'UpdateAvailable'
})
)
),
this.state.indexing &&
React.createElement(
'div',
{
className: 'BIV-requesting'
},
React.createElement(
Tooltip,
{
text: 'Indexing channel...'
},
e =>
React.createElement(Icon, {
...e,
name: 'Nova_Search'
})
)
),
this.state.localRateLimited || this.state.rateLimited
? React.createElement(
'div',
{
className: XenoLib.joinClassNames('BIV-requesting', TextElement.Colors.RED)
},
React.createElement(
Tooltip,
{
text: 'You have been rate limited, please wait'
},
e =>
React.createElement(Icon, {
...e,
name: 'Timer'
})
)
)
: undefined,
this._followNew &&
React.createElement(
'div',
{
className: XenoLib.joinClassNames('BIV-requesting', TextElement.Colors.RED)
},
React.createElement(
Tooltip,
{
text: 'You have reached the end of the channel and are listening for new images'
},
e =>
React.createElement(Icon, {
...e,
name: 'RightCaret'
})
)
),
this.state.unknownError &&
React.createElement(
'div',
{
className: XenoLib.joinClassNames('BIV-requesting', TextElement.Colors.RED)
},
React.createElement(
Tooltip,
{
text: 'Unknown error occured'
},
e =>
React.createElement(Icon, {
...e,
name: 'Clear'
})
)
) )
)
: undefined,
this._followNew &&
React.createElement(
'div',
{
className: XenoLib.joinClassNames('BIV-requesting', TextElement.Colors.RED)
},
React.createElement(
Tooltip,
{
text: 'You have reached the end of the channel and are listening for new images'
},
e =>
React.createElement(Icon, {
...e,
name: 'RightCaret'
})
)
),
this.state.unknownError &&
React.createElement(
'div',
{
className: XenoLib.joinClassNames('BIV-requesting', TextElement.Colors.RED)
},
React.createElement(
Tooltip,
{
text: 'Unknown error occured'
},
e =>
React.createElement(Icon, {
...e,
name: 'Clear'
})
)
) )
)
) )
) ],
overlayDOMNode
) )
); );
return ret; return ret;
@ -885,6 +891,11 @@ var BetterImageViewer = (() => {
return class BetterImageViewer extends Plugin { return class BetterImageViewer extends Plugin {
onStart() { onStart() {
if (!overlayDOMNode) {
overlayDOMNode = document.createElement('div');
overlayDOMNode.className = 'biv-overlay';
}
document.querySelector('#app-mount').append(overlayDOMNode);
this.promises = { state: { cancelled: false } }; this.promises = { state: { cancelled: false } };
if (PluginBrokenFatal) { if (PluginBrokenFatal) {
PluginUpdater.checkForUpdate(this.name, this.version, this._config.info.github_raw); PluginUpdater.checkForUpdate(this.name, this.version, this._config.info.github_raw);
@ -983,11 +994,22 @@ var BetterImageViewer = (() => {
max-width: 900px; max-width: 900px;
overflow-x: hidden; overflow-x: hidden;
} }
.biv-overlay {
pointer-events: none;
position: absolute;
z-index: 1000;
width: 100%;
height: 100%;
}
.biv-overlay > * {
pointer-events: all;
}
` `
); );
} }
onStop() { onStop() {
if (overlayDOMNode) overlayDOMNode.remove();
this.promises.state.cancelled = true; this.promises.state.cancelled = true;
Patcher.unpatchAll(); Patcher.unpatchAll();
Dispatcher.unsubscribe('MESSAGE_DELETE', this.handleMessageDelete); Dispatcher.unsubscribe('MESSAGE_DELETE', this.handleMessageDelete);
@ -1028,6 +1050,7 @@ var BetterImageViewer = (() => {
const original = _this.props.original || _this.props.src; const original = _this.props.original || _this.props.src;
ModalStack.push(e => { ModalStack.push(e => {
return React.createElement( return React.createElement(
/* this safety net should prevent any major issues or crashes, in theory */
ErrorCatcher, ErrorCatcher,
{ {
label: 'Image modal', label: 'Image modal',
@ -1231,12 +1254,15 @@ var BetterImageViewer = (() => {
ret.props.children.splice( ret.props.children.splice(
1, 1,
0, 0,
React.createElement( ReactDOM.createPortal(
'div', React.createElement(
{ 'div',
className: XenoLib.joinClassNames('BIV-info BIV-info-extra', { 'BIV-hidden': !_this.state.controlsHidden, 'BIV-inactive': _this.state.controlsInactive }, TextElement.Colors.PRIMARY) {
}, className: XenoLib.joinClassNames('BIV-info BIV-info-extra', { 'BIV-hidden': !_this.state.controlsHidden, 'BIV-inactive': _this.state.controlsInactive }, TextElement.Colors.PRIMARY)
React.createElement('table', {}, settings.infoResolution ? renderTableEntry(basicImageInfo ? `${basicImageInfo.width}x${basicImageInfo.height}` : 'NaNxNaN', `${_this.props.width}x${_this.props.height}`) : null, settings.infoScale ? renderTableEntry(basicImageInfo ? `${(basicImageInfo.ratio * 100).toFixed(0)}%` : 'NaN%', basicImageInfo ? `${(100 - basicImageInfo.ratio * 100).toFixed(0)}%` : 'NaN%') : null, settings.infoSize ? renderTableEntry(imageSize ? imageSize : 'NaN', originalImageSize ? (originalImageSize === imageSize ? '~' : originalImageSize) : 'NaN') : null) },
React.createElement('table', {}, settings.infoResolution ? renderTableEntry(basicImageInfo ? `${basicImageInfo.width}x${basicImageInfo.height}` : 'NaNxNaN', `${_this.props.width}x${_this.props.height}`) : null, settings.infoScale ? renderTableEntry(basicImageInfo ? `${(basicImageInfo.ratio * 100).toFixed(0)}%` : 'NaN%', basicImageInfo ? `${(100 - basicImageInfo.ratio * 100).toFixed(0)}%` : 'NaN%') : null, settings.infoSize ? renderTableEntry(imageSize ? imageSize : 'NaN', originalImageSize ? (originalImageSize === imageSize ? '~' : originalImageSize) : 'NaN') : null)
),
overlayDOMNode
) )
); );
}); });
@ -1256,12 +1282,10 @@ var BetterImageViewer = (() => {
} }
get short() { get short() {
let string = ''; let string = '';
for (let i = 0, len = config.info.name.length; i < len; i++) { for (let i = 0, len = config.info.name.length; i < len; i++) {
const char = config.info.name[i]; const char = config.info.name[i];
if (char === char.toUpperCase()) string += char; if (char === char.toUpperCase()) string += char;
} }
return string; return string;
} }
get author() { get author() {
@ -1327,7 +1351,7 @@ var BetterImageViewer = (() => {
ret += 'XenoLib '; ret += 'XenoLib ';
if (zlibMissing || ZeresPluginLibraryOutdated) ret += 'and ZeresPluginLibrary '; if (zlibMissing || ZeresPluginLibraryOutdated) ret += 'and ZeresPluginLibrary ';
} else if (zlibMissing || ZeresPluginLibraryOutdated) ret += 'ZeresPluginLibrary '; } else if (zlibMissing || ZeresPluginLibraryOutdated) ret += 'ZeresPluginLibrary ';
ret += `required for ${this.getName()} ${bothLibsShit ? 'are' : 'is'} ${XenoLibMissing || zlibMissing ? 'missing' : ''}${XenoLibOutdated || ZeresPluginLibraryOutdated ? (XenoLibMissing || zlibMissing ? ' and/or outdated' : 'outdated') : ''}.`; ret += `required for ${this.name} ${bothLibsShit ? 'are' : 'is'} ${XenoLibMissing || zlibMissing ? 'missing' : ''}${XenoLibOutdated || ZeresPluginLibraryOutdated ? (XenoLibMissing || zlibMissing ? ' and/or outdated' : 'outdated') : ''}.`;
return ret; return ret;
})(); })();
const ModalStack = BdApi.findModuleByProps('push', 'update', 'pop', 'popWithKey'); const ModalStack = BdApi.findModuleByProps('push', 'update', 'pop', 'popWithKey');
@ -1342,7 +1366,7 @@ var BetterImageViewer = (() => {
const listener = () => { const listener = () => {
BDEvents.off('xenolib-loaded', listener); BDEvents.off('xenolib-loaded', listener);
ModalStack.popWithKey(modalId); /* make it easier on the user */ ModalStack.popWithKey(modalId); /* make it easier on the user */
pluginModule.reloadPlugin(this.getName()); pluginModule.reloadPlugin(this.name);
}; };
BDEvents.on('xenolib-loaded', listener); BDEvents.on('xenolib-loaded', listener);
return () => BDEvents.off('xenolib-loaded', listener); return () => BDEvents.off('xenolib-loaded', listener);
@ -1352,7 +1376,7 @@ var BetterImageViewer = (() => {
BDEvents.off('plugin-loaded', onLibLoaded); BDEvents.off('plugin-loaded', onLibLoaded);
BDEvents.off('plugin-reloaded', onLibLoaded); BDEvents.off('plugin-reloaded', onLibLoaded);
ModalStack.popWithKey(modalId); /* make it easier on the user */ ModalStack.popWithKey(modalId); /* make it easier on the user */
pluginModule.reloadPlugin(this.getName()); pluginModule.reloadPlugin(this.name);
}; };
BDEvents.on('plugin-loaded', onLibLoaded); BDEvents.on('plugin-loaded', onLibLoaded);
BDEvents.on('plugin-reloaded', onLibLoaded); BDEvents.on('plugin-reloaded', onLibLoaded);

3
Plugins/BetterImageViewer/CHANGELOG.md
View File

@ -1,3 +1,6 @@
# [BetterImageViewer](https://1lighty.github.io/BetterDiscordStuff/?plugin=BetterImageViewer "BetterImageViewer") Changelog # [BetterImageViewer](https://1lighty.github.io/BetterDiscordStuff/?plugin=BetterImageViewer "BetterImageViewer") Changelog
### 1.0.1
- Nav buttons and info are now an overlay which means, fixed an issue from a certain trash plugin from a certain bad developer of who we do not speak of.
### 1.0.0 ### 1.0.0
- Initial release - Initial release