2 | 
3 |
7 | Vif supports all the video formats that OS and HTML5 supports (mp4, mov, HEVC, mp4, ogg, ogv, webm and etc). 8 | 9 |
10 | 11 |
12 |
13 |
14 | ## Download and Install:
15 | [The latest release](https://github.com/soroushchehresa/Vif/releases/latest)
16 |
17 |
18 | ## This project implemented by the following technologies:
19 | * [Electron](https://github.com/electron)
20 | * [React](https://github.com/facebook/react)
21 | * [Sass](https://sass-lang.com)
22 | * [gifshot](https://github.com/yahoo/gifshot)
23 |
24 |
25 | ## Support:
26 |
27 | 
28 |
29 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 |
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 |
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 |
19 | # node-waf configuration
20 | .lock-wscript
21 |
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 | .eslintcache
25 |
26 | # Dependency directory
27 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
28 | node_modules
29 |
30 | # OSX
31 | .DS_Store
32 |
33 | # flow-typed
34 | flow-typed/npm/*
35 | !flow-typed/npm/module_vx.x.x.js
36 |
37 | # App packaged
38 | release
39 | app/main.prod.js
40 | app/main.prod.js.map
41 | app/renderer.prod.js
42 | app/renderer.prod.js.map
43 | app/style.css
44 | app/style.css.map
45 | dist
46 | dll
47 | main.js
48 | main.js.map
49 |
50 | .idea
51 | npm-debug.log.*
52 |
--------------------------------------------------------------------------------
/.flowconfig:
--------------------------------------------------------------------------------
1 | [ignore]
2 |
5 |
66 |
67 | `;
68 |
--------------------------------------------------------------------------------
/test/actions/counter.spec.js:
--------------------------------------------------------------------------------
1 | import { spy } from 'sinon';
2 | import * as actions from '../../app/actions/counter';
3 |
4 | describe('actions', () => {
5 | it('should increment should create increment action', () => {
6 | expect(actions.increment()).toMatchSnapshot();
7 | });
8 |
9 | it('should decrement should create decrement action', () => {
10 | expect(actions.decrement()).toMatchSnapshot();
11 | });
12 |
13 | it('should incrementIfOdd should create increment action', () => {
14 | const fn = actions.incrementIfOdd();
15 | expect(fn).toBeInstanceOf(Function);
16 | const dispatch = spy();
17 | const getState = () => ({ counter: 1 });
18 | fn(dispatch, getState);
19 | expect(dispatch.calledWith({ type: actions.INCREMENT_COUNTER })).toBe(true);
20 | });
21 |
22 | it('should incrementIfOdd shouldnt create increment action if counter is even', () => {
23 | const fn = actions.incrementIfOdd();
24 | const dispatch = spy();
25 | const getState = () => ({ counter: 2 });
26 | fn(dispatch, getState);
27 | expect(dispatch.called).toBe(false);
28 | });
29 |
30 | // There's no nice way to test this at the moment...
31 | it('should incrementAsync', done => {
32 | const fn = actions.incrementAsync(1);
33 | expect(fn).toBeInstanceOf(Function);
34 | const dispatch = spy();
35 | fn(dispatch);
36 | setTimeout(() => {
37 | expect(dispatch.calledWith({ type: actions.INCREMENT_COUNTER })).toBe(
38 | true
39 | );
40 | done();
41 | }, 5);
42 | });
43 | });
44 |
--------------------------------------------------------------------------------
/configs/webpack.config.renderer.dev.dll.babel.js:
--------------------------------------------------------------------------------
1 | /* eslint global-require: off, import/no-dynamic-require: off */
2 |
3 | /**
4 | * Builds the DLL for development electron renderer process
5 | */
6 |
7 | import webpack from 'webpack';
8 | import path from 'path';
9 | import merge from 'webpack-merge';
10 | import baseConfig from './webpack.config.base';
11 | import { dependencies } from '../package.json';
12 | import CheckNodeEnv from '../internals/scripts/CheckNodeEnv';
13 |
14 | CheckNodeEnv('development');
15 |
16 | const dist = path.join(__dirname, '..', 'dll');
17 |
18 | export default merge.smart(baseConfig, {
19 | context: path.join(__dirname, '..'),
20 |
21 | devtool: 'eval',
22 |
23 | mode: 'development',
24 |
25 | target: 'electron-renderer',
26 |
27 | externals: ['fsevents', 'crypto-browserify'],
28 |
29 | /**
30 | * Use `module` from `webpack.config.renderer.dev.js`
31 | */
32 | module: require('./webpack.config.renderer.dev.babel').default.module,
33 |
34 | entry: {
35 | renderer: Object.keys(dependencies || {})
36 | },
37 |
38 | output: {
39 | library: 'renderer',
40 | path: dist,
41 | filename: '[name].dev.dll.js',
42 | libraryTarget: 'var'
43 | },
44 |
45 | plugins: [
46 | new webpack.DllPlugin({
47 | path: path.join(dist, '[name].json'),
48 | name: '[name]'
49 | }),
50 |
51 | /**
52 | * Create global constants which can be configured at compile time.
53 | *
54 | * Useful for allowing different behaviour between development builds and
55 | * release builds
56 | *
57 | * NODE_ENV should be production so that modules do not perform certain
58 | * development checks
59 | */
60 | new webpack.EnvironmentPlugin({
61 | NODE_ENV: 'development'
62 | }),
63 |
64 | new webpack.LoaderOptionsPlugin({
65 | debug: true,
66 | options: {
67 | context: path.join(__dirname, '..', 'app'),
68 | output: {
69 | path: path.join(__dirname, '..', 'dll')
70 | }
71 | }
72 | })
73 | ]
74 | });
75 |
--------------------------------------------------------------------------------
/test/containers/CounterPage.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Enzyme, { mount } from 'enzyme';
3 | import Adapter from 'enzyme-adapter-react-16';
4 | import { Provider } from 'react-redux';
5 | import { createBrowserHistory } from 'history';
6 | import { ConnectedRouter } from 'connected-react-router';
7 | import CounterPage from '../../app/containers/CounterPage';
8 | import { configureStore } from '../../app/store/configureStore';
9 |
10 | Enzyme.configure({ adapter: new Adapter() });
11 |
12 | function setup(initialState) {
13 | const store = configureStore(initialState);
14 | const history = createBrowserHistory();
15 | const provider = (
16 |
43 |
44 |
46 |
47 | );
48 | const tree = renderer.create(counter).toJSON();
49 |
50 | expect(tree).toMatchSnapshot();
51 | });
52 |
53 | it('should second button should call decrement', () => {
54 | const { buttons, actions } = setup();
55 | buttons.at(1).simulate('click');
56 | expect(actions.decrement.called).toBe(true);
57 | });
58 |
59 | it('should third button should call incrementIfOdd', () => {
60 | const { buttons, actions } = setup();
61 | buttons.at(2).simulate('click');
62 | expect(actions.incrementIfOdd.called).toBe(true);
63 | });
64 |
65 | it('should fourth button should call incrementAsync', () => {
66 | const { buttons, actions } = setup();
67 | buttons.at(3).simulate('click');
68 | expect(actions.incrementAsync.called).toBe(true);
69 | });
70 | });
71 |
--------------------------------------------------------------------------------
/app/store/configureStore.dev.js:
--------------------------------------------------------------------------------
1 | import { createStore, applyMiddleware, compose } from 'redux';
2 | import thunk from 'redux-thunk';
3 | import { createHashHistory } from 'history';
4 | import { routerMiddleware, routerActions } from 'connected-react-router';
5 | import { createLogger } from 'redux-logger';
6 | import createRootReducer from '../reducers';
7 | import * as counterActions from '../actions/counter';
8 | import type { counterStateType } from '../reducers/types';
9 |
10 | const history = createHashHistory();
11 |
12 | const rootReducer = createRootReducer(history);
13 |
14 | const configureStore = (initialState?: counterStateType) => {
15 | // Redux Configuration
16 | const middleware = [];
17 | const enhancers = [];
18 |
19 | // Thunk Middleware
20 | middleware.push(thunk);
21 |
22 | // Logging Middleware
23 | const logger = createLogger({
24 | level: 'info',
25 | collapsed: true
26 | });
27 |
28 | // Skip redux logs in console during the tests
29 | if (process.env.NODE_ENV !== 'test') {
30 | middleware.push(logger);
31 | }
32 |
33 | // Router Middleware
34 | const router = routerMiddleware(history);
35 | middleware.push(router);
36 |
37 | // Redux DevTools Configuration
38 | const actionCreators = {
39 | ...counterActions,
40 | ...routerActions
41 | };
42 | // If Redux DevTools Extension is installed use it, otherwise use Redux compose
43 | /* eslint-disable no-underscore-dangle */
44 | const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
45 | ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
46 | // Options: http://extension.remotedev.io/docs/API/Arguments.html
47 | actionCreators
48 | })
49 | : compose;
50 | /* eslint-enable no-underscore-dangle */
51 |
52 | // Apply Middleware & Compose Enhancers
53 | enhancers.push(applyMiddleware(...middleware));
54 | const enhancer = composeEnhancers(...enhancers);
55 |
56 | // Create Store
57 | const store = createStore(rootReducer, initialState, enhancer);
58 |
59 | if (module.hot) {
60 | module.hot.accept(
61 | '../reducers',
62 | // eslint-disable-next-line global-require
63 | () => store.replaceReducer(require('../reducers').default)
64 | );
65 | }
66 |
67 | return store;
68 | };
69 |
70 | export default { configureStore, history };
71 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | matrix:
2 | allow_failures:
3 | - os: windows
4 | include:
5 | - os: osx
6 | language: node_js
7 | node_js:
8 | - node
9 | env:
10 | - ELECTRON_CACHE=$HOME/.cache/electron
11 | - ELECTRON_BUILDER_CACHE=$HOME/.cache/electron-builder
12 |
13 | - os: linux
14 | language: node_js
15 | node_js:
16 | - node
17 | addons:
18 | apt:
19 | sources:
20 | - ubuntu-toolchain-r-test
21 | packages:
22 | - gcc-multilib
23 | - g++-8
24 | - g++-multilib
25 | - icnsutils
26 | - graphicsmagick
27 | - xz-utils
28 | - xorriso
29 | - rpm
30 |
31 | - os: windows
32 | language: node_js
33 | node_js:
34 | - node
35 | env:
36 | - ELECTRON_CACHE=$HOME/.cache/electron
37 | - ELECTRON_BUILDER_CACHE=$HOME/.cache/electron-builder
38 |
39 | before_cache:
40 | - rm -rf $HOME/.cache/electron-builder/wine
41 |
42 | cache:
43 | yarn: true
44 | directories:
45 | - node_modules
46 | - $(npm config get prefix)/lib/node_modules
47 | - flow-typed
48 | - $HOME/.cache/electron
49 | - $HOME/.cache/electron-builder
50 |
51 | before_install:
52 | - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then export CXX="g++-8"; fi
53 |
54 | install:
55 | - yarn --ignore-engines
56 | # On Linux, initialize "virtual display". See before_script
57 | - |
58 | if [ "$TRAVIS_OS_NAME" == "linux" ]; then
59 | /sbin/start-stop-daemon \
60 | --start \
61 | --quiet \
62 | --pidfile /tmp/custom_xvfb_99.pid \
63 | --make-pidfile \
64 | --background \
65 | --exec /usr/bin/Xvfb \
66 | -- :99 -ac -screen 0 1280x1024x16
67 | else
68 | :
69 | fi
70 |
71 | before_script:
72 | # On Linux, create a "virtual display". This allows browsers to work properly
73 | - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then export DISPLAY=:99.0; fi
74 | - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sh -e /etc/init.d/xvfb start; fi
75 | - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sleep 3; fi
76 |
77 | script:
78 | - yarn package-ci
79 | - yarn lint
80 | - yarn flow
81 | # HACK: Temporarily ignore `yarn test` on linux
82 | - if [[ "$TRAVIS_OS_NAME" == "osx" ]]; then yarn test; fi
83 | - yarn build-e2e
84 | - yarn test-e2e
85 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | /* eslint global-require: off */
2 |
3 | const developmentEnvironments = ['development', 'test'];
4 |
5 | const developmentPlugins = [require('react-hot-loader/babel')];
6 |
7 | const productionPlugins = [
8 | require('babel-plugin-dev-expression'),
9 |
10 | // babel-preset-react-optimize
11 | require('@babel/plugin-transform-react-constant-elements'),
12 | require('@babel/plugin-transform-react-inline-elements'),
13 | require('babel-plugin-transform-react-remove-prop-types')
14 | ];
15 |
16 | module.exports = api => {
17 | // see docs about api at https://babeljs.io/docs/en/config-files#apicache
18 |
19 | const development = api.env(developmentEnvironments);
20 |
21 | return {
22 | presets: [
23 | [
24 | require('@babel/preset-env'),
25 | {
26 | targets: { electron: require('electron/package.json').version },
27 | useBuiltIns: 'usage'
28 | }
29 | ],
30 | require('@babel/preset-flow'),
31 | [require('@babel/preset-react'), { development }]
32 | ],
33 | plugins: [
34 | // Stage 0
35 | require('@babel/plugin-proposal-function-bind'),
36 |
37 | // Stage 1
38 | require('@babel/plugin-proposal-export-default-from'),
39 | require('@babel/plugin-proposal-logical-assignment-operators'),
40 | [require('@babel/plugin-proposal-optional-chaining'), { loose: false }],
41 | [
42 | require('@babel/plugin-proposal-pipeline-operator'),
43 | { proposal: 'minimal' }
44 | ],
45 | [
46 | require('@babel/plugin-proposal-nullish-coalescing-operator'),
47 | { loose: false }
48 | ],
49 | require('@babel/plugin-proposal-do-expressions'),
50 |
51 | // Stage 2
52 | [require('@babel/plugin-proposal-decorators'), { legacy: true }],
53 | require('@babel/plugin-proposal-function-sent'),
54 | require('@babel/plugin-proposal-export-namespace-from'),
55 | require('@babel/plugin-proposal-numeric-separator'),
56 | require('@babel/plugin-proposal-throw-expressions'),
57 |
58 | // Stage 3
59 | require('@babel/plugin-syntax-dynamic-import'),
60 | require('@babel/plugin-syntax-import-meta'),
61 | [require('@babel/plugin-proposal-class-properties'), { loose: true }],
62 | require('@babel/plugin-proposal-json-strings'),
63 |
64 | ...(development ? developmentPlugins : productionPlugins)
65 | ]
66 | };
67 | };
68 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "parserOptions": {
4 | "sourceType": "module",
5 | "allowImportExportEverywhere": true
6 | },
7 | "extends": ["airbnb", "prettier", "prettier/flowtype", "prettier/react"],
8 | "env": {
9 | "browser": true,
10 | "node": true
11 | },
12 | "rules": {
13 | "arrow-parens": ["off"],
14 | "compat/compat": "error",
15 | "consistent-return": "off",
16 | "comma-dangle": "off",
17 | "flowtype/boolean-style": ["error", "boolean"],
18 | "flowtype/define-flow-type": "warn",
19 | "flowtype/delimiter-dangle": ["error", "never"],
20 | "flowtype/generic-spacing": ["error", "never"],
21 | "flowtype/no-primitive-constructor-types": "error",
22 | "flowtype/no-weak-types": "warn",
23 | "flowtype/object-type-delimiter": ["error", "comma"],
24 | "flowtype/require-parameter-type": "off",
25 | "flowtype/require-return-type": "off",
26 | "flowtype/require-valid-file-annotation": "off",
27 | "flowtype/semi": ["error", "always"],
28 | "flowtype/space-after-type-colon": ["error", "always"],
29 | "flowtype/space-before-generic-bracket": ["error", "never"],
30 | "flowtype/space-before-type-colon": ["error", "never"],
31 | "flowtype/union-intersection-spacing": ["error", "always"],
32 | "flowtype/use-flow-type": "error",
33 | "flowtype/valid-syntax": "error",
34 | "generator-star-spacing": "off",
35 | "import/no-unresolved": "error",
36 | "import/no-extraneous-dependencies": "off",
37 | "jsx-a11y/anchor-is-valid": "off",
38 | "no-console": "off",
39 | "no-use-before-define": "off",
40 | "no-multi-assign": "off",
41 | "promise/param-names": "error",
42 | "promise/always-return": "error",
43 | "promise/catch-or-return": "error",
44 | "promise/no-native": "off",
45 | "react/sort-comp": [
46 | "error",
47 | {
48 | "order": [
49 | "type-annotations",
50 | "static-methods",
51 | "lifecycle",
52 | "everything-else",
53 | "render"
54 | ]
55 | }
56 | ],
57 | "react/jsx-no-bind": "off",
58 | "react/jsx-filename-extension": [
59 | "error",
60 | { "extensions": [".js", ".jsx"] }
61 | ],
62 | "react/prefer-stateless-function": "off"
63 | },
64 | "plugins": ["flowtype", "import", "promise", "compat", "react"],
65 | "settings": {
66 | "import/resolver": {
67 | "webpack": {
68 | "config": "configs/webpack.config.eslint.js"
69 | }
70 | }
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/app/main.dev.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | /* eslint global-require: off */
3 |
4 | import { app, BrowserWindow } from 'electron';
5 | import { autoUpdater } from 'electron-updater';
6 | import log from 'electron-log';
7 | import is from 'electron-is';
8 |
9 | export default class AppUpdater {
10 | constructor() {
11 | log.transports.file.level = 'info';
12 | autoUpdater.logger = log;
13 | autoUpdater.checkForUpdatesAndNotify();
14 | }
15 | }
16 |
17 | let mainWindow = null;
18 |
19 | if (process.env.NODE_ENV === 'production') {
20 | const sourceMapSupport = require('source-map-support');
21 | sourceMapSupport.install();
22 | }
23 |
24 | if (
25 | process.env.NODE_ENV === 'development' ||
26 | process.env.DEBUG_PROD === 'true'
27 | ) {
28 | require('electron-debug')();
29 | }
30 |
31 | const installExtensions = async () => {
32 | const installer = require('electron-devtools-installer');
33 | const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
34 | const extensions = ['REACT_DEVELOPER_TOOLS', 'REDUX_DEVTOOLS'];
35 |
36 | return Promise.all(
37 | extensions.map(name => installer.default(installer[name], forceDownload))
38 | )
39 | .catch(console.log);
40 | };
41 |
42 | /**
43 | * Add event listeners...
44 | */
45 |
46 | app.on('window-all-closed', () => {
47 | // Respect the OSX convention of having the application in memory even
48 | // after all windows have been closed
49 | if (process.platform !== 'darwin') {
50 | app.quit();
51 | }
52 | });
53 |
54 | app.on('browser-window-created', function(e, window) {
55 | window.setMenu(null);
56 | });
57 |
58 | app.on('ready', async () => {
59 | if (
60 | process.env.NODE_ENV === 'development' ||
61 | process.env.DEBUG_PROD === 'true'
62 | ) {
63 | await installExtensions();
64 | }
65 |
66 | let options = {
67 | show: false,
68 | width: 360,
69 | height: 240,
70 | backgroundColor: '#373834',
71 | vibrancy: 'dark',
72 | transparent: true,
73 | resizable: false,
74 | titleBarStyle: 'hiddenInset',
75 | maximizable: false,
76 | frame: false,
77 | webPreferences: {
78 | nodeIntegration: true
79 | }
80 | };
81 |
82 | if (is.macOS()) {
83 | delete options.backgroundColor;
84 | }
85 |
86 | mainWindow = new BrowserWindow(options);
87 |
88 | mainWindow.loadURL(`file://${__dirname}/app.html`);
89 |
90 | // @TODO: Use 'ready-to-show' event
91 | // https://github.com/electron/electron/blob/master/docs/api/browser-window.md#using-ready-to-show-event
92 | mainWindow.webContents.on('did-finish-load', () => {
93 | if (!mainWindow) {
94 | throw new Error('"mainWindow" is not defined');
95 | }
96 | if (process.env.START_MINIMIZED) {
97 | mainWindow.minimize();
98 | } else {
99 | mainWindow.show();
100 | mainWindow.focus();
101 | }
102 | });
103 |
104 | mainWindow.on('closed', () => {
105 | mainWindow = null;
106 | });
107 |
108 | // Remove this if your app does not use auto updates
109 | // eslint-disable-next-line
110 | new AppUpdater();
111 | });
112 |
--------------------------------------------------------------------------------
/test/e2e/HomePage.e2e.js:
--------------------------------------------------------------------------------
1 | import { ClientFunction, Selector } from 'testcafe';
2 | import { ReactSelector, waitForReact } from 'testcafe-react-selectors';
3 | import { getPageUrl } from './helpers';
4 |
5 | const getPageTitle = ClientFunction(() => document.title);
6 | const counterSelector = Selector('[data-tid="counter"]');
7 | const buttonsSelector = Selector('[data-tclass="btn"]');
8 | const clickToCounterLink = t =>
9 | t.click(Selector('a').withExactText('to Counter'));
10 | const incrementButton = buttonsSelector.nth(0);
11 | const decrementButton = buttonsSelector.nth(1);
12 | const oddButton = buttonsSelector.nth(2);
13 | const asyncButton = buttonsSelector.nth(3);
14 | const getCounterText = () => counterSelector().innerText;
15 | const assertNoConsoleErrors = async t => {
16 | const { error } = await t.getBrowserConsoleMessages();
17 | await t.expect(error).eql([]);
18 | };
19 |
20 | fixture`Home Page`.page('../../app/app.html').afterEach(assertNoConsoleErrors);
21 |
22 | test('e2e', async t => {
23 | await t.expect(getPageTitle()).eql('Hello Electron React!');
24 | });
25 |
26 | test('should open window', async t => {
27 | await t.expect(getPageTitle()).eql('Hello Electron React!');
28 | });
29 |
30 | test(
31 | "should haven't any logs in console of main window",
32 | assertNoConsoleErrors
33 | );
34 |
35 | test('should to Counter with click "to Counter" link', async t => {
36 | await t
37 | .click('[data-tid=container] > a')
38 | .expect(getCounterText())
39 | .eql('0');
40 | });
41 |
42 | test('should navgiate to /counter', async t => {
43 | await waitForReact();
44 | await t
45 | .click(
46 | ReactSelector('Link').withProps({
47 | to: '/counter'
48 | })
49 | )
50 | .expect(getPageUrl())
51 | .contains('/counter');
52 | });
53 |
54 | fixture`Counter Tests`
55 | .page('../../app/app.html')
56 | .beforeEach(clickToCounterLink)
57 | .afterEach(assertNoConsoleErrors);
58 |
59 | test('should display updated count after increment button click', async t => {
60 | await t
61 | .click(incrementButton)
62 | .expect(getCounterText())
63 | .eql('1');
64 | });
65 |
66 | test('should display updated count after descrement button click', async t => {
67 | await t
68 | .click(decrementButton)
69 | .expect(getCounterText())
70 | .eql('-1');
71 | });
72 |
73 | test('should not change if even and if odd button clicked', async t => {
74 | await t
75 | .click(oddButton)
76 | .expect(getCounterText())
77 | .eql('0');
78 | });
79 |
80 | test('should change if odd and if odd button clicked', async t => {
81 | await t
82 | .click(incrementButton)
83 | .click(oddButton)
84 | .expect(getCounterText())
85 | .eql('2');
86 | });
87 |
88 | test('should change if async button clicked and a second later', async t => {
89 | await t
90 | .click(asyncButton)
91 | .expect(getCounterText())
92 | .eql('0')
93 | .expect(getCounterText())
94 | .eql('1');
95 | });
96 |
97 | test('should back to home if back button clicked', async t => {
98 | await t
99 | .click('[data-tid="backButton"] > a')
100 | .expect(Selector('[data-tid="container"]').visible)
101 | .ok();
102 | });
103 |
--------------------------------------------------------------------------------
/app/containers/Home/index.jsx:
--------------------------------------------------------------------------------
1 | // @flow
2 |
3 | import React, { Component } from 'react';
4 | import fs from 'fs';
5 | import base64ImageToFile from 'base64image-to-file';
6 | import CircularProgressbar from 'react-circular-progressbar';
7 | import getDimensions from 'get-video-dimensions';
8 | import { getVideoDurationInSeconds } from 'get-video-duration';
9 | import gifshot from 'gifshot';
10 | import path from 'path';
11 | import styles from './styles.scss';
12 |
13 | export default class Index extends Component {
14 | constructor(props) {
15 | super(props);
16 | this.state = {
17 | activeDropZone: false,
18 | captureProgress: null,
19 | saving: false
20 | };
21 | }
22 |
23 | ondragover = e => {
24 | const { activeDropZone } = this.state;
25 | if (e.dataTransfer.items.length === 1) {
26 | e.preventDefault();
27 | if (!activeDropZone) {
28 | this.setState({ activeDropZone: true });
29 | }
30 | }
31 | return false;
32 | };
33 |
34 | ondrop = e => {
35 | e.preventDefault();
36 | const { activeDropZone, saving } = this.state;
37 | if (activeDropZone) {
38 | this.setState({ activeDropZone: false });
39 | }
40 | const filePath = e.dataTransfer.files[0].path;
41 | const outputPath = path.join(filePath.split('/')
42 | .reverse()
43 | .slice(1)
44 | .reverse()
45 | .join('/'));
46 | getDimensions(filePath)
47 | .then(({ width, height }) => {
48 | const streamFile = fs.createReadStream(filePath);
49 | getVideoDurationInSeconds(streamFile)
50 | .then(videoDuration => {
51 | gifshot.createGIF(
52 | {
53 | gifWidth: width,
54 | gifHeight: height,
55 | video: filePath,
56 | numFrames: ((Math.round(videoDuration) * 1000) / 100) - (Math.round(videoDuration) * 2),
57 | progressCallback: captureProgress => {
58 | this.setState({ captureProgress });
59 | if (captureProgress === 1) {
60 | this.setState({ captureProgress: null });
61 | }
62 | if (!saving) {
63 | this.setState({ saving: true });
64 | }
65 | }
66 | },
67 | obj => {
68 | if (!obj.error) {
69 | let outputFileName = '';
70 | if (fs.existsSync(`${filePath}.gif`)) {
71 | outputFileName = `${filePath.split('/')
72 | .splice(-1, 1)[0]}-${Math.floor(Math.random() * 899999 + 100000)}`;
73 | } else {
74 | outputFileName = `${filePath.split('/')
75 | .splice(-1, 1)[0]}`;
76 | }
77 | base64ImageToFile(
78 | obj.image,
79 | outputPath,
80 | outputFileName,
81 | () => {
82 | this.setState({ saving: false });
83 | }
84 | );
85 | }
86 | }
87 | );
88 | return true;
89 | })
90 | .catch(error => {
91 | console.log(error);
92 | });
93 | return true;
94 | })
95 | .catch(error => {
96 | console.log(error);
97 | });
98 | };
99 |
100 | ondragleave = e => {
101 | e.preventDefault();
102 | const { activeDropZone } = this.state;
103 | if (activeDropZone) {
104 | this.setState({ activeDropZone: false });
105 | }
106 | return false;
107 | };
108 |
109 | render() {
110 | const { activeDropZone, captureProgress, saving } = this.state;
111 | return (
112 |
119 | {
120 | captureProgress &&
121 |
146 | );
147 | }
148 | }
149 |
--------------------------------------------------------------------------------
/configs/webpack.config.renderer.prod.babel.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Build config for electron renderer process
3 | */
4 |
5 | import path from 'path';
6 | import webpack from 'webpack';
7 | import MiniCssExtractPlugin from 'mini-css-extract-plugin';
8 | import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin';
9 | import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
10 | import merge from 'webpack-merge';
11 | import TerserPlugin from 'terser-webpack-plugin';
12 | import baseConfig from './webpack.config.base';
13 | import CheckNodeEnv from '../internals/scripts/CheckNodeEnv';
14 |
15 | CheckNodeEnv('production');
16 | export default merge.smart(baseConfig, {
17 | devtool: 'source-map',
18 |
19 | mode: 'production',
20 |
21 | target: 'electron-renderer',
22 |
23 | entry: path.join(__dirname, '..', 'app/index'),
24 |
25 | output: {
26 | path: path.join(__dirname, '..', 'app/dist'),
27 | publicPath: './dist/',
28 | filename: 'renderer.prod.js'
29 | },
30 |
31 | module: {
32 | rules: [
33 | // Extract all .global.css to style.css as is
34 | {
35 | test: /\.global\.css$/,
36 | use: [
37 | {
38 | loader: MiniCssExtractPlugin.loader,
39 | options: {
40 | publicPath: './'
41 | }
42 | },
43 | {
44 | loader: 'css-loader',
45 | options: {
46 | sourceMap: true
47 | }
48 | }
49 | ]
50 | },
51 | // Pipe other styles through css modules and append to style.css
52 | {
53 | test: /^((?!\.global).)*\.css$/,
54 | use: [
55 | {
56 | loader: MiniCssExtractPlugin.loader
57 | },
58 | {
59 | loader: 'css-loader',
60 | options: {
61 | modules: true,
62 | localIdentName: '[name]__[local]__[hash:base64:5]',
63 | sourceMap: true
64 | }
65 | }
66 | ]
67 | },
68 | // Add SASS support - compile all .global.scss files and pipe it to style.css
69 | {
70 | test: /\.global\.(scss|sass)$/,
71 | use: [
72 | {
73 | loader: MiniCssExtractPlugin.loader
74 | },
75 | {
76 | loader: 'css-loader',
77 | options: {
78 | sourceMap: true,
79 | importLoaders: 1
80 | }
81 | },
82 | {
83 | loader: 'sass-loader',
84 | options: {
85 | sourceMap: true
86 | }
87 | }
88 | ]
89 | },
90 | // Add SASS support - compile all other .scss files and pipe it to style.css
91 | {
92 | test: /^((?!\.global).)*\.(scss|sass)$/,
93 | use: [
94 | {
95 | loader: MiniCssExtractPlugin.loader
96 | },
97 | {
98 | loader: 'css-loader',
99 | options: {
100 | modules: true,
101 | importLoaders: 1,
102 | localIdentName: '[name]__[local]__[hash:base64:5]',
103 | sourceMap: true
104 | }
105 | },
106 | {
107 | loader: 'sass-loader',
108 | options: {
109 | sourceMap: true
110 | }
111 | }
112 | ]
113 | },
114 | // WOFF Font
115 | {
116 | test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
117 | use: {
118 | loader: 'url-loader',
119 | options: {
120 | limit: 10000,
121 | mimetype: 'application/font-woff'
122 | }
123 | }
124 | },
125 | // WOFF2 Font
126 | {
127 | test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
128 | use: {
129 | loader: 'url-loader',
130 | options: {
131 | limit: 10000,
132 | mimetype: 'application/font-woff'
133 | }
134 | }
135 | },
136 | // TTF Font
137 | {
138 | test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
139 | use: {
140 | loader: 'url-loader',
141 | options: {
142 | limit: 10000,
143 | mimetype: 'application/octet-stream'
144 | }
145 | }
146 | },
147 | // EOT Font
148 | {
149 | test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
150 | use: 'file-loader'
151 | },
152 | // SVG Font
153 | {
154 | test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
155 | use: {
156 | loader: 'url-loader',
157 | options: {
158 | limit: 10000,
159 | mimetype: 'image/svg+xml'
160 | }
161 | }
162 | },
163 | // Common Image Formats
164 | {
165 | test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/,
166 | use: 'url-loader'
167 | }
168 | ]
169 | },
170 |
171 | optimization: {
172 | minimizer: process.env.E2E_BUILD
173 | ? []
174 | : [
175 | new TerserPlugin({
176 | parallel: true,
177 | sourceMap: true,
178 | cache: true
179 | }),
180 | new OptimizeCSSAssetsPlugin({
181 | cssProcessorOptions: {
182 | map: {
183 | inline: false,
184 | annotation: true
185 | }
186 | }
187 | })
188 | ]
189 | },
190 |
191 | plugins: [
192 | /**
193 | * Create global constants which can be configured at compile time.
194 | *
195 | * Useful for allowing different behaviour between development builds and
196 | * release builds
197 | *
198 | * NODE_ENV should be production so that modules do not perform certain
199 | * development checks
200 | */
201 | new webpack.EnvironmentPlugin({
202 | NODE_ENV: 'production'
203 | }),
204 |
205 | new MiniCssExtractPlugin({
206 | filename: 'style.css'
207 | }),
208 |
209 | new BundleAnalyzerPlugin({
210 | analyzerMode:
211 | process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
212 | openAnalyzer: process.env.OPEN_ANALYZER === 'true'
213 | })
214 | ]
215 | });
216 |
--------------------------------------------------------------------------------
/configs/webpack.config.renderer.dev.babel.js:
--------------------------------------------------------------------------------
1 | /* eslint global-require: off, import/no-dynamic-require: off */
2 |
3 | /**
4 | * Build config for development electron renderer process that uses
5 | * Hot-Module-Replacement
6 | *
7 | * https://webpack.js.org/concepts/hot-module-replacement/
8 | */
9 |
10 | import path from 'path';
11 | import fs from 'fs';
12 | import webpack from 'webpack';
13 | import chalk from 'chalk';
14 | import merge from 'webpack-merge';
15 | import { spawn, execSync } from 'child_process';
16 | import baseConfig from './webpack.config.base';
17 | import CheckNodeEnv from '../internals/scripts/CheckNodeEnv';
18 |
19 | CheckNodeEnv('development');
20 |
21 | const port = process.env.PORT || 1212;
22 | const publicPath = `http://localhost:${port}/dist`;
23 | const dll = path.join(__dirname, '..', 'dll');
24 | const manifest = path.resolve(dll, 'renderer.json');
25 | const requiredByDLLConfig = module.parent.filename.includes(
26 | 'webpack.config.renderer.dev.dll'
27 | );
28 |
29 | /**
30 | * Warn if the DLL is not built
31 | */
32 | if (!requiredByDLLConfig && !(fs.existsSync(dll) && fs.existsSync(manifest))) {
33 | console.log(
34 | chalk.black.bgYellow.bold(
35 | 'The DLL files are missing. Sit back while we build them for you with "yarn build-dll"'
36 | )
37 | );
38 | execSync('yarn build-dll');
39 | }
40 |
41 | export default merge.smart(baseConfig, {
42 | devtool: 'inline-source-map',
43 |
44 | mode: 'development',
45 |
46 | target: 'electron-renderer',
47 |
48 | entry: [
49 | 'react-hot-loader/patch',
50 | `webpack-dev-server/client?http://localhost:${port}/`,
51 | 'webpack/hot/only-dev-server',
52 | require.resolve('../app/index')
53 | ],
54 |
55 | output: {
56 | publicPath: `http://localhost:${port}/dist/`,
57 | filename: 'renderer.dev.js'
58 | },
59 |
60 | module: {
61 | rules: [
62 | {
63 | test: /\.jsx?$/,
64 | exclude: /node_modules/,
65 | use: {
66 | loader: 'babel-loader',
67 | options: {
68 | cacheDirectory: true
69 | }
70 | }
71 | },
72 | {
73 | test: /\.global\.css$/,
74 | use: [
75 | {
76 | loader: 'style-loader'
77 | },
78 | {
79 | loader: 'css-loader',
80 | options: {
81 | sourceMap: true
82 | }
83 | }
84 | ]
85 | },
86 | {
87 | test: /^((?!\.global).)*\.css$/,
88 | use: [
89 | {
90 | loader: 'style-loader'
91 | },
92 | {
93 | loader: 'css-loader',
94 | options: {
95 | modules: true,
96 | sourceMap: true,
97 | importLoaders: 1,
98 | localIdentName: '[name]__[local]__[hash:base64:5]'
99 | }
100 | }
101 | ]
102 | },
103 | // SASS support - compile all .global.scss files and pipe it to style.css
104 | {
105 | test: /\.global\.(scss|sass)$/,
106 | use: [
107 | {
108 | loader: 'style-loader'
109 | },
110 | {
111 | loader: 'css-loader',
112 | options: {
113 | sourceMap: true
114 | }
115 | },
116 | {
117 | loader: 'sass-loader'
118 | }
119 | ]
120 | },
121 | // SASS support - compile all other .scss files and pipe it to style.css
122 | {
123 | test: /^((?!\.global).)*\.(scss|sass)$/,
124 | use: [
125 | {
126 | loader: 'style-loader'
127 | },
128 | {
129 | loader: 'css-loader',
130 | options: {
131 | modules: true,
132 | sourceMap: true,
133 | importLoaders: 1,
134 | localIdentName: '[name]__[local]__[hash:base64:5]'
135 | }
136 | },
137 | {
138 | loader: 'sass-loader'
139 | }
140 | ]
141 | },
142 | // WOFF Font
143 | {
144 | test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
145 | use: {
146 | loader: 'url-loader',
147 | options: {
148 | limit: 10000,
149 | mimetype: 'application/font-woff'
150 | }
151 | }
152 | },
153 | // WOFF2 Font
154 | {
155 | test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
156 | use: {
157 | loader: 'url-loader',
158 | options: {
159 | limit: 10000,
160 | mimetype: 'application/font-woff'
161 | }
162 | }
163 | },
164 | // TTF Font
165 | {
166 | test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
167 | use: {
168 | loader: 'url-loader',
169 | options: {
170 | limit: 10000,
171 | mimetype: 'application/octet-stream'
172 | }
173 | }
174 | },
175 | // EOT Font
176 | {
177 | test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
178 | use: 'file-loader'
179 | },
180 | // SVG Font
181 | {
182 | test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
183 | use: {
184 | loader: 'url-loader',
185 | options: {
186 | limit: 10000,
187 | mimetype: 'image/svg+xml'
188 | }
189 | }
190 | },
191 | // Common Image Formats
192 | {
193 | test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/,
194 | use: 'url-loader'
195 | }
196 | ]
197 | },
198 |
199 | plugins: [
200 | requiredByDLLConfig
201 | ? null
202 | : new webpack.DllReferencePlugin({
203 | context: path.join(__dirname, '..', 'dll'),
204 | manifest: require(manifest),
205 | sourceType: 'var'
206 | }),
207 |
208 | new webpack.HotModuleReplacementPlugin({
209 | multiStep: true
210 | }),
211 |
212 | new webpack.NoEmitOnErrorsPlugin(),
213 |
214 | /**
215 | * Create global constants which can be configured at compile time.
216 | *
217 | * Useful for allowing different behaviour between development builds and
218 | * release builds
219 | *
220 | * NODE_ENV should be production so that modules do not perform certain
221 | * development checks
222 | *
223 | * By default, use 'development' as NODE_ENV. This can be overriden with
224 | * 'staging', for example, by changing the ENV variables in the npm scripts
225 | */
226 | new webpack.EnvironmentPlugin({
227 | NODE_ENV: 'development'
228 | }),
229 |
230 | new webpack.LoaderOptionsPlugin({
231 | debug: true
232 | })
233 | ],
234 |
235 | node: {
236 | __dirname: false,
237 | __filename: false
238 | },
239 |
240 | devServer: {
241 | port,
242 | publicPath,
243 | compress: true,
244 | noInfo: true,
245 | stats: 'errors-only',
246 | inline: true,
247 | lazy: false,
248 | hot: true,
249 | headers: { 'Access-Control-Allow-Origin': '*' },
250 | contentBase: path.join(__dirname, 'dist'),
251 | watchOptions: {
252 | aggregateTimeout: 300,
253 | ignored: /node_modules/,
254 | poll: 100
255 | },
256 | historyApiFallback: {
257 | verbose: true,
258 | disableDotRule: false
259 | },
260 | before() {
261 | if (process.env.START_HOT) {
262 | console.log('Starting Main Process...');
263 | spawn('npm', ['run', 'start-main-dev'], {
264 | shell: true,
265 | env: process.env,
266 | stdio: 'inherit'
267 | })
268 | .on('close', code => process.exit(code))
269 | .on('error', spawnError => console.error(spawnError));
270 | }
271 | }
272 | }
273 | });
274 |
--------------------------------------------------------------------------------
/app/menu.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import { app, Menu, shell, BrowserWindow } from 'electron';
3 |
4 | export default class MenuBuilder {
5 | mainWindow: BrowserWindow;
6 |
7 | constructor(mainWindow: BrowserWindow) {
8 | this.mainWindow = mainWindow;
9 | }
10 |
11 | buildMenu() {
12 | if (
13 | process.env.NODE_ENV === 'development' ||
14 | process.env.DEBUG_PROD === 'true'
15 | ) {
16 | this.setupDevelopmentEnvironment();
17 | }
18 |
19 | const template =
20 | process.platform === 'darwin'
21 | ? this.buildDarwinTemplate()
22 | : this.buildDefaultTemplate();
23 |
24 | const menu = Menu.buildFromTemplate(template);
25 | Menu.setApplicationMenu(menu);
26 |
27 | return menu;
28 | }
29 |
30 | setupDevelopmentEnvironment() {
31 | this.mainWindow.openDevTools();
32 | this.mainWindow.webContents.on('context-menu', (e, props) => {
33 | const { x, y } = props;
34 |
35 | Menu.buildFromTemplate([
36 | {
37 | label: 'Inspect element',
38 | click: () => {
39 | this.mainWindow.inspectElement(x, y);
40 | }
41 | }
42 | ]).popup(this.mainWindow);
43 | });
44 | }
45 |
46 | buildDarwinTemplate() {
47 | const subMenuAbout = {
48 | label: 'Electron',
49 | submenu: [
50 | {
51 | label: 'About Vif',
52 | selector: 'orderFrontStandardAboutPanel:'
53 | },
54 | { type: 'separator' },
55 | { label: 'Services', submenu: [] },
56 | { type: 'separator' },
57 | {
58 | label: 'Hide ElectronReact',
59 | accelerator: 'Command+H',
60 | selector: 'hide:'
61 | },
62 | {
63 | label: 'Hide Others',
64 | accelerator: 'Command+Shift+H',
65 | selector: 'hideOtherApplications:'
66 | },
67 | { label: 'Show All', selector: 'unhideAllApplications:' },
68 | { type: 'separator' },
69 | {
70 | label: 'Quit',
71 | accelerator: 'Command+Q',
72 | click: () => {
73 | app.quit();
74 | }
75 | }
76 | ]
77 | };
78 | const subMenuEdit = {
79 | label: 'Edit',
80 | submenu: [
81 | { label: 'Undo', accelerator: 'Command+Z', selector: 'undo:' },
82 | { label: 'Redo', accelerator: 'Shift+Command+Z', selector: 'redo:' },
83 | { type: 'separator' },
84 | { label: 'Cut', accelerator: 'Command+X', selector: 'cut:' },
85 | { label: 'Copy', accelerator: 'Command+C', selector: 'copy:' },
86 | { label: 'Paste', accelerator: 'Command+V', selector: 'paste:' },
87 | {
88 | label: 'Select All',
89 | accelerator: 'Command+A',
90 | selector: 'selectAll:'
91 | }
92 | ]
93 | };
94 | const subMenuViewDev = {
95 | label: 'View',
96 | submenu: [
97 | {
98 | label: 'Reload',
99 | accelerator: 'Command+R',
100 | click: () => {
101 | this.mainWindow.webContents.reload();
102 | }
103 | },
104 | {
105 | label: 'Toggle Full Screen',
106 | accelerator: 'Ctrl+Command+F',
107 | click: () => {
108 | this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
109 | }
110 | },
111 | {
112 | label: 'Toggle Developer Tools',
113 | accelerator: 'Alt+Command+I',
114 | click: () => {
115 | this.mainWindow.toggleDevTools();
116 | }
117 | }
118 | ]
119 | };
120 | const subMenuViewProd = {
121 | label: 'View',
122 | submenu: [
123 | {
124 | label: 'Toggle Full Screen',
125 | accelerator: 'Ctrl+Command+F',
126 | click: () => {
127 | this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
128 | }
129 | }
130 | ]
131 | };
132 | const subMenuWindow = {
133 | label: 'Window',
134 | submenu: [
135 | {
136 | label: 'Minimize',
137 | accelerator: 'Command+M',
138 | selector: 'performMiniaturize:'
139 | },
140 | { label: 'Close', accelerator: 'Command+W', selector: 'performClose:' },
141 | { type: 'separator' },
142 | { label: 'Bring All to Front', selector: 'arrangeInFront:' }
143 | ]
144 | };
145 | const subMenuHelp = {
146 | label: 'Help',
147 | submenu: [
148 | {
149 | label: 'Learn More',
150 | click() {
151 | shell.openExternal('http://electron.atom.io');
152 | }
153 | },
154 | {
155 | label: 'Documentation',
156 | click() {
157 | shell.openExternal(
158 | 'https://github.com/atom/electron/tree/master/docs#readme'
159 | );
160 | }
161 | },
162 | {
163 | label: 'Community Discussions',
164 | click() {
165 | shell.openExternal('https://discuss.atom.io/c/electron');
166 | }
167 | },
168 | {
169 | label: 'Search Issues',
170 | click() {
171 | shell.openExternal('https://github.com/atom/electron/issues');
172 | }
173 | }
174 | ]
175 | };
176 |
177 | const subMenuView =
178 | process.env.NODE_ENV === 'development' ? subMenuViewDev : subMenuViewProd;
179 |
180 | return [subMenuAbout, subMenuEdit, subMenuView, subMenuWindow, subMenuHelp];
181 | }
182 |
183 | buildDefaultTemplate() {
184 | const templateDefault = [
185 | {
186 | label: '&File',
187 | submenu: [
188 | {
189 | label: '&Open',
190 | accelerator: 'Ctrl+O'
191 | },
192 | {
193 | label: '&Close',
194 | accelerator: 'Ctrl+W',
195 | click: () => {
196 | this.mainWindow.close();
197 | }
198 | }
199 | ]
200 | },
201 | {
202 | label: '&View',
203 | submenu:
204 | process.env.NODE_ENV === 'development'
205 | ? [
206 | {
207 | label: '&Reload',
208 | accelerator: 'Ctrl+R',
209 | click: () => {
210 | this.mainWindow.webContents.reload();
211 | }
212 | },
213 | {
214 | label: 'Toggle &Full Screen',
215 | accelerator: 'F11',
216 | click: () => {
217 | this.mainWindow.setFullScreen(
218 | !this.mainWindow.isFullScreen()
219 | );
220 | }
221 | },
222 | {
223 | label: 'Toggle &Developer Tools',
224 | accelerator: 'Alt+Ctrl+I',
225 | click: () => {
226 | this.mainWindow.toggleDevTools();
227 | }
228 | }
229 | ]
230 | : [
231 | {
232 | label: 'Toggle &Full Screen',
233 | accelerator: 'F11',
234 | click: () => {
235 | this.mainWindow.setFullScreen(
236 | !this.mainWindow.isFullScreen()
237 | );
238 | }
239 | }
240 | ]
241 | },
242 | {
243 | label: 'Help',
244 | submenu: [
245 | {
246 | label: 'Learn More',
247 | click() {
248 | shell.openExternal('http://electron.atom.io');
249 | }
250 | },
251 | {
252 | label: 'Documentation',
253 | click() {
254 | shell.openExternal(
255 | 'https://github.com/atom/electron/tree/master/docs#readme'
256 | );
257 | }
258 | },
259 | {
260 | label: 'Community Discussions',
261 | click() {
262 | shell.openExternal('https://discuss.atom.io/c/electron');
263 | }
264 | },
265 | {
266 | label: 'Search Issues',
267 | click() {
268 | shell.openExternal('https://github.com/atom/electron/issues');
269 | }
270 | }
271 | ]
272 | }
273 | ];
274 |
275 | return templateDefault;
276 | }
277 | }
278 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vif",
3 | "productName": "Vif",
4 | "version": "1.0.0",
5 | "description": "cross-platform desktop application to convert videos to high-quality GIFs",
6 | "scripts": {
7 | "build": "concurrently \"yarn build-main\" \"yarn build-renderer\"",
8 | "build-dll": "cross-env NODE_ENV=development webpack --config ./configs/webpack.config.renderer.dev.dll.babel.js --colors",
9 | "build-e2e": "cross-env E2E_BUILD=true yarn build",
10 | "build-main": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.main.prod.babel.js --colors",
11 | "build-renderer": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.renderer.prod.babel.js --colors",
12 | "dev": "cross-env START_HOT=1 node -r @babel/register ./internals/scripts/CheckPortInUse.js && cross-env START_HOT=1 yarn start-renderer-dev",
13 | "flow": "flow",
14 | "flow-typed": "rimraf flow-typed/npm && flow-typed install --overwrite || true",
15 | "lint": "cross-env NODE_ENV=development eslint --cache --format=pretty .",
16 | "lint-fix": "yarn --silent lint --fix; exit 0",
17 | "lint-styles": "stylelint --ignore-path .eslintignore '**/*.*(css|scss)' --syntax scss",
18 | "lint-styles-fix": "yarn --silent lint-styles --fix; exit 0",
19 | "package": "yarn build && electron-builder build --publish never",
20 | "package-all": "yarn build && electron-builder build -mwl",
21 | "package-ci": "yarn postinstall && yarn build && electron-builder --publish always",
22 | "package-linux": "yarn build && electron-builder build --linux",
23 | "package-win": "yarn build && electron-builder build --win --x64",
24 | "postinstall": "yarn flow-typed && electron-builder install-app-deps package.json && yarn build-dll && opencollective-postinstall",
25 | "postlint-fix": "prettier --ignore-path .eslintignore --single-quote --write '**/*.{*{js,jsx,json},babelrc,eslintrc,prettierrc,stylelintrc}'",
26 | "postlint-styles-fix": "prettier --ignore-path .eslintignore --single-quote --write '**/*.{css,scss}'",
27 | "prestart": "yarn build",
28 | "start": "cross-env NODE_ENV=production electron ./app/main.prod.js",
29 | "start-main-dev": "cross-env HOT=1 NODE_ENV=development electron -r @babel/register ./app/main.dev.js",
30 | "start-renderer-dev": "cross-env NODE_ENV=development webpack-dev-server --config configs/webpack.config.renderer.dev.babel.js",
31 | "test": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 jest",
32 | "test-all": "yarn lint && yarn flow && yarn build && yarn test && yarn build-e2e && yarn test-e2e",
33 | "test-e2e": "node -r @babel/register ./internals/scripts/CheckBuiltsExist.js && cross-env NODE_ENV=test testcafe electron:./ ./test/e2e/HomePage.e2e.js",
34 | "test-e2e-live": "node -r @babel/register ./internals/scripts/CheckBuiltsExist.js && cross-env NODE_ENV=test testcafe-live electron:./ ./test/e2e/HomePage.e2e.js",
35 | "test-watch": "yarn test --watch"
36 | },
37 | "lint-staged": {
38 | "*.{js,jsx}": [
39 | "cross-env NODE_ENV=development eslint --cache --format=pretty",
40 | "prettier --ignore-path .eslintignore --single-quote --write",
41 | "git add"
42 | ],
43 | "{*.json,.{babelrc,eslintrc,prettierrc,stylelintrc}}": [
44 | "prettier --ignore-path .eslintignore --parser json --write",
45 | "git add"
46 | ],
47 | "*.{css,scss}": [
48 | "stylelint --ignore-path .eslintignore --syntax scss --fix",
49 | "prettier --ignore-path .eslintignore --single-quote --write",
50 | "git add"
51 | ],
52 | "*.{yml,md}": [
53 | "prettier --ignore-path .eslintignore --single-quote --write",
54 | "git add"
55 | ]
56 | },
57 | "main": "./app/main.prod.js",
58 | "build": {
59 | "productName": "Vif",
60 | "appId": "org.develar.Vif",
61 | "files": [
62 | "app/dist/",
63 | "app/app.html",
64 | "app/main.prod.js",
65 | "app/main.prod.js.map",
66 | "package.json"
67 | ],
68 | "dmg": {
69 | "contents": [
70 | {
71 | "x": 130,
72 | "y": 220
73 | },
74 | {
75 | "x": 410,
76 | "y": 220,
77 | "type": "link",
78 | "path": "/Applications"
79 | }
80 | ]
81 | },
82 | "win": {
83 | "target": [
84 | "nsis",
85 | "msi"
86 | ]
87 | },
88 | "linux": {
89 | "target": [
90 | "deb",
91 | "rpm",
92 | "snap",
93 | "AppImage"
94 | ],
95 | "category": "Development"
96 | },
97 | "directories": {
98 | "buildResources": "resources",
99 | "output": "release"
100 | },
101 | "publish": {
102 | "provider": "github",
103 | "owner": "soroushchehresa",
104 | "repo": "Vif",
105 | "private": false
106 | }
107 | },
108 | "repository": {
109 | "type": "git",
110 | "url": "git+https://github.com/soroushchehresa/Vif.git"
111 | },
112 | "author": {
113 | "name": "Soroush Chehresa",
114 | "email": "s1996ch@gmail.com",
115 | "url": "https://github.com/soroushchehresa/Vif"
116 | },
117 | "contributors": [
118 | {
119 | "name": "Vikram Rangaraj",
120 | "email": "vikr01@icloud.com",
121 | "url": "https://github.com/vikr01"
122 | },
123 | {
124 | "name": "Amila Welihinda",
125 | "email": "amilajack@gmail.com",
126 | "url": "https://github.com/amilajack"
127 | }
128 | ],
129 | "license": "MIT",
130 | "bugs": {
131 | "url": "https://github.com/soroushchehresa/Vif/issues"
132 | },
133 | "keywords": [
134 | "vif",
135 | "video-to-gif",
136 | "gif",
137 | "gif-animation",
138 | "converter",
139 | "video-converter",
140 | "convert-videos",
141 | "react",
142 | "electron-app"
143 | ],
144 | "homepage": "https://github.com/soroushchehresa/Vif#readme",
145 | "jest": {
146 | "testURL": "http://localhost/",
147 | "moduleNameMapper": {
148 | "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "
122 |
142 | }
143 | {saving && !captureProgress && Saving...
} 144 | {!saving &&Drop a Video to Convert to GIF
} 145 |