electron#remote JavaScript Examples

// Handles sending a file
  async sendFileHandler (type) {
    const title = `Select the ${type} to send`
    // Filter based on type selected
    const filters = FILTERS[type]
    const { canceled, filePaths } = await dialog.showOpenDialog(
      remote.getCurrentWindow(),
      {
        properties: ['openFile'],
        title,
        filters
      }
    )
    // Ignore if user cancelled
    if (canceled || !filePaths) return
    console.log(filters, filePaths)
    ipcRenderer.send(
      'send-message',
      type,
      filePaths[0],
      this.state.activeChatId
    )
  }

componentDidMount() {
    const label = new TouchBarLabel();
    label.label = 'Brisque IO v2.0.0';
    label.textColor = '#FFFFFF';

    const fullSpace = new TouchBarSpacer({
      size: 'flexible'
    });

    const updateButton = new TouchBarButton({
      label: 'Check For Updates',
      backgroundColor: '#663EB5',
      click: () => {}
    });

    remote
      .getCurrentWindow()
      .setTouchBar(new TouchBar([label, fullSpace, updateButton]));
  }

title.push({
  label: 'Save',
  accelerator: 'CmdOrCtrl+S',
  click: () => { ipcRenderer.send('title-message', 'ping') }
},
{
  label: 'Home',
  accelerator: 'CmdOrCtrl+Home',
  click: ()=> require('electron').remote.getCurrentWindow().reload()
});

/**
 * get the ntfstool version
 * @returns {*}
 */
export function getPackageVersion() {
    try {
        let curVersion = process.env.NODE_ENV === 'development' ? process.env.npm_package_version : require('electron').remote.app.getVersion();
        saveLog.log(curVersion, "curVersion");
        return curVersion;
    } catch (e) {
        saveLog.error(e, "getPackageVersion error");
        return "45.00";
    }
}

function copyFiles(files, choice)
{
  var s=[];
  for(var i in files)
  {
    s+="config="+files[i]+"\n";
  }
  var path = document.getElementById("path").value;
  fs.mkdir(path, { recursive: true }, (err) => {
    if(err) throwerr;
  });

  if(choice)
  {
    for(var i in files)
    {
      fs.copyFile(Path.join(remote.app.getAppPath(),'.webpack/renderer/main_window','/src/storage/templates/files/')+files[i], path+  (process.platform!="win32"? "/" : "\\") +files[i], (err) => {
        if (err) throw err;
        console.log('source.txt was copied to destination.txt');
      });
    }
    fs.writeFile(path + '/gcbm_config.cfg', s, (err) => {
      if (err) throw err;
    });
  }
  else
  {
    fs.writeFile(path + '/gcbm_config.cfg', s, (err) => {
      if (err) throw err;
    });
  }

  dialog.showMessageBox({
    type: "info",
    title: "Success",
    message: "Your CFG file has been created",
    buttons: ["OK"]
  });
}

function Prevent(){

  const dispatch = useDispatch();

  const isPreventVisible = useSelector(state => {
    console.log(state);
    return state.isPreventVisible;
  })
  
  function handleCancel(){
    dispatch({
      type: "UPDATE_IS_PREVENT_VISIBLE",
      isVisible: false,
    })
  }
  function handleConfirm() {
    ipcRenderer.send('setIsStreaming', false);
    remote.app.quit();
  }
  return isPreventVisible ? (
    <Container >
      <Box>
        <Titlebar>
          <div>X</div>
        </Titlebar>
        <div className="content">
          Are you sure you want to close? All your streams will be finished.
          <div className="actions">
            <a onClick={handleCancel}>Cancel</a>
            <button className="confirm" onClick={handleConfirm}>Yes, i'm sure</button>
          </div>
        </div>
      </Box>
    </Container>
  ) : <></>;
}

showImport() {
    const { name, importFilters, onImport } = this.props
    const filters = [{
      name: `${ name } File`,
      extensions: importFilters.length === 0 ? ['json'] : importFilters
    }]
    
    dialog.showOpenDialog(remote.getCurrentWindow(), {
      title: `Import ${ name }`,
      message: `Select a file to import your ${ name.toLowerCase() } from, in ${ filters[0].extensions.join(' or ') } format`,
      properties: ['openFile'],
      filters
    }, files => {
      if (!files || files.length === 0) {
        return
      }
    
      fs.readFile(files[0], (err, contents) => {
        if (err) {
          return dialog.showMessageBox(remote.getCurrentWindow(), {
            type: 'error',
            title: 'Uh Oh!',
            message: `There was a problem reading your ${ name }, please try again!`,
            buttons: ['Okay'],
            defaultId: 0,
          })
        }
        
        if (typeof onImport === 'function') {
          onImport(files[0].toLowerCase().endsWith('.json') ? JSON.parse(contents) : contents.toString('utf8'))
        }
      })
    })
  }

showExport() {
    const { name, onExport } = this.props
    dialog.showSaveDialog(remote.getCurrentWindow(), {
      title: `Export ${ name }`,
      message: `Choose a location to save your ${ name.toLowerCase() }`,
      defaultPath: name.toLowerCase(),
      filters: [{ name: 'JSON File', extensions: ['json'] }]
    }, file => {
      if (!file) {
        return
      }
      
      if (typeof onExport === 'function') {
        onExport(result => {
          if (typeof result !== 'string' || result.length === 0) {
            return
          }
          
          fs.writeFile(file, result, err => err && dialog.showMessageBox(remote.getCurrentWindow(), {
            type: 'error',
            title: 'Uh Oh!',
            message: `There was a problem saving your ${ name }, please try again!`,
            buttons: ['Okay'],
            defaultId: 0,
          }))
        })
      }
    })
  }

{dialog} = require('electron').remote

{ dialog } = require('electron').remote

{ Menu } = require('electron').remote

componentDidMount () {
    const options = {
      webPreferences: this.props.webpreferences || {}
    }

    // Add props to webpreferences
    Object.keys(props).forEach((propName) => {
      if (typeof this.props[propName] !== 'undefined') {
        if (webPreferences.includes(propName)) {
          options.webPreferences[propName] = this.props[propName]
        }
      }
    })

    this.view = new remote.BrowserView(options)
    win.addBrowserView(this.view)
    this.updateViewBounds()
    this.view.setAutoResize({
      horizontal: true,
      vertical: true
    })

    // Add event listener alias to keep compatability
    this.view.addEventListener = this.view.webContents.on;
    this.view.webContents.loadURL(this.props.src || '')
    this.setDevTools(this.props.devtools || false)

    if (this.props.onDidAttach) {
      this.props.onDidAttach();
    }

    methods.forEach((method) => {
      this[method] = (...args) => {
        return this.view.webContents[method](...args)
      }
    })

    // Pass Props to view
    Object.keys(props).forEach((propName) => {
      if (typeof this.props[propName] !== 'undefined') {
        if (this[propName]) {
          this[propName](this.props[propName])
        }
      }
    })

    // Connect events to resize view automatically
    resizeEvents.forEach((event) => {
      window.addEventListener(event, () => this.updateViewBounds())
    })

    // Connect our event listeners to update the browser view
    events.forEach((event) => {
      if (!this.view.isDestroyed()) {
        this.view.webContents.on(event, (...eventArgs) => {
          const propName = camelCase(`on-${event}`)
  
          // Proxy events to listeners we got as props
          if (this.props[propName]) this.props[propName](...eventArgs)
        })
      }
    })

    // Get our container Element from the page
    const container = ReactDOM.findDOMNode(this.c)
    elementResizeEvents.forEach((event => {
      container.addEventListener(event, () => this.updateViewBounds())
    }))

    this.setPositionTracking(this.props.trackposition);
  }

win = remote.getCurrentWindow()

removeViews = () => {
  const views = remote.BrowserView.getAllViews();
  views.forEach(view => view.destroy());
}

{ dialog } = remote

render() {
    const { location, store } = this.props;
    const { pathname, fullScreen } = this.state;
    return (
      <div
        className={['container', 'horizontal', styles.outerContainer].join(' ')}
      >
        <div className={ styles.loader }>
        
        </div>
        <div className={styles.sidebar}>
          {remote.process.platform === 'darwin' && (
            <div
              className={styles.trafficLights}
              style={{ height: fullScreen ? '1em' : '2em' }}
            />
          )}
          {Object.keys(this.pages).map(page => (
            <a
              key={page}
              className={css({
                [styles.navigator]: true,
                [styles.selected]: pathname.substring(1) === page.toLowerCase()
              })}
              onClick={() =>
                this.setState({ pathname: `/${page.toLowerCase()}` })
              }
              onKeyDown={() => {}}
              role="presentation"
            >
              <img
                className={styles.navigator}
                src={this.pages[page].icon}
                alt=""
              />
            </a>
          ))}
          <img className={styles.logo} src={Logo} alt="" />
          <div className={styles.captcha} onClick={ () => ipc.send('captcha.open') }>
            <img className={styles.captchaLogo} src={captchaLogo} alt="" />
          </div>
        </div>

        <TransitionGroup className={styles.container}>
          <CSSTransition key={pathname} classNames="fade" timeout={250}>
            <section className={styles.wrapper}>
              <Switch location={Object.assign({}, location, { pathname })}>
                <Route path="/dashboard" component={ props => <Dashboard { ...props } store={ store } /> }/>
                <Route path="/tasks" component={ props => <Tasks { ...props } store={ store } /> } />
                <Route path="/profiles" component={ props => <Profiles { ...props } store={ store } /> } />
                <Route path="/proxies" component={ props => <Proxies { ...props } store={ store } /> } />
                <Route path="/settings" component={ props => <Settings { ...props } store={ store } /> } />
                <Route path="/" render={() => <div>Not Found?</div>} />
              </Switch>
            </section>
          </CSSTransition>
        </TransitionGroup>
      </div>
    );
  }

render() {
    const { store, history } = this.props;
    return (
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <Route
            render={({ location }) => (
              <div style={{ height: '100%' }}>
                <TransitionGroup className={styles.wrapper}>
                  <CSSTransition
                    key={location.pathname}
                    classNames="fade"
                    timeout={250}
                  >
                    <section
                      className={[styles.wrapperSection, 'app-router'].join(' ')}
                    >
                      <Switch location={location}>
                        <Route path="/login" component={Login} />
                        <Route path='/captcha' component={Captcha} />
                        <Route path="/app/:page?" component={ props => <App {...props} store={ store }/> } />
                        <Route path="/" render={() => <div />} />
                      </Switch>
                    </section>
                  </CSSTransition>
                </TransitionGroup>
                <div className={styles.windowHeader}>
                  {remote.process.platform === 'win32' && (
                    <div className={styles.windowControls}>
                      <Button
                        width={35}
                        height={22}
                        src={MinimizeButton}
                        hoverSrc={MinimizeButtonHover}
                        onClick={() => remote.getCurrentWindow().minimize()}
                      />
                      <Button
                        width={35}
                        height={22}
                        src={MaximizeButton}
                        hoverSrc={MaximizeButtonHover}
                        onClick={() => remote.getCurrentWindow().maximize()}
                        disabled={location.pathname !== '/app'}
                      />
                      <Button
                        width={35}
                        height={22}
                        src={CloseButton}
                        hoverSrc={CloseButtonHover}
                        onClick={() => remote.getCurrentWindow().close()}
                      />
                    </div>
                  )}
                </div>
              </div>
            )}
          />
        </ConnectedRouter>
      </Provider>
    );
  }

{
  TouchBar,
  TouchBar: { TouchBarLabel, TouchBarButton, TouchBarSpacer }
} = remote

{
  TouchBar,
  TouchBar: { TouchBarLabel, TouchBarButton, TouchBarSegmentedControl, TouchBarSpacer }
} = remote

{
  TouchBar,
  TouchBar: { TouchBarLabel, TouchBarButton, TouchBarSpacer, TouchBarSegmentedControl }
} = remote

{
  TouchBar,
  TouchBar: { TouchBarLabel, TouchBarSpacer, TouchBarButton }
} = remote

{
  TouchBar,
  TouchBar: {TouchBarButton, TouchBarSpacer, TouchBarSegmentedControl }
} = remote

function signInWithPopup(configuration) {
  const http = require("http");

  const {
    clientId,
    clientSecret,
    redirectPort = getDefaultForProperty("slack", "redirectPort"),
  } = configuration.get();

  const authWindow = new remote.BrowserWindow({ width: 600, height: 800, show: true });
  const redirectUri = `http://localhost:${redirectPort}`;

  let httpServer;
  try {
    httpServer = http.createServer(async (req, res) => {
      res.writeHead(200, { "Content-Type": "html" });
      const { query } = parse(req.url);
      res.end("loading...");

      const code = qs.parse(query).code;
      if (!code) {
        authWindow.close();
        return;
      }

      try {
        const r = await fetch(
          "https://slack.com/api/oauth.access?" +
            qs.stringify({
              code,
              client_id: clientId,
              redirect_uri: redirectUri,
              client_secret: clientSecret,
            })
        );

        const body = await r.json();
        configuration.nested.token.set(body.access_token);
        configuration.nested.userId.set(body.user_id);
        notify("Authentication to Slack successful");
      } catch (e) {
        notify("Failure when authenticating to Slack");
        log.error(e);
      } finally {
        authWindow.close();
      }
    });

    httpServer.listen(redirectPort, "127.0.0.1");

    const authUrl = `https://slack.com/oauth/authorize?${qs.stringify({
      client_id: clientId,
      redirect_uri: redirectUri,
      scope: "users:read search:read emoji:read",
    })}`;

    authWindow.on("closed", () => {
      try {
        httpServer.close();
      } catch (e) {
        log.warn("unable to close http server", e);
      }
    });

    authWindow.loadURL(authUrl);
  } catch (e) {
    if (httpServer) {
      httpServer.close();
    }
  }
}

app = remote.app

dialog = remote.dialog

{ dialog } = remote

function getUserDataDir() {
  return remote.app.getPath('userData');
}

// Provide access to electron remote
window.showOpenDialog = remote.dialog.showOpenDialog;

app = electron.app || remote.app