☰

PlayIt-Monkey-Script

Configurable frontend for PlayIt Service

  1. // ==UserScript==
  2. // @name         	PlayIt-Monkey-Script
  3. // @namespace    	https://github.com/rkaradas
  4. // @version      	0.5
  5. // @description  	Configurable frontend for PlayIt Service 
  6. // @author       	Recep Karadas
  7. // @include      	http*
  8. // @include      	https*
  9. // @connect 		*
  10. // @require      	https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js
  11. // @resource    	customCSS https://raw.githubusercontent.com/rkaradas/PlayIt-Monkey-Script/master/playit.css
  12. // @grant       	GM_addStyle
  13. // @grant       	GM_getResourceText
  14. // @grant           GM_xmlhttpRequest
  15. // @grant           GM_getValue
  16. // @grant           GM_setValue
  17. // @grant           GM_deleteValue
  18. // ==/UserScript==
  19.  
  20.  
  21.  
  22. /**/
  23. var newCSS = GM_getResourceText ("customCSS");
  24. GM_addStyle (newCSS);
  25.  
  26.  
  27.  
  28. // runs at the end
  29. (function() {
  30.     'use strict';
  31.     var connections = [];
  32.     var selectedConnectionIdx = -1;
  33.     var editingObject;
  34.     var selectedElement;
  35.     
  36.     $("head").append (`<link href="//cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css" rel="stylesheet" type="text/css">`);    
  37.     /*$("head").append (`<link href="//localhost/PlayIt_Tampermonkey/playit.css" rel="stylesheet" type="text/css">`);*/
  38.     
  39.     var container = `
  40. <div class='play-it-container' >
  41. <div class='play-it-container-inner' >
  42. <div class='play-it-sidebar' >
  43.   <div class='octicon octicon-triangle-right play-it-play-btn' title='Send to PlayIt'> </div>
  44.   <div class='octicon octicon-settings play-it-settings-btn' title='Settings'> </div>
  45.   <div class='octicon octicon-settings play-it-test-btn' style='display:none !important;' > </div>
  46.   <a href='https://github.com/rkaradas/PlayIt-Monkey-Script' title='Show on GitHub' target='_blank'><div class='octicon octicon-mark-github'> </div></a>
  47.   <div class='play-it-settings' >
  48.     <div class='play-it-settings-wrapper'>
  49.       <div class='play-it-settings-header'>SETTINGS</div>
  50.       <div class='play-it-settings-content'>
  51.         <div class='play-it-settings-add-connection'>
  52.           <div class='play-it-settings-add-connection-row'>
  53.             <div><input type='text' class="play-it-settings-add-name" placeholder='Connection name, e.g. Kitchen' /></div>
  54.             <div><input type='text' class="play-it-settings-add-ip" placeholder='Ip address, e.g. 192.168.1.49' /></div>
  55.             <div><input type='text' class="play-it-settings-add-port" placeholder='Port (default:8181)' /></div>
  56.             <div class='play-it-settings-add-connection-actions'><button class='play-it-settings-add octicon octicon-plus'></button></div>
  57.           </div>
  58.         </div>
  59.         <div class='play-it-settings-connections'>
  60.  
  61.         </div>
  62.  
  63.       </div>
  64.       <div class='play-it-settings-actions'>
  65.         <button class='play-it-settings-save'>SAVE</button>
  66.         <button class='play-it-settings-close'>CLOSE</button>
  67.         <button class='play-it-settings-clear'>CLEAR ALL</button>
  68.  
  69.       </div>
  70.     </div>
  71.   </div>
  72.  
  73. </div>
  74.  
  75.   <div class="play-it-footer">
  76.     <div>&lt;&gt;</div>
  77.     <div>with ❤️ by </div>
  78.     <div>R.Karadas</div>
  79.   </div>
  80. </div>
  81. </div>
  82. `;  
  83.     
  84.     Init();
  85.  
  86.     function Init()
  87.     {
  88.         editingObject = null;
  89.         let containerEl = $(container);//.addClass("play-it-play-btn");
  90.         
  91.         containerEl.mouseenter(function(){
  92.             $(this).animate({left: 0});
  93.         });
  94.         containerEl.mouseleave(function(){
  95.             $(this).animate({left: "-" + $(this).css("width")});
  96.         });
  97.         
  98.         containerEl.find(".play-it-settings-btn").click(function(){
  99.             toggleSettings();
  100.         });
  101.         containerEl.find(".play-it-play-btn").click(function(){
  102.             sendToKodi(location.href);
  103.         });
  104.         containerEl.find(".play-it-test-btn").click(function(){
  105.             let source = document.getElementsByTagName('html')[0].innerHTML;
  106.             let mp4Links = source.match(/(https?:\/\/.*\.mp4)/gm);
  107.             mp4Links.forEach((itm)=>
  108.             {
  109.                 console.log(itm);
  110.             });
  111.             
  112.             //sendToKodi(location.href);
  113.         });
  114.         containerEl.find(".play-it-settings-close").click(function(){
  115.             toggleSettings();
  116.         });
  117.         containerEl.find(".play-it-settings-save").click(function(){
  118.             saveSettings(true);
  119.         });
  120.         containerEl.find(".play-it-settings-add").click(function(){
  121.             addConnection();
  122.         });
  123.         containerEl.find(".play-it-settings-clear").click(function(){
  124.             clearSettings();
  125.         });
  126.         
  127.         $("body").filter(function() {
  128.             return (self==top);
  129.         }).prepend(containerEl);
  130.     }
  131.     
  132.     // Functions
  133.     function sendToKodi(videoUrl)
  134.     {
  135.         if(!selectedElement)
  136.             loadSelectedElement();
  137.         
  138.         // if
  139.         if(selectedElement){
  140.             
  141.             var url= "http://" + selectedElement.ip +":"+selectedElement.port + "/PlayIt";//'http://192.168.1.102:8181/PlayIt';
  142.             console.log(url);
  143.             var request={version:'1.1',
  144.                          method:'playHostedVideo',
  145.                          id:1,
  146.                          params:{videoLink:videoUrl}
  147.                         };
  148.             GM_xmlhttpRequest({
  149.                 method: "POST",
  150.                 url: url,
  151.                 data: JSON.stringify(request),
  152.                 headers: {
  153.                     "Content-Type": "application/x-www-form-urlencoded"
  154.                 },
  155.                 onload: function(response) {
  156.                     console.log("onload");
  157.                 }
  158.             });
  159.         }
  160.         else{
  161.             alert("Please select a connection first");
  162.         }
  163.     }
  164.  
  165.  
  166.     
  167.     function toggleSettings()
  168.     {
  169.         let value = $('.play-it-settings').css('opacity') == 1 ? 0 : 1;
  170.         let disp = (value==1?"block":"none");
  171.         console.log("value: " + value + " - " + disp);
  172.         if(disp=="block"){
  173.             loadSettings();
  174.             $('body').css("overflow","hidden");
  175.             $('.play-it-settings').css("display",disp).animate({
  176.                 opacity: value
  177.             });
  178.         }else{
  179.             $('.play-it-settings').animate({
  180.                 opacity: value
  181.             },function(){ $(this).css("display",disp); $('body').css("overflow","visible"); } );
  182.         }
  183.             
  184.         
  185.     }
  186.     function saveSettings(toggle)
  187.     {
  188.         GM_setValue("connections", JSON.stringify(connections));
  189.         GM_setValue("selectedConnectionIdx", selectedConnectionIdx);
  190.  
  191.         if(toggle)
  192.         {
  193.             toggleSettings();
  194.         }
  195.         
  196.     }
  197.     // this function is needed, if the user does not go to the settings
  198.     function loadSelectedElement()
  199.     {
  200.         connections = JSON.parse(GM_getValue("connections","[]"));
  201.         selectedConnectionIdx = GM_getValue("selectedConnectionIdx",-1);
  202.         connections.forEach((connection, idx)=>{
  203.             if(selectedConnectionIdx == idx)
  204.                 selectedElement = connection;
  205.         });
  206.     }
  207.     
  208.     function loadSettings()
  209.     {
  210.         
  211.         editingObject = null;
  212.         $(".play-it-settings-connections").html("");
  213.         connections = JSON.parse(GM_getValue("connections","[]"));
  214.         selectedConnectionIdx = GM_getValue("selectedConnectionIdx",-1);
  215.         connections.forEach((connection, idx)=>{
  216.             console.log("selectedConnectionIdx: "+ selectedConnectionIdx + "|idx: "+idx);
  217.             if(selectedConnectionIdx == idx){
  218.                 selectedElement = connection;
  219.             }
  220.             addConnectionVisual(connection, (selectedConnectionIdx == idx) );
  221.         });
  222.     }
  223.     function clearSettings()
  224.     {
  225.         $(".play-it-settings-connections").html("");
  226.         connections = [];
  227.         selectedConnectionIdx = -1;
  228.         GM_deleteValue("connections");
  229.         GM_deleteValue("selectedConnectionIdx");
  230.     }
  231.     function addConnection()
  232.     {
  233.         
  234.         let ip = $(".play-it-settings-add-ip").val().trim();
  235.         if(isIpV4(ip)){
  236.             let name = $(".play-it-settings-add-name").val().trim();
  237.             let port = parseInt($(".play-it-settings-add-port").val().trim(),10);
  238.             name = name?name:"Kodi";
  239.             port = isNaN(port) ? 8181 : port;
  240.             
  241.             let connection = {
  242.                 name: name,
  243.                 ip: ip,
  244.                 port: port
  245.             };
  246.             addConnectionVisual(connection, true);
  247.             connections.push(connection);
  248.  
  249.             $(".play-it-settings-add-name").val("");
  250.             $(".play-it-settings-add-ip").val("");
  251.             $(".play-it-settings-add-port").val("");
  252.             saveSettings();
  253.         }else
  254.         {
  255.             alert("Ip address must be a valid ipv4 address.");
  256.         }
  257.     }
  258.     // UI functions
  259.     function addConnectionVisual(connection, isSelected)
  260.     {
  261.         
  262.         if(isSelected)
  263.         {
  264.             setSelectedConnection();
  265.         }
  266.         let connectionContainer = $(`
  267.             <div class='play-it-settings-connection' >
  268.               <div title='`+connection.name+ `'><span class='play-it-settings-connection-name'>`+connection.name+ `</span></div>
  269.               <div title='`+connection.ip+ `'><span class='play-it-settings-connection-ip'>`+connection.ip+ `</span></div>
  270.               <div title='`+connection.port+ `'><span class='play-it-settings-connection-port'>`+connection.port+ `</span></div>
  271.               <div class="play-it-settings-connection-actions">
  272.                 <button title='Remove Connection' class='play-it-settings-connection-remove octicon octicon-trashcan'></button>
  273.                 <button title='Edit Connection' class='play-it-settings-connection-edit octicon octicon-pencil'></button>
  274.                 <button title='Save' class='play-it-settings-connection-save octicon octicon-check' style='display:none' ></button>
  275.                 <button title='Select' class='play-it-settings-connection-select octicon octicon-verified' `+(isSelected?`disabled`:``)+`  ></button>
  276.               </div>
  277.             </div>
  278.         `);
  279.         
  280.         
  281.         $(".play-it-settings-connections").append(connectionContainer);
  282.         connectionContainer.find(".play-it-settings-connection-remove").click(function(){
  283.             connectionRemoveClick($(this));
  284.         });
  285.         connectionContainer.find(".play-it-settings-connection-edit").click(function(){
  286.             connectionEditClick($(this));
  287.             
  288.         });
  289.         connectionContainer.find(".play-it-settings-connection-save").click(function(){
  290.             connectionSaveClick($(this));
  291.         });
  292.         connectionContainer.find(".play-it-settings-connection-select").click(function(){
  293.             connectionSelectClick($(this));
  294.         });
  295.         if(isSelected)
  296.         {
  297.             selectedElement = connections[selectedConnectionIdx];
  298.             saveSettings();
  299.         }
  300.     }
  301.     function clearSelectedConnection()
  302.     {
  303.         selectedElement = null;
  304.         selectedConnectionIdx = -1;
  305.         $('.play-it-settings-connection-select').prop("disabled",false);
  306.     }
  307.     function setSelectedConnection(el)
  308.     {
  309.         $('.play-it-settings-connection-select').prop("disabled",false);
  310.         if(el) 
  311.             el.prop("disabled", true);
  312.     }
  313.     
  314.     /**
  315.     BEGIN Connection editing click functions
  316.     **/
  317.     function connectionRemoveClick(el)
  318.     {
  319.         if(isInEditMode())
  320.             return;
  321.         let parent = el.closest(".play-it-settings-connection");
  322.         let idx = $('.play-it-settings-connection').index(parent);
  323.         if(selectedConnectionIdx == idx)
  324.         {
  325.             clearSelectedConnection();
  326.         }
  327.         console.log(idx);
  328.         el.closest(".play-it-settings-connection").remove();
  329.         connections.splice(idx,1);
  330.         printConnections();
  331.     }
  332.     function connectionSelectClick(el)
  333.     {
  334.         if(isInEditMode())
  335.             return;
  336.         let parent = el.closest(".play-it-settings-connection");
  337.         let idx = $('.play-it-settings-connection').index(parent);
  338.         console.log(idx);
  339.         selectedConnectionIdx = idx;
  340.  
  341.         setSelectedConnection(el);
  342.         selectedElement = connections[idx];
  343.         saveSettings();
  344.     }
  345.     function connectionSaveClick(el)
  346.     {
  347.         let parent = el.closest(".play-it-settings-connection");
  348.             
  349.         let ip = parent.find(".play-it-settings-connection-ip").val().trim();
  350.         if(isIpV4(ip)){
  351.             let name = parent.find(".play-it-settings-connection-name").val().trim();
  352.             let port = parseInt(parent.find(".play-it-settings-connection-port").val().trim(),10);
  353.             name = name?name:"Kodi";
  354.             port = isNaN(port) ? 8181 : port;
  355.  
  356.             let connection = {
  357.                 name: name,
  358.                 ip: ip,
  359.                 port: port
  360.             };
  361.             if(editingObject.name != connection.name ||editingObject.ip != connection.ip ||editingObject.port != connection.port)
  362.             {
  363.                 connections[editingObject.idx].name = connection.name;
  364.                 connections[editingObject.idx].ip = connection.ip;
  365.                 connections[editingObject.idx].port = connection.port;
  366.             }
  367.             replaceInputWithSpan(parent, "play-it-settings-connection-name");
  368.             replaceInputWithSpan(parent, "play-it-settings-connection-ip");
  369.             replaceInputWithSpan(parent, "play-it-settings-connection-port");
  370.             editingObject = null;
  371.             saveSettings();
  372.  
  373.             parent.find(".play-it-settings-connection-save").hide();
  374.             $(".play-it-settings-connection-edit").show();
  375.         }else
  376.         {
  377.             alert("something went wrong please fix the issues");
  378.         }
  379.     }
  380.     function connectionEditClick(el)
  381.     {
  382.         if(isInEditMode())
  383.             return;
  384.  
  385.         let parent = el.closest(".play-it-settings-connection");
  386.         let idx = $('.play-it-settings-connection').index(parent);
  387.         console.log(idx);
  388.         editingObject = {idx:idx,
  389.                          name: parent.find(".play-it-settings-connection-name").html(),
  390.                          ip: parent.find(".play-it-settings-connection-ip").html(),
  391.                          port: parent.find(".play-it-settings-connection-port").html()
  392.                         };
  393.         replaceSpanWithInput(parent, "play-it-settings-connection-name");
  394.         replaceSpanWithInput(parent, "play-it-settings-connection-ip");
  395.         replaceSpanWithInput(parent, "play-it-settings-connection-port");
  396.  
  397.         parent.find(".play-it-settings-connection-save").show();
  398.         $(".play-it-settings-connection-edit").hide();
  399.     }
  400.     function isInEditMode()
  401.     {
  402.         if(editingObject){
  403.             alert("Already in editing mode.\nPlease save changes, before you start editing the next element. ");
  404.             return true;
  405.         }
  406.         return false;
  407.     }
  408.     /**
  409.     END Connection editing click functions
  410.     **/
  411.     function replaceSpanWithInput(parent, spanClass)
  412.     {
  413.         var spanEl = parent.find("." + spanClass);
  414.         let inp = $(`<input type='text' value='`+spanEl.html()+`' />`).addClass(spanClass);
  415.         spanEl.replaceWith(inp);
  416.     }
  417.     function replaceInputWithSpan(parent, inputClass)
  418.     {
  419.         var inputEl = parent.find("." + inputClass);
  420.         let span = $(`<span>`+inputEl.val()+`</span>`).addClass(inputClass);
  421.         inputEl.replaceWith(span);
  422.     }
  423.     
  424.     function printConnections()
  425.     {
  426.         connections.forEach((connection)=>{
  427.             console.log(connection.name);
  428.         });
  429.     }
  430.     
  431.     function isIpV4(ip) {
  432.         var x = ip.split("."), x1, x2, x3, x4;
  433.  
  434.         if (x.length == 4) {
  435.             x1 = parseInt(x[0], 10);
  436.             x2 = parseInt(x[1], 10);
  437.             x3 = parseInt(x[2], 10);
  438.             x4 = parseInt(x[3], 10);
  439.  
  440.             if (isNaN(x1) || isNaN(x2) || isNaN(x3) || isNaN(x4)) {
  441.                 return false;
  442.             }
  443.  
  444.             if ((x1 >= 0 && x1 <= 255) && (x2 >= 0 && x2 <= 255) && (x3 >= 0 && x3 <= 255) && (x4 >= 0 && x4 <= 255)) {
  445.                 return true;
  446.             }
  447.         }
  448.         return false;
  449.     }   
  450. })();
  451.  
  452.    
  453.     
  454.     
  455.    
  456.     
  457.