Shinobi. Added Reolink RLC-410-5MP specific Notes

shinobi/README.md

@@ -150,10 +150,24 @@ Here I added the following lines to conf.json to enable FTP.
 # Camera specific notes
 You may need to port forward RTSP or RTMP ports for your cameras.
 
-# Reolink Specific
+# Reolink Specific (RLC-410-5MP) Gotchas
-rtmp://[USERNAME]:[PASSWORD]@CAMERAIPADDRESS:PORT/bcs/channel0_main.bcs?token=sdasdase&channel=0&stream=0&user=[USERNAME]&password=[PASSWORD]
+
+### RTMP Main Stream (High Bit Rate 1024Kbps ~ 8192Kbps)
+rtmp://[USERNAME]:[PASSWORD]@CAMERAIPADDRESS:PORT/bcs/channel0_main.bcs?token=sdasdasc&channel=0&stream=0&user=[USERNAME]&password=[PASSWORD]
 Token value entered doesn't matter just need to put something. Only lines before /bcs and after user= need to be changed.
 
-rtsp://[USERNAME]:[PASSWORD]@CAMERAIPADDRESS:PORT
+### RTMP Sub Stream (Lower Bit Rate 64Kbps ~ 512Kbps)
+rtmp://[USERNAME]:[PASSWORD]@CAMERAIPADDRESS:PORT/bcs/channel0_sub.bcs?token=sdasdasc&channel=0&stream=0&user=[USERNAME]&password=[PASSWORD]
+
+You can use the main stream for recording while using the sub stream for streaming both at the same time in shinobi.
+Reference: https://hub.shinobi.video/articles/view/w8azEAI2peYeNul
+
+### RMTP FTP Motion Detection
+
+You can also designate motion detection to the cameras instead of shinobi to reduce load.
+Reference: https://hub.shinobi.video/articles/view/LyCI3yQsUTouSAJ
+
+ONE BIG GOTCHA... Do not use firmware v3.0.0.65_2007100 because FTP does not work on that firmware. Use firmware v2.0.0.647_20031401 (RLC-410-5MP_647_20031401.zip in this repo) which does work.
+
 
 

shinobi/ShinobiHub - Article How to use Additional Input Feeds_files/argon.js

@@ -0,0 +1,105 @@
+/*!
+
+=========================================================
+* Argon Design System - v1.0.1
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-design-system
+* Copyright 2018 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/argon-design-system/blob/master/LICENSE.md)
+
+* Coded by www.creative-tim.com
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+
+"use strict";
+$(document).ready(function() {
+
+    // Collapse navigation
+    $('.navbar-main .collapse').on('hide.bs.collapse', function () {
+        var $this = $(this);
+        $this.addClass('collapsing-out');
+    });
+
+    $('.navbar-main .collapse').on('hidden.bs.collapse', function () {
+        var $this = $(this);
+        $this.removeClass('collapsing-out');
+    });
+
+    $('.navbar-main .dropdown').on('hide.bs.dropdown', function () {
+        var $this = $(this).find('.dropdown-menu');
+
+        $this.addClass('close');
+
+        setTimeout(function(){
+            $this.removeClass('close');
+        }, 200);
+
+    });
+
+    // Headroom - show/hide navbar on scroll
+    if($('.headroom')[0]) {
+        var headroom  = new Headroom(document.querySelector("#navbar-main"), {
+            offset: 300,
+            tolerance : {
+                up : 30,
+                down : 30
+            },
+        });
+        headroom.init();
+    }
+
+    // Tooltip
+    $('[data-toggle="tooltip"]').tooltip();
+
+    // Popover
+    $('[data-toggle="popover"]').each(function() {
+        var popoverClass = '';
+        if($(this).data('color')) {
+            popoverClass = 'popover-'+$(this).data('color');
+        }
+        $(this).popover({
+            trigger: 'focus',
+            template: '<div class="popover '+ popoverClass +'" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
+        })
+    });
+
+    // Additional .focus class on form-groups
+    $('.form-control').on('focus blur', function(e) {
+        $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
+    }).trigger('blur');
+
+
+    // When in viewport
+    $('[data-toggle="on-screen"]')[0] && $('[data-toggle="on-screen"]').onScreen({
+        container: window,
+        direction: 'vertical',
+        doIn: function() {
+            //alert();
+        },
+        doOut: function() {
+            // Do something to the matched elements as they get off scren
+        },
+        tolerance: 200,
+        throttle: 50,
+        toggleClass: 'on-screen',
+        debug: false
+    });
+
+    // Scroll to anchor with scroll animation
+    $('[data-toggle="scroll"]').on('click', function(event) {
+        var hash = $(this).attr('href');
+        var offset = $(this).data('offset') ? $(this).data('offset') : 0;
+
+        // Animate scroll to the selected section
+        $('html, body').stop(true, true).animate({
+            scrollTop: $(hash).offset().top - offset
+        }, 600);
+
+        event.preventDefault();
+    });
+ });

shinobi/ShinobiHub - Article How to use Additional Input Feeds_files/articles.css

@@ -0,0 +1,78 @@
+/* Article Search Page */
+.page__container .article-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.page__container .article-list li {
+    border-radius: 5px;
+    padding: 10px 20px;
+    margin-top: 30px;
+    border: 1px solid #a6d1ec;
+    border-left: 5px solid #32325d;
+}
+
+.page__container .article-list li h2 {
+    margin: 0
+}
+
+.page__container .article-categories ul {
+    margin: 0 0 0 20px;
+    padding: 0;
+    list-style: square
+}
+
+.page__container .article-list .new-story li{
+    border-color: #29b94f
+}
+
+.page__container .article-list .new-story *{
+    color: #29b94f
+}
+.article-list h2{
+    font-weight: 100;
+}
+.article-button-row > *{
+    vertical-align: top;
+}
+
+.banner-list-search {
+    border: 1px solid #ddd;
+    padding: 10px 20px;
+    color: #444;
+    font-size: 20pt;
+    border-radius: 30px;
+    display: block;
+    font-family: "Work Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif, sans-serif;
+    margin-bottom: 30px;
+    font-weight: 300
+}
+
+.add-new-floater {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    z-index: 101;
+}
+
+/* Article New, Edit, View */
+[data-name="page__heading"] *,
+[data-name="page__opening"] *,
+[data-name="page__byline"] *,
+.page__header .date {
+    color: #fff;
+}
+
+pre {
+    background: #eee;
+    padding: 20px;
+    border-radius: 10px;
+}
+
+.edit-buttons-float {
+    position: fixed;
+    top: 80px;
+    left: 15px;
+    z-index: 100;
+}

shinobi/ShinobiHub - Article How to use Additional Input Feeds_files/clientArea.js

@@ -0,0 +1,12 @@
+$(document).ready(function(){
+    console.log('<%- config.webPageTitle %> : Attaching Socket.IO Handler')
+    $.webSocket = io({
+        transports: ['websocket']
+    })
+    $.webSocket.on('connect',function(d){
+        console.log('Websocket Connected')
+    })
+    $.webSocket.on('f',function(d){
+        console.log(d)
+    })
+})

shinobi/ShinobiHub - Article How to use Additional Input Feeds_files/clientArea_002.css

@@ -0,0 +1,13 @@
+.modal-dialog-slideout {min-height: 100%; margin: 0 0 0 auto;background: #fff;}
+.modal.fade .modal-dialog.modal-dialog-slideout {-webkit-transform: translate(100%,0)scale(1);transform: translate(100%,0)scale(1);}
+.modal.fade.show .modal-dialog.modal-dialog-slideout {-webkit-transform: translate(0,0);transform: translate(0,0);display: flex;align-items: stretch;-webkit-box-align: stretch;height: 100%;}
+.modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body{overflow-y: auto;overflow-x: hidden;}
+.modal-dialog-slideout .modal-content{border: 0;}
+.modal-dialog-slideout .modal-header, .modal-dialog-slideout .modal-footer {height: 69px; display: block;}
+.modal-dialog-slideout .modal-header h5 {float:left;}
+/* modals */
+@media (min-width: 992px){
+    .modal-lg, .modal-xl {
+        max-width: 90%!important;
+    }
+}

shinobi/ShinobiHub - Article How to use Additional Input Feeds_files/clientArea_002.js

@@ -0,0 +1,3 @@
+$(document).ready(function(){
+
+})

shinobi/ShinobiHub - Article How to use Additional Input Feeds_files/clientArea_003.js

@@ -0,0 +1,40 @@
+$(document).ready(function(){
+    $.confirm={e:$('#confirm_window')};
+    $.confirm.title=$.confirm.e.find('.modal-title span')
+    $.confirm.body=$.confirm.e.find('.modal-body')
+    $.confirm.footer=$.confirm.e.find('.modal-footer')
+    $.confirm.click=function(x,e){
+        $.confirm.footer.find('.confirmaction').remove()
+        var createButton = function(x,place,callback){
+            $.confirm.footer.prepend('<button type="button" class="btn '+x.class+' confirmaction confirmaction'+place+'">'+x.title+'</button>')
+            if(!x.class){x.class='btn-success'}
+            if(!x.title){x.title='Save changes'}
+            $.confirm.footer.find('.confirmaction'+place).click(function(){
+                $.confirm.e.modal('hide')
+                callback();
+            })
+        }
+        if(x instanceof Array){
+            $.each(x,function(place,x){
+                createButton(x,place,x.callback)
+            })
+        }else{
+            createButton(x,0,e)
+        }
+    }
+    $.confirm.create = function(options){
+        if(options.title && options.body){
+            $.confirm.e.modal('show')
+            $.confirm.title.text(options.title)
+            $.confirm.body.css('word-wrap','initial')
+            if(options.breakWord){
+                $.confirm.body.css('word-wrap','break-word')
+            }
+            $.confirm.body.html(options.body)
+        }
+        if(options.clickOptions && options.clickCallback)$.confirm.click(options.clickOptions,options.clickCallback)
+    }
+    $.confirm.e.on('hidden.bs.modal', function () {
+        $.confirm.footer.find('.confirmaction').remove()
+    })
+})

shinobi/ShinobiHub - Article How to use Additional Input Feeds_files/clientArea_004.js

@@ -0,0 +1,151 @@
+$(document).ready(function(){
+    window.localData = function(r,rr,rrr){
+        if(!rrr){rrr={};};if(typeof rrr === 'string'){rrr={n:rrr}};if(!rrr.n){rrr.n='ShinobiLicenseClientSite_'+location.host}
+        ii={o:localStorage.getItem(rrr.n)};try{ii.o=JSON.parse(ii.o)}catch(e){ii.o={}}
+        if(!ii.o){ii.o={}}
+        if(r&&rr&&!rrr.x){
+            ii.o[r]=rr;
+        }
+        switch(rrr.x){
+            case 0:
+                delete(ii.o[r])
+            break;
+            case 1:
+                delete(ii.o[r][rr])
+            break;
+        }
+        localStorage.setItem(rrr.n,JSON.stringify(ii.o))
+        return ii.o
+    }
+    $.createMenuItemContents = function(contents){
+        var menu = Object.assign({
+            title: '',
+            text: '',
+            type: '',
+            icon: 'play',
+            addShell: false,
+            iconAttribute: ``,
+            mediaBodyAttribute: ``,
+            attribute: ``,
+        },contents)
+        var html = `<div ${menu.iconAttribute} class="icon ${menu.small ? 'icon-sm' : ''} icon-shape bg-gradient-${menu.type} rounded-circle text-white">
+            <i class="fa fa-${menu.icon}"></i>
+          </div>
+          <div ${menu.mediaBodyAttribute} class="media-body ml-3 ${menu.mediaBodyClass}">
+            <h5 class="heading text-${menu.type} mb-md-1">${menu.title}</h5>
+            <p class="description d-none d-md-inline-block mb-0">${menu.text}</p>
+          </div>`
+        if(menu.addShell === true){
+            html = `<a ${menu.attribute} class="${menu.class} media d-flex align-items-center">` + html + `</a>`
+        }
+        return html
+    }
+    var selectedVideoOnDemand
+    var runningHlsStream
+    window.setColorOfMenuItem = function(el,options){
+        if(!options)options = {}
+        el.find(`.text-${options.from}`).removeClass(`text-${options.from}`).addClass(`text-${options.to}`)
+        el.find(`.bg-gradient-${options.from}`).removeClass(`bg-gradient-${options.from}`).addClass(`bg-gradient-${options.to}`)
+    }
+    window.addVodHandlersForStreamPreview = function(options){
+        var video = $('#livePreview')
+        var stream = options.stream
+        var playlist = stream.files
+        var position = options.position
+        video.on('timeupdate',function(){
+            var videoTimeNow = this.currentTime
+            localData('playTime_' + selectedVideoOnDemand,videoTimeNow)
+            var percent = videoTimeNow * 100 / this.duration
+        })
+        video.on('play',function(){
+            localData('lastWatchedPlaying','1')
+        })
+        video.on('pause',function(){
+            localData('lastWatchedPlaying','0')
+        })
+        video.on('ended',function(){
+            var newPosition = position + 1
+            var nextVideoLink = playlist[newPosition]
+            if(nextVideoLink){
+                setColorOfMenuItem($(`[playlistId="${stream.playlistId}"][launchVodFile="${nextVideoLink}"]`),{
+                    from: 'success',
+                    to: 'primary',
+                })
+                setStreamPreview(nextVideoLink,{
+                    stream: stream,
+                    position: newPosition,
+                    currentTime: 0
+                })
+            }
+        })
+    }
+    window.removeVodHandlersForStreamPreview = function(){
+        var video = $('#livePreview')
+        video.off('timeupdate')
+        video.off('ended')
+    }
+    window.setStreamPreviewName = function(streamUrl,options){
+        var urlParts = streamUrl.split('/')
+        var filename = urlParts[urlParts.length - 1]
+        $('.mediaActiveFilename').html(`<a href="${streamUrl}" target="_blank">${filename}</a>`)
+        if(options.stream){
+            $('.mediaTitle').text(options.stream.name)
+        }
+    }
+    window.setStreamPreview = function(streamUrl,options){
+        if(!options)options = {}
+        localData('lastWatchedPlaying','0')
+        setStreamPreviewName(streamUrl,options)
+        var filePathParts = streamUrl.split('/')
+        var filename = filePathParts[filePathParts.length - 1]
+        var videoEl = $('#livePreview')
+        var video = videoEl[0]
+        videoEl.off('loadeddata')
+        var notM3u8 = filename.indexOf('.m3u8') === -1
+        if(runningHlsStream){
+            runningHlsStream.destroy()
+            URL.revokeObjectURL(video.src)
+        }
+        localData('lastWatched',{
+            streamUrl: streamUrl,
+            options: options
+        })
+        if (notM3u8 || navigator.userAgent.match(/(iPod|iPhone|iPad)/) || (navigator.userAgent.match(/(Safari)/)&&!navigator.userAgent.match('Chrome'))) {
+            if(selectedVideoOnDemand !== streamUrl)video.src = streamUrl
+            videoEl.on('loadeddata',function(){
+                if(notM3u8){
+                    var videoTimeNow = localData()['playTime_' + streamUrl]
+                    video.currentTime = options.currentTime || parseFloat(videoTimeNow) || 0
+                }
+                if (video.paused) {
+                    video.play()
+                }
+            })
+        }else{
+            runningHlsStream = new Hls();
+            runningHlsStream.loadSource(streamUrl);
+            runningHlsStream.attachMedia(video);
+            runningHlsStream.on(Hls.Events.MANIFEST_PARSED,function() {
+                if (video.paused) {
+                    video.play();
+                }
+            })
+        }
+        removeVodHandlersForStreamPreview()
+        if(notM3u8){
+            selectedVideoOnDemand = streamUrl
+            addVodHandlersForStreamPreview(options)
+        }else{
+            selectedVideoOnDemand = null
+        }
+    }
+    $.fn.isInViewport = function() {
+        var elementTop = $(this).offset().top;
+        var elementBottom = elementTop + $(this).outerHeight();
+
+        var viewportTop = $(window).scrollTop();
+        var viewportBottom = viewportTop + $(window).height();
+
+        return elementBottom > viewportTop && elementTop < viewportBottom;
+    };
+})

shinobi/ShinobiHub - Article How to use Additional Input Feeds_files/jquery.js

@@ -0,0 +1 @@
+$.fn.serializeObject=function(){"use strict";var a={},b=function(b,c){var d=a[c.name];"undefined"!=typeof d&&d!==null?$.isArray(d)?d.push(c.value):a[c.name]=[d,c.value]:a[c.name]=c.value};return $.each(this.serializeArray(),b),a};

shinobi/ShinobiHub - Article How to use Additional Input Feeds_files/nucleo.css

@@ -0,0 +1,572 @@
+/*--------------------------------
+
+hermes-dashboard-icons Web Font - built using nucleoapp.com
+License - nucleoapp.com/license/
+
+-------------------------------- */
+@font-face {
+  font-family: 'NucleoIcons';
+  src: url('../fonts/nucleo-icons.eot');
+  src: url('../fonts/nucleo-icons.eot') format('embedded-opentype'), url('../fonts/nucleo-icons.woff2') format('woff2'), url('../fonts/nucleo-icons.woff') format('woff'), url('../fonts/nucleo-icons.ttf') format('truetype'), url('../fonts/nucleo-icons.svg') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/*------------------------
+    base class definition
+-------------------------*/
+.ni {
+  display: inline-block;
+  font: normal normal normal 14px/1 NucleoIcons;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+/*------------------------
+  change icon size
+-------------------------*/
+.ni-lg {
+  font-size: 1.33333333em;
+  line-height: 0.75em;
+  vertical-align: -15%;
+}
+.ni-2x {
+  font-size: 2em;
+}
+.ni-3x {
+  font-size: 3em;
+}
+.ni-4x {
+  font-size: 4em;
+}
+.ni-5x {
+  font-size: 5em;
+}
+
+/*----------------------------------
+  add a square/circle background
+-----------------------------------*/
+.ni.square,
+.ni.circle {
+  padding: 0.33333333em;
+  vertical-align: -16%;
+  background-color: #eee;
+}
+.ni.circle {
+  border-radius: 50%;
+}
+/*------------------------
+  list icons
+-------------------------*/
+.ni-ul {
+  padding-left: 0;
+  margin-left: 2.14285714em;
+  list-style-type: none;
+}
+.ni-ul > li {
+  position: relative;
+}
+.ni-ul > li > .ni {
+  position: absolute;
+  left: -1.57142857em;
+  top: 0.14285714em;
+  text-align: center;
+}
+.ni-ul > li > .ni.lg {
+  top: 0;
+  left: -1.35714286em;
+}
+.ni-ul > li > .ni.circle,
+.ni-ul > li > .ni.square {
+  top: -0.19047619em;
+  left: -1.9047619em;
+}
+/*------------------------
+  spinning icons
+-------------------------*/
+.ni.spin {
+  -webkit-animation: nc-spin 2s infinite linear;
+  -moz-animation: nc-spin 2s infinite linear;
+  animation: nc-spin 2s infinite linear;
+}
+@-webkit-keyframes nc-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@-moz-keyframes nc-spin {
+  0% {
+    -moz-transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+@keyframes nc-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+/*------------------------
+  rotated/flipped icons
+-------------------------*/
+.ni.rotate-90 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.ni.rotate-180 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.ni.rotate-270 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+  -webkit-transform: rotate(270deg);
+  -moz-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+.ni.flip-y {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
+  -webkit-transform: scale(-1, 1);
+  -moz-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+.ni.flip-x {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: scale(1, -1);
+  -moz-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  -o-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+/*------------------------
+    font icons
+-------------------------*/
+
+.ni-active-40::before {
+    content: "\ea02";
+}
+
+.ni-air-baloon::before {
+    content: "\ea03";
+}
+
+.ni-album-2::before {
+    content: "\ea04";
+}
+
+.ni-align-center::before {
+    content: "\ea05";
+}
+
+.ni-align-left-2::before {
+    content: "\ea06";
+}
+
+.ni-ambulance::before {
+    content: "\ea07";
+}
+
+.ni-app::before {
+    content: "\ea08";
+}
+
+.ni-archive-2::before {
+    content: "\ea09";
+}
+
+.ni-atom::before {
+    content: "\ea0a";
+}
+
+.ni-badge::before {
+    content: "\ea0b";
+}
+
+.ni-bag-17::before {
+    content: "\ea0c";
+}
+
+.ni-basket::before {
+    content: "\ea0d";
+}
+
+.ni-bell-55::before {
+    content: "\ea0e";
+}
+
+.ni-bold-down::before {
+    content: "\ea0f";
+}
+
+.ni-bold-left::before {
+    content: "\ea10";
+}
+
+.ni-bold-right::before {
+    content: "\ea11";
+}
+
+.ni-bold-up::before {
+    content: "\ea12";
+}
+
+.ni-bold::before {
+    content: "\ea13";
+}
+
+.ni-book-bookmark::before {
+    content: "\ea14";
+}
+
+.ni-books::before {
+    content: "\ea15";
+}
+
+.ni-box-2::before {
+    content: "\ea16";
+}
+
+.ni-briefcase-24::before {
+    content: "\ea17";
+}
+
+.ni-building::before {
+    content: "\ea18";
+}
+
+.ni-bulb-61::before {
+    content: "\ea19";
+}
+
+.ni-bullet-list-67::before {
+    content: "\ea1a";
+}
+
+.ni-bus-front-12::before {
+    content: "\ea1b";
+}
+
+.ni-button-pause::before {
+    content: "\ea1c";
+}
+
+.ni-button-play::before {
+    content: "\ea1d";
+}
+
+.ni-button-power::before {
+    content: "\ea1e";
+}
+
+.ni-calendar-grid-58::before {
+    content: "\ea1f";
+}
+
+.ni-camera-compact::before {
+    content: "\ea20";
+}
+
+.ni-caps-small::before {
+    content: "\ea21";
+}
+
+.ni-cart::before {
+    content: "\ea22";
+}
+
+.ni-chart-bar-32::before {
+    content: "\ea23";
+}
+
+.ni-chart-pie-35::before {
+    content: "\ea24";
+}
+
+.ni-chat-round::before {
+    content: "\ea25";
+}
+
+.ni-check-bold::before {
+    content: "\ea26";
+}
+
+.ni-circle-08::before {
+    content: "\ea27";
+}
+
+.ni-cloud-download-95::before {
+    content: "\ea28";
+}
+
+.ni-cloud-upload-96::before {
+    content: "\ea29";
+}
+
+.ni-compass-04::before {
+    content: "\ea2a";
+}
+
+.ni-controller::before {
+    content: "\ea2b";
+}
+
+.ni-credit-card::before {
+    content: "\ea2c";
+}
+
+.ni-curved-next::before {
+    content: "\ea2d";
+}
+
+.ni-delivery-fast::before {
+    content: "\ea2e";
+}
+
+.ni-diamond::before {
+    content: "\ea2f";
+}
+
+.ni-email-83::before {
+    content: "\ea30";
+}
+
+.ni-fat-add::before {
+    content: "\ea31";
+}
+
+.ni-fat-delete::before {
+    content: "\ea32";
+}
+
+.ni-fat-remove::before {
+    content: "\ea33";
+}
+
+.ni-favourite-28::before {
+    content: "\ea34";
+}
+
+.ni-folder-17::before {
+    content: "\ea35";
+}
+
+.ni-glasses-2::before {
+    content: "\ea36";
+}
+
+.ni-hat-3::before {
+    content: "\ea37";
+}
+
+.ni-headphones::before {
+    content: "\ea38";
+}
+
+.ni-html5::before {
+    content: "\ea39";
+}
+
+.ni-istanbul::before {
+    content: "\ea3a";
+}
+
+.ni-key-25::before {
+    content: "\ea3b";
+}
+
+.ni-laptop::before {
+    content: "\ea3c";
+}
+
+.ni-like-2::before {
+    content: "\ea3d";
+}
+
+.ni-lock-circle-open::before {
+    content: "\ea3e";
+}
+
+.ni-map-big::before {
+    content: "\ea3f";
+}
+
+.ni-mobile-button::before {
+    content: "\ea40";
+}
+
+.ni-money-coins::before {
+    content: "\ea41";
+}
+
+.ni-note-03::before {
+    content: "\ea42";
+}
+
+.ni-notification-70::before {
+    content: "\ea43";
+}
+
+.ni-palette::before {
+    content: "\ea44";
+}
+
+.ni-paper-diploma::before {
+    content: "\ea45";
+}
+
+.ni-pin-3::before {
+    content: "\ea46";
+}
+
+.ni-planet::before {
+    content: "\ea47";
+}
+
+.ni-ruler-pencil::before {
+    content: "\ea48";
+}
+
+.ni-satisfied::before {
+    content: "\ea49";
+}
+
+.ni-scissors::before {
+    content: "\ea4a";
+}
+
+.ni-send::before {
+    content: "\ea4b";
+}
+
+.ni-settings-gear-65::before {
+    content: "\ea4c";
+}
+
+.ni-settings::before {
+    content: "\ea4d";
+}
+
+.ni-single-02::before {
+    content: "\ea4e";
+}
+
+.ni-single-copy-04::before {
+    content: "\ea4f";
+}
+
+.ni-sound-wave::before {
+    content: "\ea50";
+}
+
+.ni-spaceship::before {
+    content: "\ea51";
+}
+
+.ni-square-pin::before {
+    content: "\ea52";
+}
+
+.ni-support-16::before {
+    content: "\ea53";
+}
+
+.ni-tablet-button::before {
+    content: "\ea54";
+}
+
+.ni-tag::before {
+    content: "\ea55";
+}
+
+.ni-tie-bow::before {
+    content: "\ea56";
+}
+
+.ni-time-alarm::before {
+    content: "\ea57";
+}
+
+.ni-trophy::before {
+    content: "\ea58";
+}
+
+.ni-tv-2::before {
+    content: "\ea59";
+}
+
+.ni-umbrella-13::before {
+    content: "\ea5a";
+}
+
+.ni-user-run::before {
+    content: "\ea5b";
+}
+
+.ni-vector::before {
+    content: "\ea5c";
+}
+
+.ni-watch-time::before {
+    content: "\ea5d";
+}
+
+.ni-world::before {
+    content: "\ea5e";
+}
+
+.ni-zoom-split-in::before {
+    content: "\ea5f";
+}
+
+.ni-collection::before {
+    content: "\ea60";
+}
+
+.ni-image::before {
+    content: "\ea61";
+}
+
+.ni-shop::before {
+    content: "\ea62";
+}
+
+.ni-ungroup::before {
+    content: "\ea63";
+}
+
+.ni-world-2::before {
+    content: "\ea64";
+}
+
+.ni-ui-04::before {
+    content: "\ea65";
+}
+
+
+/* all icon font classes list here */

shinobi/ShinobiHub - Article How to use Additional Input Feeds_files/open-sans.css

@@ -0,0 +1,45 @@
+/* BEGIN Light */
+@font-face {
+  font-family: "Open Sans";
+  src: url("../fonts/Light/OpenSans-Light.woff2?v=1.101") format("woff2"), url("../fonts/Light/OpenSans-Light.woff?v=1.101") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+
+/* END Light */
+/* BEGIN Regular */
+@font-face {
+  font-family: "Open Sans";
+  src: url("../fonts/Regular/OpenSans-Regular.woff2?v=1.101") format("woff2"), url("../fonts/Regular/OpenSans-Regular.woff?v=1.101") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* END Regular */
+/* BEGIN Semibold */
+@font-face {
+  font-family: "Open Sans";
+  src: url("../fonts/Semibold/OpenSans-Semibold.woff2?v=1.101") format("woff2"), url("../fonts/Semibold/OpenSans-Semibold.woff?v=1.101") format("woff");
+  font-weight: 600;
+  font-style: normal;
+}
+
+/* END Semibold */
+/* BEGIN Bold */
+@font-face {
+  font-family: "Open Sans";
+  src: url("../fonts/Bold/OpenSans-Bold.woff2?v=1.101") format("woff2"), url("../fonts/Bold/OpenSans-Bold.woff?v=1.101") format("woff");
+  font-weight: bold;
+  font-style: normal;
+}
+
+/* END Bold */
+/* BEGIN Extrabold */
+@font-face {
+  font-family: "Open Sans";
+  src: url("../fonts/ExtraBold/OpenSans-ExtraBold.woff2?v=1.101") format("woff2"), url("../fonts/ExtraBold/OpenSans-ExtraBold.woff?v=1.101") format("woff");
+  font-weight: 800;
+  font-style: normal;
+}
+
+/* END Extrabold */

shinobi/ShinobiHub - Article How to use Additional Input Feeds_files/renderer.css

@@ -0,0 +1,69 @@
+.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
+    color: #fff;
+    background-color: #222744;
+}
+a {cursor: pointer;}
+.epic-text {
+    margin: 15px 0 0 0;
+    text-align: center;
+    color: #777;
+    font-family: sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 3pt;
+    font-size: 8pt;
+}
+
+/*  */
+.card-edge {
+    position: relative;
+    line-height: 0;
+}
+/* PLAYER */
+#videoCard .infoBar {
+    position:absolute;
+    width:100%;
+    z-index:12;
+    background: rgba(0,0,0,0.5);
+    line-height: normal;
+}
+#videoCard:hover .infoBar {
+    opacity: 1!important;
+}
+#videoCard .infoBar a{
+    color: #fff;
+}
+#overlayPlayButton {
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    margin:auto;
+    cursor:pointer;
+    z-index: 11;
+}
+
+/*  */
+.search-highlight {
+    background-color: #ded824;
+    color: #000;
+}
+
+.btn-circle.btn-xl {
+    width: 70px;
+    height: 70px;
+    padding: 10px 16px;
+    border-radius: 35px;
+    font-size: 36px;
+    line-height: 1.33;
+}
+
+.btn-circle {
+    width: 30px;
+    height: 30px;
+    padding: 6px 0px;
+    border-radius: 15px;
+    text-align: center;
+    font-size: 12px;
+    line-height: 1.42857;
+}

shinobi/ShinobiHub - Article How to use FTP-based Event Triggering in Shinobi_files/argon.js

@@ -0,0 +1,105 @@
+/*!
+
+=========================================================
+* Argon Design System - v1.0.1
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-design-system
+* Copyright 2018 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/argon-design-system/blob/master/LICENSE.md)
+
+* Coded by www.creative-tim.com
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+
+"use strict";
+$(document).ready(function() {
+
+    // Collapse navigation
+    $('.navbar-main .collapse').on('hide.bs.collapse', function () {
+        var $this = $(this);
+        $this.addClass('collapsing-out');
+    });
+
+    $('.navbar-main .collapse').on('hidden.bs.collapse', function () {
+        var $this = $(this);
+        $this.removeClass('collapsing-out');
+    });
+
+    $('.navbar-main .dropdown').on('hide.bs.dropdown', function () {
+        var $this = $(this).find('.dropdown-menu');
+
+        $this.addClass('close');
+
+        setTimeout(function(){
+            $this.removeClass('close');
+        }, 200);
+
+    });
+
+    // Headroom - show/hide navbar on scroll
+    if($('.headroom')[0]) {
+        var headroom  = new Headroom(document.querySelector("#navbar-main"), {
+            offset: 300,
+            tolerance : {
+                up : 30,
+                down : 30
+            },
+        });
+        headroom.init();
+    }
+
+    // Tooltip
+    $('[data-toggle="tooltip"]').tooltip();
+
+    // Popover
+    $('[data-toggle="popover"]').each(function() {
+        var popoverClass = '';
+        if($(this).data('color')) {
+            popoverClass = 'popover-'+$(this).data('color');
+        }
+        $(this).popover({
+            trigger: 'focus',
+            template: '<div class="popover '+ popoverClass +'" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
+        })
+    });
+
+    // Additional .focus class on form-groups
+    $('.form-control').on('focus blur', function(e) {
+        $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
+    }).trigger('blur');
+
+
+    // When in viewport
+    $('[data-toggle="on-screen"]')[0] && $('[data-toggle="on-screen"]').onScreen({
+        container: window,
+        direction: 'vertical',
+        doIn: function() {
+            //alert();
+        },
+        doOut: function() {
+            // Do something to the matched elements as they get off scren
+        },
+        tolerance: 200,
+        throttle: 50,
+        toggleClass: 'on-screen',
+        debug: false
+    });
+
+    // Scroll to anchor with scroll animation
+    $('[data-toggle="scroll"]').on('click', function(event) {
+        var hash = $(this).attr('href');
+        var offset = $(this).data('offset') ? $(this).data('offset') : 0;
+
+        // Animate scroll to the selected section
+        $('html, body').stop(true, true).animate({
+            scrollTop: $(hash).offset().top - offset
+        }, 600);
+
+        event.preventDefault();
+    });
+ });

shinobi/ShinobiHub - Article How to use FTP-based Event Triggering in Shinobi_files/articles.css

@@ -0,0 +1,78 @@
+/* Article Search Page */
+.page__container .article-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.page__container .article-list li {
+    border-radius: 5px;
+    padding: 10px 20px;
+    margin-top: 30px;
+    border: 1px solid #a6d1ec;
+    border-left: 5px solid #32325d;
+}
+
+.page__container .article-list li h2 {
+    margin: 0
+}
+
+.page__container .article-categories ul {
+    margin: 0 0 0 20px;
+    padding: 0;
+    list-style: square
+}
+
+.page__container .article-list .new-story li{
+    border-color: #29b94f
+}
+
+.page__container .article-list .new-story *{
+    color: #29b94f
+}
+.article-list h2{
+    font-weight: 100;
+}
+.article-button-row > *{
+    vertical-align: top;
+}
+
+.banner-list-search {
+    border: 1px solid #ddd;
+    padding: 10px 20px;
+    color: #444;
+    font-size: 20pt;
+    border-radius: 30px;
+    display: block;
+    font-family: "Work Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif, sans-serif;
+    margin-bottom: 30px;
+    font-weight: 300
+}
+
+.add-new-floater {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    z-index: 101;
+}
+
+/* Article New, Edit, View */
+[data-name="page__heading"] *,
+[data-name="page__opening"] *,
+[data-name="page__byline"] *,
+.page__header .date {
+    color: #fff;
+}
+
+pre {
+    background: #eee;
+    padding: 20px;
+    border-radius: 10px;
+}
+
+.edit-buttons-float {
+    position: fixed;
+    top: 80px;
+    left: 15px;
+    z-index: 100;
+}

shinobi/ShinobiHub - Article How to use FTP-based Event Triggering in Shinobi_files/clientArea.js

@@ -0,0 +1,40 @@
+$(document).ready(function(){
+    $.confirm={e:$('#confirm_window')};
+    $.confirm.title=$.confirm.e.find('.modal-title span')
+    $.confirm.body=$.confirm.e.find('.modal-body')
+    $.confirm.footer=$.confirm.e.find('.modal-footer')
+    $.confirm.click=function(x,e){
+        $.confirm.footer.find('.confirmaction').remove()
+        var createButton = function(x,place,callback){
+            $.confirm.footer.prepend('<button type="button" class="btn '+x.class+' confirmaction confirmaction'+place+'">'+x.title+'</button>')
+            if(!x.class){x.class='btn-success'}
+            if(!x.title){x.title='Save changes'}
+            $.confirm.footer.find('.confirmaction'+place).click(function(){
+                $.confirm.e.modal('hide')
+                callback();
+            })
+        }
+        if(x instanceof Array){
+            $.each(x,function(place,x){
+                createButton(x,place,x.callback)
+            })
+        }else{
+            createButton(x,0,e)
+        }
+    }
+    $.confirm.create = function(options){
+        if(options.title && options.body){
+            $.confirm.e.modal('show')
+            $.confirm.title.text(options.title)
+            $.confirm.body.css('word-wrap','initial')
+            if(options.breakWord){
+                $.confirm.body.css('word-wrap','break-word')
+            }
+            $.confirm.body.html(options.body)
+        }
+        if(options.clickOptions && options.clickCallback)$.confirm.click(options.clickOptions,options.clickCallback)
+    }
+    $.confirm.e.on('hidden.bs.modal', function () {
+        $.confirm.footer.find('.confirmaction').remove()
+    })
+})

shinobi/ShinobiHub - Article How to use FTP-based Event Triggering in Shinobi_files/clientArea_002.css

@@ -0,0 +1,13 @@
+.modal-dialog-slideout {min-height: 100%; margin: 0 0 0 auto;background: #fff;}
+.modal.fade .modal-dialog.modal-dialog-slideout {-webkit-transform: translate(100%,0)scale(1);transform: translate(100%,0)scale(1);}
+.modal.fade.show .modal-dialog.modal-dialog-slideout {-webkit-transform: translate(0,0);transform: translate(0,0);display: flex;align-items: stretch;-webkit-box-align: stretch;height: 100%;}
+.modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body{overflow-y: auto;overflow-x: hidden;}
+.modal-dialog-slideout .modal-content{border: 0;}
+.modal-dialog-slideout .modal-header, .modal-dialog-slideout .modal-footer {height: 69px; display: block;}
+.modal-dialog-slideout .modal-header h5 {float:left;}
+/* modals */
+@media (min-width: 992px){
+    .modal-lg, .modal-xl {
+        max-width: 90%!important;
+    }
+}

shinobi/ShinobiHub - Article How to use FTP-based Event Triggering in Shinobi_files/clientArea_002.js

@@ -0,0 +1,151 @@
+$(document).ready(function(){
+    window.localData = function(r,rr,rrr){
+        if(!rrr){rrr={};};if(typeof rrr === 'string'){rrr={n:rrr}};if(!rrr.n){rrr.n='ShinobiLicenseClientSite_'+location.host}
+        ii={o:localStorage.getItem(rrr.n)};try{ii.o=JSON.parse(ii.o)}catch(e){ii.o={}}
+        if(!ii.o){ii.o={}}
+        if(r&&rr&&!rrr.x){
+            ii.o[r]=rr;
+        }
+        switch(rrr.x){
+            case 0:
+                delete(ii.o[r])
+            break;
+            case 1:
+                delete(ii.o[r][rr])
+            break;
+        }
+        localStorage.setItem(rrr.n,JSON.stringify(ii.o))
+        return ii.o
+    }
+    $.createMenuItemContents = function(contents){
+        var menu = Object.assign({
+            title: '',
+            text: '',
+            type: '',
+            icon: 'play',
+            addShell: false,
+            iconAttribute: ``,
+            mediaBodyAttribute: ``,
+            attribute: ``,
+        },contents)
+        var html = `<div ${menu.iconAttribute} class="icon ${menu.small ? 'icon-sm' : ''} icon-shape bg-gradient-${menu.type} rounded-circle text-white">
+            <i class="fa fa-${menu.icon}"></i>
+          </div>
+          <div ${menu.mediaBodyAttribute} class="media-body ml-3 ${menu.mediaBodyClass}">
+            <h5 class="heading text-${menu.type} mb-md-1">${menu.title}</h5>
+            <p class="description d-none d-md-inline-block mb-0">${menu.text}</p>
+          </div>`
+        if(menu.addShell === true){
+            html = `<a ${menu.attribute} class="${menu.class} media d-flex align-items-center">` + html + `</a>`
+        }
+        return html
+    }
+    var selectedVideoOnDemand
+    var runningHlsStream
+    window.setColorOfMenuItem = function(el,options){
+        if(!options)options = {}
+        el.find(`.text-${options.from}`).removeClass(`text-${options.from}`).addClass(`text-${options.to}`)
+        el.find(`.bg-gradient-${options.from}`).removeClass(`bg-gradient-${options.from}`).addClass(`bg-gradient-${options.to}`)
+    }
+    window.addVodHandlersForStreamPreview = function(options){
+        var video = $('#livePreview')
+        var stream = options.stream
+        var playlist = stream.files
+        var position = options.position
+        video.on('timeupdate',function(){
+            var videoTimeNow = this.currentTime
+            localData('playTime_' + selectedVideoOnDemand,videoTimeNow)
+            var percent = videoTimeNow * 100 / this.duration
+        })
+        video.on('play',function(){
+            localData('lastWatchedPlaying','1')
+        })
+        video.on('pause',function(){
+            localData('lastWatchedPlaying','0')
+        })
+        video.on('ended',function(){
+            var newPosition = position + 1
+            var nextVideoLink = playlist[newPosition]
+            if(nextVideoLink){
+                setColorOfMenuItem($(`[playlistId="${stream.playlistId}"][launchVodFile="${nextVideoLink}"]`),{
+                    from: 'success',
+                    to: 'primary',
+                })
+                setStreamPreview(nextVideoLink,{
+                    stream: stream,
+                    position: newPosition,
+                    currentTime: 0
+                })
+            }
+        })
+    }
+    window.removeVodHandlersForStreamPreview = function(){
+        var video = $('#livePreview')
+        video.off('timeupdate')
+        video.off('ended')
+    }
+    window.setStreamPreviewName = function(streamUrl,options){
+        var urlParts = streamUrl.split('/')
+        var filename = urlParts[urlParts.length - 1]
+        $('.mediaActiveFilename').html(`<a href="${streamUrl}" target="_blank">${filename}</a>`)
+        if(options.stream){
+            $('.mediaTitle').text(options.stream.name)
+        }
+    }
+    window.setStreamPreview = function(streamUrl,options){
+        if(!options)options = {}
+        localData('lastWatchedPlaying','0')
+        setStreamPreviewName(streamUrl,options)
+        var filePathParts = streamUrl.split('/')
+        var filename = filePathParts[filePathParts.length - 1]
+        var videoEl = $('#livePreview')
+        var video = videoEl[0]
+        videoEl.off('loadeddata')
+        var notM3u8 = filename.indexOf('.m3u8') === -1
+        if(runningHlsStream){
+            runningHlsStream.destroy()
+            URL.revokeObjectURL(video.src)
+        }
+        localData('lastWatched',{
+            streamUrl: streamUrl,
+            options: options
+        })
+        if (notM3u8 || navigator.userAgent.match(/(iPod|iPhone|iPad)/) || (navigator.userAgent.match(/(Safari)/)&&!navigator.userAgent.match('Chrome'))) {
+            if(selectedVideoOnDemand !== streamUrl)video.src = streamUrl
+            videoEl.on('loadeddata',function(){
+                if(notM3u8){
+                    var videoTimeNow = localData()['playTime_' + streamUrl]
+                    video.currentTime = options.currentTime || parseFloat(videoTimeNow) || 0
+                }
+                if (video.paused) {
+                    video.play()
+                }
+            })
+        }else{
+            runningHlsStream = new Hls();
+            runningHlsStream.loadSource(streamUrl);
+            runningHlsStream.attachMedia(video);
+            runningHlsStream.on(Hls.Events.MANIFEST_PARSED,function() {
+                if (video.paused) {
+                    video.play();
+                }
+            })
+        }
+        removeVodHandlersForStreamPreview()
+        if(notM3u8){
+            selectedVideoOnDemand = streamUrl
+            addVodHandlersForStreamPreview(options)
+        }else{
+            selectedVideoOnDemand = null
+        }
+    }
+    $.fn.isInViewport = function() {
+        var elementTop = $(this).offset().top;
+        var elementBottom = elementTop + $(this).outerHeight();
+
+        var viewportTop = $(window).scrollTop();
+        var viewportBottom = viewportTop + $(window).height();
+
+        return elementBottom > viewportTop && elementTop < viewportBottom;
+    };
+})

shinobi/ShinobiHub - Article How to use FTP-based Event Triggering in Shinobi_files/clientArea_003.js

@@ -0,0 +1,3 @@
+$(document).ready(function(){
+
+})

shinobi/ShinobiHub - Article How to use FTP-based Event Triggering in Shinobi_files/clientArea_004.js

@@ -0,0 +1,12 @@
+$(document).ready(function(){
+    console.log('<%- config.webPageTitle %> : Attaching Socket.IO Handler')
+    $.webSocket = io({
+        transports: ['websocket']
+    })
+    $.webSocket.on('connect',function(d){
+        console.log('Websocket Connected')
+    })
+    $.webSocket.on('f',function(d){
+        console.log(d)
+    })
+})

shinobi/ShinobiHub - Article How to use FTP-based Event Triggering in Shinobi_files/jquery_002.js

@@ -0,0 +1 @@
+$.fn.serializeObject=function(){"use strict";var a={},b=function(b,c){var d=a[c.name];"undefined"!=typeof d&&d!==null?$.isArray(d)?d.push(c.value):a[c.name]=[d,c.value]:a[c.name]=c.value};return $.each(this.serializeArray(),b),a};

shinobi/ShinobiHub - Article How to use FTP-based Event Triggering in Shinobi_files/nucleo.css

@@ -0,0 +1,572 @@
+/*--------------------------------
+
+hermes-dashboard-icons Web Font - built using nucleoapp.com
+License - nucleoapp.com/license/
+
+-------------------------------- */
+@font-face {
+  font-family: 'NucleoIcons';
+  src: url('../fonts/nucleo-icons.eot');
+  src: url('../fonts/nucleo-icons.eot') format('embedded-opentype'), url('../fonts/nucleo-icons.woff2') format('woff2'), url('../fonts/nucleo-icons.woff') format('woff'), url('../fonts/nucleo-icons.ttf') format('truetype'), url('../fonts/nucleo-icons.svg') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/*------------------------
+    base class definition
+-------------------------*/
+.ni {
+  display: inline-block;
+  font: normal normal normal 14px/1 NucleoIcons;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+/*------------------------
+  change icon size
+-------------------------*/
+.ni-lg {
+  font-size: 1.33333333em;
+  line-height: 0.75em;
+  vertical-align: -15%;
+}
+.ni-2x {
+  font-size: 2em;
+}
+.ni-3x {
+  font-size: 3em;
+}
+.ni-4x {
+  font-size: 4em;
+}
+.ni-5x {
+  font-size: 5em;
+}
+
+/*----------------------------------
+  add a square/circle background
+-----------------------------------*/
+.ni.square,
+.ni.circle {
+  padding: 0.33333333em;
+  vertical-align: -16%;
+  background-color: #eee;
+}
+.ni.circle {
+  border-radius: 50%;
+}
+/*------------------------
+  list icons
+-------------------------*/
+.ni-ul {
+  padding-left: 0;
+  margin-left: 2.14285714em;
+  list-style-type: none;
+}
+.ni-ul > li {
+  position: relative;
+}
+.ni-ul > li > .ni {
+  position: absolute;
+  left: -1.57142857em;
+  top: 0.14285714em;
+  text-align: center;
+}
+.ni-ul > li > .ni.lg {
+  top: 0;
+  left: -1.35714286em;
+}
+.ni-ul > li > .ni.circle,
+.ni-ul > li > .ni.square {
+  top: -0.19047619em;
+  left: -1.9047619em;
+}
+/*------------------------
+  spinning icons
+-------------------------*/
+.ni.spin {
+  -webkit-animation: nc-spin 2s infinite linear;
+  -moz-animation: nc-spin 2s infinite linear;
+  animation: nc-spin 2s infinite linear;
+}
+@-webkit-keyframes nc-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@-moz-keyframes nc-spin {
+  0% {
+    -moz-transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+@keyframes nc-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+/*------------------------
+  rotated/flipped icons
+-------------------------*/
+.ni.rotate-90 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.ni.rotate-180 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.ni.rotate-270 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+  -webkit-transform: rotate(270deg);
+  -moz-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+.ni.flip-y {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
+  -webkit-transform: scale(-1, 1);
+  -moz-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+.ni.flip-x {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: scale(1, -1);
+  -moz-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  -o-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+/*------------------------
+    font icons
+-------------------------*/
+
+.ni-active-40::before {
+    content: "\ea02";
+}
+
+.ni-air-baloon::before {
+    content: "\ea03";
+}
+
+.ni-album-2::before {
+    content: "\ea04";
+}
+
+.ni-align-center::before {
+    content: "\ea05";
+}
+
+.ni-align-left-2::before {
+    content: "\ea06";
+}
+
+.ni-ambulance::before {
+    content: "\ea07";
+}
+
+.ni-app::before {
+    content: "\ea08";
+}
+
+.ni-archive-2::before {
+    content: "\ea09";
+}
+
+.ni-atom::before {
+    content: "\ea0a";
+}
+
+.ni-badge::before {
+    content: "\ea0b";
+}
+
+.ni-bag-17::before {
+    content: "\ea0c";
+}
+
+.ni-basket::before {
+    content: "\ea0d";
+}
+
+.ni-bell-55::before {
+    content: "\ea0e";
+}
+
+.ni-bold-down::before {
+    content: "\ea0f";
+}
+
+.ni-bold-left::before {
+    content: "\ea10";
+}
+
+.ni-bold-right::before {
+    content: "\ea11";
+}
+
+.ni-bold-up::before {
+    content: "\ea12";
+}
+
+.ni-bold::before {
+    content: "\ea13";
+}
+
+.ni-book-bookmark::before {
+    content: "\ea14";
+}
+
+.ni-books::before {
+    content: "\ea15";
+}
+
+.ni-box-2::before {
+    content: "\ea16";
+}
+
+.ni-briefcase-24::before {
+    content: "\ea17";
+}
+
+.ni-building::before {
+    content: "\ea18";
+}
+
+.ni-bulb-61::before {
+    content: "\ea19";
+}
+
+.ni-bullet-list-67::before {
+    content: "\ea1a";
+}
+
+.ni-bus-front-12::before {
+    content: "\ea1b";
+}
+
+.ni-button-pause::before {
+    content: "\ea1c";
+}
+
+.ni-button-play::before {
+    content: "\ea1d";
+}
+
+.ni-button-power::before {
+    content: "\ea1e";
+}
+
+.ni-calendar-grid-58::before {
+    content: "\ea1f";
+}
+
+.ni-camera-compact::before {
+    content: "\ea20";
+}
+
+.ni-caps-small::before {
+    content: "\ea21";
+}
+
+.ni-cart::before {
+    content: "\ea22";
+}
+
+.ni-chart-bar-32::before {
+    content: "\ea23";
+}
+
+.ni-chart-pie-35::before {
+    content: "\ea24";
+}
+
+.ni-chat-round::before {
+    content: "\ea25";
+}
+
+.ni-check-bold::before {
+    content: "\ea26";
+}
+
+.ni-circle-08::before {
+    content: "\ea27";
+}
+
+.ni-cloud-download-95::before {
+    content: "\ea28";
+}
+
+.ni-cloud-upload-96::before {
+    content: "\ea29";
+}
+
+.ni-compass-04::before {
+    content: "\ea2a";
+}
+
+.ni-controller::before {
+    content: "\ea2b";
+}
+
+.ni-credit-card::before {
+    content: "\ea2c";
+}
+
+.ni-curved-next::before {
+    content: "\ea2d";
+}
+
+.ni-delivery-fast::before {
+    content: "\ea2e";
+}
+
+.ni-diamond::before {
+    content: "\ea2f";
+}
+
+.ni-email-83::before {
+    content: "\ea30";
+}
+
+.ni-fat-add::before {
+    content: "\ea31";
+}
+
+.ni-fat-delete::before {
+    content: "\ea32";
+}
+
+.ni-fat-remove::before {
+    content: "\ea33";
+}
+
+.ni-favourite-28::before {
+    content: "\ea34";
+}
+
+.ni-folder-17::before {
+    content: "\ea35";
+}
+
+.ni-glasses-2::before {
+    content: "\ea36";
+}
+
+.ni-hat-3::before {
+    content: "\ea37";
+}
+
+.ni-headphones::before {
+    content: "\ea38";
+}
+
+.ni-html5::before {
+    content: "\ea39";
+}
+
+.ni-istanbul::before {
+    content: "\ea3a";
+}
+
+.ni-key-25::before {
+    content: "\ea3b";
+}
+
+.ni-laptop::before {
+    content: "\ea3c";
+}
+
+.ni-like-2::before {
+    content: "\ea3d";
+}
+
+.ni-lock-circle-open::before {
+    content: "\ea3e";
+}
+
+.ni-map-big::before {
+    content: "\ea3f";
+}
+
+.ni-mobile-button::before {
+    content: "\ea40";
+}
+
+.ni-money-coins::before {
+    content: "\ea41";
+}
+
+.ni-note-03::before {
+    content: "\ea42";
+}
+
+.ni-notification-70::before {
+    content: "\ea43";
+}
+
+.ni-palette::before {
+    content: "\ea44";
+}
+
+.ni-paper-diploma::before {
+    content: "\ea45";
+}
+
+.ni-pin-3::before {
+    content: "\ea46";
+}
+
+.ni-planet::before {
+    content: "\ea47";
+}
+
+.ni-ruler-pencil::before {
+    content: "\ea48";
+}
+
+.ni-satisfied::before {
+    content: "\ea49";
+}
+
+.ni-scissors::before {
+    content: "\ea4a";
+}
+
+.ni-send::before {
+    content: "\ea4b";
+}
+
+.ni-settings-gear-65::before {
+    content: "\ea4c";
+}
+
+.ni-settings::before {
+    content: "\ea4d";
+}
+
+.ni-single-02::before {
+    content: "\ea4e";
+}
+
+.ni-single-copy-04::before {
+    content: "\ea4f";
+}
+
+.ni-sound-wave::before {
+    content: "\ea50";
+}
+
+.ni-spaceship::before {
+    content: "\ea51";
+}
+
+.ni-square-pin::before {
+    content: "\ea52";
+}
+
+.ni-support-16::before {
+    content: "\ea53";
+}
+
+.ni-tablet-button::before {
+    content: "\ea54";
+}
+
+.ni-tag::before {
+    content: "\ea55";
+}
+
+.ni-tie-bow::before {
+    content: "\ea56";
+}
+
+.ni-time-alarm::before {
+    content: "\ea57";
+}
+
+.ni-trophy::before {
+    content: "\ea58";
+}
+
+.ni-tv-2::before {
+    content: "\ea59";
+}
+
+.ni-umbrella-13::before {
+    content: "\ea5a";
+}
+
+.ni-user-run::before {
+    content: "\ea5b";
+}
+
+.ni-vector::before {
+    content: "\ea5c";
+}
+
+.ni-watch-time::before {
+    content: "\ea5d";
+}
+
+.ni-world::before {
+    content: "\ea5e";
+}
+
+.ni-zoom-split-in::before {
+    content: "\ea5f";
+}
+
+.ni-collection::before {
+    content: "\ea60";
+}
+
+.ni-image::before {
+    content: "\ea61";
+}
+
+.ni-shop::before {
+    content: "\ea62";
+}
+
+.ni-ungroup::before {
+    content: "\ea63";
+}
+
+.ni-world-2::before {
+    content: "\ea64";
+}
+
+.ni-ui-04::before {
+    content: "\ea65";
+}
+
+
+/* all icon font classes list here */

shinobi/ShinobiHub - Article How to use FTP-based Event Triggering in Shinobi_files/open-sans.css

@@ -0,0 +1,45 @@
+/* BEGIN Light */
+@font-face {
+  font-family: "Open Sans";
+  src: url("../fonts/Light/OpenSans-Light.woff2?v=1.101") format("woff2"), url("../fonts/Light/OpenSans-Light.woff?v=1.101") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+
+/* END Light */
+/* BEGIN Regular */
+@font-face {
+  font-family: "Open Sans";
+  src: url("../fonts/Regular/OpenSans-Regular.woff2?v=1.101") format("woff2"), url("../fonts/Regular/OpenSans-Regular.woff?v=1.101") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* END Regular */
+/* BEGIN Semibold */
+@font-face {
+  font-family: "Open Sans";
+  src: url("../fonts/Semibold/OpenSans-Semibold.woff2?v=1.101") format("woff2"), url("../fonts/Semibold/OpenSans-Semibold.woff?v=1.101") format("woff");
+  font-weight: 600;
+  font-style: normal;
+}
+
+/* END Semibold */
+/* BEGIN Bold */
+@font-face {
+  font-family: "Open Sans";
+  src: url("../fonts/Bold/OpenSans-Bold.woff2?v=1.101") format("woff2"), url("../fonts/Bold/OpenSans-Bold.woff?v=1.101") format("woff");
+  font-weight: bold;
+  font-style: normal;
+}
+
+/* END Bold */
+/* BEGIN Extrabold */
+@font-face {
+  font-family: "Open Sans";
+  src: url("../fonts/ExtraBold/OpenSans-ExtraBold.woff2?v=1.101") format("woff2"), url("../fonts/ExtraBold/OpenSans-ExtraBold.woff?v=1.101") format("woff");
+  font-weight: 800;
+  font-style: normal;
+}
+
+/* END Extrabold */

shinobi/ShinobiHub - Article How to use FTP-based Event Triggering in Shinobi_files/renderer.css

@@ -0,0 +1,69 @@
+.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
+    color: #fff;
+    background-color: #222744;
+}
+a {cursor: pointer;}
+.epic-text {
+    margin: 15px 0 0 0;
+    text-align: center;
+    color: #777;
+    font-family: sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 3pt;
+    font-size: 8pt;
+}
+
+/*  */
+.card-edge {
+    position: relative;
+    line-height: 0;
+}
+/* PLAYER */
+#videoCard .infoBar {
+    position:absolute;
+    width:100%;
+    z-index:12;
+    background: rgba(0,0,0,0.5);
+    line-height: normal;
+}
+#videoCard:hover .infoBar {
+    opacity: 1!important;
+}
+#videoCard .infoBar a{
+    color: #fff;
+}
+#overlayPlayButton {
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    margin:auto;
+    cursor:pointer;
+    z-index: 11;
+}
+
+/*  */
+.search-highlight {
+    background-color: #ded824;
+    color: #000;
+}
+
+.btn-circle.btn-xl {
+    width: 70px;
+    height: 70px;
+    padding: 10px 16px;
+    border-radius: 35px;
+    font-size: 36px;
+    line-height: 1.33;
+}
+
+.btn-circle {
+    width: 30px;
+    height: 30px;
+    padding: 6px 0px;
+    border-radius: 15px;
+    text-align: center;
+    font-size: 12px;
+    line-height: 1.42857;
+}