with a class of "sunlight-container" where
- //the pre created by this code is placed
- $("#frame").prepend($("
").text(data));
- //format Javascript syntax
- Sunlight.highlightAll();
- var codeBlock = $(".sunlight-javascript");
- //select the line/column
- //figure out how many characters in that line/column is
- var text = codeBlock.text(),
- characterCount = 0,
- lastNewLine = 0;
- for(var lineIndex = 1; lineIndex < line; ++lineIndex)
- {
- //get the newline character at the end of line #lineIndex
- lastNewLine = text.indexOf("\n", lastNewLine + 1);
- characterCount = lastNewLine;
- }
- characterCount += column;
-
- //figure out which node has the character we are looking for
- //the parsed document is filled with
elements for syntax
- //highlighting
- var childNodes = codeBlock[0].childNodes;
- for(var i = 0, length = childNodes.length; i < length; ++i)
- {
- var node = childNodes[i];
- //anything that's not a text node is a span with text inside
- if(node.nodeType != 3)
- node = node.childNodes[0];
- //get the amount of text inside the text node
- characterCount -= node.length;
- //if we've run out of our character count, that's the node that we want
- if(characterCount <= 0)
- {
- var scroller = $(".sunlight-code-container");
- //get the position of the text node relative to the scroller
- //the text has to be wrapped in a span first, as TextNodes don't
- //have offsetTop
- var nodePos = $(node).wrap("
");
- this.getLogParent().append(group);
- this.groupStack.push(group);
-
- if(level == "groupcollapsed")
- {
- chevron.addClass("collapsed");
- group.collapse("hide");
- }
- }
- else if(level == "groupend")
- {
- this.groupStack.pop();
- }
- else if (Array.isArray(result.message))
- {
- this.prepareAndLogMessage(now, result.message, level, stack);
- }
-
- if (this.maxLogs)
- {
- this.output.html(this.output.children(".log").slice(-this.maxLogs));
- }
-
- // Scroll to the bottom of the log display
- if (atBottom)
- {
- this.output.scrollTop(this.output[0].scrollHeight);
- }
- };
-
- p.prepareAndLogMessage = function(now, messages, level, stack)
- {
- if(!messages || !messages.length)
- {
- return this.logMessage(now, [""], level, stack);
- }
-
- var message = messages[0], j, tokens, token, sub;
-
- //if the first message is a string, then check it for string formatting tokens
- if (typeof message == "string")
- {
- tokens = message.match(/%[sdifoObxec]/g);
-
- if (tokens)
- {
- for (j = 0; j < tokens.length; j++)
- {
- token = tokens[j];
- sub = messages[1];
-
- // CSS substitution check
- if (token == "%c")
- {
- sub = '';
- message += ' ';
- }
- // Do object substitution
- else if (token == "%o" || token == "%O")
- {
- sub = this.prepareObject(sub)[0].outerHTML;
- }
- else if(token == "%d" || token == "%i")
- {
- sub = parseInt(sub);
- }
- message = message.replace(token, String(sub));
-
- messages.splice(1, 1);
- }
- }
- messages[0] = message;
- }
- return this.logMessage(now, messages, level, stack);
- };
-
- /**
- * Log a new message
- * @method logMessage
- * @param {String} now The current time name
- * @param {Array} messages The message to log
- * @param {String} level The level to use
- * @param {Array} [stack] The stack trace for the log.
- */
- p.logMessage = function(now, messages, level, stack)
- {
- var message = "", i, length, messageDom;
- for(i = 0, length = messages.length; i < length; ++i)
- {
- if(i > 0)
- message += " ";
- if (typeof messages[i] === "object")
- {
- message += this.prepareObject(messages[i])[0].outerHTML;
- }
- else
- message += messages[i];
- }
- var log = $("
")
- .addClass(level)
- .append(
- $("
");
- for(i = 0, length = stack.length; i < length; ++i)
- {
- stackLinkText = stack[i].file;
- if(stackLinkText.indexOf("/") >= 0)
- stackLinkText = stackLinkText.substring(stackLinkText.lastIndexOf("/") + 1);
- stackLinkText += ":" + stack[i].lineLocation;
- var line = $("
");
- var stackLink = $("
");
-
- var group = $("
");
- for(var key in input)
- {
- var line = $("
");
- if(typeof input[key] == "object")
- {
- line.append(key + ": ", this.prepareObject(input[key]));
- }
- else
- {
- line.append(key + ": " + input[key]);
- }
- group.append(line);
- }
- if(group.children().length)
- {
- var groupId = "group_" + this.nextGroupId++;
- group.attr("id", groupId);
- var chevron = $(" " + (Array.isArray(input) ? "Array [" : "Object {") + " ");
- chevron.prepend(
- $("
")
- .text("New Session Began at " + now)
- );
- };
-
- /**
- * Close the application
- * @method shutdown
- */
- p.shutdown = function()
- {
- if (this.server)
- {
- this.server.close();
- this.server = null;
- }
- this.close(true);
- };
-
- // Create the new Remote trace
- Module.create(RemoteTrace);
-
-}());
\ No newline at end of file
diff --git a/src/js/tasks/TaskRunner.js b/src/js/tasks/TaskRunner.js
deleted file mode 100644
index 2ec5725..0000000
--- a/src/js/tasks/TaskRunner.js
+++ /dev/null
@@ -1,215 +0,0 @@
-(function($){
-
- if (APP)
- {
- // Import node modules
- var ansi2html = require('ansi2html');
- var watch = require('node-watch');
- var path = require('path');
- }
-
- var Module = springroll.Module,
- Settings = springroll.tasks.Settings,
- ProjectManager = springroll.tasks.ProjectManager,
- TerminalWindow = springroll.tasks.TerminalWindow,
- Interface = springroll.tasks.Interface,
- Utils = springroll.tasks.Utils,
- TerminalManager = springroll.tasks.TerminalManager;
-
- /**
- * The main application
- * @class TaskRunner
- * @extends springroll.Module
- * @namespace springroll.tasks
- */
- var TaskRunner = function()
- {
- Module.call(this);
-
- /**
- * The tasks container
- * @property {jquery} tasks
- */
- this.tasks = $("#tasks");
-
- /**
- * The project manager
- * @property {springroll.tasks.ProjectManager} projectManager
- */
- this.projectManager = new ProjectManager(this);
-
- /**
- * The console output manager
- * @property {springroll.tasks.TerminalManager} terminalManager
- */
- this.terminalManager = new TerminalManager(this);
-
- /**
- * The interface instance
- * @property {springroll.tasks.Interface} ui
- */
- this.ui = new Interface(this);
-
- /**
- * The opened terminal window
- * @property {springroll.tasks.TerminalWindow} terminal
- */
- this.terminal = null;
-
- if (APP)
- {
- // Create the menu
- this.initMenubar(false, true);
- }
-
- // Load the project
- var project = localStorage.getItem('project');
- if (!project)
- {
- throw "Not a valid project: " + project;
- }
- this.addProject(project);
- };
-
- // Reference to the prototype
- var p = extend(TaskRunner, Module);
-
- /**
- * Add a project to the list of projects
- * @method addProject
- * @param {string} projectPath The directory of the project to load
- */
- p.addProject = function(projectPath)
- {
- this.projectManager.add(
- projectPath,
- this.addedProject.bind(this)
- );
- };
-
- /**
- * Check to see if a file changed
- * @method watchProject
- * @param {string} projectPath The project path to watch
- */
- p.watchProject = function(projectPath)
- {
- var self = this;
- watch(
- path.join(projectPath, "Gruntfile.js"),
- this.refreshTasks.bind(this)
- );
- };
-
- /**
- * Refresh the project tasks
- * @method refreshTasks
- */
- p.refreshTasks = function()
- {
- // Stop any running tasks
- this.terminalManager.killTasks();
- this.terminalManager.tasks = {};
-
- // Clear the project
- this.projectManager.project = null;
-
- // Reload
- this.addProject(localStorage.getItem('project'));
- };
-
- /**
- * Add the project to the interface
- * @method addedProject
- * @param {object} project The project properties
- */
- p.addedProject = function(project)
- {
- $(Utils.getTemplate('tasks', project))
- .appendTo(this.tasks);
-
- this.watchProject(project.path);
- };
-
- /**
- * Put the commandline log into the terminal window
- * @method putCliLog
- * @param {String} data The log data to add
- * @param {String} taskName The name of the task
- */
- p.putCliLog = function(data, taskName)
- {
- var output = ansi2html(data);
- $('' + output + '
').appendTo($('#console_' + taskName));
- this.terminalScrollToBottom(taskName);
- };
-
- /**
- * Scroll to the bottom of the console output
- * @method terminalScrollToBottom
- * @param {String} taskName The name of the task
- */
- p.terminalScrollToBottom = function(taskName)
- {
- _.throttle(function(){
- $('#console_' + taskName).scrollTop(999999999);
- }, 100)();
- };
-
- /**
- * Start running or stop running a task
- * @method toggleTask
- * @param {String} taskName The name of the task
- */
- p.toggleTask = function(taskName)
- {
- var item = $('#task_item_' + taskName);
-
- if (item.hasClass('running'))
- {
- this.terminalManager.stopTask(taskName);
- item.removeClass('running error');
- }
- else
- {
- this.terminalManager.runTask(
- taskName,
- function()
- {
- //start event
- item.addClass('running')
- .removeClass('error');
- },
- function()
- {
- //end event
- item.removeClass('running');
- },
- function()
- {
- //error event
- item.addClass('error')
- .removeClass('running');
- }
- );
- }
- };
-
- /**
- * Shutdown the
- * @method shutdown
- */
- p.shutdown = function()
- {
- if (this.terminal)
- {
- this.terminal.destroy();
- }
- this.terminalManager.killTasks();
- this.close(true);
- };
-
- // Create a new module
- Module.create(TaskRunner);
-
-}(jQuery));
\ No newline at end of file
diff --git a/src/js/tasks/input/ProjectManager.js b/src/js/tasks/input/ProjectManager.js
deleted file mode 100644
index 6f72fe9..0000000
--- a/src/js/tasks/input/ProjectManager.js
+++ /dev/null
@@ -1,223 +0,0 @@
-(function(){
-
- if (APP)
- {
- var exec = require('child_process').exec;
- var path = require('path');
- var fs = require('fs');
- var async = require('async');
- var isWin = /^win/.test(process.platform);
- }
-
- // Import classes
- var Utils = springroll.tasks.Utils,
- Settings = springroll.tasks.Settings;
-
- /**
- * Add projects to the interface
- * @class ProjectManager
- * @namespace springroll.tasks
- * @constructor
- * @param {springroll.tasks.TaskRunner} app The instance of the app
- */
- var ProjectManager = function(app)
- {
- /**
- * Reference to the application
- * @property {springroll.tasks.TaskRunner}
- */
- this.app = app;
-
- /**
- * The collection of currently loaded projects
- * @property {Array} project
- */
- this.project = null;
-
- /**
- * The path to the grunt executable
- * @property {string} gruntBin
- */
- this.gruntBin = path.resolve('.','node_modules','grunt-cli','bin','grunt');
-
- /**
- * The body dom
- * @property {jquery} body
- */
- this.body = $(document.body);
-
- /**
- * The dom for failed message display
- * @property {jquery} failedMessage
- */
- this.failedMessage = $('#failedMessage');
- };
-
- // The reference to the prototype
- var p = ProjectManager.prototype = {};
-
- /**
- * Add a project to the interface
- * @method add
- * @param {String} dir The directory of project file
- * @param {function} success The callback when added
- */
- p.add = function(dir, success)
- {
- // Reset the classes
- this.body.removeClass('installing failed loading');
-
- var self = this, project;
- var name = path.basename(dir);
- this.project = project = {
- name: name,
- path: dir,
- tasks: []
- };
-
- async.waterfall([
- // Check for access to node
- function(done)
- {
- exec('node --version',
- function(err, stdout, stderr)
- {
- if (err)
- {
- console.error("Unable to access node");
- return done("Unable to access NodeJS on this machine. Is it installed?");
- }
- done(null);
- }
- );
- },
- // check that node modules exists within the project
- function(done)
- {
- var nodeModules = path.join(project.path, 'node_modules');
- fs.exists(nodeModules, function(exists)
- {
- done(null, exists);
- });
- },
- function(exists, done)
- {
- // install the node_modules within the project
- // if the node modules don't exist
- if (!exists)
- {
- self.body.addClass('installing');
- exec('npm install', { cwd : project.path }, done);
- }
- else
- {
- done(null);
- }
- }
- ],
- function(err)
- {
- if (err)
- {
- console.error(String(err));
- return self.failed(err);
- }
- self.body.removeClass('installing');
- self.proceed(success);
- });
- };
-
- /**
- * The tasks loading or installing failed
- * @method failed
- * @param {string} msg The failed message
- */
- p.failed = function(msg)
- {
- this.body.removeClass('loading installing')
- .addClass('failed');
-
- this.failedMessage.text(msg);
- };
-
- /**
- * Proceed with the add
- * @method proceed
- * @private
- * @param {Object} project
- * @param {function} success
- */
- p.proceed = function(success)
- {
- this.body.addClass('loading');
-
- var self = this;
- var project = this.project;
- var gruntPath = path.join(project.path, 'node_modules', 'grunt');
- var gruntFile = path.join(project.path, 'Gruntfile.js');
-
- async.waterfall([
- function(done)
- {
- fs.exists(gruntPath, function(exists)
- {
- if (!exists)
- {
- return done('Unable to find local grunt.');
- }
- done(null);
- });
- },
- function(done)
- {
- fs.exists(gruntFile, function(exists)
- {
- if (!exists)
- {
- return done('Unable to find Gruntfile.js.');
- }
- done(null);
- });
- },
- function(done)
- {
- exec('node ' + self.gruntBin + ' _springroll_usertasks',
- { cwd : project.path },
- function(err, stdout, strderr)
- {
- if (err)
- {
- done("Invalid project, must contain Grunt task '_springroll_usertasks'.");
- }
- var tasksContent = stdout.split("\n");
- var tasks;
- try
- {
- tasks = JSON.parse(tasksContent[1]);
- }
- catch(e)
- {
- console.error(e);
- }
- project.tasks = tasks;
- done(null, project);
- }
- );
- }
- ],
- function(err, project)
- {
- if (err)
- {
- console.error(err);
- return self.failed(err);
- }
- self.body.removeClass('loading');
- success(project);
- });
- };
-
- // Assign to the global space
- namespace('springroll.tasks').ProjectManager = ProjectManager;
-
-})();
\ No newline at end of file
diff --git a/src/js/tasks/input/TerminalManager.js b/src/js/tasks/input/TerminalManager.js
deleted file mode 100644
index 6bda782..0000000
--- a/src/js/tasks/input/TerminalManager.js
+++ /dev/null
@@ -1,177 +0,0 @@
-(function(){
-
- if (APP)
- {
- // Import node modules
- var spawn = require("child_process").spawn;
- var exec = require("child_process").exec;
- var isWin = /^win/.test(process.platform);
- }
-
- /**
- * Manage the terminal window
- * @class TerminalManager
- * @namespace springroll.tasks
- * @constructor
- * @param {springroll.tasks.TaskRunner} app The instance of the app
- */
- var TerminalManager = function(app)
- {
- /**
- * Reference to the application
- * @property {springroll.tasks.TaskRunner}
- */
- this.app = app;
-
- /**
- * The command to use based on the platform, either grunt.cmd or grunt
- * @property {String} command
- */
- this.command = null;
-
- if (APP)
- {
- // Get the command based on the platform
- this.command = isWin ? 'grunt.cmd' : 'grunt';
- }
-
- /**
- * The list of current processes by project id
- * @property {dict} tasks
- */
- this.tasks = {};
- };
-
- // Reference to the prototype
- var p = TerminalManager.prototype;
-
- /**
- * Kill all the workers for all projects
- * @method killTasks
- */
- p.killTasks = function()
- {
- _.forEach(this.tasks,
- function(task, name)
- {
- if (task.status == 'running')
- {
- this.killTask(name);
- }
- }.bind(this)
- );
- };
-
- /**
- * Run a task
- * @method runTask
- * @param {String} name The name of the task
- * @param {Function} startCb The starting callback function
- * @param {Function} endCb The ending callback function
- * @param {Function} errorCb The error callback function
- */
- p.runTask = function(name, startCb, endCb, errorCb)
- {
- var app = this.app;
- var project = app.projectManager.project;
-
- startCb();
-
- var terminal = spawn(
- this.command,
- [name],
- {cwd: project.path}
- );
-
- var task = this.tasks[name];
-
- if (_.isUndefined(task))
- {
- task = {
- name: name,
- terminal: terminal,
- status: 'running'
- };
- }
- else
- {
- task.terminal = terminal;
- task.status = 'running';
- }
-
- terminal.stdout.setEncoding('utf8');
- terminal.stdout.on(
- 'data',
- function(data)
- {
- app.putCliLog(data, name);
- }
- );
-
- terminal.stderr.on(
- 'data',
- function(data)
- {
- app.putCliLog(data, name);
- errorCb();
- }
- );
-
- terminal.on(
- 'close',
- function(code)
- {
- endCb();
- terminal.status = 'stop';
- }
- );
- };
-
- /**
- * Stop a task
- * @method stopTask
- * @param {String} name The name of the task
- */
- p.stopTask = function(name)
- {
- var task = this.tasks[name];
-
- if (!_.isUndefined(task))
- {
- try
- {
- this.killTask(name);
- task.status = "stop";
- }
- catch(e)
- {
- alert("process end error!");
- }
- }
- };
-
- /**
- * Kill a task
- * @method killTask
- * @param {String} name The name of the task
- */
- p.killTask = function(name)
- {
- if (APP)
- {
- if (isWin)
- {
- var pid = this.tasks[name].terminal.pid;
- exec('taskkill /pid ' + pid + ' /T /F');
- }
- else
- {
- this.tasks[name].terminal.kill();
- }
- }
- };
-
- // Assign to global space
- namespace('springroll.tasks').TerminalManager = TerminalManager;
-
-}());
\ No newline at end of file
diff --git a/src/js/tasks/input/TerminalWindow.js b/src/js/tasks/input/TerminalWindow.js
deleted file mode 100644
index 1b92f8e..0000000
--- a/src/js/tasks/input/TerminalWindow.js
+++ /dev/null
@@ -1,180 +0,0 @@
-(function(){
-
- if (APP)
- {
- // Import modules
- var gui = require('nw.gui');
- }
-
- // Import classes
- var Settings = springroll.tasks.Settings;
-
- /**
- * The Terminal Window manages the output of a task into it's own console window
- * @class TerminalWindow
- * @namespace springroll.tasks
- * @constructor
- * @param {String} taskName The task name
- */
- var TerminalWindow = function(taskName)
- {
- /**
- * The name of the task
- * @property {String} taskName
- */
- this.taskName = taskName;
-
- /**
- * The jQuery node for the task output
- * @property {jquery} output
- */
- this.output = null;
-
- /**
- * The DOM element on the output window
- * @property {DOM} terminal
- */
- this.terminal = null;
-
- /**
- * Reference to the nodejs window
- * @property {nw.gui.Window} main
- */
- this.main = null;
-
- /**
- * The observer to watch changes in the output
- * @property {MutationObserver} observer
- */
- this.observer = null;
-
- // create the new window
- this.create();
- };
-
- // Reference to the prototype
- var p = TerminalWindow.prototype = {};
-
- /**
- * The window reference
- * @property {String} WINDOW_ALIAS
- * @private
- * @static
- */
- var WINDOW_ALIAS = 'TasksTerminalWindow';
-
- /**
- * Open the dialog
- * @method create
- */
- p.create = function()
- {
- // Open the new window
- this.main = gui.Window.get(
- window.open('tasks-terminal.html'), {
- show : false
- }
- );
- this.main.on('close', this.close.bind(this));
- this.main.on('loaded', this.onLoaded.bind(this));
- };
-
- /**
- * Open after the DOM is loaded on the new window
- * @method onLoaded
- */
- p.onLoaded = function()
- {
- Settings.loadWindow(WINDOW_ALIAS, this.main);
-
- // Get the dom output
- this.terminal = this.main.window.document.getElementById('terminal');
-
- // Setup the observer
- this.observer = new MutationObserver(this.onUpdate.bind(this));
-
- // Open the constructor task
- this.open(this.taskName);
- };
-
- /**
- * Everytime the output is updated
- * @method onUpdate
- * @private
- */
- p.onUpdate = function()
- {
- this.terminal.innerHTML = this.output.innerHTML;
-
- // Scroll to the bottom of the output window
- this.terminal.scrollTop = this.terminal.scrollHeight;
- };
-
- /**
- * New
- * @method open
- * @param {String} taskName The task name
- */
- p.open = function(taskName)
- {
- if (this.observer)
- {
- this.observer.disconnect();
- }
- this.terminal.innerHTML = "";
-
- this.taskName = taskName;
- this.output = document.getElementById('console_' + taskName);
-
- // Update the title
- //this.main.title = this.taskName;
- this.main.window.document.getElementById('title').innerHTML = taskName;
-
- // define what element should be observed by the observer
- // and what types of mutations trigger the callback
- this.observer.observe(this.output, {
- attributes: true,
- childList: true,
- characterData: true
- });
- this.onUpdate();
-
- // Reveal the window
- this.main.show();
- this.main.focus();
- };
-
- /**
- * Close the window
- * @method close
- * @private
- */
- p.close = function()
- {
- if (this.observer)
- {
- this.observer.disconnect();
- }
- this.output = null;
- this.terminal.innerHTML = "";
- Settings.saveWindow(WINDOW_ALIAS, this.main);
- this.main.hide();
- };
-
- /**
- * Destroy and don't use after this
- * @method destroy
- */
- p.destroy = function()
- {
- this.close();
- this.observer = null;
- this.terminal = null;
- this.main.close(true);
- this.main = null;
- };
-
- // Assign to global space
- namespace('springroll.tasks').TerminalWindow = TerminalWindow;
-
-}());
\ No newline at end of file
diff --git a/src/js/tasks/ui/Interface.js b/src/js/tasks/ui/Interface.js
deleted file mode 100644
index 1cddba3..0000000
--- a/src/js/tasks/ui/Interface.js
+++ /dev/null
@@ -1,88 +0,0 @@
-(function(){
-
- if (APP)
- {
- // Global node modules
- var fs = require('fs');
- var path = require("path");
- }
-
- // Import classes
- var TerminalWindow = springroll.tasks.TerminalWindow,
- Settings = springroll.tasks.Settings;
-
- /**
- * The main interface class
- * @class Interface
- * @namespace springroll.tasks
- * @constructor
- * @param {springroll.tasks.TaskRunner} app The instance of the app
- */
- var Interface = function(app)
- {
- $("#refreshTasks").click(function(){
- app.refreshTasks();
- });
-
- var body = $('body').on(
- 'dblclick',
- '.JS-Task-Toggle-Info',
- function()
- {
- var button = $(this).find('.JS-Task-Run');
- app.toggleTask(button.data('task-name'));
- return false;
- }
- )
- .on(
- 'click',
- '.JS-Task-Run',
- function()
- {
- app.toggleTask($(this).data('task-name'));
- return false;
- }
- )
- .on(
- 'click',
- '.JS-Task-Terminal',
- function(e)
- {
- var button = $(this);
- var taskName = button.data('task-name').toString();
-
- if (!app.terminal)
- {
- app.terminal = new TerminalWindow(taskName);
- }
- else
- {
- app.terminal.open(taskName);
- }
- return false;
- }
- )
- .on(
- 'click',
- '.JS-Task-Stop',
- function()
- {
- app.toggleTask($(this).data('task-name'));
- return false;
- }
- );
-
- $(document).on(
- 'dragover',
- function handleDragOver(event)
- {
- event.stopPropagation();
- event.preventDefault();
- }
- );
- };
-
- // Assign to namespace
- namespace('springroll.tasks').Interface = Interface;
-
-}());
\ No newline at end of file
diff --git a/src/js/tasks/utils/Settings.js b/src/js/tasks/utils/Settings.js
deleted file mode 100644
index 03e2061..0000000
--- a/src/js/tasks/utils/Settings.js
+++ /dev/null
@@ -1,58 +0,0 @@
-(function(){
-
- /**
- * For storing and retrieving data
- * @class Settings
- * @namespace springroll.tasks
- */
- var Settings = {};
-
- /**
- * Save the window settings
- * @method saveWindow
- * @static
- * @param {String} alias The alias for the window
- * @param {Window} win Node webkit window object
- * @param {Boolean} [isTerminal=false] If we're setting the terminal window
- */
- Settings.saveWindow = function(alias, win)
- {
- localStorage[alias] = JSON.stringify({
- width : win.width,
- height : win.height,
- x : win.x,
- y : win.y
- });
- };
-
- /**
- * Load the window to the saved size
- * @method loadWIndow
- * @static
- * @param {String} alias The alias for the window
- * @param {Window} win The GUI window object
- */
- Settings.loadWindow = function(alias, win)
- {
- var rect;
- try
- {
- rect = JSON.parse(localStorage[alias] || 'null');
- }
- catch(e)
- {
- alert('Error Reading Spock Window! Reverting to defaults.');
- }
- if (rect)
- {
- win.width = rect.width;
- win.height = rect.height;
- win.x = rect.x;
- win.y = rect.y;
- }
- };
-
- // Assign to global space
- namespace('springroll.tasks').Settings = Settings;
-
-})();
\ No newline at end of file
diff --git a/src/js/tasks/utils/Utils.js b/src/js/tasks/utils/Utils.js
deleted file mode 100644
index ff47124..0000000
--- a/src/js/tasks/utils/Utils.js
+++ /dev/null
@@ -1,54 +0,0 @@
-(function(){
-
- if (APP)
- {
- // Import node modules
- var md5 = require("MD5");
- var fs = require("fs");
- }
-
- /**
- * Basic app utilities
- * @class Utils
- * @namespace springroll.tasks
- */
- var Utils = {};
-
- /**
- * The collection of templates for markup
- * @static
- * @property {dict} templates
- * @private
- */
- Utils.templates = {};
-
- /**
- * Get the templates and do the subtitutions
- * @method getTemplate
- * @static
- * @param {string} templateFileName The name of the template
- * @param {object} obj The object to template
- * @return {string} The templated string
- */
- Utils.getTemplate = function(templateFileName, obj)
- {
- if (!Utils.templates[templateFileName])
- {
- var template = fs.readFileSync(
- "assets/html/" + templateFileName + ".html",
- {encoding: "utf-8"}
- );
-
- Utils.templates[templateFileName] = template;
- return _.template(template)(obj);
- }
- else
- {
- return _.template(Utils.templates[templateFileName])(obj);
- }
- };
-
- // Assign to the global space
- namespace('springroll.tasks').Utils = Utils;
-
-}());
\ No newline at end of file
diff --git a/src/less/Module.less b/src/less/Module.less
deleted file mode 100644
index 021f2e0..0000000
--- a/src/less/Module.less
+++ /dev/null
@@ -1,4 +0,0 @@
-@import 'mixins';
-@import 'header';
-@import 'fonts';
-@import 'scrollbar';
\ No newline at end of file
diff --git a/src/less/SpringRollStudio.less b/src/less/SpringRollStudio.less
deleted file mode 100755
index a41dbcb..0000000
--- a/src/less/SpringRollStudio.less
+++ /dev/null
@@ -1,96 +0,0 @@
-@import 'fonts';
-
-body {
- -webkit-user-select:none;
- cursor:default;
- font-family:'OpenSans', sans-serif;
- font-weight: lighter;
- width:100%;
- height:100%;
- position:absolute;
- padding:0 10px;
- background-color:#fff;
- &.dragging {
- box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.3);
- background-color:#eee;
- }
-}
-
-.modules {
- width:100%;
- margin-top: 10px;
- &:last-child {
- margin-bottom: 10px;
- }
- a, button {
- font-weight:lighter;
- }
-}
-
-.project {
- background:#363842;
- padding:10px 0;
- border-radius: 4px;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- text-align: center;
- margin:0;
- width:auto;
- color:#fff;
- border:0;
- .name:before {
- content:"Project:";
- margin-right:5px;
- color:#999;
- }
- .empty {
- display:none;
- color:#999;
- }
- &.empty {
- .empty {
- display:block;
- }
- .name {
- display:none;
- }
- }
-}
-
-header {
- .logo {
- display:block;
- margin:10px auto 0;
- width:100px;
- }
-}
-
-input[type="file"] {
- position:absolute;
- top:0;
- left:0;
-}
-
-nav {
- .btn {
- width:33.55%;
- text-align:center;
- &:first-child {
- border-bottom-left-radius: 0;
- }
- &:last-child {
- border-bottom-right-radius: 0;
- }
- }
-}
-
-.icon {
- margin-right:0.3em;
-}
-
-.version {
- text-align: center;
- margin-top: 7px;
- font-size:90%;
- color: #999;
-}
\ No newline at end of file
diff --git a/src/less/captions/Captions.less b/src/less/captions/Captions.less
deleted file mode 100644
index cf1fb2a..0000000
--- a/src/less/captions/Captions.less
+++ /dev/null
@@ -1,7 +0,0 @@
-@import '../mixins';
-@import 'global';
-@import 'header';
-@import 'list';
-@import 'controls';
-@import 'timeline';
-@import 'modal';
\ No newline at end of file
diff --git a/src/less/captions/controls.less b/src/less/captions/controls.less
deleted file mode 100644
index 58cba32..0000000
--- a/src/less/captions/controls.less
+++ /dev/null
@@ -1,12 +0,0 @@
-#controls {
- position:absolute;
- bottom:10px;
- width:100%;
- .toggle {
- &.active .on, .off { display:inline; }
- &.active .off, .on { display:none; }
- }
- .main, .sub {
- padding:0;
- }
-}
\ No newline at end of file
diff --git a/src/less/captions/global.less b/src/less/captions/global.less
deleted file mode 100644
index e29a9fd..0000000
--- a/src/less/captions/global.less
+++ /dev/null
@@ -1,40 +0,0 @@
-.btn:focus {
- outline: none !important;
-}
-
-body,
-html {
- height:100%;
- width:100%;
- overflow:hidden;
- font-family:'OpenSans', sans-serif;
-}
-
-body, body * {
- user-select: none;
- cursor:default;
-}
-
-.contentBorder {
- border:2px solid #ccc;
- border-radius:6px;
- background:#eee;
- overflow-x: scroll;
- overflow-y: hidden;
- box-sizing:border-box;
- padding:5px;
- position:absolute;
- left:15px;
- right:15px;
- margin:0;
-}
-
-#frame {
- min-width:510px;
- min-height:400px;
- position:absolute;
- top:0;
- left:0;
- width:100%;
- height:100%;
-}
\ No newline at end of file
diff --git a/src/less/captions/header.less b/src/less/captions/header.less
deleted file mode 100644
index 63da7b9..0000000
--- a/src/less/captions/header.less
+++ /dev/null
@@ -1,6 +0,0 @@
-/*header {
-
- #refreshButton {
- right:40px;
- }
-}*/
\ No newline at end of file
diff --git a/src/less/captions/list.less b/src/less/captions/list.less
deleted file mode 100644
index 713c0ed..0000000
--- a/src/less/captions/list.less
+++ /dev/null
@@ -1,49 +0,0 @@
-#list {
- .contentBorder();
- transition: border-color 0.2s, background 0.2s;
- &.dragover {
- border-color: #84B0DF;
- background: #DCE7F3;
- }
- bottom:205px;
- top:50px;
- -webkit-column-width: 10em;
- -moz-column-width: 10em;
- column-width: 10em;
- -webkit-column-gap: 1rem;
- -moz-column-gap: 1rem;
- column-gap: 1rem;
- max-width: none;
- button {
- display:block;
- width:100%;
- margin:0 0 5px 0;
- break-inside: avoid-column;
- -webkit-column-break-inside: avoid;
- }
-}
-
-#instructions {
- position:absolute;
- top:50px;
- width:100%;
- margin:0;
- padding:0;
- bottom:205px;
- text-align: center;
- z-index: 2;
- display:none;
- .unselectable();
- .text {
- position:absolute;
- top:50%;
- width:100%;
- -webkit-transform:translateY(-50%);
- color:#999;
- font-size:150%;
- line-height: 1;
- }
- body.empty & {
- display: block;
- }
-}
\ No newline at end of file
diff --git a/src/less/captions/modal.less b/src/less/captions/modal.less
deleted file mode 100644
index 74d3a68..0000000
--- a/src/less/captions/modal.less
+++ /dev/null
@@ -1,11 +0,0 @@
-.modal {
- .input-group-addon:first-child {
- width:120px;
- }
- .form-row {
- margin-bottom:10px;
- &:last-child {
- margin-bottom:0;
- }
- }
-}
\ No newline at end of file
diff --git a/src/less/captions/timeline.less b/src/less/captions/timeline.less
deleted file mode 100644
index 3e76ec8..0000000
--- a/src/less/captions/timeline.less
+++ /dev/null
@@ -1,79 +0,0 @@
-#timeline {
- .contentBorder();
- background-image: linear-gradient(90deg,
- rgba(0, 0, 0, 0.15) 0.5%,
- transparent 1%
- );
- background-size: 100px 100px;
- height:130px;
- bottom:65px;
- a, button {
- position:absolute;
- z-index:3;
- margin:0 0 0 4px;
- }
- #resizeRight,
- #resizeLeft {
- top: 5px;
- height: 105px;
- width: 23px;
- padding: 0;
- cursor: ew-resize;
- width: 15px;
- box-shadow: none;
- }
- #resizeRight {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
- #resizeLeft {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
- #removeButton {
- top:5px;
- margin-left:8px;
- }
- #captions {
- position:absolute;
- z-index:1;
- textarea {
- user-select:none;
- font-family:'OpenSans', Helvetica, sans-serif;
- resize: none;
- font-size: 12px;
- text-align:center;
- padding: 6px;
- overflow: hidden;
- width:200px;
- position: absolute;
- background: #428bca;
- box-shadow:none;
- color:#fff;
- height:30px;
- transition: background 0.2s, height 0.2s, color 0.2s;
- top:0;
- &:focus, &.current {
- cursor:text;
- user-select: text;
- padding: 6px 12px;
- font-family:'OpenSans', sans-serif;
- font-weight: lighter;
- font-size: 18px;
- color:#333;
- background:rgba(255,255,255,0.5);
- height:105px;
- top:0;
- }
- }
- }
- #wave {
- position:absolute;
- z-index:0;
- top:35px;
- padding-right:200px;
- }
- &.disabled #wave{
- display:none;
- }
-}
\ No newline at end of file
diff --git a/src/less/fonts.less b/src/less/fonts.less
deleted file mode 100644
index 22db631..0000000
--- a/src/less/fonts.less
+++ /dev/null
@@ -1,48 +0,0 @@
-@font-face {
- font-family: 'SourceCodePro';
- src: url('../fonts/sourcecodepro-regular-webfont.eot');
- src: url('../fonts/sourcecodepro-regular-webfont.eot?#iefix') format('embedded-opentype'),
- url('../fonts/sourcecodepro-regular-webfont.woff2') format('woff2'),
- url('../fonts/sourcecodepro-regular-webfont.woff') format('woff'),
- url('../fonts/sourcecodepro-regular-webfont.ttf') format('truetype'),
- url('../fonts/sourcecodepro-regular-webfont.svg#source_code_proregular') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'SourceCodePro';
- src: url('../fonts/sourcecodepro-bold-webfont.eot');
- src: url('../fonts/sourcecodepro-bold-webfont.eot?#iefix') format('embedded-opentype'),
- url('../fonts/sourcecodepro-bold-webfont.woff2') format('woff2'),
- url('../fonts/sourcecodepro-bold-webfont.woff') format('woff'),
- url('../fonts/sourcecodepro-bold-webfont.ttf') format('truetype'),
- url('../fonts/sourcecodepro-bold-webfont.svg#source_code_probold') format('svg');
- font-weight: bold;
- font-style: normal;
-}
-
-
-@font-face {
- font-family: 'OpenSans';
- src: url('../fonts/opensans-regular-webfont.eot');
- src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
- url('../fonts/opensans-regular-webfont.woff2') format('woff2'),
- url('../fonts/opensans-regular-webfont.woff') format('woff'),
- url('../fonts/opensans-regular-webfont.ttf') format('truetype'),
- url('../fonts/opensans-regular-webfont.svg#OpenSans') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'OpenSans';
- src: url('../fonts/opensans-light-webfont.eot');
- src: url('../fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
- url('../fonts/opensans-light-webfont.woff2') format('woff2'),
- url('../fonts/opensans-light-webfont.woff') format('woff'),
- url('../fonts/opensans-light-webfont.ttf') format('truetype'),
- url('../fonts/opensans-light-webfont.svg#OpenSans') format('svg');
- font-weight: lighter;
- font-style: normal;
-}
\ No newline at end of file
diff --git a/src/less/header.less b/src/less/header.less
deleted file mode 100644
index 47e331a..0000000
--- a/src/less/header.less
+++ /dev/null
@@ -1,48 +0,0 @@
-header {
- h1 {
- z-index:1;
- width:100%;
- position:absolute;
- text-align:center;
- color:#fff;
- font-family: 'OpenSans', sans-serif;
- font-weight: lighter;
- font-size:20px;
- padding: 0;
- margin: 0;
- margin-top: 10px;
- letter-spacing: -0.02em;
- .unselectable();
- }
- height:40px;
- background-color: #428bca;
-
- &.fixed {
- position:fixed;
- width:100%;
- top:0;
- left:0;
- z-index:100;
- }
- button {
- position:absolute;
- z-index:2;
- border:0;
- top:4px;
- right:4px;
- font-size:120%;
- padding:4px 8px;
- background: transparent;
- opacity:0.6;
- color:#fff;
- transition:opacity 0.2s, background 0.2s;
- &:focus, &:hover {
- opacity:1;
- background:rgba(0, 0, 0, 0.5);
- }
- span {
- cursor:pointer;
- color: #fff;
- }
- }
-}
\ No newline at end of file
diff --git a/src/less/mixins.less b/src/less/mixins.less
deleted file mode 100644
index bc6aa35..0000000
--- a/src/less/mixins.less
+++ /dev/null
@@ -1,6 +0,0 @@
-.unselectable() {
- -webkit-user-select: none;
- user-select:none;
- pointer-events:none;
- cursor:default;
-}
\ No newline at end of file
diff --git a/src/less/new/NewProject.less b/src/less/new/NewProject.less
deleted file mode 100644
index c37ea2f..0000000
--- a/src/less/new/NewProject.less
+++ /dev/null
@@ -1,133 +0,0 @@
-@import '../mixins';
-
-body {
- overflow: hidden;
- font-family: 'Open Sans', sans-serif;
- font-weight: normal;
-}
-
-.modal-body.main {
- padding-bottom:0;
-}
-
-label.disabled {
- color:#999;
-}
-
-label {
- display:block;
- .on { display:none }
- .off { display:inline-block }
- &.active {
- .on { display:inline-block }
- .off { display:none }
- }
-}
-
-#modules {
- height:220px;
- border:1px solid #ccc;
- border-radius:4px;
- overflow-y: scroll;
- -webkit-user-select: none;
- .checkbox {
- border-bottom: 1px solid #ddd;
- padding: 5px 10px 5px;
- position: relative;
- &:last-child {
- border: 0;
- }
- .name {
- font-size:85%;
- font-weight:bold;
- }
- .id {
- font-size: 11px;
- margin-left: 5px;
- color: #999;
- border: 1px solid #ddd;
- border-top: 0;
- padding: 2px 8px;
- border-radius: 4px;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- display: block;
- position: absolute;
- top: 0;
- right: 0;
- }
- .description {
- display: block;
- font-size: 85%;
- color: #666;
- padding-top: 5px;
- }
- }
-}
-
-#dropTemplate {
- position: relative;
- min-height: 150px;
- border: 4px solid #ccc;
- width: 100%;
- color: #999;
- background-color: #F7F7F7;
- font-size: 120%;
- transition:background-color 0.2s, color 0.2s, border-color 0.2s;
- cursor:pointer;
- margin-bottom:20px;
- .folder { display:none }
- .instructions { display:block }
- .error { display:none }
- &.dragging {
- background-color:#EEFFFA;
- border-color:#6BD2B4;
- color:#5EB9A2;
- }
- &.has-folder {
- border-color:#73ADEC;
- color:#5E84C8;
- background-color: #E9F2FF;
- .folder { display:block }
- .instructions { display:none }
- .error { display:none }
- }
- &.has-error {
- border-color:#DF8D8D;
- color: #D17B7B;
- background-color:#FFEBEB;
- .folder { display:none }
- .instructions { display:none }
- .error { display:block }
- }
-}
-
-.templates {
- max-height:280px;
- overflow:hidden;
- overflow-y: auto;
- .template {
- padding: 5px 0 0;
- height: 45px;
- border-top: 1px solid #ddd;
- &:last-child {
- border-bottom:1px solid #ddd;
- }
- .name {
- font-size: 110%;
- display: block;
- float: left;
- padding-top: 5px;
- }
- }
-}
-
-.center-vertical {
- transform:translateY(-50%);
- -webkit-transform:translateY(-50%);
- position:absolute;
- display:block;
- width: 100%;
- text-align:center;
- top:50%;
-}
\ No newline at end of file
diff --git a/src/less/preview/Preview.less b/src/less/preview/Preview.less
deleted file mode 100644
index b3a5959..0000000
--- a/src/less/preview/Preview.less
+++ /dev/null
@@ -1,268 +0,0 @@
-@import 'preview-icons';
-@import 'preview-mixins';
-
-@uiHeight: 40px;
-@smBreak: 500px;
-
-* {
- /* make transparent link selection, adjust last value opacity 0 to 1.0 */
- -webkit-tap-highlight-color: rgba(0,0,0,0);
-}
-
-body {
- /* prevent callout to copy image, etc when tap to hold */
- -webkit-touch-callout: none;
- /* prevent webkit from resizing text to fit */
- -webkit-text-size-adjust: none;
- /* prevent copy paste, to allow, change 'none' to 'text' */
- .user-select(none);
- position:absolute;
- background-color:#000;
- font-family: 'OpenSans', sans-serif;
- font-weight: lighter;
- font-size:12px;
- height:200%; // hack for scroll-up hiding address bar
- margin:0px;
- padding:0px;
- color:white;
- width:100%;
- text-align: left;
- overflow: hidden;
-}
-
-.drop-down {
- position:absolute;
- display:none;
- padding: 1px 1px 1px 0;
- background:#222;
- &.on {
- display:block;
- }
- height:auto;
- width:374px;
- padding:10px;
- margin-left: 1px;
- .box-sizing(border-box);
- border-bottom-left-radius: 6px;
- border-bottom-right-radius: 6px;
- .form-group {
- font-size:12px;
- color:#ccc;
- .btn {
- .label { font-size: 18px }
- .icon { font-size: 20px }
- }
- }
- .form-title {
- font-size:16px;
- text-align: left;
- color: #ccc;
- margin: 5px 0 15px;
- .close {
- color: #fff;
- }
- }
- @media screen and (max-width: @smBreak) {
- .scrollDropDowns();
- }
- .touch & {
- .scrollDropDowns();
- }
-}
-
-.scrollDropDowns()
-{
- width:100%;
- margin-left:0;
- position:fixed;
- top:@uiHeight;
- bottom:0;
- left:0;
- right:0;
- overflow: auto;
- overflow-x: hidden;
- -webkit-overflow-scrolling: touch;
-}
-
-#pausedScreen {
- z-index: 2;
- position: absolute;
- left: 0;
- top:0;
- bottom:0;
- width:100%;
- height:0;
- overflow:hidden;
- background-color:transparent;
- .no-touch & {
- .transition(background-color 0.4s);
- }
- .container {
- display:none;
- position:absolute;
- top:50%;
- text-align: center;
- margin-top:-45px;
- height:90px;
- width:100%;
- h2 {
- margin:0 0 0.5em;
- font-size:180%;
- font-weight:300;
- }
- }
- .paused & {
- height:auto;
- background-color:rgba(0,0,0,0.6);
- .container {
- display:block;
- }
- }
- .loading & {
- .container { display:none }
- }
- @media screen and (max-width: @smBreak) {
- h2 {
- font-size:150%;
- }
- }
-}
-
-#browserLink {
- position:absolute;
- padding:4px 0;
- bottom:0;
- z-index:3;
- width:100%;
- text-align: center;
- color: #555;
- .user-select(initial);
- background:#000;
-}
-
-#frame {
- position:fixed;
- z-index:1;
- width:100%;
- height:100%;
- top:0;
- left:0;
- background: #222;
- &.show-controls {
- .controls {
- display:block;
- }
- #pausedScreen {
- top:@uiHeight;
- }
- .appWrapper {
- top:@uiHeight;
- }
- }
- .controls {
- .internal & {
- .btn.main {
- width: percentage(1/7);
- &.drop-handle {
- width: percentage(1/14);
- }
- }
- }
- display:none;
- position:absolute;
- top:0;
- right:0;
- height:@uiHeight;
- z-index:3;
- font-size:0;
- width:375px;
- .btn.main {
- outline:none;
- cursor:pointer;
- border-radius:0;
- border:0;
- display:inline-block;
- height:100%;
- font-size:24px;
- width: percentage(1/5);
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border-left: 1px solid rgba(0,0,0, 0.6);
- margin:0;
- padding:0;
-
- // The drop down handle for the audio
- // and captions additional options
- &.drop-handle {
- margin-left:0;
- padding:0 7px;
- border-left: 1px solid rgba(0,0,0, 0.1);
- width: percentage(1/10);
- .arrow-down {
- width: 0;
- height: 0;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- border-top: 5px solid #fff;
- display: inline-block;
- margin-bottom: 7px;
- }
- &.disabled {
- border-left-color: #777;
- .arrow-down {
- border-top-color:#999;
- }
- }
- }
- .glyphicon {
- font-size:20px;
- }
- .icon {
- width:26px;
- display:inline-block;
- }
- }
- .unpaused .off,
- .unmuted .off { display:none !important }
- .paused .on,
- .muted .on { display:none !important }
- @media screen and (max-width: @smBreak) {
- width:100%;
- }
- }
-}
-
-#appTitle {
- display:none;
- position: absolute;
- top: 5px;
- left: 15px;
- color: #fff;
- font-size: 160%;
- .show-title & {
- display:block;
- }
- @media screen and (max-width: @smBreak) {
- display:none !important;
- }
-}
-
-.appWrapper {
- position: absolute;
- top:0;
- bottom:0;
- .internal & {
- bottom:25px;
- }
- right:0;
- left:0;
- z-index:0;
- background:#000;
-}
-
-#appContainer {
- position: absolute;
- width:100%;
- height:100%;
- z-index:0;
-}
\ No newline at end of file
diff --git a/src/less/preview/preview-icons.less b/src/less/preview/preview-icons.less
deleted file mode 100644
index 510b6cf..0000000
--- a/src/less/preview/preview-icons.less
+++ /dev/null
@@ -1,71 +0,0 @@
-@font-face {
- font-family: 'preview';
- src:url('../fonts/preview.eot?dfjxtz');
- src:url('../fonts/preview.eot?#iefixdfjxtz') format('embedded-opentype'),
- url('../fonts/preview.woff?dfjxtz') format('woff'),
- url('../fonts/preview.ttf?dfjxtz') format('truetype'),
- url('../fonts/preview.svg?dfjxtz#preview') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-
-[class^="icon-"], [class*=" icon-"] {
- font-family: 'preview';
- speak: none;
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-transform: none;
- line-height: 1;
-
- /* Better Font Rendering =========== */
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-captions-off:before {
- content: "\e600";
-}
-.icon-captions:before {
- content: "\e601";
-}
-.icon-close:before {
- content: "\e602";
-}
-.icon-help:before {
- content: "\e603";
-}
-.icon-music-off:before {
- content: "\e604";
-}
-.icon-music:before {
- content: "\e605";
-}
-.icon-sfx-off:before {
- content: "\e606";
-}
-.icon-sfx:before {
- content: "\e607";
-}
-.icon-sound-off:before {
- content: "\e608";
-}
-.icon-sound:before {
- content: "\e609";
-}
-.icon-vo-off:before {
- content: "\e60a";
-}
-.icon-vo:before {
- content: "\e60b";
-}
-.icon-gear:before {
- content: "\e60c";
-}
-.icon-play:before {
- content: "\ea1c";
-}
-.icon-pause:before {
- content: "\ea1d";
-}
-
diff --git a/src/less/preview/preview-mixins.less b/src/less/preview/preview-mixins.less
deleted file mode 100644
index c6a1ae0..0000000
--- a/src/less/preview/preview-mixins.less
+++ /dev/null
@@ -1,27 +0,0 @@
-.user-select(@u){
- -webkit-user-select: @u;
- -moz-user-select: @u;
- -ms-user-select: @u;
- user-select: @u;
-}
-
-.box-sizing(@u){
- -webkit-box-sizing:@u;
- -moz-box-sizing:@u;
- -ms-box-sizing:@u;
- box-sizing:@u;
-}
-
-.transform(@u){
- -webkit-transform: @u;
- -moz-transform: @u;
- -ms-transform: @u;
- transform: @u;
-}
-
-.transition(@u){
- -webkit-transition:@u;
- -moz-transition:@u;
- -ms-transition:@u;
- transition:@u;
-}
\ No newline at end of file
diff --git a/src/less/remote/RemoteTrace.less b/src/less/remote/RemoteTrace.less
deleted file mode 100755
index 4fde0f5..0000000
--- a/src/less/remote/RemoteTrace.less
+++ /dev/null
@@ -1,4 +0,0 @@
-@import '../mixins';
-@import 'base';
-@import 'trace';
-@import 'controls';
\ No newline at end of file
diff --git a/src/less/remote/base.less b/src/less/remote/base.less
deleted file mode 100644
index 97f981a..0000000
--- a/src/less/remote/base.less
+++ /dev/null
@@ -1,17 +0,0 @@
-.btn:focus {
- outline: none !important;
-}
-
-html, body {
- overflow: hidden;
-}
-
-#frame {
- min-width:400px;
- min-height:275px;
- position:absolute;
- top:0;
- left:0;
- width:100%;
- height:100%;
-}
\ No newline at end of file
diff --git a/src/less/remote/controls.less b/src/less/remote/controls.less
deleted file mode 100644
index 4bab8e6..0000000
--- a/src/less/remote/controls.less
+++ /dev/null
@@ -1,48 +0,0 @@
-.controls {
- width: 100%;
- position:absolute;
- left:0;
- top:40px;
- height:40px;
- background:#EAEAEA;
- z-index: 2;
- border-bottom: 1px solid #ccc;
-
- .buttons {
- margin-top:3px;
- margin-left:3px;
- }
- .btn.disabled {
- background:#CACACA;
- }
- @media screen and (min-width:560px){
- .btn {
- width:60px;
- }
- }
- .maxLogs {
- float:right;
- width: 140px;
- margin-top: 3px;
- margin-right:3px;
-
- @media screen and (max-width:560px){
- width:130px;
- .input-group-addon {
- font-size:80%;
- }
- }
- }
- #maxLogs {
- text-align:center
- }
-
- .dropdown-menu a {
- .on {display:none}
- .off {display:inline}
- &.selected {
- .on {display:inline}
- .off {display:none}
- }
- }
-}
\ No newline at end of file
diff --git a/src/less/remote/trace.less b/src/less/remote/trace.less
deleted file mode 100644
index c6fba3e..0000000
--- a/src/less/remote/trace.less
+++ /dev/null
@@ -1,165 +0,0 @@
-.user-deselect() {
- -webkit-user-select:none;
- -moz-user-select:none;
- -o-user-select:none;
- -ms-user-select:none;
- user-select:none;
-}
-
-#trace {
- overflow: auto;
- position:absolute;
- top:80px;
- bottom:0;
- left:0;
- right:0;
- padding:10px;
-
- .error,
- .warning,
- .info,
- .debug,
- .general {
- display:none;
- }
-
- &.show-error .error,
- &.show-warning .warning,
- &.show-info .info,
- &.show-debug .debug,
- &.show-general .general {
- display: block;
- }
-
- .group {
- padding-left:20px;
- display: block;
- overflow: hidden;
- }
-
- .log {
- margin-bottom:5px;
- font-size: 12px;
- font-family: "SourceCodePro", monospace;
- font-weight:normal;
- white-space:nowrap;
-
- &.session {
- font-weight:700;
- border-bottom:1px solid #999;
- margin:10px 0;
- }
- .type {
- font-weight:bold;
- padding-right: 10px;
- display:block;
- float: left;
- }
- .timestamp {
- display: none;
- opacity: 0.8;
- padding-right: 10px;
- font-size: 10px;
- float: left;
- }
- .message {
- margin: 0 auto;
- display: block;
- width: 100%;
- }
-
- .stackLink {
- float: right;
- cursor: pointer;
- text-decoration: underline;
- }
-
- .stack {
- .line {
- display: block;
- }
- }
-
- .groupToggle,
- .objectToggle {
- .user-deselect();
- cursor: pointer;
- padding-right: 5px;
- .down { display:inline; }
- .right { display:none; }
- &.collapsed {
- .down { display:none; }
- .right { display:inline; }
- }
- }
-
- .groupToggle {
- display: block;
- float: left;
- }
-
- .object {
- display: inline-block;
- vertical-align: top;
- .line {
- display: block;
- }
- }
- }
- // Options for the trace
- &.wrap .log {
- white-space:pre;
- }
- &.timestamps .timestamp {
- display: block;
- }
-
- // Default color scheme
- &.default {
- background:#fff;
- .session,
- .general { color: #000000;}
- .info { color: #009933;}
- .debug { color: #0066CC;}
- .warning {color: #FF9900;}
- .error {color: #CC0000;}
- .stack .line:hover { background:#ddd; }
- }
- &.solarizedDark {
- background:#002B36;
- .session,
- .general {color: #93A1A1;}
- .info {color: #2AA198;}
- .debug {color: #859900;}
- .warning {color: #DC322F;}
- .error {color: #D33682;}
- .stack .line:hover { background:#ddd; }
- }
- &.solarizedLight {
- background:#FDF6E3;
- .session,
- .general {color: #586E75;}
- .info {color: #2AA198;}
- .debug {color: #859900;}
- .warning {color: #DC322F;}
- .error {color: #D33682;}
- .stack .line:hover { background:#ddd; }
- }
-}
-
-.sunlight-code-container {
- overflow-y: auto;
- height: 500px;
- border-width: 1px;
- border-style: solid;
-}
-
-.sunlight-highlight-javascript {
- //no standard padding because that messes with the line numbers
- padding: 0px;
-}
-
-.sunlight-container {
- //display fully on top of the other remote trace ui
- z-index: 4;
-}
\ No newline at end of file
diff --git a/src/less/scrollbar.less b/src/less/scrollbar.less
deleted file mode 100644
index 7ee8cc2..0000000
--- a/src/less/scrollbar.less
+++ /dev/null
@@ -1,23 +0,0 @@
-::-webkit-scrollbar {
- width: 12px;
- height: 12px;
-}
-::-webkit-scrollbar-button {
- width: 12px;
- height: 12px;
-}
-::-webkit-scrollbar-track {
- background:transparent;
- border-radius:10px;
-}
-::-webkit-scrollbar-thumb {
- background:rgba(0, 0, 0, 0.2);
- border-radius:10px;
- border: 2px solid transparent;
- background-clip: content-box;
-}
-::-webkit-scrollbar-thumb:hover {
- background:rgba(0, 0, 0, 0.5);
- border: 2px solid transparent;
- background-clip: content-box;
-}
diff --git a/src/less/tasks/TaskRunner.less b/src/less/tasks/TaskRunner.less
deleted file mode 100644
index adee9ee..0000000
--- a/src/less/tasks/TaskRunner.less
+++ /dev/null
@@ -1,4 +0,0 @@
-@import '../mixins';
-@import 'icons';
-@import 'terminal';
-@import 'base';
\ No newline at end of file
diff --git a/src/less/tasks/base.less b/src/less/tasks/base.less
deleted file mode 100644
index 284bfc4..0000000
--- a/src/less/tasks/base.less
+++ /dev/null
@@ -1,125 +0,0 @@
-body {
- width: 100%;
- height: 100%;
- background: #F5F6F8;
- -webkit-user-select: none;
- font-family:'OpenSans', sans-serif;
- font-weight: lighter;
-
- // Hide the messages
- .loading,
- .failed,
- .installing {
- display:none;
- }
-
- // Show the messages
- &.loading .loading,
- &.failed .failed,
- &.installing .installing {
- display:block;
- }
-}
-
-.status {
- z-index:0;
- .state {
- text-align:center;
- font-size:110%;
- position:absolute;
- width:100%;
- top:50%;
- margin-top:20px;
- -webkit-transform:translateY(-50%);
- transform:translateY(-50%);
- }
- .failed {
- color:#c00;
- }
- .spinner {
- background:url(../images/loader.gif) no-repeat top center;
- padding-top:40px;
- }
-}
-
-.stripes(){
- background-color: #ddd;
- background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
- -webkit-animation: progress-bar-stripes 0.7s linear infinite;
- background-size: 40px 40px;
- -webkit-transition: width .6s ease;
- transition: width .6s ease;
-}
-
-@-webkit-keyframes progress-bar-stripes {
- from {
- background-position: 40px 0
- }
- to {
- background-position: 0 0
- }
-}
-.progress {
- height: 20px;
- margin-bottom: 20px;
- overflow: hidden;
- background-color: #f5f5f5;
- border-radius: 4px;
- -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-* {
- -webkit-box-sizing: border-box;
- cursor: default;
-}
-.controls {
- visibility: hidden;
- position: absolute;
- right: 5px;
- top: 5px;
- opacity: 0;
-}
-#tasks, .status {
- overflow: auto;
-}
-#tasks {
- z-index:1;
-}
-.tasks {
- overflow-y: auto;
- position: fixed;
- width: 100%;
- top: 40px;
- bottom: 0;
-}
-.tasks-item {
- background-color: #fff;
- padding: 5px;
- border-bottom:1px solid #d3d3d3;
-
- &.running,
- &.error {
- .stripes();
- }
- &.error {
- background-color: #d9534f;
- -webkit-animation: none;
- color: #fff;
- }
-
- .play { display:inline-block; }
- .stop { display:none; }
-
- &.running {
- .play { display:none; }
- .stop { display:inline-block; }
- }
- .name {
- padding:6px 0 0 10px;
- display:block;
- float:left;
- font-weight:normal;
- }
-}
-.console {
- display:none;
-}
\ No newline at end of file
diff --git a/src/less/tasks/icons.less b/src/less/tasks/icons.less
deleted file mode 100644
index 4a349d2..0000000
--- a/src/less/tasks/icons.less
+++ /dev/null
@@ -1,46 +0,0 @@
-@font-face {
- font-family: 'task-runner';
- src:url('../fonts/task-runner.eot?zhu4hz');
- src:url('../fonts/task-runner.eot?#iefixzhu4hz') format('embedded-opentype'),
- url('../fonts/task-runner.woff?zhu4hz') format('woff'),
- url('../fonts/task-runner.ttf?zhu4hz') format('truetype'),
- url('../fonts/task-runner.svg?zhu4hz#task-runner') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-
-[class^="icon-"], [class*=" icon-"] {
- font-family: 'task-runner';
- speak: none;
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-transform: none;
- line-height: 1;
-
- /* Better Font Rendering =========== */
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-left:before {
- content: "\e602";
-}
-.icon-remove:before {
- content: "\e603";
-}
-.icon-right:before {
- content: "\e604";
-}
-.icon-run:before {
- content: "\e605";
-}
-.icon-stop:before {
- content: "\e606";
-}
-.icon-terminal:before {
- content: "\e607";
-}
-.icon-uniE600:before {
- content: "\e600";
-}
diff --git a/src/less/tasks/terminal.less b/src/less/tasks/terminal.less
deleted file mode 100644
index c1ccf79..0000000
--- a/src/less/tasks/terminal.less
+++ /dev/null
@@ -1,24 +0,0 @@
-.tasks-terminal {
- -webkit-user-select: all;
- user-select: all;
- background:#363842;
- ::-webkit-scrollbar-track {
- background:#363842;
- }
- pre {
- font-family: Menlo, Monaco, Consolas, "Lucida Console", "Courier New", "Microsoft Yahei", monospace;
- font-size: 12px;
- line-height: 1.4em;
- top:40px;
- bottom:0;
- width: 100%;
- position: fixed;
- overflow: hidden;
- overflow-y: auto;
- padding: 10px;
- box-sizing: border-box;
- background: #363842;
- color: #93A1A1;
- border:0;
- }
-}
diff --git a/src/main/index.js b/src/main/index.js
new file mode 100644
index 0000000..df3acb0
--- /dev/null
+++ b/src/main/index.js
@@ -0,0 +1,112 @@
+'use strict';
+
+import { app, protocol, BrowserWindow, Menu, MenuItem, ipcMain } from 'electron';
+import { createProtocol } from 'vue-cli-plugin-electron-builder/lib';
+import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer';
+import { studio } from './studio';
+import { template, captionStudioTemplate } from './studio/menus/AppMenuTemplate';
+
+const isDevelopment = process.env.NODE_ENV !== 'production';
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let win;
+
+// Scheme must be registered before the app is ready
+protocol.registerSchemesAsPrivileged([
+ { scheme: 'app', privileges: { secure: true, standard: true } }
+]);
+
+// Create menus from templates
+const menu = Menu.buildFromTemplate(template);
+const captionStudioMenu = Menu.buildFromTemplate(captionStudioTemplate);
+Menu.setApplicationMenu(menu);
+
+//on caption studio open or close, set the appropriate menu
+ipcMain.on('captionStudio', (event, page) => {
+ Menu.setApplicationMenu(page ? captionStudioMenu : menu);
+});
+
+/**
+ * Creates electron window
+ */
+function createWindow() {
+ // Create the browser window.
+ win = new BrowserWindow({
+ width: 2048,
+ height: 968,
+ webPreferences: {
+ // Use pluginOptions.nodeIntegration, leave this alone
+ // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
+ nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
+ webviewTag: true,
+ webSecurity: false
+ }
+ });
+
+ // Initialize SpringRoll Studio.
+ studio.initialize(win);
+
+ if (process.env.WEBPACK_DEV_SERVER_URL) {
+ // Load the url of the dev server if in development mode
+ win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
+ if (!process.env.IS_TEST) {
+ win.webContents.openDevTools();
+ }
+ } else {
+ createProtocol('app');
+ // Load the index.html when not in development
+ win.loadURL('app://./index.html');
+ }
+
+ win.on('closed', () => {
+ win = null;
+ });
+}
+
+// Quit when all windows are closed.
+app.on('window-all-closed', () => {
+ // On macOS it is common for applications and their menu bar
+ // to stay active until the user quits explicitly with Cmd + Q
+ if (process.platform !== 'darwin') {
+ app.quit();
+ }
+});
+
+app.on('activate', () => {
+ // On macOS it's common to re-create a window in the app when the
+ // dock icon is clicked and there are no other windows open.
+ if (win === null) {
+ createWindow();
+ }
+});
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', async () => {
+ if (isDevelopment && !process.env.IS_TEST) {
+ // Install Vue Devtools
+ try {
+ await installExtension(VUEJS_DEVTOOLS);
+ } catch (e) {
+ console.error('Vue Devtools failed to install:', e.toString());
+ }
+ }
+ createWindow();
+});
+
+// Exit cleanly on request from parent process in development mode.
+if (isDevelopment) {
+ if (process.platform === 'win32') {
+ process.on('message', (data) => {
+ if (data === 'graceful-exit') {
+ app.quit();
+ }
+ });
+ } else {
+ process.on('SIGTERM', () => {
+ app.quit();
+ });
+ }
+}
diff --git a/src/main/studio/index.js b/src/main/studio/index.js
new file mode 100644
index 0000000..0495174
--- /dev/null
+++ b/src/main/studio/index.js
@@ -0,0 +1,158 @@
+import { join } from 'path';
+import { ipcMain, dialog, BrowserWindow } from 'electron';
+import { EVENTS, DIALOGS } from '../../constants';
+import { projectInfo, gamePreview, captionInfo } from './storage';
+
+import ProjectTemplateCreator from './managers/ProjectTemplateCreator';
+import { existsSync } from 'fs';
+
+/**
+ * Main application Singleton. This object is responsible for setting up logic specific to SpringRoll Studio.
+ * @class SpringRollStudio
+ */
+class SpringRollStudio {
+ /**
+ * Initialize SpringRoll Studio.
+ * @memberof SpringRollStudio
+ */
+ initialize(window) {
+ /** @type {BrowserWindow} */
+ this.window = window;
+
+ this.templateCreator = new ProjectTemplateCreator(this);
+ this.templateCreator.logger = this.templateCreationLogger.bind(this);
+
+ this.setupListeners();
+ }
+
+ /**
+ * Wire up all studio level event listeners.
+ * @memberof SpringRollStudio
+ */
+ setupListeners() {
+ ipcMain.on(EVENTS.OPEN_DIALOG, this.openDialog.bind(this));
+ ipcMain.on(EVENTS.CREATE_PROJECT_TEMPLATE, this.createProjectTemplate.bind(this));
+ ipcMain.on(EVENTS.OPEN_CAPTION_STUDIO, this.openCaptionStudio.bind(this));
+ ipcMain.on(EVENTS.PREVIEW_TARGET_SET, this.previewTargetSet.bind(this));
+ }
+
+ /**
+ * Handler for the EVENTS.OPEN_DIALOG event.
+ * @param {string} type
+ * @memberof SpringRollStudio
+ * @private
+ */
+ openDialog(event, type) {
+ if (typeof type !== 'string') {
+ throw new Error(`[Studio] Invalid dialog type. Expected string. [type = ${typeof type}]`);
+ }
+
+ switch (type) {
+ case DIALOGS.PROJECT_LOCATION_SETTER:
+ const options = {
+ title: 'Select SpringRoll Project',
+ defaultPath: projectInfo.location,
+ properties: ['openDirectory']
+ };
+
+ const paths = dialog.showOpenDialogSync(this.window, options);
+ if (paths !== undefined) {
+ projectInfo.location = paths[0];
+ captionInfo.audioLocation = paths[0]; //when the project location changes also change the default audio files directory
+ captionInfo.captionLocation = '';
+ }
+ break;
+
+ case DIALOGS.AUDIO_LOCATION_SETTER:
+ const audio_options = {
+ title: 'Select SpringRoll Project Audio Files Location',
+ defaultPath: captionInfo.aduioLocation,
+ properties: ['openDirectory']
+ };
+
+ const audio_paths = dialog.showOpenDialogSync(this.window, audio_options);
+ if (audio_paths !== undefined) {
+ captionInfo.audioLocation = audio_paths[0];
+ this.window.webContents.send(EVENTS.UPDATE_AUDIO_LOCATION);
+ }
+ break;
+
+ default:
+ throw new Error(`[Studio] Unrecognized dialog type. [type = ${type}]`);
+ }
+ }
+
+ /**
+ * Handler for EVENTS.CREATE_PROJECT_TEMPLATE event.
+ * @memberof SpringRollStudio
+ */
+ async createProjectTemplate(event, data) {
+ const result = await this.templateCreator.create(data.type, data.location);
+ if (!result || result.err) {
+ let msg = `Could not create ${data.type} template at ${data.location}`;
+ if (result && result.err) {
+ msg = result.err;
+ }
+ dialog.showErrorBox('Failed to create template', msg);
+ }
+ else if (result.success) {
+ projectInfo.location = data.location;
+ captionInfo.audioLocation = data.location;
+ }
+ this.window.webContents.send(EVENTS.PROJECT_CREATION_COMPLETE, result && !!result.success);
+ }
+
+ /**
+ * Handler for EVENTS.OPEN_CAPTION_STUDIO event.
+ * @memberof SpringRollStudio
+ */
+ openCaptionStudio() {
+ this.window.webContents.send(EVENTS.NAVIGATE, 'caption-studio');
+ }
+
+ /**
+ *Handler for the EVENTS.PREVIEW_TARGET_SET event.
+ * @memberof SpringRollStudio
+ */
+ previewTargetSet(event, data) {
+ gamePreview.previewTarget = data.type;
+
+ switch (data.type) {
+ case 'deploy':
+ const deployPath = join(projectInfo.location, 'deploy');
+ // Make sure the deploy folder exists because attempting to host it.
+ if (!existsSync(deployPath)) {
+ dialog.showErrorBox(
+ 'Deploy folder not found.',
+ `Could not find a deploy folder in:\n${projectInfo.location}`
+ );
+ return;
+ }
+ gamePreview.previewURL = `file://${deployPath}`;
+ break;
+
+ case 'url':
+ if (data.url.indexOf('http:') === -1 && data.url.indexOf('https:') === -1) {
+ data.url = `http://${data.url}`;
+ }
+ gamePreview.previewURL = data.url;
+ break;
+ }
+
+ this.window.webContents.send(EVENTS.NAVIGATE, 'preview');
+ }
+
+ /**
+ *
+ * @param {string} log
+ * @memberof SpringRollStudio
+ */
+ templateCreationLogger(log) {
+ this.window.webContents.send(EVENTS.UPDATE_TEMPLATE_CREATION_LOG, log);
+ }
+}
+
+/**
+ * Export the singleton instance of SpringRoll Studio.
+ */
+export const studio = new SpringRollStudio();
\ No newline at end of file
diff --git a/src/main/studio/managers/ProjectTemplateCreator.js b/src/main/studio/managers/ProjectTemplateCreator.js
new file mode 100644
index 0000000..f8265da
--- /dev/null
+++ b/src/main/studio/managers/ProjectTemplateCreator.js
@@ -0,0 +1,238 @@
+import * as fs from 'fs';
+import { TEMPLATES } from '../../../constants';
+import { join } from 'path';
+import { app, net } from 'electron';
+import DecompressZip from 'decompress-zip';
+import ncp from 'ncp';
+import { promisify } from 'util';
+import rimraf from 'rimraf';
+
+/**
+ *
+ * @class ProjectTemplateCreator
+ */
+export default class ProjectTemplateCreator {
+ /**
+ * Creates an instance of ProjectTemplateCreator.
+ * @param {string} studio
+ * @memberof ProjectTemplateCreator
+ */
+ constructor(studio) {
+ this.studio = studio;
+ this.tempDir = join(app.getPath('userData'), 'tmp/');
+ }
+
+ /**
+ *
+ * @param {string[]} msg
+ * @memberof ProjectTemplateCreator
+ */
+ log(...msg) {
+ if (this.logger) {
+ this.logger(msg.join(' '));
+ }
+ else {
+ console.log(msg.join(' '));
+ }
+ }
+
+ /**
+ *
+ * @param {*} location
+ * @memberof ProjectTemplateCreator
+ */
+ isLocationEmpty(location) {
+ if (!fs.existsSync(location)) {
+ return true;
+ }
+ try {
+ const files = fs.readdirSync(location);
+ return files.length === 0;
+ }
+ catch (e) {
+ return false;
+ }
+ }
+
+ /**
+ *
+ * @param {string} type
+ * @param {string} location
+ * @returns
+ * @memberof ProjectTemplateCreator
+ */
+ create(type, location) {
+ return new Promise((resolve, reject) => {
+ if (!this.isLocationEmpty(location)) {
+ return reject({ err: 'New project location must be empty.' });
+ }
+ this.log(`Beginning ${type} template project creation:`);
+ this.log('Attempting to reach https://github.com.');
+
+ const request = net.request('https://github.com');
+ request.on('response', () => {
+ this.createFrom('github', type, location)
+ .then(resolve)
+ .catch((err) => {
+ if (err && err.err) {
+ this.log(err.err);
+ }
+ this.log('Failed to create project from GitHub. Falling back to local template archives.');
+ this.createFrom('file', type, location)
+ .then(resolve)
+ .catch(reject);
+ });
+ });
+ request.on('error', () => {
+ this.log('Could not reach https://github.com. Falling back to local template archives.');
+ this.createFrom('file', type, location)
+ .then(resolve)
+ .catch(reject);
+ });
+ request.end();
+ });
+ }
+
+ /**
+ *
+ * @param {string} from
+ * @param {string} type
+ * @param {string} location
+ * @memberof ProjectTemplateCreator
+ */
+ async createFrom(from, type, location) {
+ const path = await this.getTemplateZip(from, type);
+ try {
+ await this.extractTemplateFiles(path);
+ return await this.copyTemplateFilesTo(location);
+ }
+ catch (err) {
+ this.log('Failed to create new template project.');
+ return { err };
+ }
+ }
+
+ /**
+ *
+ * @param {string} from
+ * @param {string} type
+ * @memberof ProjectTemplateCreator
+ */
+ async getTemplateZip(from, type) {
+ const url = TEMPLATES[from][type];
+ switch (from) {
+ case 'github':
+ return await this.downloadTemplateZip(url, type);
+
+ case 'file':
+ if (process.env.NODE_ENV === 'production') {
+ return join(process.resourcesPath, url);
+ }
+ return join(__dirname, '../', url);
+ }
+ }
+
+ /**
+ *
+ * @param {string} url
+ * @returns
+ * @memberof ProjectTemplateCreator
+ */
+ downloadTemplateZip(url, type) {
+ this.log(`Downloading ${type} template files from ${url}`);
+
+ return new Promise(resolve => {
+ const session = this.studio.window.webContents.session;
+
+ const willDownload = (event, item, webContents) => {
+ const path = join(this.tempDir, 'template.zip');
+ item.setSavePath(path);
+
+ item.once('done', (event, state) => {
+ session.off('will-download', willDownload);
+
+ if (state === 'completed') {
+ this.log('Download complete successful.');
+
+ resolve(path);
+ }
+ else {
+ this.log('Failed to download template file from GitHub. Falling back to local archives.');
+
+ // If download fails, fallback to the local archive.
+ resolve(this.getTemplateZip('file', type));
+ }
+ });
+ };
+ session.on('will-download', willDownload);
+
+ session.downloadURL(url);
+ });
+ }
+
+ /**
+ *
+ * @param {string} source
+ * @returns
+ * @memberof ProjectTemplateCreator
+ */
+ extractTemplateFiles(source) {
+ return new Promise((resolve, reject) => {
+ const unzipper = new DecompressZip(source);
+ const extractLocation = join(this.tempDir, 'decompressed');
+
+ unzipper.on('error', (log) => {
+ this.log('Failed to extract template files.');
+
+ reject('Failed to extract template.');
+ });
+ unzipper.on('progress', (fileIndex, fileCount) => {
+ this.log(`Extracting progress: ${Math.ceil(((fileIndex + 1) / fileCount) * 100)}%`);
+ });
+ unzipper.on('extract', (log) => {
+ this.log('Extracting complete');
+
+ resolve();
+ });
+
+ this.log(`Extracting template files to ${extractLocation}`);
+
+ unzipper.extract({ path: extractLocation });
+ });
+ }
+
+ /**
+ *
+ * @param {string} location
+ * @memberof ProjectTemplateCreator
+ */
+ async copyTemplateFilesTo(location) {
+ const decompressed = join(this.tempDir, 'decompressed');
+
+ try {
+ const readDir = promisify(fs.readdir);
+ const files = await readDir(decompressed);
+
+ const path = join(decompressed, files[0]);
+
+ this.log(`Copying template files to ${location}`);
+
+ const copy = promisify(ncp);
+ await copy(path, location);
+
+ this.log('Cleaning up temp folder.');
+
+ const remove = promisify(rimraf);
+ await remove(this.tempDir);
+
+ this.log('Project creation complete.');
+
+ return { success: true };
+ }
+ catch (err) {
+ this.log('Failed to copy template files.');
+
+ return { err };
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/main/studio/menus/AppMenuTemplate.js b/src/main/studio/menus/AppMenuTemplate.js
new file mode 100644
index 0000000..02a9b4b
--- /dev/null
+++ b/src/main/studio/menus/AppMenuTemplate.js
@@ -0,0 +1,340 @@
+import { app } from 'electron';
+import { EVENTS } from '../../../constants';
+
+const isMac = process.platform === 'darwin';
+
+
+export const template = [
+ // { role: 'appMenu' }
+ ...(isMac ? [{
+ label: app.name,
+ submenu: [
+ { role: 'about' },
+ { type: 'separator' },
+ { role: 'hide' },
+ { role: 'hideothers' },
+ { role: 'unhide' },
+ { type: 'separator' },
+ { role: 'quit' }
+ ]
+ }] : []),
+ // { role: 'fileMenu' }
+ {
+ label: 'File',
+ submenu: [
+ {
+ label: 'Open...',
+ accelerator: isMac ? 'Cmd+O' : 'Cntrl+O',
+ click: async () => {
+ const { dialog, BrowserWindow } = require('electron');
+ const { projectInfo, captionInfo } = require('../storage');
+ const options = {
+ title: 'Select SpringRoll Project',
+ defaultPath: projectInfo.location,
+ properties: ['openDirectory']
+ };
+
+ const paths = dialog.showOpenDialogSync(BrowserWindow.getFocusedWindow(), options);
+ if (paths !== undefined) {
+ projectInfo.location = paths[0];
+ captionInfo.audioLocation = paths[0]; //when the project location changes also change the default audio files directory
+ }
+ }
+ },
+ {
+ label: 'New Project',
+ accelerator: isMac ? 'Cmd+N' : 'Cntrl+N',
+ click: async () => {
+ const { BrowserWindow } = require('electron');
+ BrowserWindow.getFocusedWindow().webContents.send(EVENTS.OPEN_TEMPLATE_DIALOG, true);
+ }
+ },
+ { type: 'separator' },
+ {
+ label: 'Choose Audio Directory',
+ click: async () => {
+ const { dialog, BrowserWindow } = require('electron');
+ const { captionInfo } = require('../storage');
+ const audio_options = {
+ title: 'Select SpringRoll Project Audio Files Location',
+ defaultPath: captionInfo.audioLocation,
+ properties: ['openDirectory']
+ };
+ const window = BrowserWindow.getFocusedWindow();
+ const audio_paths = dialog.showOpenDialogSync(window, audio_options);
+ if (audio_paths !== undefined) {
+ captionInfo.audioLocation = audio_paths[0];
+ window.webContents.send(EVENTS.UPDATE_AUDIO_LOCATION);
+ }
+ }
+ },
+ { type: 'separator' },
+ isMac ? { role: 'close' } : { role: 'quit' }
+ ]
+ },
+ // { role: 'editMenu' }
+ {
+ label: 'Edit',
+ submenu: [
+ { role: 'undo' },
+ { role: 'redo' },
+ { type: 'separator' },
+ { role: 'cut' },
+ { role: 'copy' },
+ { role: 'paste' },
+ ...(isMac ? [
+ { role: 'pasteAndMatchStyle' },
+ { role: 'delete' },
+ { role: 'selectAll' },
+ { type: 'separator' },
+ {
+ label: 'Speech',
+ submenu: [
+ { role: 'startSpeaking' },
+ { role: 'stopSpeaking' }
+ ]
+ }
+ ] : [
+ { role: 'delete' },
+ { type: 'separator' },
+ { role: 'selectAll' }
+ ])
+ ]
+ },
+ // { role: 'viewMenu' }
+ {
+ label: 'View',
+ submenu: [
+ { role: 'reload' },
+ { role: 'forceReload' },
+ { role: 'toggleDevTools' },
+ { type: 'separator' },
+ {
+ label: 'Preview Game',
+ accelerator: isMac ? 'Alt+Cmd+P' : 'Alt+Shift+P',
+ },
+ {
+ label: 'Caption Studio',
+ accelerator: isMac ? 'Alt+Cmd+C' : 'Alt+Shift+C',
+ },
+ { type: 'separator' },
+ { role: 'togglefullscreen' }
+ ]
+ },
+ // { role: 'windowMenu' }
+ {
+ label: 'Window',
+ submenu: [
+ { role: 'minimize' },
+ { role: 'zoom' },
+ ...(isMac ? [
+ { type: 'separator' },
+ { role: 'front' },
+ { type: 'separator' },
+ { role: 'window' }
+ ] : [
+ { role: 'close' }
+ ])
+ ]
+ },
+];
+
+/**
+ * Menu structure used in CaptionStudio page
+ */
+export const captionStudioTemplate = [
+ // { role: 'appMenu' }
+ ...(isMac ? [{
+ label: app.name,
+ submenu: [
+ { role: 'about' },
+ { type: 'separator' },
+ { role: 'services' },
+ { type: 'separator' },
+ { role: 'hide' },
+ { role: 'hideothers' },
+ { role: 'unhide' },
+ { type: 'separator' },
+ { role: 'quit' }
+ ]
+ }] : []),
+ // { role: 'fileMenu' }
+ {
+ label: 'File',
+ submenu: [
+ {
+ label: 'Choose Audio Directory',
+ click: async () => {
+ const { dialog, BrowserWindow } = require('electron');
+ const { captionInfo } = require('../storage');
+ const audio_options = {
+ title: 'Select SpringRoll Project Audio Files Location',
+ defaultPath: captionInfo.audioLocation,
+ properties: ['openDirectory']
+ };
+ const window = BrowserWindow.getFocusedWindow();
+ const audio_paths = dialog.showOpenDialogSync(window, audio_options);
+ if (audio_paths !== undefined) {
+ captionInfo.audioLocation = audio_paths[0];
+ window.webContents.send(EVENTS.UPDATE_AUDIO_LOCATION);
+ }
+ }
+ },
+ { type: 'separator' },
+ isMac ? { role: 'close' } : { role: 'quit' }
+
+ ]
+ },
+ // { role: 'editMenu' }
+ {
+ label: 'Edit',
+ submenu: [
+ { role: 'undo' },
+ { role: 'redo' },
+ { type: 'separator' },
+ { role: 'cut' },
+ { role: 'copy' },
+ { role: 'paste' },
+ ...(isMac ? [
+ { role: 'pasteAndMatchStyle' },
+ { role: 'delete' },
+ { role: 'selectAll' },
+ { type: 'separator' },
+ {
+ label: 'Speech',
+ submenu: [
+ { role: 'startSpeaking' },
+ { role: 'stopSpeaking' }
+ ]
+ }
+ ] : [
+ { role: 'delete' },
+ { type: 'separator' },
+ { role: 'selectAll' }
+ ])
+ ]
+ },
+ // { role: 'viewMenu' }
+ {
+ label: 'View',
+ submenu: [
+ { role: 'reload' },
+ { role: 'forceReload' },
+ { role: 'toggleDevTools' },
+ { type: 'separator' },
+ { role: 'resetZoom' },
+ { role: 'zoomIn' },
+ { role: 'zoomOut' },
+ { type: 'separator' },
+ { role: 'togglefullscreen' }
+ ]
+ },
+ // { role: 'windowMenu' }
+ {
+ label: 'Window',
+ submenu: [
+ { role: 'minimize' },
+ { role: 'zoom' },
+ ...(isMac ? [
+ { type: 'separator' },
+ { role: 'front' },
+ { type: 'separator' },
+ { role: 'window' }
+ ] : [
+ { role: 'close' }
+ ])
+ ]
+ },
+ {
+ label: 'Caption Studio',
+ submenu: [
+ {
+ label: 'Save Captions',
+ accelerator: process.platform === 'darwin' ? 'Cmd+S' : 'Cntrl+S',
+ click: async () => {
+ const { dialog, BrowserWindow } = require('electron');
+ const { captionInfo } = require('../storage');
+
+ const window = BrowserWindow.getFocusedWindow();
+
+ if (captionInfo.captionLocation) {
+ window.webContents.send(EVENTS.SAVE_CAPTION_DATA);
+
+ } else {
+ const options = {
+ title: 'Save As',
+ defaultPath: captionInfo.audioLocation + '/captions.json',
+ properties: ['createDirectory'],
+ filters: [
+ {name: 'JSON', extensions: ['json']}
+ ]
+ };
+
+ dialog.showSaveDialog(window, options).then(({ canceled, filePath }) => {
+ if (filePath !== undefined && !canceled) {
+ captionInfo.captionLocation = filePath;
+ window.webContents.send(EVENTS.SAVE_CAPTION_DATA, filePath);
+ }
+ });
+ }
+ }
+ },
+ {
+ label: 'Save Captions As...',
+ accelerator: process.platform === 'darwin' ? 'Cmd+Shift+S' : 'Cntrl+Shift+S',
+ click: async () => {
+ const { dialog, BrowserWindow } = require('electron');
+ const { captionInfo } = require('../storage');
+ const options = {
+ title: 'Save As',
+ defaultPath: captionInfo.captionLocation,
+ properties: ['createDirectory'],
+ filters: [
+ {name: 'JSON', extensions: ['json']}
+ ]
+ };
+ const window = BrowserWindow.getFocusedWindow();
+
+ dialog.showSaveDialog(window, options).then(({ canceled, filePath }) => {
+ if (filePath !== undefined && !canceled) {
+ captionInfo.captionLocation = filePath;
+ window.webContents.send(EVENTS.SAVE_CAPTION_DATA, filePath);
+ }
+ });
+ }
+ },
+ {
+ label: 'Open Caption File',
+ accelerator: isMac ? 'Cmd+O' : 'Cntrl+O',
+ click: async () => {
+ const { dialog, BrowserWindow } = require('electron');
+ const { captionInfo } = require('../storage');
+
+ const window = BrowserWindow.getFocusedWindow();
+ const options = {
+ title: 'Open Caption File',
+ defaultPath: captionInfo.captionLocation,
+ properties: ['openFile'],
+ filters: [
+ { name: 'JSON', extensions: [ 'json' ] }
+ ]
+ };
+ const caption_path = dialog.showOpenDialogSync(window, options);
+ if (caption_path !== undefined) {
+ captionInfo.captionLocation = caption_path[0];
+ window.webContents.send(EVENTS.OPEN_CAPTION_FILE, caption_path[0]);
+ }
+ }
+ },
+ { type: 'separator' },
+ {
+ label: 'Clear Captions',
+ click: () => {
+ const BrowserWindow = require('electron');
+ BrowserWindow.webContents.getFocusedWebContents().send(EVENTS.CLEAR_CAPTION_DATA);
+ }
+ },
+ ]
+ },
+];
+
diff --git a/src/main/studio/storage/CaptionInfo.js b/src/main/studio/storage/CaptionInfo.js
new file mode 100644
index 0000000..f75951a
--- /dev/null
+++ b/src/main/studio/storage/CaptionInfo.js
@@ -0,0 +1,62 @@
+import store from '../../../renderer/store';
+
+/**
+ * Proxy for accessing CaptionInfo store data. This will allow us to avoid
+ * importing and typing 'store.state.captionInfo'
+ * @class CaptionInfo
+ */
+class CaptionInfo {
+ /**
+ * Returns the audio files location path from the store.
+ * @readonly
+ * @memberof CaptionInfo
+ */
+ get audioLocation() { return store.state.captionInfo.audioLocation; }
+ /**
+ * Sets the value of the audio files location in the store.
+ * @memberof CaptionInfo
+ */
+ set audioLocation(val) {
+ if (typeof val !== 'string') {
+ throw new Error(`[CaptionInfo] Audio directory location must be a string. [val = ${typeof val}]`);
+ }
+ store.dispatch('setAudioLocation', { audioLocation: val });
+ }
+ /**
+ * Returns the caption file location path from the store.
+ * @readonly
+ * @memberof CaptionInfo
+ */
+ get captionLocation() { return store.state.captionInfo.captionLocation; }
+ /**
+ * Sets the value of the caption file location in the store.
+ * @memberof CaptionInfo
+ */
+ set captionLocation(val) {
+ if (typeof val !== 'string') {
+ throw new Error(`[CaptionInfo] Caption file location must be a string. [val = ${typeof val}]`);
+ }
+ store.dispatch('setCaptionLocation', { captionLocation: val });
+ }
+ /**
+ * Returns whether or not there are unsaved changes in caption studio
+ * @readonly
+ * @memberof CaptionInfo
+ */
+ get isUnsavedChanges() { return store.state.captionInfo.isUnsavedChanges; }
+ /**
+ * Sets the value of isUnsavedChanges
+ * @memberof CaptionInfo
+ */
+ set isUnsavedChanges(val) {
+ if (typeof val !== 'boolean') {
+ throw new Error(`[CaptionInfo] Caption file location must be a boolean. [val = ${typeof val}]`);
+ }
+ store.dispatch('setIsUnsavedChanges', { isUnsavedChanges: val });
+ }
+}
+
+/**
+ * Singleton proxy for accessing project info from the store.
+ */
+export const captionInfo = new CaptionInfo();
\ No newline at end of file
diff --git a/src/main/studio/storage/GamePreview.js b/src/main/studio/storage/GamePreview.js
new file mode 100644
index 0000000..64d9dc7
--- /dev/null
+++ b/src/main/studio/storage/GamePreview.js
@@ -0,0 +1,45 @@
+import store from '../../../renderer/store';
+
+/**
+ *
+ * @class GamePreview
+ */
+class GamePreview {
+ /**
+ *
+ * @readonly
+ * @memberof GamePreview
+ */
+ get previewTarget() { return store.state.gamePreview.previewTarget; }
+ /**
+ *
+ * @memberof GamePreview
+ */
+ set previewTarget(val) {
+ if (typeof val !== 'string') {
+ throw new Error(`[GamePreview] Preview target must be a string. [val = ${typeof val}]`);
+ }
+ store.dispatch('setPreviewTarget', { previewTarget: val });
+ }
+
+ /**
+ *
+ * @memberof GamePreview
+ */
+ get previewURL() { return store.state.gamePreview.previewURL; }
+ /**
+ *
+ * @memberof GamePreview
+ */
+ set previewURL(val) {
+ if (typeof val !== 'string') {
+ throw new Error(`[GamePreview] Preview URL must be a string. [val = ${typeof val}]`);
+ }
+ store.dispatch('setPreviewURL', { previewURL: val });
+ }
+}
+
+/**
+ *
+ */
+export const gamePreview = new GamePreview();
\ No newline at end of file
diff --git a/src/main/studio/storage/ProjectInfo.js b/src/main/studio/storage/ProjectInfo.js
new file mode 100644
index 0000000..7fdef54
--- /dev/null
+++ b/src/main/studio/storage/ProjectInfo.js
@@ -0,0 +1,30 @@
+import store from '../../../renderer/store';
+
+/**
+ * Proxy for accessing ProjectInfo store data. This will allow us to avoid
+ * importing and typing 'store.state.projectInfo'
+ * @class ProjectInfo
+ */
+class ProjectInfo {
+ /**
+ * Returns the project location path from the store.
+ * @readonly
+ * @memberof ProjectInfo
+ */
+ get location() { return store.state.projectInfo.location; }
+ /**
+ * Sets the value of the project location in the store.
+ * @memberof ProjectInfo
+ */
+ set location(val) {
+ if (typeof val !== 'string') {
+ throw new Error(`[ProjectInfo] Project location must be a string. [val = ${typeof val}]`);
+ }
+ store.dispatch('setProjectLocation', { location: val });
+ }
+}
+
+/**
+ * Singleton proxy for accessing project info from the store.
+ */
+export const projectInfo = new ProjectInfo();
\ No newline at end of file
diff --git a/src/main/studio/storage/index.js b/src/main/studio/storage/index.js
new file mode 100644
index 0000000..c253222
--- /dev/null
+++ b/src/main/studio/storage/index.js
@@ -0,0 +1,3 @@
+export * from './ProjectInfo';
+export * from './GamePreview';
+export * from './CaptionInfo';
\ No newline at end of file
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
new file mode 100644
index 0000000..7815c55
--- /dev/null
+++ b/src/renderer/App.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/renderer/assets/fonts/Aleo-Regular.otf b/src/renderer/assets/fonts/Aleo-Regular.otf
new file mode 100755
index 0000000..2e2a075
Binary files /dev/null and b/src/renderer/assets/fonts/Aleo-Regular.otf differ
diff --git a/src/renderer/assets/fonts/Assistant/Assistant-Bold.ttf b/src/renderer/assets/fonts/Assistant/Assistant-Bold.ttf
new file mode 100755
index 0000000..5c6be08
Binary files /dev/null and b/src/renderer/assets/fonts/Assistant/Assistant-Bold.ttf differ
diff --git a/src/renderer/assets/fonts/Assistant/Assistant-ExtraBold.ttf b/src/renderer/assets/fonts/Assistant/Assistant-ExtraBold.ttf
new file mode 100755
index 0000000..9828b3f
Binary files /dev/null and b/src/renderer/assets/fonts/Assistant/Assistant-ExtraBold.ttf differ
diff --git a/src/renderer/assets/fonts/Assistant/Assistant-ExtraLight.ttf b/src/renderer/assets/fonts/Assistant/Assistant-ExtraLight.ttf
new file mode 100755
index 0000000..5cdcc6a
Binary files /dev/null and b/src/renderer/assets/fonts/Assistant/Assistant-ExtraLight.ttf differ
diff --git a/src/renderer/assets/fonts/Assistant/Assistant-Light.ttf b/src/renderer/assets/fonts/Assistant/Assistant-Light.ttf
new file mode 100755
index 0000000..bc5e307
Binary files /dev/null and b/src/renderer/assets/fonts/Assistant/Assistant-Light.ttf differ
diff --git a/src/renderer/assets/fonts/Assistant/Assistant-Regular.ttf b/src/renderer/assets/fonts/Assistant/Assistant-Regular.ttf
new file mode 100755
index 0000000..582d612
Binary files /dev/null and b/src/renderer/assets/fonts/Assistant/Assistant-Regular.ttf differ
diff --git a/src/renderer/assets/fonts/Assistant/Assistant-SemiBold.ttf b/src/renderer/assets/fonts/Assistant/Assistant-SemiBold.ttf
new file mode 100755
index 0000000..547df98
Binary files /dev/null and b/src/renderer/assets/fonts/Assistant/Assistant-SemiBold.ttf differ
diff --git a/src/renderer/assets/fonts/Assistant/OFL.txt b/src/renderer/assets/fonts/Assistant/OFL.txt
new file mode 100755
index 0000000..075d1ae
--- /dev/null
+++ b/src/renderer/assets/fonts/Assistant/OFL.txt
@@ -0,0 +1,91 @@
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/src/renderer/assets/img/256x256.png b/src/renderer/assets/img/256x256.png
new file mode 100644
index 0000000..2240e02
Binary files /dev/null and b/src/renderer/assets/img/256x256.png differ
diff --git a/src/renderer/assets/svg/wave1.svg b/src/renderer/assets/svg/wave1.svg
new file mode 100644
index 0000000..2b77ed1
--- /dev/null
+++ b/src/renderer/assets/svg/wave1.svg
@@ -0,0 +1,19 @@
+
+
+
+ Path 6
+ Created with Sketch.
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/renderer/assets/svg/wave2.svg b/src/renderer/assets/svg/wave2.svg
new file mode 100644
index 0000000..ec28555
--- /dev/null
+++ b/src/renderer/assets/svg/wave2.svg
@@ -0,0 +1,19 @@
+
+
+
+ Path 6
+ Created with Sketch.
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/renderer/class/Caption.js b/src/renderer/class/Caption.js
new file mode 100644
index 0000000..13152da
--- /dev/null
+++ b/src/renderer/class/Caption.js
@@ -0,0 +1,56 @@
+/**
+ * Object that represents a single files caption
+ *
+ * @export
+ * @property {number} end caption end time
+ * @property {number} start caption start time
+ * @property {string} content caption text as a string
+ * @param {string} name name of the file for this caption
+ * @param {Object} data the data relevant to this caption
+ * @param {string} data.content the html content of this caption
+ * @param {number} data.end when to stop playing the caption
+ * @param {number} data.start when to start playing the caption
+ * @class Caption
+ *
+ */
+export class Caption {
+ /**
+ *
+ * @param {*} name
+ * @param {*} param1
+ */
+ constructor(name, { content = ' ', end = 0, start = 0 } = {}) {
+ this.updateContent({ name, content, end, start });
+ }
+
+ /**
+ *
+ */
+ getData() {
+ const { content, start, end } = this;
+
+ return {
+ content,
+ end,
+ start
+ };
+ }
+ /**
+ *
+ * @param {*} param0
+ */
+ updateContent({
+ name = this.name,
+ content = this.content || ' ',
+ end = this.end || 0,
+ start = this.start || 0
+ } = {}) {
+ this.end = end;
+ this.name = name;
+ this.start = start;
+
+ this.content = content;
+
+ return this.getData();
+ }
+}
diff --git a/src/renderer/class/CaptionManager.js b/src/renderer/class/CaptionManager.js
new file mode 100644
index 0000000..0e332b2
--- /dev/null
+++ b/src/renderer/class/CaptionManager.js
@@ -0,0 +1,296 @@
+import { EventBus } from './EventBus';
+import store from '../store';
+
+/**
+ * Class that controls the creation, and management, of captions in the CaptionStudio Component.
+ * Acts as the state for the caption data. When a component updates a caption, changes the active caption, deletes a caption, changes files, etc. That
+ * choice is emitted to this class, which then emits an event to inform all affected components.
+ */
+class CaptionManager {
+ /**
+ *
+ */
+ constructor() {
+ this.data = {}; //All caption data, organized by file name.
+ this.activeCaption = undefined; //currently active caption name, created by stripping the file extension of the active file.
+ this.activeIndex = 0; //the index of the currently active caption.
+ this.file = {}; //Currently active file, selected in the FileDirectory component
+ this.currentTime = 0; //current time of the waveform component
+ EventBus.$on('caption_update', this.updateActiveCaption.bind(this));
+ EventBus.$on('caption_reset', this.reset.bind(this));
+ EventBus.$on('caption_add', this.addCaption.bind(this));
+ EventBus.$on('caption_add_index', this.addIndex.bind(this));
+ EventBus.$on('caption_get', this.emitData.bind(this));
+ EventBus.$on('file_selected', this.fileChanged.bind(this));
+ EventBus.$on('caption_move_index', this.moveIndex.bind(this));
+ EventBus.$on('caption_remove_index', this.removeAtIndex.bind(this));
+ EventBus.$on('caption_emit', this.emit.bind(this));
+ EventBus.$on('time_current', (e) => this.currentTime = e.time || 0);
+ EventBus.$on('json_update', this.onJSONUpdate.bind(this));
+ }
+
+ /**
+ *
+ * @param Object $event the object containing all data emitted by the origin
+ * @param String $origin String that contains the component origin. Used on some components to filter out their own updates.
+ *
+ * Function called when the user selects a new file in the FileDirectory. If no caption exits
+ * for that file, it creates a new Caption.
+ */
+ fileChanged($event, $origin = '') {
+
+ if (!$event.file) {
+ return;
+ }
+ const name = $event.file.name.replace(/.(ogg|mp3|mpeg)$/, '').trim();
+ if (!name || name === this.activeCaption) {
+ return;
+ }
+
+ this.file = $event.file;
+
+ if (!Array.isArray(this.data[name])) {
+ this.addCaption(name, $origin);
+ } else {
+ this.activeCaption = name;
+ this.activeIndex = 0;
+ this.emitCurrent($origin);
+ }
+ //used only when the JSON editor updates the selected file
+ EventBus.$emit('selected_file_updated');
+ }
+
+ /**
+ *
+ * @param Object $event the object containing all data emitted by the origin
+ * @param String $origin String that contains the component origin. Used on some components to filter out their own updates.
+ *
+ * Called when the JSON in the JsonPreview is edited directly. Since the Json editor only emits
+ * the entire JSON structure this method iterates over the entire JSON object and updates every
+ * Caption.
+ */
+ onJSONUpdate($event, $origin = '') {
+ if ($origin !== 'userOpen') {
+ store.dispatch('setIsUnsavedChanges', { isUnsavedChanges: true });
+ }
+
+ Object.keys($event).forEach((key) => {
+ $event[key].forEach((caption, index) => {
+
+ if (!this.data[key]) {
+ this.data[key] = [this.template];
+ }
+
+ const current = this.data[key];
+
+ this.data[key][index] = {
+ content: caption.content || current.content,
+ end: 'number' === typeof caption.end ? caption.end : current.end,
+ start: 'number' === typeof caption.start ? caption.start : current.start,
+ };
+ });
+ });
+
+ if ($origin === 'userOpen') {
+ this.emitOpenedJSON();
+ return;
+ }
+ this.currentCaptionIndex.edited = true;
+ this.emitCurrent($origin);
+ this.emitData($origin);
+ }
+ /**
+ *
+ * @param String key string that represents the curent active caption
+ * @param String $origin String that contains the component origin. Used on some components to filter out their own updates.
+ *
+ * Creates a new caption entry on the data object and updates the active caption and index to point
+ * at this new caption.
+ */
+ addCaption(key = this.activeCaption, $origin = '') {
+ if ('string' !== typeof key || !key) {
+ return;
+ }
+
+ this.data[key] = [this.template];
+
+ this.activeCaption = key;
+ this.activeIndex = 0;
+
+ this.emitCurrent($origin);
+ this.emitData($origin);
+ }
+
+ /**
+ * @param String $origin String that contains the component origin. Used on some components to filter out their own updates.
+ *
+ * Fired when the user hits the Add Caption Button in TextEditor. Moves the activeIndex forward,
+ * and creates a new empty caption. Also "saves" the previously active caption in the data object.
+ */
+ addIndex($origin = '') {
+ store.dispatch('setIsUnsavedChanges', { isUnsavedChanges: true });
+ this.data[this.activeCaption].push(this.template);
+ this.activeIndex++;
+ EventBus.$emit('file_captioned', { name: this.file.name, isCaptioned: true });
+ this.emitCurrent($origin);
+ this.emitData($origin);
+ }
+
+ /**
+ * @param String $origin String that contains the component origin. Used on some components to filter out their own updates.
+ *
+ * Called whenever the TextEditor component updates the content, or start/end times of the caption.
+ * simply upates the currently active caption with whatever new data is provided.
+ */
+ updateActiveCaption({ content, start, end }, $origin = '') {
+ store.dispatch('setIsUnsavedChanges', { isUnsavedChanges: true });
+ const current = this.currentCaptionIndex;
+
+ this.data[this.activeCaption][this.activeIndex] = {
+ content: content || current.content,
+ end: 'number' === typeof end ? end : current.end,
+ start: 'number' === typeof start ? start : current.start,
+ edited: true,
+ };
+
+ this.emitCurrent($origin);
+ }
+
+ /**
+ * Removes all captions from the data object and resets the active caption back to it's initial state.
+ */
+ reset() {
+ store.dispatch('setIsUnsavedChanges', { isUnsavedChanges: true });
+ this.data = {};
+ this.activeIndex = 0;
+ this.activeCaption = '';
+ }
+
+ /**
+ *
+ * @param Number $event Represents how far to move the index that points at the active caption.
+ * @param String $origin String that contains the component origin. Used on some components to filter out their own updates.
+ *
+ * Fired whenever a component needs to update the index that points to the active caption.
+ */
+ moveIndex( $event, $origin = '') {
+ if ('number' === typeof $event) {
+ const newIndex = this.activeIndex + $event;
+ if (0 > newIndex) {
+ this.activeIndex = 0;
+ } else if (newIndex > this.lastIndex) {
+ this.activeIndex = this.lastIndex;
+ } else {
+ this.activeIndex = newIndex;
+ }
+ this.emitCurrent($origin);
+ }
+ }
+
+ /**
+ *
+ * @param Number $event the index of the caption to be removed
+ * @param String $origin String that contains the component origin. Used on some components to filter out their own updates.
+ *
+ * Used to delete a single caption. Uses the index to look up which caption should be removed. Almost always will be the current caption.
+ */
+ removeAtIndex($origin = '') {
+ store.dispatch('setIsUnsavedChanges', { isUnsavedChanges: true });
+ if ('undefined' === typeof this.currentCaption[this.activeIndex]) {
+ return;
+ }
+
+ this.currentCaption.splice(this.activeIndex, 1);
+
+ if (0 < this.activeIndex) {
+ this.activeIndex--;
+ }
+ EventBus.$emit('file_captioned', { name: this.file.name, isCaptioned: !!(this.currentCaption.length > 1) });
+
+ this.emitCurrent($origin);
+ this.emitData($origin);
+ }
+
+ /**
+ * Emits the currently active caption data along with index, and file name information.
+ * This is used to replicate caption updates, and a change of active caption across all components.
+ */
+ emitCurrent($origin = '') {
+ EventBus.$emit('caption_changed', {
+ data: this.currentCaptionIndex,
+ file: this.file,
+ index: this.activeIndex,
+ lastIndex: this.lastIndex,
+ name: this.activeCaption,
+ time: this.currentTime,
+ }, $origin);
+ }
+
+ /**
+ * Emits the entirety of the current data object, which contains all caption files, and associated captions.
+ */
+ emitData( $origin = '' ) {
+ EventBus.$emit('caption_data', this.data, $origin);
+ }
+ /**
+ * Emits the entirety of the current data object, which contains all caption files, and associated captions.
+ */
+ emitOpenedJSON( $origin = '' ) {
+ EventBus.$emit('caption_data_opened', this.data, $origin);
+ }
+
+ /**
+ * Combines emitCurrent and emitData, as well as emitting the file_selected event.
+ * Used for the mounted hook of the CaptionStudio
+ */
+ emit() {
+ this.emitCurrent();
+ this.emitData();
+ EventBus.$emit('file_selected', { file: this.file });
+ }
+ /**
+ *
+ */
+ get lastIndex() {
+ return this.currentCaption?.length - 1 || 0;
+ }
+
+ /**
+ *
+ */
+ get currentCaption() {
+ return this.data[this.activeCaption];
+ }
+
+ /**
+ *
+ */
+ get currentCaptionIndex() {
+ if (this.data[this.activeCaption]) {
+ return this.data[this.activeCaption][this.activeIndex];
+ }
+ }
+
+ /**
+ *
+ */
+ set currentCaption(newArray) {
+ if (Array.isArray(newArray)) {
+ this.data[this.activeCaption] = newArray;
+ }
+ }
+
+ /**
+ *
+ */
+ get template() {
+ return {
+ start: 0,
+ end: 0,
+ content: ' ',
+ edited: false
+ };
+ }
+}
+
+export default new CaptionManager();
\ No newline at end of file
diff --git a/src/renderer/class/Directory.js b/src/renderer/class/Directory.js
new file mode 100644
index 0000000..9abbb0f
--- /dev/null
+++ b/src/renderer/class/Directory.js
@@ -0,0 +1,175 @@
+import { sortBy } from 'lodash-es';
+/**
+ * @export
+ * @class Directory
+ * @property {File[]} files
+ * @property {string} name
+ * @property {Object} dir
+ * @property {number} selected
+ *
+ * @param {Object} options
+ * @param {string} options.name
+ * @param {File[]} options.files
+ * @param {Object} options.directories
+ */
+export default class Directory {
+ /**
+ * @constructor
+ * @param {Object} [options={}]
+ * @param {string} [options.name=''] name of the directory
+ * @param {Object[]} [options.files=[]] array of files to use rather than generating them
+ * @param {Object} [options.directories={}] already instantiated directories
+ */
+ constructor({ name = '', files = [], directories = {} } = {}) {
+ this.name = name;
+ this.files = files;
+ this.dir = directories;
+ this.selected = 0;
+
+ if (this.files.length) {
+ this.sortFilesAlphabetically();
+ }
+ }
+
+ /**
+ *
+ * Adds a file to the directory and will create nested directories to properly represent the files local path if required
+ * @param {File} file
+ * @memberof Directory
+ */
+ addFile(file) {
+ const pathArray = file.relativePath.split('/');
+
+ pathArray.length -= 1;
+
+ //If a singular file, or multiple files were uploaded rather than a directory set the directory name to /
+ if (pathArray.length <= 0) {
+ pathArray.push('/');
+ }
+ let currentDir = this;
+
+ for (let i = 0, l = pathArray.length; i < l; i++) {
+ let dir = currentDir[pathArray[i]];
+ if ('undefined' === typeof dir) {
+ currentDir.addDirectory(new Directory({ name: pathArray[i] }));
+ dir = currentDir.dir[pathArray[i]];
+ }
+
+ currentDir = dir;
+ }
+ currentDir.files.push(file);
+ currentDir.sortFilesAlphabetically();
+ }
+
+ /**
+ * Adds an already existing Directory instance to this directory as a nested directory. It will not add it if there is already a directory with the same name
+ * @param {Directory} dir
+ * @memberof Directory
+ */
+ addDirectory(dir) {
+ if (
+ !(dir instanceof Directory) ||
+ (dir instanceof Directory && 'undefined' !== typeof this.dir[dir.name])
+ ) {
+ return;
+ }
+
+ this.dir[dir.name] = dir;
+ }
+
+ /**
+ * Sorts files stored in this directory Alphabetically
+ * @memberof Directory
+ */
+ sortFilesAlphabetically() {
+ this.files = sortBy(this.files, (f) => f.name);
+ }
+
+ /**
+ *
+ * Sets the current pointer of this directory to the specified index if it exists in this directory and returns that file
+ * @param {number} index
+ * @returns {File}
+ * @memberof Directory
+ */
+ selectByIndex(index) {
+ if (-1 < index && index < this.files.length) {
+ this.selected = index;
+ }
+
+ return this.currentFile();
+ }
+
+ /**
+ * Sets the current pointer of this directory to the specified file if it exists in this directory and returns it
+ * @param {File} file
+ * @returns {File}
+ * @memberof Directory
+ */
+ selectByFile(file) {
+ const index = this.getFileIndex(file);
+
+ if (-1 === index) {
+ return;
+ }
+
+ this.selected = index;
+ return this.currentFile();
+ }
+
+ /**
+ * Returns the currently active file in the directory
+ * @returns {File}
+ * @memberof Directory
+ */
+ currentFile() {
+ return this.files[this.selected];
+ }
+
+ /**
+ * Moves the directory pointer by plus 1 and returns the file. If it can't move forward it will return the current file
+ * @returns {File}
+ * @memberof Directory
+ */
+ nextFile() {
+ const next = this.selected + 1;
+ const nextFile = this.files[next];
+
+ if ('undefined' === typeof nextFile) {
+ return null;
+ }
+
+ this.selected = next;
+ return this.currentFile();
+ }
+
+ /**
+ * Utility function to find the index of a file in the files array
+ * Use over indexOf as files can be re-uploaded and their object reference chanes
+ * @param {File} file
+ * @returns {number}
+ */
+ getFileIndex(file) {
+ for (let i = 0, l = this.files.length; i < l; i++) {
+ if (this.files[i].name === file.name) {
+ return i;
+ }
+ }
+ return -1;
+ }
+
+ /**
+ * Moves the directory pointer by minus 1 and returns the file. If it can't move back it will return the current file
+ * @returns {File}
+ * @memberof Directory
+ */
+ previousFile() {
+ if (0 >= this.selected) {
+ return this.files[this.selected];
+ }
+
+ this.selected -= 1;
+
+ return this.currentFile();
+ }
+}
diff --git a/src/renderer/class/EventBus.js b/src/renderer/class/EventBus.js
new file mode 100644
index 0000000..b2b50c9
--- /dev/null
+++ b/src/renderer/class/EventBus.js
@@ -0,0 +1,6 @@
+import Vue from 'vue';
+/**
+ *
+ */
+class EventBusManager extends Vue {}
+export const EventBus = new EventBusManager();
\ No newline at end of file
diff --git a/src/renderer/class/FileProcessor.js b/src/renderer/class/FileProcessor.js
new file mode 100644
index 0000000..346fb82
--- /dev/null
+++ b/src/renderer/class/FileProcessor.js
@@ -0,0 +1,130 @@
+import Directory from './Directory';
+import store from '../store/';
+import { EventBus } from '../class/EventBus';
+const fs = require('fs');
+const path = require('path');
+const FileType = require('file-type');
+
+/**
+ * @typedef FileProcessorOptions
+ * @property {RegExp} fileFilter
+ * @property {string} nameFilter
+ *
+ *
+ * @export
+ * @class FileProcessor
+ * @property {Directory} directory
+ * @property {RegExp} fileFilter
+ * @property {RegExp} nameFilter
+ * @param {FileList} files
+ * @param {FileProcessorOptions} options
+ */
+class FileProcessor {
+ /**
+ * @constructor
+ * @param {Object} options
+ * @param {RegExp} options.fileFilter
+ * @param {RegExp|string} options.nameFilter
+ */
+ constructor(
+ { fileFilter = /(audio\/(mp3|ogg|mpeg)|video\/ogg)$/, nameFilter = '' } = {}
+ ) {
+ this.clear();
+ this.fileFilter = fileFilter;
+ this.setNameFilter(nameFilter);
+ this.directory = new Directory();
+ this.hasFiles = false;
+ this.parentDirectoryName = store.state.captionInfo.audioLocation !== undefined ? path.basename(store.state.captionInfo.audioLocation) : '';
+ }
+
+ /**
+ * Processes a file list and returns a Directory containing all the files and nested directories to properly simulate the local directory
+ * @returns Promise
+ * @memberof FileProcessor
+ * @async
+ */
+ async generateDirectories() {
+ this.parentDirectoryName = store.state.captionInfo.audioLocation !== undefined ? path.basename(store.state.captionInfo.audioLocation) : '';
+
+ this.clear();
+
+ const files = await this.generateFileList(store.state.captionInfo.audioLocation);
+ EventBus.$emit('file_list_generated', files);
+
+ for (let i = 0, l = files.length; i < l; i++) {
+ if (
+ this.fileFilter.test(files[i].type.mime) &&
+ this.nameFilter.test(files[i].name)
+ ) {
+ this.directory.addFile(files[i]);
+ this.hasFiles = true;
+ }
+ }
+
+ return this.directory;
+ }
+
+ /**
+ * Grabs every file in the given directory path and formats it into an array of usable File-like objects
+ * @param {string} dirPath full path to directory
+ * @param {Object[]} [arrayOfFiles] array of prevoiously created file objects. Mostly used for recursive calls
+ * @returns Promise
+ * @memberof FileProcessor
+ * @async
+ */
+ async generateFileList(dirPath, arrayOfFiles = []) {
+ if (dirPath === undefined) {
+ return arrayOfFiles;
+ }
+ const fileList = fs.readdirSync(dirPath, { withFileTypes: true });
+
+ for (let i = 0, l = fileList.length; i < l; i++) {
+ if (fileList[i].isDirectory()) {
+ arrayOfFiles = await this.generateFileList(path.join(dirPath, fileList[i].name), arrayOfFiles);
+ } else {
+ const type = await FileType.fromFile(path.join(dirPath, fileList[i].name));
+ if (type) {
+ arrayOfFiles.push({
+ name: fileList[i].name,
+ fullPath: path.join(dirPath, fileList[i].name),
+ relativePath: path.join('' + this.parentDirectoryName, path.relative(store.state.captionInfo.audioLocation, path.join(dirPath, fileList[i].name))),
+ type,
+ });
+ }
+ }
+ }
+ return arrayOfFiles;
+ }
+
+
+ /**
+ * Clears the current Directory instance
+ * @memberof FileProcessor
+ */
+ clear() {
+ this.directory = new Directory();
+ this.hasFiles = false;
+ }
+
+ /**
+ * Updates the filter applied to file names
+ * @param {string} name
+ * @memberof FileProcessor
+ */
+ setNameFilter(name) {
+ if (!name.length) {
+ this.nameFilter = /^/g;
+ return;
+ }
+ this.nameFilter = new RegExp(`(${name})`, 'g');
+ }
+
+ /**
+ *
+ */
+ getDirectory() {
+ return this.directory;
+ }
+}
+
+export default new FileProcessor();
diff --git a/src/renderer/components/caption-studio/CaptionPreview.vue b/src/renderer/components/caption-studio/CaptionPreview.vue
new file mode 100644
index 0000000..4f6d48b
--- /dev/null
+++ b/src/renderer/components/caption-studio/CaptionPreview.vue
@@ -0,0 +1,183 @@
+
+
+
+
+
+
+ Previous
+
+
+ Next
+
+
+
+
+
+
+
+
+
diff --git a/src/renderer/components/caption-studio/FileDirectory.vue b/src/renderer/components/caption-studio/FileDirectory.vue
new file mode 100644
index 0000000..88a1cda
--- /dev/null
+++ b/src/renderer/components/caption-studio/FileDirectory.vue
@@ -0,0 +1,254 @@
+
+
+
+
+
+ {{ name }}
+
+
+
+
+ audiotrack
+ {{ value.file.name }}
+ done
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/renderer/components/caption-studio/FileExplorer.vue b/src/renderer/components/caption-studio/FileExplorer.vue
new file mode 100644
index 0000000..58e1f5a
--- /dev/null
+++ b/src/renderer/components/caption-studio/FileExplorer.vue
@@ -0,0 +1,283 @@
+
+
+
+ home
+
+
+
+
+ home
+
+
+
+
+
+ Save Changes
+
+
+ You have unsaved changes. Would you like to save?
+
+
+
+
+ Save
+
+
+ Don't Save
+
+
+ Cancel
+
+
+
+
+
+
+
+
+
+ Change Audio Directory
+
+
+
+
+
+
diff --git a/src/renderer/components/caption-studio/JsonPreview.vue b/src/renderer/components/caption-studio/JsonPreview.vue
new file mode 100644
index 0000000..df0a6ec
--- /dev/null
+++ b/src/renderer/components/caption-studio/JsonPreview.vue
@@ -0,0 +1,445 @@
+
+
+
+
+
+
+
+ Warning
+
+
+ There are errors in the caption JSON. It is recommended you correct those before saving, otherwise your changes to those specific captions will not be saved.
+
+
+
+ Cancel
+
+ Save
+
+
+
+
+
+
+ Clear
+
+
+
+
+ Warning
+
+
+ This will clear all captions.
+
+
+
+ Cancel
+
+ Ok
+
+
+
+
+ Export Code
+
+
+
+
+
+
+
+
diff --git a/src/renderer/components/caption-studio/TextEditor.vue b/src/renderer/components/caption-studio/TextEditor.vue
new file mode 100644
index 0000000..ceffb77
--- /dev/null
+++ b/src/renderer/components/caption-studio/TextEditor.vue
@@ -0,0 +1,378 @@
+
+
+
+
+
+
+
+
+
+ {{ size.label }}
+
+
+
+ Bold
+
+ {{ }}
+
+
+
+ {{ characterCount }} / 40
+
+
+
+
+
+ warning It is recommended that caption lines are 40 characters or lesswarning It is recommended that individual captions be no longer 2 lines
+
+
+
+
+ Remove Caption
+
+
+ Add Caption
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/renderer/components/caption-studio/TimeStamp.vue b/src/renderer/components/caption-studio/TimeStamp.vue
new file mode 100644
index 0000000..0923f5f
--- /dev/null
+++ b/src/renderer/components/caption-studio/TimeStamp.vue
@@ -0,0 +1,19 @@
+
+
+ {{ minutes }}:{{ seconds }}:{{ milliseconds }}
+
+
+
+
+
diff --git a/src/renderer/components/caption-studio/TimeStampInput.vue b/src/renderer/components/caption-studio/TimeStampInput.vue
new file mode 100644
index 0000000..b2e596b
--- /dev/null
+++ b/src/renderer/components/caption-studio/TimeStampInput.vue
@@ -0,0 +1,140 @@
+
+
+
+
+
+
+
diff --git a/src/renderer/components/caption-studio/WaveSurfer.vue b/src/renderer/components/caption-studio/WaveSurfer.vue
new file mode 100644
index 0000000..4f0e618
--- /dev/null
+++ b/src/renderer/components/caption-studio/WaveSurfer.vue
@@ -0,0 +1,198 @@
+
+
+
+
+
+
+ fast_rewind
+
+
+ skip_previous
+
+
+ {{ isPlaying ? 'pause' : 'play_arrow' }}
+
+
+ skip_next
+
+
+ fast_forward
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/renderer/components/dialogs/PreviewTargetDialog.vue b/src/renderer/components/dialogs/PreviewTargetDialog.vue
new file mode 100644
index 0000000..c4d69c5
--- /dev/null
+++ b/src/renderer/components/dialogs/PreviewTargetDialog.vue
@@ -0,0 +1,262 @@
+
+
+
+
Choose Preview Target
+
+ Deploy Folder
+
+ Custom URL
+
+
+
+
+
+ Cancel
+
+
+ Confirm
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/renderer/components/dialogs/TemplateProjectDialog.vue b/src/renderer/components/dialogs/TemplateProjectDialog.vue
new file mode 100644
index 0000000..64968b8
--- /dev/null
+++ b/src/renderer/components/dialogs/TemplateProjectDialog.vue
@@ -0,0 +1,453 @@
+
+
+
+
+
+
Create New SpringRoll Project
+
+
+
+
+
+
Project Location
+
+
+ Browse
+
+
+
+
+
+
+
+
+
+ Cancel
+
+
+ Confirm
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/renderer/components/pages/CaptionStudio.vue b/src/renderer/components/pages/CaptionStudio.vue
new file mode 100644
index 0000000..6e3ef2a
--- /dev/null
+++ b/src/renderer/components/pages/CaptionStudio.vue
@@ -0,0 +1,169 @@
+
+
+
+
+
+
+
+ Sound Preview
+
+
+ Text Preview
+
+
+
+ Text Editor
+
+
+ JSON Preview * - Unsaved Changes
+
+
+
+
+
+
+
+
+
+
diff --git a/src/renderer/components/pages/LandingPage.vue b/src/renderer/components/pages/LandingPage.vue
new file mode 100644
index 0000000..c70d050
--- /dev/null
+++ b/src/renderer/components/pages/LandingPage.vue
@@ -0,0 +1,277 @@
+
+
+
Version {{ appVersion }}
+
+
+
+
+
+
+
SpringRoll Studio
+
+
+
SpringRoll is a light-weight toolset for building accessible HTML5 games, focusing on utilities to help developers make games more accessible and deployable at scale.
+
+
+ Set Project Location
+ Preview Game
+ Create Project Template
+ Open Caption Studio
+
+
+
+
Project: {{ projectLocation }}
+ Audio: {{ audioLocation }}
+
+
+
+
+
+
diff --git a/src/renderer/components/pages/PreviewPage.vue b/src/renderer/components/pages/PreviewPage.vue
new file mode 100644
index 0000000..1f0cfd3
--- /dev/null
+++ b/src/renderer/components/pages/PreviewPage.vue
@@ -0,0 +1,509 @@
+
+
+
+
+
+ home refresh
+
+
help
+
+ volume_up
+ volume_off
+
+
+ expand_more
+
+
+
+ closed_caption
+ closed_caption_disabled
+
+
+ expand_more
+
+
+
+ pause
+ play_arrow
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/renderer/main.js b/src/renderer/main.js
new file mode 100644
index 0000000..6ae772f
--- /dev/null
+++ b/src/renderer/main.js
@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import vuetify from './plugins/vuetify'; // path to vuetify export
+import 'material-design-icons-iconfont/dist/material-design-icons.css';
+
+import router from './router';
+import store from './store';
+
+import App from './App.vue';
+import { ipcRenderer } from 'electron';
+import { EVENTS } from '@/constants';
+
+// Plugins
+import './plugins';
+
+// Styles
+import './scss/main.scss';
+
+// State
+import './class/CaptionManager';
+
+Vue.config.productionTip = false;
+
+const vm = new Vue({
+ components: { App },
+ vuetify,
+ store,
+ router,
+ template: '