5/19

잘못 이해한 부분이나 오타 지적해주시면 감사하겠습니다.

Xsplit에서 기본적으로 제공하는 twitch-chat-viewer의 twitch.js를 뜯어서 공부해보자.

/* globals require, Promise */
 
(function() {
 
  'use strict';
  /*
  모듈 호출.
  xjs = xsplit java script.
  xjs.ready()하면 Promise 리턴.
  Promise는 콜백지옥을 해결하기 위해 만든것인데 간단하게 말해서 then(~~~)을 순차적으로 실행하게 되는 것. 
  */
  var xjs = require('xjs');
  /*
  xjs.Item == #5315 from xjs.js
  주석은 대충
  'Item'은 해당 스테이지에서 사용된 오브젝트를 말한다.(예 : games, microphones, webpage)
  하위 항목 중 *Chainable* 표시가 되어있는 것은 return 값이 'Item' 인스턴스이다. 순차적 실행에 도움이 될 것이다.
  */
  var Item = xjs.Item;
  // 추후 사용되는 곳을 보고 작성예정
  var configObj = {};
  // Item 인스턴스를 저장하는거 같은데 용도는 차후 작성예정
  var myItem;
  // Gets the instance of the window utility. Use this instead of the constructor.
  var sourceWindow = xjs.SourcePluginWindow.getInstance();
 
  // The first line of the code loads the framework and save it to the xjs variable. We then accessed the framework's ready() method; a method that returns a promise, which will resolve when XSplit JS Framework is ready to use. Always make sure to do your development when the framework is ready!
  xjs.ready()
  /*
  getItemList == #5846 from xjs.js
  // Get the Item List of the current source
  itemArray를 리턴한다.
  */
  .then(Item.getItemList)
  // ItemList를 불러오고 인자가 item인 function을 실행하는데 이 function은 myItem에 item[0]을 넣는다. item은 getItemList에서 리턴받은 itemArray로 추정된다. 그중 0번째를 myItem에 저장하는데 어떤 순서로 리턴되는지는 모르겠다. 대입 후 myItem의 Name을 리턴.
  .then(function(item) {
    myItem = item[0];
    return myItem.getName();
  })
  // name을 인자로 가진 function을 실행한다. toLowerCase() == 문자열을 모두 소문자로 변환한다. 한마디로 name != newName이면 myItem = 'Twitch Chat Viewer via HTML5'. 같다면 myItem = name
  .then(function(name) {
    // change the property name if just added
    var newName = 'Twitch Chat Viewer via HTML5';
    if (name.toLowerCase().substring(0, newName.length) !== newName.toLowerCase()) {
      return myItem.setName('Twitch Chat Viewer via HTML5');
    }
    else {
      return myItem.setName(name);
    }
  })

// 원문

.then(function() {
    // inject minified script from scriptInjected.js
    var indexLocation = location.href;
    var indexPath = indexLocation.substring(0, indexLocation.length - 10);
    return myItem.setBrowserJS('(function(){var existingXJS=document.getElementById("xjsInject"),xjs,Item,configObj={},sourceWindow;if(!document.getElementById("xjsInject")){var xjsScript=document.createElement("script");xjsScript.id="xjsInject";var body=document.querySelector("body");body.appendChild(xjsScript),xjsScript.onload=function(){xjs=require("xjs"),Item=xjs.Item,xjs.ready().then(Item.getCurrentSource).then(function(n){myItem=n}),sourceWindow=xjs.SourcePluginWindow.getInstance(),sourceWindow.on("save-config",function(n){configObj=n,Item.getCurrentSource().then(function(n){n.saveConfig(configObj).then(function(){var t=location.href,e=t.substring(21,t.length-13);configObj.hasOwnProperty("channel")&&""!=configObj.channel&&configObj.channel!=e&&n.setName("Twitch Chat Viewer via HTML5 ("+configObj.channel+")").then(function(){location.href="http://www.twitch.tv/"+configObj.channel+"/chat?popout="})})})})},xjsScript.src="' + indexPath +'js/xjs.js"}})();');
  })

// setBrowserJS 내부를 정리하면

(function() {
  var existingXJS = document.getElementById("xjsInject"),
    xjs, Item, configObj = {},
    sourceWindow;
  if (!document.getElementById("xjsInject")) {
    var xjsScript = document.createElement("script");
    xjsScript.id = "xjsInject";
    var body = document.querySelector("body");
    body.appendChild(xjsScript), xjsScript.onload = function() {
      xjs = require("xjs"), Item = xjs.Item,
        xjs.ready()
        .then(Item.getCurrentSource)
        .then(function(n) { myItem = n }),
        sourceWindow = xjs.SourcePluginWindow.getInstance(), sourceWindow.on("save-config", function(n) {
          configObj = n, Item.getCurrentSource()
            .then(function(n) {
              n.saveConfig(configObj)
                .then(function() {
                  var t = loc(function() {
                    var existingXJS = document.getElementById("xjsInject"),
                      xjs, Item, configObj = {},
                      sourceWindow;
                    if (!document.getElementById("xjsInject")) {
                      var xjsScript = document.createElement("script");
                      xjsScript.id = "xjsInject";
                      var body = document.querySelector("body");
                      body.appendChild(xjsScript), xjsScript.onload = function() {
                        xjs = require("xjs"), Item = xjs.Item, xjs.ready().then(Item.getCurrentSource).then(function(n) { myItem = n }),
                          sourceWindow = xjs.SourcePluginWindow.getInstance(), sourceWindow.on("save-config", function(n) {
                            configObj = n, Item.getCurrentSource().then(function(n) {
                              n.saveConfig(configObj).then(function() {
                                var t = location.href,
                                  e = t.substring(21, t.length - 13);
                                configObj.hasOwnProperty("channel") && "" != configObj.channel && configObj.channel != e && n.setName("Twitch Chat Viewer via HTML5 (" + configObj.channel + ")").then(function() {
                                  location.href = "http://www.twitch.tv/" + configObj.channel + "/chat?popout="
                                })
                              })
                            })
                          })
                      }, xjsScript.src = "' + indexPath +'js/xjs.js"
                    }
                  })();
                  ation.href, e = t.substring(21, t.length - 13);
                  configObj.hasOwnProperty("channel") && "" != configObj.channel && configObj.channel != e && n.setName("Twitch Chat Viewer via HTML5 (" + configObj.channel + ")").then(function() {
                    location.href = "http://www.twitch.tv/" + configObj.channel + "/chat?popout="
                  })
                })
            })
        })
    }, xjsScript.src = "' + indexPath +'js/xjs.js"
  }
})();

// setBrowserJS == Sets the javascript commands to be executed on item right upon setting and on load. Optionally set second parameter to true to refresh item (needed to clean previously executed JS code.)  Chainable.

여기서부턴 내일.