init

src/components/App/App.module.css

@@ -0,0 +1,79 @@
+:global(#leftVideo)::-webkit-media-controls {
+  display: none !important;
+}
+
+.videoContent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.playerContainer {
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Making this larger causes issues on mobile */
+  min-height: 48vh;
+}
+
+.flexCenter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mobileStack {
+  display: flex;
+  gap: 4px;
+  @media only screen and (max-width: 600px) {
+    flex-direction: column;
+    width: calc(100% - 8px);
+  }
+}
+
+.mobileWrap {
+  @media only screen and (max-width: 600px) {
+    flex-wrap: wrap;
+  }
+}
+
+.leftColumn {
+  flex-grow: 1;
+}
+
+.rightColumn {
+  flex-shrink: 0;
+}
+
+.expandButton {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 50%;
+  right: -30px;
+}
+
+.fullHeightColumn {
+  height: calc(100vh - 72px);
+  transition: width ease-out 0.5s;
+  &.leftColumn {
+    @media only screen and (max-width: 600px) {
+      /* video height doesn't matter on mobile since things are stacked */
+      height: initial;
+    }
+  }
+}
+
+.fullHeightColumnFullscreen {
+  height: calc(100vh);
+  transition: width ease-out 0.5s;
+}
+
+.shareButton {
+  min-width: 150px;
+}