bg.js

gistfile1.js

import '@/js/firebase';
import '@/js/firebase';
import { assetByPublicId } from '@/js/db/db';
import { fetchProjectsByHostName } from '@/js/db/db.project';
import upload from '@/js/utils/upload';
import { Elm } from '@/Background.elm';

let currState = {
  popUp: {},
};

const app = Elm.Background.init(currState);
app.ports.broadcast.subscribe(broadcast);
// the currently connected portsf
const listeners = new Map();

chrome.runtime.onConnect.addListener(port => {
  switch (port.name) {
    case 'popUp': {
      listeners.set(port.name, port);

      chrome.tabs.getSelected(null, function(tab) {
        var url = new URL(tab.url);
        var domain = url.hostname;
        app.ports.fromExt.send({ tag: 'setHostname', payload: domain });
      });

      // whenever a new listener connects, we immediately tell them
      // the state so they can initialize
      const flags = currState[port.name];
      const tag = 'init';
      port.postMessage({ payload: flags, tag });
      break;
    }

    case 'content': {
      listeners.set(port.name, port);
      break;
    }
  }

  port.onDisconnect.addListener(() => {
    listeners.delete(port.name);
  });
});

function broadcast(state) {
  currState.popUp = state;
  for (const [name, port] of listeners) {
    const msg = { tag: 'broadcast', payload: currState[port.name] };
    port.postMessage(msg);
  }
}

chrome.runtime.onMessage.addListener(cmd => {
  switch (cmd.tag) {
    case 'syncPopup': {
      return app.ports.fromExt.send(cmd);
    }
    case 'addFileToStaging': {
      const file = Object.assign({}, cmd.payload, { projectId });
      return app.ports.fromExt.send(Object.assign(cmd, { payload: file }));
    }
    case 'unstage': {
      return app.ports.fromExt.send(cmd);
    }
    case 'upload': {
      return app.ports.fromExt.send(cmd);
    }
    default: {
    }
  }
});

let projectId; // @TODO GROSS.
app.ports.extOut.subscribe(cmd => {
  switch (cmd.tag) {
    case 'fetchProjectsByHostName': {
      return fetchProjectsByHostName(cmd.payload).then(projects => {
        const msg = {
          tag: 'setProjects',
          payload: projects,
        };
        app.ports.fromExt.send(msg);
      });
    }
    case 'injectContentScripts': {
      projectId = cmd.payload;
      return chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.executeScript(tab.id, {
          file: 'content/content.bundle.js',
        });
      });
    }

    case 'signedUrlResponse': {
      const { asset, url } = cmd.payload;
      const port = listeners.get('content');

      return upload({ asset, signedUrl: url }, function(e) {
        const progress = Math.round((e.loaded * 100.0) / e.total);

        port &&
          port.postMessage({
            tag: 'progress',
            payload: { progress, publicId: asset.publicId },
          });
      })
        .then(function() {
          return assetByPublicId(asset.projectId)(asset.publicId);
        })
        .then(ref => {
          const { width, height, name, size } = asset;

          const updates = {
            width,
            height,
            name,
            size,
            modified: Date.now(),
            updateCDN: true,
          };
          return ref.update(updates);
        })
        .then(_ => {
          app.ports.fromExt.send({
            tag: 'uploadComplete',
            payload: asset.publicId,
          });

          port.postMessage({ tag: 'uploadComplete', payload: asset.publicId });
        });
    }

    case 'seedAssets': {
      const port = listeners.get('content');
      port.postMessage(cmd);
      break;
    }

    default: {
    }
  }
});