feat(isf-folder): adds media ISF folder to load ISF without a JavaScr…

…ipt wrapper

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

@@ -17,7 +17,7 @@ const actions = {
  ...media.actions,
 
  async addMedia({ commit }, { project, folder, item }) {
- if (folder === "module") {
+ if (folder === "module" || folder === "isf") {
  const stream = fs.createReadStream(
  path.join(store.state.media.path, item.path)
  );

src/media-manager/index.js

@@ -13,6 +13,7 @@ import imageReadHandler from "./read-handlers/image";
 import paletteReadHandler from "./read-handlers/palette";
 import presetReadHandler from "./read-handlers/preset";
 import moduleReadHandler from "./read-handlers/module";
+import isfReadHandler from "./read-handlers/isf";
 
 import presetSaveHandler from "./save-handlers/preset";
 
@@ -64,6 +65,7 @@ export default class MediaManager {
  this.addReadHandler({ readHandler: paletteReadHandler });
  this.addReadHandler({ readHandler: presetReadHandler });
  this.addReadHandler({ readHandler: moduleReadHandler });
+ this.addReadHandler({ readHandler: isfReadHandler });
 
  this.addSaveHandler({ saveHandler: presetSaveHandler });
 

src/media-manager/media-manager-utils/stream-to-string.js

@@ -0,0 +1,9 @@
+// https://stackoverflow.com/a/49428486
+module.exports = function streamToString(stream) {
+ const chunks = [];
+ return new Promise((resolve, reject) => {
+ stream.on("data", chunk => chunks.push(Buffer.from(chunk)));
+ stream.on("error", err => reject(err));
+ stream.on("end", () => resolve(Buffer.concat(chunks).toString("utf8")));
+ });
+};

src/media-manager/read-handlers/isf.js

@@ -0,0 +1,167 @@
+const fs = require("fs");
+const path = require("path");
+const util = require("util");
+const webpack = require("webpack-2");
+
+const readFile = util.promisify(fs.readFile);
+const writeFile = util.promisify(fs.writeFile);
+const mkdir = util.promisify(fs.mkdir);
+const streamToString = require("../media-manager-utils/stream-to-string");
+
+/**
+ * @typedef {OutputFileContext}
+ * @property {Stream|String} file Processed file or file path
+ * @property {String} [folder] Folder in which to save processed file
+ */
+
+/**
+ * @typedef {ReadHandler}
+ * @property {String} folder The folder name to watch
+ * @property {String} identifier An identifier for logging (usually a single emoji)
+ * @property {Array<String>} folderAccess A list of folder names for Stream writing
+ * @property {Array<String|Regex>} fileTypes File types to match this File Handler against
+ * @property {Function} init Called before File Hander is added, for setup
+ * @property {Function} process Function to process matched files
+ */
+export default {
+ folder: "isf",
+ identifier: "🌈",
+
+ // Requests stream writing to the video folder
+ folderAccess: ["isf/compiled"],
+
+ fileTypes: [
+ // @todo regex match
+ "fs"
+ ],
+
+ ignored: [/isf[\\/]compiled/],
+
+ /**
+ * Takes in a readable stream, processes file accordingly and outputs file location plus stream
+ *
+ * @param {Stream} options.file Readable stream of file.
+ * @param {String} options.fileName The file's name.
+ * @param {String} options.fileType The file's extension type e.g. .jpeg.
+ * @param {String} options.filePath The path to the file.
+ * @param {Function} util.log Log something to the console.
+ *
+ * @return {Promise<true|OutputFileContext|Error>} A Promise resolving with `true` if the file
+ * needed no modification and can remain in the
+ * same folder.
+ * A Promise resolving a `OutputFileContext` if
+ * the file required processing.
+ * A Promise rejecting with `Error` if something
+ * went wrong.
+ */
+ async process({ filePath, fileName, file }) {
+ return {
+ filePath: await compileModule({ filePath, fileName, file }),
+ folder: "isf/compiled"
+ };
+ }
+};
+
+function compileModule({ filePath, fileName, file }) {
+ return new Promise(async resolve => {
+ // Default vertex shader from ISF that is used when the user didn't specify anything
+ let vertexShader = "void main() {isf_vertShaderInit();}";
+ let fragmentShader;
+
+ // Load the vertex shader
+ try {
+ vertexShader = await readFile(filePath.replace(".fs", ".vs"), "utf8");
+ } catch (err) {
+ console.error(err);
+ }
+
+ // Convert the fragment shader stream into a string
+ try {
+ fragmentShader = await streamToString(file);
+ } catch (err) {
+ console.error(err);
+ }
+
+ // Create the module so that modV can understand it as this is the default format
+ const isfModule = {
+ meta: {
+ name: fileName.replace(/(\.\/|\.fs)/g, ""),
+ author: "",
+ version: "1.0.0",
+ type: "isf"
+ },
+ fragmentShader,
+ vertexShader
+ };
+
+ const tempFilePath = path.join(
+ path.dirname(filePath),
+ "temp",
+ path.basename(filePath)
+ );
+
+ const tempDirectoryPath = path.join(path.dirname(filePath), "temp");
+
+ try {
+ await mkdir(tempDirectoryPath);
+ } catch (err) {
+ if (err) {
+ // don't log errors if the folder already exists
+ if (err.code !== "EEXIST") {
+ console.error(err);
+ }
+ }
+ }
+
+ const compiledFilePath = path.join(
+ path.dirname(filePath),
+ "compiled",
+ path.basename(filePath)
+ );
+
+ const compiledDirectoryPath = path.join(path.dirname(filePath), "compiled");
+
+ try {
+ await mkdir(compiledDirectoryPath);
+ } catch (err) {
+ if (err) {
+ // don't log errors if the folder already exists
+ if (err.code !== "EEXIST") {
+ console.error(err);
+ }
+ }
+ }
+
+ const json = JSON.stringify(isfModule);
+
+ await writeFile(tempFilePath, `export default ${json}`);
+
+ const webpackConfig = {
+ entry: tempFilePath,
+ output: {
+ path: compiledDirectoryPath,
+ filename: path.basename(filePath),
+ libraryTarget: "var"
+ },
+ resolveLoader: {
+ modules: ["node_modules", __dirname + "/node_modules"]
+ }
+ };
+
+ webpack(webpackConfig, (err, stats) => {
+ if (err || stats.hasErrors()) {
+ const statsJson = stats.toJson("minimal");
+ const canada = statsJson.errors;
+ for (let i = 0, len = canada.length; i < len; i++) {
+ console.log(canada[i]);
+ }
+ console.error(err);
+ }
+
+ // 3. save compiled module to user media directory
+
+ // 4. update modv clients with new file contents (then eval in modv)
+ resolve(compiledFilePath);
+ });
+ });
+}