storage + nes.css

front/dist/resources/style/style.css

@@ -1,15 +1,20 @@
-* a, button, select{
+* a,
+button,
+select {
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
+
 body {
     overflow: hidden;
     font-size: 10px;
 }
+
 body button:focus,
 body img:focus,
 body input:focus {
     outline: -webkit-focus-ring-color auto 0;
 }
+
 body .message-info {
     width: 20%;
     height: auto;
@@ -20,23 +25,29 @@ body .message-info{
     padding-top: 10px;
     text-align: center;
 }
+
 body .message-info.error {
     background: red;
 }
+
 body .message-info.success {
     background: green;
 }
+
 body .message-info.info {
     background: dodgerblue;
 }
+
 body .message-info.warning {
     background: #ffa500d6;
 }
+
 .video-container {
     position: relative;
     transition: all 0.2s ease;
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
+
 .video-container i {
     position: absolute;
     width: 100px;
@@ -62,6 +73,7 @@ body .message-info.warning{
     padding: 10px;
     z-index: 2;
 }
+
 .video-container img.block-logo {
     left: 30%;
     bottom: 15%;
@@ -108,6 +120,7 @@ body .message-info.warning{
     width: 25px;
     height: 25px;
 }
+
 .video-container button.report span {
     position: absolute;
     bottom: 6px;
@@ -116,6 +129,7 @@ body .message-info.warning{
     font-size: 16px;
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
+
 .video-container img.active {
     display: block !important;
 }
@@ -147,7 +161,6 @@ video#myCamVideo{
     /*height: 113px;*/
 }
 
-
 .btn-cam-action {
     pointer-events: all;
     position: absolute;
@@ -156,7 +169,10 @@ video#myCamVideo{
     width: 450px;
     height: 150px;
 }
+
+
 /*btn animation*/
+
 .btn-cam-action div {
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     position: absolute;
@@ -167,41 +183,50 @@ video#myCamVideo{
     bottom: 20px;
     pointer-events: none;
 }
+
 .btn-cam-action div.disabled {
     background: #d75555;
 }
+
 .btn-cam-action div.enabled {
     background: #73c973;
 }
+
 .btn-cam-action:hover div {
     transform: translateY(0);
 }
+
 .btn-cam-action div:hover {
     background: #407cf7;
     box-shadow: 4px 4px 48px #666;
     transition: 120ms;
 }
+
 .btn-micro {
     pointer-events: auto;
     transition: all .3s;
     right: 44px;
 }
+
 .btn-video {
     pointer-events: auto;
     transition: all .25s;
     right: 134px;
 }
+
 .btn-monitor {
     pointer-events: auto;
     transition: all .2s;
     right: 224px;
 }
+
 .btn-copy {
     pointer-events: auto;
     transition: all .3s;
     right: 44px;
     opacity: 1;
 }
+
 .btn-cam-action div img {
     height: 22px;
     width: auto;
@@ -210,17 +235,18 @@ video#myCamVideo{
     pointer-events: all;
 }
 
+
 /* Spinner */
+
 .connecting-spinner {
     /*display: inline-block;*/
     position: absolute;
     left: calc(50% - 62px);
     top: calc(50% - 62px);
-
-
     width: 130px;
     height: 130px;
 }
+
 .connecting-spinner:after {
     content: " ";
     display: block;
@@ -232,6 +258,7 @@ video#myCamVideo{
     border-color: #fff transparent #fff transparent;
     animation: connecting-spinner 1.2s linear infinite;
 }
+
 @keyframes connecting-spinner {
     0% {
         transform: rotate(0deg);
@@ -241,16 +268,14 @@ video#myCamVideo{
     }
 }
 
-
 .rtc-error {
     position: absolute;
     left: calc(50% - 68px);
     top: calc(50% - 68px);
-
-
     width: 130px;
     height: 130px;
 }
+
 .rtc-error:after {
     content: " ";
     display: block;
@@ -280,6 +305,7 @@ video#myCamVideo{
     width: 50%;
     border: white 6px solid;
 }
+
 .webrtcsetup .background-img {
     position: relative;
     display: block;
@@ -290,21 +316,25 @@ video#myCamVideo{
     top: 50%;
     transform: translateY(-50%);
 }
+
 #myCamVideoSetup {
     width: 100%;
     height: 100%;
 }
+
 .webrtcsetup.active {
     display: block;
 }
 
 
 /* New layout */
+
 body {
     margin: 0;
     height: 100vh;
     width: 100vw;
 }
+
 .main-container {
     height: 100vh;
     width: 100vw;
@@ -315,25 +345,21 @@ body {
     .game-overlay {
         flex-direction: row;
     }
-
     .sidebar {
         flex-direction: column;
     }
-
     .sidebar>div {
         max-height: 21%;
     }
-
     .sidebar>div:hover {
         max-height: 25%;
     }
-
-    
 }
 
 #game {
     width: 100%;
-    position: relative; /* Position relative is needed for the game-overlay. */
+    position: relative;
+    /* Position relative is needed for the game-overlay. */
 }
 
 .audioplayer:first-child {
@@ -341,7 +367,9 @@ body {
     grid: 2rem / 4rem 10rem;
 }
 
-.audioplayer > button, .audioplayer > div, .audioplayer > label {
+.audioplayer>button,
+.audioplayer>div,
+.audioplayer>label {
     background-color: rgba(0, 0, 0, 0.5);
     display: flex;
     align-items: center;
@@ -365,49 +393,62 @@ body {
     max-width: 5rem;
     border: none;
 }
-#audioplayer_mute:focus, #audioplayer_mute:active {
+
+#audioplayer_mute:focus,
+#audioplayer_mute:active {
     outline: none;
 }
+
 #audioplayer_mute>svg {
     width: 100%;
     height: 100%;
     pointer-events: none;
 }
+
 #audioplayer_volume_icon_playing.muted {
     visibility: hidden;
     display: none;
 }
+
 #audioplayer_volume_icon_playing.low #audioplayer_volume_icon_playing_high {
     visibility: hidden;
     display: none;
 }
+
 #audioplayer_volume_icon_playing.low #audioplayer_volume_icon_playing_mid {
     visibility: hidden;
     display: none;
 }
+
 #audioplayer_volume_icon_playing.mid #audioplayer_volume_icon_playing_high {
     visibility: hidden;
     display: none;
 }
+
 #audioplayerctrl>#audioplayer_volume {
     width: 100%;
     background-color: rgba(0, 0, 0, 0.5);
 }
 
+
 /*
  * sollte eigentlich in den aspect-ratio teil ..
  */
+
 #audioplayerctrl.loading {
     transform: translateY(-90%);
 }
+
 #audioplayerctrl.hidden {
     transform: translateY(-100%);
 }
 
+
 /*
  * Style Input Range
  * https://www.cssportal.com/style-input-range/
  */
+
 input[type=range] {
     height: 28px;
     -webkit-appearance: none;
@@ -415,9 +456,11 @@ input[type=range] {
     width: 100%;
     background-color: transparent;
 }
+
 input[type=range]:focus {
     outline: none;
 }
+
 input[type=range]::-webkit-slider-runnable-track {
     width: 100%;
     height: 5px;
@@ -427,6 +470,7 @@ input[type=range]::-webkit-slider-runnable-track {
     border-radius: 5px;
     border: 1px solid #000000;
 }
+
 input[type=range]::-webkit-slider-thumb {
     box-shadow: 1px 1px 1px #000000;
     border: 1px solid #000000;
@@ -437,9 +481,11 @@ input[type=range]::-webkit-slider-thumb {
     -webkit-appearance: none;
     margin-top: -8.5px;
 }
+
 input[type=range]:focus::-webkit-slider-runnable-track {
     background: #FFFFFF;
 }
+
 input[type=range]::-moz-range-track {
     width: 100%;
     height: 5px;
@@ -449,6 +495,7 @@ input[type=range]::-moz-range-track {
     border-radius: 5px;
     border: 1px solid #000000;
 }
+
 input[type=range]::-moz-range-thumb {
     box-shadow: 1px 1px 1px #000000;
     border: 1px solid #000000;
@@ -457,6 +504,7 @@ input[type=range]::-moz-range-thumb {
     border-radius: 5px;
     background: #FFFFFF;
 }
+
 input[type=range]::-ms-track {
     width: 100%;
     height: 5px;
@@ -465,18 +513,21 @@ input[type=range]::-ms-track {
     border-color: transparent;
     color: transparent;
 }
+
 input[type=range]::-ms-fill-lower {
     background: #FFFFFF;
     border: 1px solid #000000;
     border-radius: 10px;
     box-shadow: 1px 1px 1px #000000;
 }
+
 input[type=range]::-ms-fill-upper {
     background: #FFFFFF;
     border: 1px solid #000000;
     border-radius: 10px;
     box-shadow: 1px 1px 1px #000000;
 }
+
 input[type=range]::-ms-thumb {
     margin-top: 1px;
     box-shadow: 1px 1px 1px #000000;
@@ -486,14 +537,15 @@ input[type=range]::-ms-thumb {
     border-radius: 5px;
     background: #FFFFFF;
 }
+
 input[type=range]:focus::-ms-fill-lower {
     background: #FFFFFF;
 }
+
 input[type=range]:focus::-ms-fill-upper {
     background: #FFFFFF;
 }
 
-
 .game-overlay {
     display: none;
     position: absolute;
@@ -550,7 +602,9 @@ input[type=range]:focus::-ms-fill-upper {
     margin: 0%;
 }
 
+
 /* Let's make sure videos are vertically centered if they need to be cropped */
+
 .media-container {
     display: flex;
     justify-content: center;
@@ -561,9 +615,7 @@ input[type=range]:focus::-ms-fill-upper {
 .chat-mode {
     display: grid;
     width: 100%;
-
     align-items: flex-start;
-
     padding: 1%;
 }
 
@@ -577,6 +629,7 @@ input[type=range]:focus::-ms-fill-upper {
 .chat-mode>div:hover {
     margin: 0%;
 }
+
 .chat-mode.one-col {
     grid-template-columns: repeat(1, 1fr);
 }
@@ -593,6 +646,7 @@ input[type=range]:focus::-ms-fill-upper {
     grid-template-columns: repeat(4, 1fr);
 }
 
+
 /*CONSOLE*/
 
 .message-container,
@@ -667,6 +721,7 @@ input[type=range]:focus::-ms-fill-upper {
     transform: rotateY(0);
     opacity: 0.5;
 }
+
 .main-console div.console img:hover,
 .message-container div.clear img:hover {
     opacity: 1;
@@ -717,6 +772,7 @@ input[type=range]:focus::-ms-fill-upper {
     padding: 10px 30px;
     transition: all .2s ease;
 }
+
 .main-console .btn-action .btn:hover {
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     background-color: #ffda01;
@@ -762,20 +818,23 @@ input[type=range]:focus::-ms-fill-upper {
 .main-console section div.upload label {
     color: #ffda01;
 }
+
 .main-console section div.upload input {
     display: none;
 }
+
 .main-console section div.upload label img {
     height: 150px;
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
+
 .main-console section div.upload label img {
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
 
 
-
 /*audio html when audio message playing*/
+
 .main-container .audio-playing {
     position: absolute;
     width: 200px;
@@ -791,22 +850,27 @@ input[type=range]:focus::-ms-fill-upper {
 .main-container .audio-playing.active {
     right: 0;
 }
+
 .main-container .audio-playing img {
     /*width: 30px;*/
     border-radius: 50%;
     background-color: #ffda01;
     padding: 10px;
 }
+
 .main-container .audio-playing p {
     color: white;
     margin-left: 10px;
     margin-top: 14px;
 }
 
+
 /* VIDEO QUALITY */
+
 .main-console div.setting h1 {
     color: white;
 }
+
 .main-console div.setting select {
     background: black;
     color: white;
@@ -816,16 +880,19 @@ input[type=range]:focus::-ms-fill-upper {
     padding: 10px;
     border-radius: 15px;
 }
+
 .main-console div.setting select:focus {
     border: solid 1px white;
     outline: none;
 }
+
 .main-console div.setting.active section {
     display: block;
 }
 
 
 /*REPORT input*/
+
 div.modal-report-user {
     position: absolute;
     width: 800px;
@@ -881,6 +948,7 @@ div.modal-report-user{
     padding: 10px 30px;
     transition: all .2s ease;
 }
+
 .modal-report-user button:hover {
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     background-color: #ffda01;
@@ -906,23 +974,28 @@ div.modal-report-user{
     width: 100%;
     text-align: left;
     padding: 30px;
-    max-width: calc(800px - 60px); /* size of modal - padding*/
+    max-width: calc(800px - 60px);
+    /* size of modal - padding*/
 }
 
+
 /*MESSAGE*/
+
 .discussion {
     position: fixed;
     left: -300px;
     top: 0px;
-    width: 220px;
+    width: 280px;
     height: 100%;
     background-color: #333333;
     padding: 20px;
     transition: all 0.5s ease;
 }
+
 .discussion.active {
     left: 0;
 }
+
 .discussion .active-btn {
     display: none;
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
@@ -936,12 +1009,15 @@ div.modal-report-user{
     border: none;
     transition: all 0.5s ease;
 }
+
 .discussion .active-btn.active {
     display: block;
 }
+
 .discussion .active-btn:hover {
     transform: scale(1.1) rotateY(3.142rad);
 }
+
 .discussion .active-btn img {
     width: 26px;
     height: 26px;
@@ -956,6 +1032,7 @@ div.modal-report-user{
     border: none;
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
+
 .discussion .close-btn img {
     height: 15px;
     right: 15px;
@@ -963,7 +1040,7 @@ div.modal-report-user{
 
 .discussion p {
     color: white;
-    font-size: 22px;
+    font-size: 12px;
     padding-left: 10px;
     margin: 0;
 }
@@ -985,6 +1062,7 @@ div.modal-report-user{
 .discussion .participants .participant:hover {
     background-color: #ffffff;
 }
+
 .discussion .participants .participant:hover p {
     color: black;
 }
@@ -1041,10 +1119,11 @@ div.modal-report-user{
 
 .discussion .messages h2 {
     color: white;
+    font-size: 12px;
 }
 
 .discussion .messages .message {
-    margin: 5px;
+    margin: 5px 0px;
     float: right;
     text-align: right;
     width: 100%;
@@ -1056,16 +1135,20 @@ div.modal-report-user{
 }
 
 .discussion .messages .message p {
-    font-size: 12px;
+    font-size: 10px;
 }
 
 .discussion .messages .message p.body {
-    color: white;
+    color: black;
-    font-size: 16px;
+    font-size: 12px;
-    overflow: hidden;
     white-space: pre-wrap;
     word-wrap: break-word;
+    width: 100%;
+    padding: 5px;
+    margin-top: 5px;
+    margin-bottom: 12px;
 }
+
 .discussion .messages .message p a {
     color: white;
 }
@@ -1096,12 +1179,14 @@ div.modal-report-user{
     height: 20px;
     background-color: #ffffff69;
 }
+
 .discussion .send-message img:hover {
     background-color: #ffffff;
 }
 
 
 /** Action button **/
+
 div.action {
     position: absolute;
     width: 100%;
@@ -1113,6 +1198,7 @@ div.action{
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
 }
+
 div.action p.action-body {
     padding: 10px;
     font-size: 12px;
@@ -1120,11 +1206,13 @@ div.action p.action-body{
     text-align: center;
     max-width: 350px;
 }
+
 .popUpElement {
     font-family: 'Press Start 2P';
     text-align: left;
     color: white;
 }
+
 .popUpElement div {
     font-family: 'Press Start 2P';
     font-size: 10px;
@@ -1141,12 +1229,16 @@ div.action p.action-body{
 .popUpElement .buttonContainer {
     float: right;
     background-color: inherit;
-
 }
 
-
 @keyframes mymove {
-    0% {bottom: 40px;}
+    0% {
-    50% {bottom: 30px;}
+        bottom: 40px;
-    100% {bottom: 40px;}
+    }
+    50% {
+        bottom: 30px;
+    }
+    100% {
+        bottom: 40px;
+    }
 }

front/src/Api/IframeListener.ts

@@ -139,6 +139,7 @@ class IframeListener {
             // We are putting a sandbox on this script because it will run in the same domain as the main website.
             iframe.sandbox.add('allow-scripts');
             iframe.sandbox.add('allow-top-navigation-by-user-activation');
+            iframe.sandbox.add('allow-same-origin');
 
             document.body.prepend(iframe);
 

front/src/WebRtc/DiscussionManager.ts

@@ -174,13 +174,19 @@ export class DiscussionManager {
         }
         pMessage.innerHTML = `<span style="font-weight: bold">${name}</span>    
                     <span style="color:#bac2cc;display:inline-block;font-size:12px;">
-                        ${date.getHours()}:${date.getMinutes()}
+                        ${date.getHours() < 10 ? '0' + date.getHours() : date.getHours()}:${date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()}
                     </span>`;
         divMessage.appendChild(pMessage);
 
         const userMessage: HTMLParagraphElement = document.createElement('p');
         userMessage.innerHTML = HtmlUtils.urlify(message);
         userMessage.classList.add('body');
+        userMessage.classList.add('nes-balloon');
+        if (isMe) {
+            userMessage.classList.add('from-left');
+        } else {
+            userMessage.classList.add('from-right');
+        }
         divMessage.appendChild(userMessage);
         this.divMessages?.appendChild(divMessage);