Started implementing video support.

src/app/chat/elements/video-player/video-player.scss

@@ -0,0 +1,110 @@
+#player {
+  max-width: 400px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+
+  tui-icon {
+    font-size: 20px;
+  }
+
+  .picInPic {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  .upScale {
+    min-height: 100%;
+  }
+
+  video {
+    max-width: 100% !important;
+  }
+
+  #controlsHolder {
+    position: absolute;
+    bottom: 10px;
+    left: 0;
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    #controls {
+      width: 95%;
+      height: 50px;
+      background: var(--tui-background-base-alt);
+      border: 2px solid var(--tui-border-normal);
+      padding: 10px;
+      border-radius: 20px;
+      gap: 5px;
+      display: grid;
+      grid-template-columns: 50px 50px 1fr 50px 50px;
+      align-items: center;
+
+      button {
+        height: 25px;
+        width: 50px;
+      }
+
+      .time {
+        font-size: 15px;
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+      }
+
+      .volumeSetter {
+        display: flex;
+        gap: 5px;
+        align-items: center;
+      }
+    }
+  }
+}
+
+.player_preview {
+  max-width: 400px;
+  position: relative;
+
+  button {
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 50px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+tui-dropdown[data-appearance] {
+  min-block-size: 8rem;
+  background: var(--tui-background-base);
+  box-shadow: none;
+  border: none;
+  backdrop-filter: blur(1rem);
+
+  [tuiSlider] {
+    position: absolute;
+    inline-size: 7rem;
+    transform-origin: left;
+    transform: rotate(-90deg) translate(-100%, 1rem) translateY(12px);
+
+    &::-webkit-slider-thumb {
+      cursor: ns-resize;
+    }
+
+    &::-moz-range-thumb {
+      cursor: ns-resize;
+    }
+  }
+}