PlayIt-Monkey-Script

Configurable frontend for PlayIt Service
目前为 2016-09-18 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name         	PlayIt-Monkey-Script
// @namespace    	https://github.com/rkaradas
// @version      	0.4
// @description  	Configurable frontend for PlayIt Service 
// @author       	Recep Karadas
// @include      	http*
// @include      	https*
// @connect 		*
// @require      	https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js
// @resource    	customCSS https://raw.githubusercontent.com/rkaradas/PlayIt-Monkey-Script/master/playit.css
// @grant       	GM_addStyle
// @grant       	GM_getResourceText
// @grant           GM_xmlhttpRequest
// @grant           GM_getValue
// @grant           GM_setValue
// @grant           GM_deleteValue
// ==/UserScript==
 
 
/**/
var newCSS = GM_getResourceText ("customCSS");
GM_addStyle (newCSS);
 
 
 
// runs at the end
(function() {
    'use strict';
    var connections = [];
    var selectedConnectionIdx = -1;
    var editingObject;
    var selectedElement;
    
    $("head").append (`<link href="//cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css" rel="stylesheet" type="text/css">`);    
    /*$("head").append (`<link href="//localhost/PlayIt_Tampermonkey/playit.css" rel="stylesheet" type="text/css">`);*/
    
    var container = `
<div class='play-it-container'>
  <div class='octicon octicon-triangle-right play-it-play-btn'> </div>
  <div class='octicon octicon-settings play-it-settings-btn'> </div>
  <div class='play-it-settings' >
    <div class='play-it-settings-wrapper'>
      <div class='play-it-settings-header'>SETTINGS</div>
      <div class='play-it-settings-content'>
        <div class='play-it-settings-add-connection'>
          <div class='play-it-settings-add-connection-row'>
            <div><input type='text' class="play-it-settings-add-name" placeholder='Connection name, e.g. Kitchen' /></div>
            <div><input type='text' class="play-it-settings-add-ip" placeholder='Ip address, e.g. 192.168.1.49' /></div>
            <div><input type='text' class="play-it-settings-add-port" placeholder='Port (default:8181)' /></div>
            <div class='play-it-settings-add-connection-actions'><button class='play-it-settings-add octicon octicon-plus'></button></div>
          </div>
        </div>
        <div class='play-it-settings-connections'>
 
        </div>
 
      </div>
      <div class='play-it-settings-actions'>
        <button class='play-it-settings-save'>SAVE</button>
        <button class='play-it-settings-close'>CLOSE</button>
        <button class='play-it-settings-clear'>CLEAR ALL</button>
 
      </div>
    </div>
  </div>
</div>
`;  
    
    Init();
 
    function Init()
    {
        editingObject = null;
        let containerEl = $(container);//.addClass("play-it-play-btn");
        containerEl.find(".play-it-settings-btn").click(function(){
            toggleSettings();
        });
        containerEl.find(".play-it-play-btn").click(function(){
            sendToKodi(location.href);
        });
        containerEl.find(".play-it-settings-close").click(function(){
            toggleSettings();
        });
        containerEl.find(".play-it-settings-save").click(function(){
            saveSettings(true);
        });
        containerEl.find(".play-it-settings-add").click(function(){
            addConnection();
        });
        containerEl.find(".play-it-settings-clear").click(function(){
            clearSettings();
        });
        $("body").prepend(containerEl);
    }
    
    // Functions
    function sendToKodi(videoUrl)
    {
        if(!selectedElement)
            loadSelectedElement();
        
        // if
        if(selectedElement){
            
            var url= "http://" + selectedElement.ip +":"+selectedElement.port + "/PlayIt";//'http://192.168.1.102:8181/PlayIt';
            console.log(url);
            var request={version:'1.1',
                         method:'playHostedVideo',
                         id:1,
                         params:{videoLink:videoUrl}
                        };
            GM_xmlhttpRequest({
                method: "POST",
                url: url,
                data: JSON.stringify(request),
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                onload: function(response) {
                    console.log("onload");
                }
            });
        }
        else{
            alert("Please select a connection first");
        }
    }
 
 
    
    function toggleSettings()
    {
        let value = $('.play-it-settings').css('opacity') == 1 ? 0 : 1;
        let disp = (value==1?"block":"none");
        console.log("value: " + value + " - " + disp);
        if(disp=="block"){
            loadSettings();
            $('body').css("overflow","hidden");
            $('.play-it-settings').css("display",disp).animate({
                opacity: value
            });
        }else{
            $('.play-it-settings').animate({
                opacity: value
            },function(){ $(this).css("display",disp); $('body').css("overflow","visible"); } );
        }
            
        
    }
    function saveSettings(toggle)
    {
        GM_setValue("connections", JSON.stringify(connections));
        GM_setValue("selectedConnectionIdx", selectedConnectionIdx);
 
        if(toggle)
        {
            toggleSettings();
        }
        
    }
    // this function is needed, if the user does not go to the settings
    function loadSelectedElement()
    {
        connections = JSON.parse(GM_getValue("connections","[]"));
        selectedConnectionIdx = GM_getValue("selectedConnectionIdx",-1);
        connections.forEach((connection, idx)=>{
            if(selectedConnectionIdx == idx)
                selectedElement = connection;
        });
    }
    
    function loadSettings()
    {
        
        editingObject = null;
        $(".play-it-settings-connections").html("");
        connections = JSON.parse(GM_getValue("connections","[]"));
        selectedConnectionIdx = GM_getValue("selectedConnectionIdx",-1);
        connections.forEach((connection, idx)=>{
            console.log("selectedConnectionIdx: "+ selectedConnectionIdx + "|idx: "+idx);
            if(selectedConnectionIdx == idx){
                selectedElement = connection;
            }
            addConnectionVisual(connection, (selectedConnectionIdx == idx) );
        });
    }
    function clearSettings()
    {
        $(".play-it-settings-connections").html("");
        connections = [];
        selectedConnectionIdx = -1;
        GM_deleteValue("connections");
        GM_deleteValue("selectedConnectionIdx");
    }
    function addConnection()
    {
        
        let ip = $(".play-it-settings-add-ip").val().trim();
        if(isIpV4(ip)){
            let name = $(".play-it-settings-add-name").val().trim();
            let port = parseInt($(".play-it-settings-add-port").val().trim(),10);
            name = name?name:"Kodi";
            port = isNaN(port) ? 8181 : port;
            
            let connection = {
                name: name,
                ip: ip,
                port: port
            };
            addConnectionVisual(connection, true);
            connections.push(connection);
 
            $(".play-it-settings-add-name").val("");
            $(".play-it-settings-add-ip").val("");
            $(".play-it-settings-add-port").val("");
            saveSettings();
        }else
        {
            alert("Ip address must be a valid ipv4 address.");
        }
    }
    // UI functions
    function addConnectionVisual(connection, isSelected)
    {
        
        if(isSelected)
        {
            setSelectedConnection();
        }
        let connectionContainer = $(`
            <div class='play-it-settings-connection' >
              <div title='`+connection.name+ `'><span class='play-it-settings-connection-name'>`+connection.name+ `</span></div>
              <div title='`+connection.ip+ `'><span class='play-it-settings-connection-ip'>`+connection.ip+ `</span></div>
              <div title='`+connection.port+ `'><span class='play-it-settings-connection-port'>`+connection.port+ `</span></div>
              <div class="play-it-settings-connection-actions">
                <button title='Remove Connection' class='play-it-settings-connection-remove octicon octicon-trashcan'></button>
                <button title='Edit Connection' class='play-it-settings-connection-edit octicon octicon-pencil'></button>
                <button title='Save' class='play-it-settings-connection-save octicon octicon-check' style='display:none' ></button>
                <button title='Select' class='play-it-settings-connection-select octicon octicon-verified' `+(isSelected?`disabled`:``)+`  ></button>
              </div>
            </div>
        `);
        
        
        $(".play-it-settings-connections").append(connectionContainer);
        connectionContainer.find(".play-it-settings-connection-remove").click(function(){
            connectionRemoveClick($(this));
        });
        connectionContainer.find(".play-it-settings-connection-edit").click(function(){
            connectionEditClick($(this));
            
        });
        connectionContainer.find(".play-it-settings-connection-save").click(function(){
            connectionSaveClick($(this));
        });
        connectionContainer.find(".play-it-settings-connection-select").click(function(){
            connectionSelectClick($(this));
        });
        if(isSelected)
        {
            selectedElement = connections[selectedConnectionIdx];
            saveSettings();
        }
    }
    function clearSelectedConnection()
    {
        selectedElement = null;
        selectedConnectionIdx = -1;
        $('.play-it-settings-connection-select').prop("disabled",false);
    }
    function setSelectedConnection(el)
    {
        $('.play-it-settings-connection-select').prop("disabled",false);
        if(el) 
            el.prop("disabled", true);
    }
    
    /**
    BEGIN Connection editing click functions
    **/
    function connectionRemoveClick(el)
    {
        if(isInEditMode())
            return;
        let parent = el.closest(".play-it-settings-connection");
        let idx = $('.play-it-settings-connection').index(parent);
        if(selectedConnectionIdx == idx)
        {
            clearSelectedConnection();
        }
        console.log(idx);
        el.closest(".play-it-settings-connection").remove();
        connections.splice(idx,1);
        printConnections();
    }
    function connectionSelectClick(el)
    {
        if(isInEditMode())
            return;
        let parent = el.closest(".play-it-settings-connection");
        let idx = $('.play-it-settings-connection').index(parent);
        console.log(idx);
        selectedConnectionIdx = idx;
 
        setSelectedConnection(el);
        selectedElement = connections[idx];
        saveSettings();
    }
    function connectionSaveClick(el)
    {
        let parent = el.closest(".play-it-settings-connection");
            
        let ip = parent.find(".play-it-settings-connection-ip").val().trim();
        if(isIpV4(ip)){
            let name = parent.find(".play-it-settings-connection-name").val().trim();
            let port = parseInt(parent.find(".play-it-settings-connection-port").val().trim(),10);
            name = name?name:"Kodi";
            port = isNaN(port) ? 8181 : port;
 
            let connection = {
                name: name,
                ip: ip,
                port: port
            };
            if(editingObject.name != connection.name ||editingObject.ip != connection.ip ||editingObject.port != connection.port)
            {
                connections[editingObject.idx].name = connection.name;
                connections[editingObject.idx].ip = connection.ip;
                connections[editingObject.idx].port = connection.port;
            }
            replaceInputWithSpan(parent, "play-it-settings-connection-name");
            replaceInputWithSpan(parent, "play-it-settings-connection-ip");
            replaceInputWithSpan(parent, "play-it-settings-connection-port");
            editingObject = null;
            saveSettings();
 
            parent.find(".play-it-settings-connection-save").hide();
            $(".play-it-settings-connection-edit").show();
        }else
        {
            alert("something went wrong please fix the issues");
        }
    }
    function connectionEditClick(el)
    {
        if(isInEditMode())
            return;
 
        let parent = el.closest(".play-it-settings-connection");
        let idx = $('.play-it-settings-connection').index(parent);
        console.log(idx);
        editingObject = {idx:idx,
                         name: parent.find(".play-it-settings-connection-name").html(),
                         ip: parent.find(".play-it-settings-connection-ip").html(),
                         port: parent.find(".play-it-settings-connection-port").html()
                        };
        replaceSpanWithInput(parent, "play-it-settings-connection-name");
        replaceSpanWithInput(parent, "play-it-settings-connection-ip");
        replaceSpanWithInput(parent, "play-it-settings-connection-port");
 
        parent.find(".play-it-settings-connection-save").show();
        $(".play-it-settings-connection-edit").hide();
    }
    function isInEditMode()
    {
        if(editingObject){
            alert("Already in editing mode.\nPlease save changes, before you start editing the next element. ");
            return true;
        }
        return false;
    }
    /**
    END Connection editing click functions
    **/
    function replaceSpanWithInput(parent, spanClass)
    {
        var spanEl = parent.find("." + spanClass);
        let inp = $(`<input type='text' value='`+spanEl.html()+`' />`).addClass(spanClass);
        spanEl.replaceWith(inp);
    }
    function replaceInputWithSpan(parent, inputClass)
    {
        var inputEl = parent.find("." + inputClass);
        let span = $(`<span>`+inputEl.val()+`</span>`).addClass(inputClass);
        inputEl.replaceWith(span);
    }
    
    function printConnections()
    {
        connections.forEach((connection)=>{
            console.log(connection.name);
        });
    }
    
    function isIpV4(ip) {
        var x = ip.split("."), x1, x2, x3, x4;
 
        if (x.length == 4) {
            x1 = parseInt(x[0], 10);
            x2 = parseInt(x[1], 10);
            x3 = parseInt(x[2], 10);
            x4 = parseInt(x[3], 10);
 
            if (isNaN(x1) || isNaN(x2) || isNaN(x3) || isNaN(x4)) {
                return false;
            }
 
            if ((x1 >= 0 && x1 <= 255) && (x2 >= 0 && x2 <= 255) && (x3 >= 0 && x3 <= 255) && (x4 >= 0 && x4 <= 255)) {
                return true;
            }
        }
        return false;
    }   
})();