fix(media-manager): media manager now shares relative paths to media …

src/application/index.js

@@ -163,6 +163,10 @@ export default class ModV {
       this.store.dispatch("media/addMedia", message.payload);
     });
 
+    ipcRenderer.on("media-manager-path-changed", (event, message) => {
+      this.store.dispatch("media/setMediaDirectoryPath", message.payload);
+    });
+
     ipcRenderer.on("open-preset", (event, message) => {
       this.loadPreset(message);
     });

src/application/worker/store/modules/images.js

@@ -1,18 +1,23 @@
 import streamToBlob from "stream-to-blob";
 import fs from "fs";
+import path from "path";
 
 import Vue from "vue";
 import uuidv4 from "uuid/v4";
 
+import store from "../";
+
 const state = {};
 
 const getters = {
   image: state => id => state[id]
 };
 
 const actions = {
-  async createImageFromPath({ commit }, { path }) {
-    const stream = fs.createReadStream(path);
+  async createImageFromPath({ commit }, { path: filePath }) {
+    const stream = fs.createReadStream(
+      path.join(store.state.media.path, filePath)
+    );
     const blob = await streamToBlob(stream);
     const imageBitmap = await createImageBitmap(blob);
 

src/application/worker/store/modules/media.js

@@ -1,14 +1,15 @@
 import store from "../";
 import streamToBlob from "stream-to-blob";
 import fs from "fs";
+import path from "path";
 import media from "../../../../media-manager/store/modules/media";
 
 /**
  * Holds processed media
  *
  * @type {Object}
  */
-const state = {};
+const state = media.state;
 
 const getters = media.getters;
 
@@ -17,7 +18,9 @@ const actions = {
 
   async addMedia({ commit }, { project, folder, item }) {
     if (folder === "module") {
-      const stream = fs.createReadStream(item.path);
+      const stream = fs.createReadStream(
+        path.join(store.state.media.path, item.path)
+      );
       const blob = await streamToBlob(stream);
 
       let text;

src/background.js

@@ -139,6 +139,10 @@ const windowPrefs = {
 
             projectNames = mm.$store.getters["media/projects"];
             updateMenu();
+          },
+
+          pathChanged(message) {
+            window.webContents.send("media-manager-path-changed", message);
           }
         });
       } else {
@@ -148,6 +152,10 @@ const windowPrefs = {
           projectNames = mm.$store.getters["media/projects"];
           updateMenu();
         };
+
+        mm.pathChanged = message => {
+          window.webContents.send("media-manager-path-changed", message);
+        };
       }
 
       ipcMain.on("open-window", (event, message) => {

src/components/Controls/TextureControl.vue

@@ -100,7 +100,7 @@ export default {
     },
 
     images() {
-      return this.$modV.store.state.media[
+      return this.$modV.store.state.media.media[
         this.$modV.store.state.projects.currentProject
       ].image;
     }

src/media-manager/index.js

@@ -46,7 +46,17 @@ export default class MediaManager {
     this.fsCreateProfile = fsCreateProfile.bind(this);
     this.$store = store;
 
-    this.update = options.update;
+    this.update = () => {
+      if (options.update) {
+        options.update(...arguments);
+      }
+    };
+
+    this.pathChanged = () => {
+      if (options.pathChanged) {
+        options.pathChanged(...arguments);
+      }
+    };
 
     Object.assign(this, defaults, options);
 
@@ -60,11 +70,12 @@ export default class MediaManager {
     store.subscribe(mutation => {
       if (mutation.type.split("/")[0] !== "media") {
         return;
+      } else if (mutation.type === "media/SET_MEDIA_DIRECTORY_PATH") {
+        this.pathChanged(mutation);
+        return;
       }
 
-      if (this.update) {
-        this.update(mutation);
-      }
+      this.update(mutation);
     });
 
     (async () => {
@@ -83,11 +94,17 @@ export default class MediaManager {
   }
 
   async start() {
+    await store.dispatch("media/setMediaDirectoryPath", {
+      path: this.mediaDirectoryPath
+    });
     await this.createWatcher();
   }
 
   async reset() {
     await store.dispatch("resetAll");
+    await store.dispatch("media/setMediaDirectoryPath", {
+      path: this.mediaDirectoryPath
+    });
   }
 
   async saveFile({ what, name, fileType, project, payload }) {

src/media-manager/read-file.js

@@ -44,18 +44,19 @@ export default async function readFile(filePath) {
         folder,
         item: {
           name: fileName,
-          path: filePath
+          path: relativePath
         }
       });
     } else if (processResult && typeof processResult === "object") {
       const { filePath: path } = processResult;
+      const relativePath = path.replace(this.mediaDirectoryPath, "");
 
       store.dispatch("media/addMedia", {
         project,
         folder,
         item: {
           name: fileName,
-          path
+          path: relativePath
         }
       });
     }

src/media-manager/store/modules/media.js

@@ -6,11 +6,14 @@ function initialState() {
    *
    * @type {Object}
    */
-  return {};
+  return {
+    media: {},
+    path: null
+  };
 }
 
 const getters = {
-  projects: state => Object.keys(state).sort((a, b) => a.localeCompare(b))
+  projects: state => Object.keys(state.media).sort((a, b) => a.localeCompare(b))
 };
 
 const actions = {
@@ -20,7 +23,7 @@ const actions = {
 
   async setState({ commit }, newState) {
     const store = require("../index.js").default;
-    commit("CLEAR_STATE");
+    commit("CLEAR_MEDIA_STATE");
 
     const projectKeys = Object.keys(newState);
     for (let i = 0, len = projectKeys.length; i < len; i++) {
@@ -44,28 +47,32 @@ const actions = {
     }
 
     // commit("SET_STATE", newState);
+  },
+
+  setMediaDirectoryPath({ commit }, { path }) {
+    commit("SET_MEDIA_DIRECTORY_PATH", { path });
   }
 };
 
 const mutations = {
   ADD(state, { project, folder, item }) {
-    if (!state[project]) {
-      Vue.set(state, project, {});
+    if (!state.media[project]) {
+      Vue.set(state.media, project, {});
     }
 
-    if (!state[project][folder]) {
-      Vue.set(state[project], folder, {});
+    if (!state.media[project][folder]) {
+      Vue.set(state.media[project], folder, {});
     }
 
-    state[project][folder][item.name] = item;
+    state.media[project][folder][item.name] = item;
   },
 
-  CLEAR_STATE(state) {
-    const stateKeys = Object.keys(state);
-    for (let i = 0, len = stateKeys.length; i < len; i++) {
-      const key = stateKeys[i];
+  CLEAR_MEDIA_STATE(state) {
+    const stateMediaKeys = Object.keys(state.media);
+    for (let i = 0, len = stateMediaKeys.length; i < len; i++) {
+      const key = stateMediaKeys[i];
 
-      Vue.delete(state, key);
+      Vue.delete(state.media, key);
     }
   },
 
@@ -77,6 +84,10 @@ const mutations = {
 
       state[key] = s[key];
     }
+  },
+
+  SET_MEDIA_DIRECTORY_PATH(state, { path }) {
+    state.path = path;
   }
 };