stephengrider / electroncode Goto Github PK

View Code? Open in Web Editor NEW

133.0 133.0 97.0 1.24 MB

JavaScript 90.15% HTML 9.85%

electroncode's Introduction

ElectronCode

This repository contains both boilerplates and completed code. Check out the boilerplates and completed_code dirs.

electroncode's People

Contributors

Stargazers

Watchers

Forkers

abdullah-fal javazava mbutler douglasgraves daweifeng power19942 mcnguyen matthewstyers feload siwakornsitti kanjih-ciandt danielpalafox tallesbarrini donovanh johnelm timprachasri abhay-joshi-git olympikesoft justmelnyc davidtoska namelus dmerci1 naturalclar tpayne86 bfmcgo2 alangan17 cimbis rafalkufel revdfdev niccs thomas-marquis naijopkr demon-monk itbuilt b0bbybaldi brienjl gregmckenzie88 rafael46 republicvirgo puneet29 nickt23 lunaticske12 webdevcaptain ogregsokics kaushikthrn turkmvc sloan58 kamyu104 inaheaven ryanpoh mavisliu689 velox123 wyattgf venkatesh645 scottpeterman tygedavis nuthanc beckthetech ccrisolo chariot7 h-b8 katechantha brisaacjohnson hex0cter demo18c full-stack-learner top-dr darmikon marshallxxx testrep1 hvinder briancsparks abhijith111 jkumarkiri brookebryski joshjacobbaker phorvicheka-electron shaksham08 abdumurad sathees-palanisamy mrrobotisreal dapperauteur mikpim01 goldenaarcher yangwawa0323 bueggi kenychen agarwalprashant stevenhill0 zunyang divyeshramani rahulkr695 gautamdevkhanna dosiichuk madtechservices rushdy87 kaiwe1

electroncode's Issues

tasky app, npm install not working Failed to find Electron v1.6.18

Hello, @StephenGrider!

Thanks for putting up the course. I'm not able to setup the tasky app from "Section 4: Status Try Applications", on running npm install, it throws the following error:

npm ERR! Error: Failed to find Electron v1.6.18 for darwin-arm64 at https://github.com/electron/electron/releases/download/v1.6.18/electron-v1.6.18-darwin-arm64.zip

It seems like the electron version used no longer exists on Github. I want to follow alone, but it's a blocker. I can try to port the app to a newer Electron version, but that'll be too much work. Any quick tips/suggestions to fix the issue?

Bluebird promisify

Hey Stephen. I just want to say, great tutorial and I love your content. Great stuff!

Secondly I was watching your video on resolving multiple promises at one time and I thought I'd mention that you can use Bluebird promisify instead of having to wrap ffmpeg.fprobe() in a Promise object.

Really need to up date your dependencies

To wit:

npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read https://babeljs.io/env to update!
npm WARN deprecated [email protected]: Please use @electron/get moving forward.
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: This is probably built in to whatever tool you're using. If you still need it... idk
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated [email protected]: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path /Volumes/MainStorage/Continuing_Education/Javascript/Electron-for-Desktop-Apps/ElectronCode/boilerplates/tasky/node_modules/electron
npm ERR! command failed
npm ERR! command sh -c node install.js
npm ERR! (node:27887) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
npm ERR! (Use `node --trace-deprecation ...` to show where the warning was created)
npm ERR! /Volumes/MainStorage/Continuing_Education/Javascript/Electron-for-Desktop-Apps/ElectronCode/boilerplates/tasky/node_modules/electron/install.js:48
npm ERR!   throw err
npm ERR!   ^
npm ERR! 
npm ERR! Error: Failed to find Electron v1.6.18 for darwin-arm64 at https://github.com/electron/electron/releases/download/v1.6.18/electron-v1.6.18-darwin-arm64.zip
npm ERR!     at Request.<anonymous> (/Volumes/MainStorage/Continuing_Education/Javascript/Electron-for-Desktop-Apps/ElectronCode/boilerplates/tasky/node_modules/nugget/index.js:197:61)
npm ERR!     at Request.emit (node:events:519:28)
npm ERR!     at Request.onRequestResponse (/Volumes/MainStorage/Continuing_Education/Javascript/Electron-for-Desktop-Apps/ElectronCode/boilerplates/tasky/node_modules/request/request.js:1059:10)
npm ERR!     at ClientRequest.emit (node:events:519:28)
npm ERR!     at HTTPParser.parserOnIncomingClient [as onIncoming] (node:_http_client:690:27)
npm ERR!     at HTTPParser.parserOnHeadersComplete (node:_http_common:119:17)
npm ERR!     at TLSSocket.socketOnData (node:_http_client:532:22)
npm ERR!     at TLSSocket.emit (node:events:519:28)
npm ERR!     at addChunk (node:internal/streams/readable:559:12)
npm ERR!     at readableAddChunkPushByteMode (node:internal/streams/readable:510:3)
npm ERR! 
npm ERR! Node.js v21.6.1

Corrected:

{
  "name": "timer",
  "version": "1.0.0",
  "description": "Electron timer app",
  "main": "main.js",
  "scripts": {
    "start": "webpack-dev-server",
    "electron": "electron ."
  },
  "author": "Rallycoding",
  "devDependencies": {
    "electron": "~1.6.2"
  },
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^9.1.3",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "electron-localshortcut": "^3.2.1",
    "moment": "^2.30.1",
    "moment-duration-format": "^2.3.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^6.22.3",
    "react-router-dom": "^6.22.3",
    "webpack": "^5.90.3",
    "webpack-dev-server": "^5.0.3"
  }
}

Should use Math.round to avoid issue when the width is odd number

ElectronCode/completed_code/tasky/app/timer_tray.js

Line 27 in 02c76dd

x: x - width / 2,

We can use Math.round(width/2) to avoid the issue when the width is not an even number. Fractional number in the x co-ordinate will throw an error.
In windows, when I tried x=300 it automatically changed that to x=301 during execution and hence I faced this issue.

Tray icon not working for tasky app on Ubuntu

While running npm run electron the app throws:

Electron 1.6.x has reached the end of its support cycle.
Developers are encouraged to upgrade their applications to a newer series.
Read about newer series at https://electronjs.org/releases .
Read about Electron support at https://electronjs.org/docs/tutorial/support#supported-versions .

In convert app the videos:add event is fired twice

It is not waiting for async event. It is firing immediately and after the event is received it is firing again

Stephen: You really should have tested with windows - SOLVED SEE BELOW !!!

Stephen:

I normally love your tutorials but on this tasky project, you really should have tested it on windows because the I am getting an error with the icon when mainWindow.setBounds is employed and I click on the icon to open window.

const {app, BrowserWindow, Tray} = require('electron');
const path = require('path');

let mainWindow, tray;

app.on('ready', () => {
    console.log('process.platform: ' + process.platform);
    mainWindow = new BrowserWindow({
        height: 500,
        width: 300,
        frame: false,
        resizable: false,
        // draggable: true,
        show: false
    });
    mainWindow.loadURL(`file://${__dirname}/src/index.html`);

    const iconName = process.platform === 'win32' ? '[email protected]' : 'iconTemplate.png';
    const iconPath = path.join(__dirname, `./src/assets/${iconName}`);
    tray = new Tray(iconPath);

    tray.on('click', (ev, bounds) => {
        // Click event bounds
        const {x, y} = bounds;
        // Window height & width
        const {height, width} = mainWindow.getBounds();

        if (mainWindow.isVisible()) {
            mainWindow.hide();
        } else {
            const yPosition = process.platform === 'darwin' ? y : y - height;
            console.log(`x is ${x}, y is ${y}, height is ${height}, width is ${width}`);
            mainWindow.setBounds({
                x: x - width / 2,
                y: yPosition,
                height,
                width
            });
            mainWindow.show();
        }
    })
});

the convert boilerplate code won't work with the instructions in section 5 video 72

If you follow video 72 line by line it won't work as /src/components/ConvertPanel.js calls the action creator without any arguments. Video assumes that the convertVideos action creator is called with an array containing list of videos.

Solution:
Change the ConvertPanel.js so that it calls convertVideos action creator with an array of objects containing the information like so:

class ConvertPanel extends Component {

  onCancelPressed = () => {
    this.props.removeAllVideos();
    this.props.history.push('/')
  }

  // 2. create convert videos function that passes array of videos to the action creator
  convertVideos = () => {
    console.log(this.props.videos);
    this.props.convertVideos(this.props.videos);
  }

  render() {

    // 3. replace this.props.convertVideos with this.convertVideos - the function you've just created
    return (
      <div className="convert-panel">
        <button className="btn red" onClick={this.onCancelPressed}>
          Cancel
        </button>
        <button className="btn" onClick={this.convertVideos}>
          Convert!
        </button>
      </div>
    );
  };
}

// 1. add action creator and turn object into array of video objects
const mapStateToProps = state => {
  return {
    videos: Object.values(state.videos)
  }
}

export default withRouter(
  connect(mapStateToProps, actions)(ConvertPanel)
);

[Solution] Install the new electron version will cause the application to error

In index.js, we could write code like this:

Deployment

Hello how can i get a .exe file from this project?