Fix play button positioning; Cleanup

Author: ValentaTomas

src/index.ts

@@ -8,5 +8,10 @@ export default function themeLiveCodeblock(): Plugin {
     getThemePath() {
       return path.resolve(__dirname, './theme');
     },
+
+    getTypeScriptThemePath() {
+      return path.resolve(__dirname, '..', 'src', './theme');
+    },
   };
 }
+

src/theme/CodeBlock/VideoPlayer/CloseIconBig.tsx

@@ -6,7 +6,7 @@ export interface Props {
 
 function CloseIconBig({ className = '' }: Props) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" className={`feather feather-x ${className}`}><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 26 23" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" className={`feather feather-x ${className}`}><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
   )
 }
 

src/theme/CodeBlock/VideoPlayer/styles.module.css

@@ -4,32 +4,37 @@
 
 .video-container {
   position: absolute;
+
+  display: flex;
+  padding-top: 5px;
   z-index: 1;
-  right: 0px;
+  right: -48px;
 }
 
 .play-wrapper {
   position: relative;
   cursor: pointer;
 
+  margin: auto;
+
   display: flex;
   align-items: center;
   justify-content: center;
 
-  width: 70px;
-  height: 70px;
+  width: 40px;
+  height: 40px;
   overflow: hidden;
   border-radius: 50%;
 }
 
 .play-wrapper-normal {
   color: #0ac069;
-  border: 1px solid #0ac069;
+  border: 2px solid #0ac069;
 }
 
 .play-wrapper-selected,
 .play-wrapper:hover {
-  border: 1px solid #11df7b;
+  border: 2px solid #11df7b;
   color: #11df7b;
 }
 
@@ -46,6 +51,13 @@
 }
 
 .play {
-  z-index: 90;
+  padding-left: 4px;
+  z-index: 50;
   position: absolute;
+}
+
+@media (max-width: 996px) {
+  .video-container {
+    display: none;
+  }
 }

src/vite.css

@@ -4,4 +4,9 @@
   background-color: darkslategrey;
   color: gainsboro;
   padding: 10px;
+  font-family: monospace;
+  border-radius: 0.5em;
+  margin: 10px;
+  margin-top: 20px;
+  z-index: 90;
 }

src/vite.tsx

@@ -25,7 +25,7 @@ function MockCodeBlock() {
 
 function App() {
   return (
-    <div style={{ width: '100%', height: '100%' }}>
+    <div style={{ width: '80%', height: '100%', alignItems: 'center', justifyContent: 'center', fontFamily: 'mono' }}>
       <VideoPlayer youtubeID={youtubeID}>
         <MockCodeBlock />
       </VideoPlayer>