mirror of
https://github.com/GoogleChromeLabs/squoosh.git
synced 2025-11-11 16:26:20 +00:00
Compare commits
2 Commits
v1.3.0
...
rotation-o
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
fd98d67b3e | ||
|
|
db1db8506e |
@@ -1,2 +0,0 @@
|
||||
/index.html / 301
|
||||
/* /index.html 301
|
||||
2
package-lock.json
generated
2
package-lock.json
generated
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "squoosh",
|
||||
"version": "1.3.0",
|
||||
"version": "1.2.2",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "squoosh",
|
||||
"version": "1.3.0",
|
||||
"version": "1.2.2",
|
||||
"license": "apache-2.0",
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server --host 0.0.0.0 --hot",
|
||||
|
||||
@@ -9,8 +9,6 @@ import '../../lib/SnackBar';
|
||||
import Intro from '../intro';
|
||||
import '../custom-els/LoadingSpinner';
|
||||
|
||||
const ROUTE_EDITOR = '/editor';
|
||||
|
||||
const compressPromise = import(
|
||||
/* webpackChunkName: "main-app" */
|
||||
'../compress',
|
||||
@@ -20,21 +18,15 @@ const offlinerPromise = import(
|
||||
'../../lib/offliner',
|
||||
);
|
||||
|
||||
function back() {
|
||||
window.history.back();
|
||||
}
|
||||
|
||||
interface Props {}
|
||||
|
||||
interface State {
|
||||
file?: File | Fileish;
|
||||
isEditorOpen: Boolean;
|
||||
Compress?: typeof import('../compress').default;
|
||||
}
|
||||
|
||||
export default class App extends Component<Props, State> {
|
||||
state: State = {
|
||||
isEditorOpen: false,
|
||||
file: undefined,
|
||||
Compress: undefined,
|
||||
};
|
||||
@@ -61,20 +53,17 @@ export default class App extends Component<Props, State> {
|
||||
window.STATE = this.state;
|
||||
};
|
||||
}
|
||||
|
||||
window.addEventListener('popstate', this.onPopState);
|
||||
}
|
||||
|
||||
@bind
|
||||
private onFileDrop({ file }: FileDropEvent) {
|
||||
private onFileDrop(event: FileDropEvent) {
|
||||
const { file } = event;
|
||||
if (!file) return;
|
||||
this.openEditor();
|
||||
this.setState({ file });
|
||||
}
|
||||
|
||||
@bind
|
||||
private onIntroPickFile(file: File | Fileish) {
|
||||
this.openEditor();
|
||||
this.setState({ file });
|
||||
}
|
||||
|
||||
@@ -85,25 +74,18 @@ export default class App extends Component<Props, State> {
|
||||
}
|
||||
|
||||
@bind
|
||||
private onPopState() {
|
||||
this.setState({ isEditorOpen: location.pathname === ROUTE_EDITOR });
|
||||
private onBack() {
|
||||
this.setState({ file: undefined });
|
||||
}
|
||||
|
||||
@bind
|
||||
private openEditor() {
|
||||
if (this.state.isEditorOpen) return;
|
||||
history.pushState(null, '', ROUTE_EDITOR);
|
||||
this.setState({ isEditorOpen: true });
|
||||
}
|
||||
|
||||
render({}: Props, { file, isEditorOpen, Compress }: State) {
|
||||
render({}: Props, { file, Compress }: State) {
|
||||
return (
|
||||
<div id="app" class={style.app}>
|
||||
<file-drop accept="image/*" onfiledrop={this.onFileDrop} class={style.drop}>
|
||||
{!isEditorOpen
|
||||
{(!file)
|
||||
? <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
|
||||
: (Compress)
|
||||
? <Compress file={file!} showSnack={this.showSnack} onBack={back} />
|
||||
? <Compress file={file} showSnack={this.showSnack} onBack={this.onBack} />
|
||||
: <loading-spinner class={style.appLoader}/>
|
||||
}
|
||||
<snack-bar ref={linkRef(this, 'snackbar')} />
|
||||
|
||||
@@ -43,7 +43,6 @@ $horizontalPadding: 15px;
|
||||
|
||||
.text-field {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
font: inherit;
|
||||
border: none;
|
||||
padding: 2px 0 2px 10px;
|
||||
|
||||
@@ -160,7 +160,7 @@ function stateForNewSourceData(state: State, newSource: SourceImage): State {
|
||||
for (const i of [0, 1]) {
|
||||
// Ditch previous encodings
|
||||
const downloadUrl = state.sides[i].downloadUrl;
|
||||
if (downloadUrl) URL.revokeObjectURL(downloadUrl);
|
||||
if (downloadUrl) URL.revokeObjectURL(downloadUrl!);
|
||||
|
||||
newState = cleanMerge(state, `sides.${i}`, {
|
||||
preprocessed: undefined,
|
||||
@@ -319,14 +319,9 @@ export default class Compress extends Component<Props, State> {
|
||||
private async onCopyToOtherClick(index: 0 | 1) {
|
||||
const otherIndex = (index + 1) % 2;
|
||||
const oldSettings = this.state.sides[otherIndex];
|
||||
const newSettings = { ...this.state.sides[index] };
|
||||
|
||||
// Create a new object URL for the new settings. This avoids both sides sharing a URL, which
|
||||
// means it can be safely revoked without impacting the other side.
|
||||
if (newSettings.file) newSettings.downloadUrl = URL.createObjectURL(newSettings.file);
|
||||
|
||||
this.setState({
|
||||
sides: cleanSet(this.state.sides, otherIndex, newSettings),
|
||||
sides: cleanSet(this.state.sides, otherIndex, this.state.sides[index]),
|
||||
});
|
||||
|
||||
const result = await this.props.showSnack('Settings copied across', {
|
||||
|
||||
@@ -251,11 +251,6 @@ module.exports = async function (_, env) {
|
||||
filename: '_headers',
|
||||
}),
|
||||
|
||||
isProd && new AssetTemplatePlugin({
|
||||
template: path.join(__dirname, '_redirects.ejs'),
|
||||
filename: '_redirects',
|
||||
}),
|
||||
|
||||
new ScriptExtHtmlPlugin({
|
||||
inline: ['first']
|
||||
}),
|
||||
|
||||
Reference in New Issue
Block a user