first

frontend/public/piVideo/web/static/css/adminlte.min.css

@@ -0,0 +1,12 @@
+/*!
+ *   AdminLTE v3.0.5
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <http://adminlte.io>
+ *   License: Open source - MIT <http://opensource.org/licenses/MIT>
+ *//*!
+ * Bootstrap v4.4.1 (https://getbootstrap.com/)
+ * Copyright 2011-2019 The Bootstrap Authors
+ * Copyright 2011-2019 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#ffffff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:"Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:"Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:none}a:not([href]){color:inherit;text-decoration:none}a:not([href]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;font-family:inherit;font-weight:500;line-height:1.2;color:inherit}.h1,h1{font-size:2.5rem}.h2,h2{font-size:2rem}.h3,h3{font-size:1.75rem}.h4,h4{font-size:1.5rem}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}.lead{font-size:1.25rem;font-weight:300}.display-1{font-size:6rem;font-weight:300;line-height:1.2}.display-2{font-size:5.5rem;font-weight:300;line-height:1.2}.display-3{font-size:4.5rem;font-weight:300;line-height:1.2}.display-4{font-size:3.5rem;font-weight:300;line-height:1.2}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}.small,small{font-size:80%;font-weight:400}.mark,mark{padding:.2em;background-color:#fcf8e3}.liLine truncated
+/*# sourceMappingURL=adminlte.min.css.map */

frontend/public/piVideo/web/static/css/adminlte.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["..\\..\\build\\scss\\AdminLTE.scss","..\\..\\node_modules\\bootstrap\\scss\\bootstrap.scss","..\\..\\node_modules\\bootstrap\\scss\\_root.scss","..\\..\\node_modules\\bootstrap\\scss\\_reboot.scss","..\\..\\build\\scss\\_bootstrap-variables.scss","..\\..\\node_modules\\bootstrap\\scss\\vendor\\_rfs.scss","dist\\css\\adminlte.css","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_hover.scss","..\\..\\node_modules\\bootstrap\\scss\\_type.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_lists.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_image.scss","..\\..\\node_modules\\bootstrap\\scss\\_images.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_box-shadow.scss","..\\..\\node_modules\\bootstrap\\scss\\_code.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_border-radius.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_grid.scss","..\\..\\node_modules\\bootstrap\\scss\\_grid.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_grid-framework.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_breakpoints.scss","..\\..\\node_modules\\bootstrap\\scss\\_tables.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_table-row.scss","..\\..\\node_modules\\bootstrap\\scss\\_functions.scss","..\\..\\node_modules\\bootstrap\\scss\\_forms.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_transition.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_forms.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_gradients.scss","..\\..\\node_modules\\bootstrap\\scss\\_buttons.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_buttons.scss","..\\..\\node_modules\\bootstrap\\scss\\_transitions.scss","..\\..\\node_modules\\bootstrap\\scss\\_dropdown.scss","..\\..\\node_modules\\bootstrap\\scss\\_variables.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_caret.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_nav-divider.scss","..\\..\\node_modules\\bootstrap\\scss\\_button-group.scss","..\\..\\node_modules\\bootstrap\\scss\\_input-group.scss","..\\..\\node_modules\\bootstrap\\scss\\_custom-forms.scss","..\\..\\node_modules\\bootstrap\\scss\\_nav.scss","..\\..\\node_modules\\bootstrap\\scss\\_navbar.scss","..\\..\\node_modules\\bootstrap\\scss\\_card.scss","..\\..\\node_modules\\bootstrap\\scss\\_breadcrumb.scss","..\\..\\node_modules\\bootstrap\\scss\\_pagination.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_pagination.scss","..\\..\\node_modules\\bootstrap\\scss\\_badge.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_badge.scss","..\\..\\node_modules\\bootstrap\\scss\\_jumbotron.scss","..\\..\\node_modules\\bootstrap\\scss\\_alert.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_alert.scss","..\\..\\node_modules\\bootstrap\\scss\\_progress.scss","..\\..\\node_modules\\bootstrap\\scss\\_media.scss","..\\..\\node_modules\\bootstrap\\scss\\_list-group.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_list-group.scss","..\\..\\build\\scss\\pages\\_mailbox.scss","..\\..\\node_modules\\bootstrap\\scss\\_close.scss","..\\..\\node_modules\\bootstrap\\scss\\_toasts.scss","..\\..\\node_modules\\bootstrap\\scss\\_modal.scss","..\\..\\node_modules\\bootstrap\\scss\\_tooltip.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_reset-text.scss","..\\..\\node_modules\\bootstrap\\scss\\_popover.scss","..\\..\\node_modules\\bootstrap\\scss\\_carousel.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_clearfix.scss","..\\..\\node_modules\\bootstrap\\scss\\_spinners.scss","..\\..\\node_modules\\bootstrap\\scss\\utilities\\_align.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_background-variant.scss","..\\..\\node_modules\\bootstrap\\scss\\utilities\\_background.scss","..\\..\\node_modules\\bootstrap\\scss\\utilities\\_borders.scss","..\\..\\node_modules\\bootstrap\\scss\\utilities\\_display.scss","..\\..\\node_modules\\bootstrap\\scss\\utilities\\_embed.scss","..\\..\\node_modules\\bootstrap\\scss\\utilities\\_flex.scss","..\\..\\node_modules\\bootstrap\\scss\\utilities\\_float.scss","..\\..\\node_modules\\bootstrap\\scss\\utilities\\_overflow.scss","..\\..\\node_modules\\bootstrap\\scss\\utilities\\_position.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_screen-reader.scss","..\\..\\node_modules\\bootstrap\\scss\\utilities\\_screenreaders.scss","..\\..\\node_modules\\bootstrap\\scss\\utilities\\_shadows.scss","..\\..\\node_modules\\bootstrap\\scss\\utilities\\_sizing.scss","..\\..\\node_modules\\bootstrap\\scss\\utilities\\_stretched-link.scss","..\\..\\node_modules\\bootstrap\\scss\\utilities\\_spacing.scss","..\\..\\node_modules\\bootstrap\\scss\\utilities\\_text.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_text-truncate.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_text-emphasis.scss","..\\..\\node_modules\\bootstrap\\scss\\mixins\\_text-hide.scss","..\\..\\node_modules\\bootstrap\\scss\\utilities\\_visibility.scss","..\\..\\node_modules\\bootstrap\\scss\\_print.scss","..\\..\\build\\scss\\_Line truncated

frontend/public/piVideo/web/static/css/fullmulti.css

@@ -0,0 +1,163 @@
+.grid-wrapper{
+  height: calc(100vh - 30px);
+  margin: 0px;
+  background: transparent;
+  display: flex;
+  flex-wrap: wrap;
+}
+.layout-top-nav .wrapper .main-header {
+    margin-left: 0;
+    height: 30px;
+}
+video.background{
+  pointer-events: none;
+  position: absolute;
+  top:0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.control-sidebar.custom{
+    background: black;
+    height: 100%;
+    margin-top: -57px;
+    padding: 30px 8px 8px;
+    background: linear-gradient(45deg, black, transparent);
+    overflow: hidden;
+}
+.control-sidebar.custom .row{
+  height:100%;
+  overflow: auto;
+}
+.control-sidebar.custom>h5{
+  color: white;
+  text-align: center;
+}
+
+.grid-wrapper .player video.video-class {
+    background: #000;
+    object-fit: fill;
+}
+.grid-wrapper .player video.video-class.empty {
+    background: transparent;
+}
+
+.img-background{
+    /* background: url(/../static/img/back.jpg); */
+    background-color: #343a40;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    backdrop-filter: sepia(0.5) grayscale(0.4);
+}
+.img-background .content-wrapper{
+  background: transparent;
+}
+.img-background .main-header{
+  background:
+}
+.grid-wrapper .player {
+
+   padding: 0px;
+    border: 2px solid #000;
+}
+
+.grid-wrapper .player .remove-btn{
+  color:white;
+  display: none;
+  position: absolute;
+  right: 0px;
+    top: 0px;
+    cursor: pointer;
+    padding: 5px 10px;
+    border-radius: 50px;
+    filter: drop-shadow(1px 1px 1px black);
+}
+.grid-wrapper .player.empty .remove-btn{
+  display: none;
+}
+.grid-wrapper .player:not(.empty):hover .remove-btn{
+    display: block;
+}
+
+.grid-wrapper .player .add-stream-btn{
+  position: absolute;
+  left: 0;
+  top: calc(50% - 2vw);
+  text-align: center;
+  width: 100%;
+  font-variant-caps: all-petite-caps;
+  font-size: 1.5vw;
+  line-height: 1;
+  color: white;
+  cursor: pointer;
+  display: none;
+  filter: drop-shadow(2px 4px 6px black);
+}
+.grid-wrapper .player.empty .add-stream-btn{
+  display: block;
+
+}
+
+.carousel-caption {
+    pointer-events: none;
+    filter: drop-shadow(1px 1px 1px black);
+}
+.stream-img{
+  height: 150px;
+}
+.player .loader, .main-player .loader{
+  position: absolute;
+  width: 100px;
+  height: 70px;
+  top: calc(50% - 35px);
+  left: calc(50% - 50px);
+}
+.control-sidebar-close-btn{
+  position: absolute;
+    top: 37px;
+    right: 12px;
+    color: #fff;
+}
+.control-sidebar-close-btn:hover{
+  color: #999;
+}
+.dropdown-menu.custom-dropdown.show{
+  color: #ffF;
+    border: 1px solid #343a40;
+    background: linear-gradient(45deg, #000000d1 30%,#343a40);
+    padding: 0;
+    text-align: center;
+}
+
+.dropdown-menu.custom-dropdown .custom-dropdown-item{
+  float: left;
+  width: 33%;
+  padding: 10px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.dropdown-menu.custom-dropdown .custom-dropdown-item.active,.dropdown-menu.custom-dropdown .custom-dropdown-item:hover{
+  border-radius: 5px;
+  box-shadow: inset 0px 0px 15px -5px;
+}
+.dropdown-menu.custom-dropdown .dropdown-item{
+  color: #fff;
+
+}
+.dropdown-menu.custom-dropdown .dropdown-item:hover{
+  box-shadow: inset 0px 0px 15px -5px;
+  background: transparent;
+}
+
+.custom-dropdown-item.with-img{
+  width: 50%!important;
+    height: auto;
+    padding: 2px!important;
+
+}
+.custom-dropdown-item.with-img img{
+  width: 100%;
+  height: auto;
+}

frontend/public/piVideo/web/static/css/google-fonts.css

@@ -0,0 +1,224 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  src: url(fonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7qsDJB9cme_xc.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  src: url(fonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7jsDJB9cme_xc.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  src: url(fonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7rsDJB9cme_xc.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  src: url(fonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7ksDJB9cme_xc.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  src: url(fonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7osDJB9cme_xc.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  src: url(fonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7psDJB9cme_xc.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  src: url(fonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7nsDJB9cme.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  src: url(fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmhdu3cOWxy40.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  src: url(fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwkxdu3cOWxy40.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  src: url(fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmxdu3cOWxy40.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  src: url(fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlBdu3cOWxy40.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  src: url(fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmBdu3cOWxy40.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  src: url(fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmRdu3cOWxy40.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  src: url(fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdu3cOWxw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: url(fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lujVj9_mf.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: url(fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lujVj9_mf.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: url(fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lujVj9_mf.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: url(fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lujVj9_mf.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: url(fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lujVj9_mf.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: url(fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lujVj9_mf.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: url(fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7lujVj9w.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: url(fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmhdu3cOWxy40.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: url(fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwkxdu3cOWxy40.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: url(fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmxdu3cOWxy40.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: url(fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlBdu3cOWxy40.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: url(fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmBdu3cOWxy40.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: url(fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmRdu3cOWxy40.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: url(fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu3cOWxw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

frontend/public/piVideo/web/static/css/index.css

@@ -0,0 +1,223 @@
+#videoPlayer{
+  width: 100%;
+  background: black;
+  position: -webkit-sticky; /* Safari */
+  position: sticky;
+  top: 15px;
+  margin-bottom: -6px;
+
+}
+.videoPlayer{
+  width: 100%;
+  background: black;
+  position: -webkit-sticky; /* Safari */
+  position: sticky;
+  top: 15px;
+  margin-bottom: -6px;
+
+}
+.btn-group.stream{
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.btn-group.stream .btn{
+  flex: 1 0 30%;
+}
+.btn-group.stream .input-group-prepend{
+  flex: 1 0 30%;
+}
+.img-wrapper{
+  width: 100%;
+  height: 180px;
+  background: black;
+  cursor: pointer;
+}
+.img-wrapper img{
+  width: 100%;
+  height: 100%;
+}
+.text-wrapper{
+  padding: 10px;
+}
+
+@media (min-width: 576px){
+.card-columns {
+    -webkit-column-count: 4;
+    -moz-column-count: 4;
+    column-count: 4;
+    -webkit-column-gap: 1.25rem;
+    -moz-column-gap: 1.25rem;
+    column-gap: 1.25rem;
+    orphans: 1;
+    widows: 1;
+}
+}
+@media (min-width: 576px){
+  .card-column {
+      column-count: 2;
+    }
+}
+@media (min-width: 768px){
+  .card-column {
+      column-count: 4;
+    }
+}
+@media (min-width: 1920px){
+  .card-column {
+      column-count: 6;
+    }
+}
+
+
+.grid-wrapper{
+  height: 80vh;
+    margin: -1px;
+    background: #000;
+    display: flex;
+    flex-wrap: wrap;
+}
+:-webkit-full-screen .grid-wrapper{/*WebKit, Opera 15+*/
+  height: 100vh;
+  width: 100vw;
+}
+:-moz-full-screen .grid-wrapper{/*FireFox*/
+  height: 100vh;
+  width: 100vw;
+}
+:full-screen .grid-wrapper{/*Opera 12.15-, Blink, w3c standard*/
+  height: 100vh;
+  width: 100vw;
+}
+.grid-wrapper .player{
+  height: 50%;
+  width: 50%;
+  position: relative;
+  padding: 2px;
+}
+.grid-wrapper .player.grid-1{
+  width: 100%;
+  height: 100%;
+}
+.grid-wrapper .player.grid-6{
+  width: 33.33%;
+}
+.grid-wrapper .player.grid-9{
+  width: 33.33%;
+  height: 33.33%;
+}
+.grid-wrapper .player.grid-12{
+  width: 25%;
+  height: 33.33%;
+}
+.grid-wrapper .player.grid-16{
+  width: 25%;
+  height: 25%;
+}
+.grid-wrapper .player.grid-25{
+  width: 20%;
+  height: 20%;
+}
+.grid-wrapper .player.grid-36{
+  width: 16.66%;
+  height:  16.66%;
+}
+.grid-wrapper .player.grid-49{
+  width: 14.285%;
+  height:  14.29%;
+}
+.grid-wrapper .player video{
+  height: 100%;
+  width: 100%;
+  background: #343a40;
+  margin-bottom: -6px;
+}
+.grid-wrapper .player .play-info{
+  position: absolute;
+  padding: 10px;
+  text-align: center;
+  color: #fff;
+  top:0;
+  left: 0;
+  width: 100%;
+}
+.grid-wrapper .player .control{
+  width: 100%;
+    position: absolute;
+    bottom: 0;
+    padding: 10px;
+    text-align: center;
+}
+.grid-wrapper .player .control .btn{
+  margin: 0 0 10px 10px;
+}
+
+.card .stream-name{
+  position: absolute;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+}
+.card .stream-name .card-title{
+  color: #FFF;
+    width: 100%;
+    filter: drop-shadow(1px 0px 1px black);
+    font-size: 30px;
+}
+.one-line-header{
+  white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 95%;
+}
+.main-player-wrapper{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgb(0 0 0 / 0.8);
+  z-index: 1100;
+  padding: 15px;
+}
+.main-player-wrapper a{
+  color: #fff;
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    font-size: 30px;
+    padding: 0 12px;
+    border-radius: 50px;
+    box-shadow: 0px 0px 10px -1px #fff;
+    cursor: pointer;
+}
+.main-player-wrapper a:hover{
+  color: #dc3545;
+  box-shadow: 0px 0px 10px -1px #dc3545;
+}
+.main-player-wrapper .main-player{
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.main-player-wrapper .main-player video{
+  width: 100%;
+  height: 100%;
+  background: #000;
+}
+.main-player-wrapper .main-player .play-info{
+  position: absolute;
+    padding: 10px;
+    text-align: center;
+    color: #fff;
+    top: 0;
+    width: 100%;
+}
+.carousel-caption{
+  pointer-events: none;
+}
+.fix-height{
+  object-fit: fill;
+  aspect-ratio: 16/9;
+}