feat: update videos

riccardoperra · Dec 10, 2023 · b07462b · b07462b
1 parent 2650454
commit b07462b
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 4 deletions.
diff --git a/apps/codeimage/changelog/1-5-0_12-09-2023.mdx b/apps/codeimage/changelog/1-5-0_12-09-2023.mdx
@@ -19,7 +19,7 @@ Prior authorisation, this allows you to access yours locally installed fonts to
   compatibilityTableLink={'https://developer.mozilla.org/en-US/docs/Web/API/Local_Font_Access_API#browser_compatibility'}
   supported={'queryLocalFonts' in window}/>
 
-<MdxVideo src={fontPickerUrl} />
+<MdxVideo src={fontPickerUrl} ratio={'4/3'}/>
 
 ### 🖥️ New Window style themes
 
@@ -29,12 +29,12 @@ The window select has been updated introducing two new terminal themes:
 
 We've also moved the old "accent mode" toggle in the sidebar to the window selection as a checkbox.
 
-<MdxVideo src={windowStyleUrl} />
+<MdxVideo src={windowStyleUrl} ratio={'14/9'} />
 
 ### 🎨 New Xcode like themes
 
 The themes collection has been updated introducing two new themes inspired from Xcode:
 - `Xcode Dark`
 - `Xcode light`
 
-<MdxVideo src={xcodeThemeUrl} />
+<MdxVideo src={xcodeThemeUrl} ratio={'4/3'} />
diff --git a/apps/codeimage/changelog/data/1-5-0/font-picker.mp4 b/apps/codeimage/changelog/data/1-5-0/font-picker.mp4
diff --git a/apps/codeimage/changelog/data/1-5-0/xcode-theme.mp4 b/apps/codeimage/changelog/data/1-5-0/xcode-theme.mp4
diff --git a/apps/codeimage/src/mdx/Video.tsx b/apps/codeimage/src/mdx/Video.tsx
@@ -1,7 +1,10 @@
+import {themeVars} from '@codeui/kit';
 import {JSX, onCleanup, onMount} from 'solid-js';
 import * as styles from './components.css';
 
-export function MdxVideo(props: JSX.IntrinsicElements['video']) {
+export function MdxVideo(
+  props: JSX.IntrinsicElements['video'] & {ratio: string},
+) {
   let ref!: HTMLVideoElement;
 
   onMount(() => {
@@ -28,6 +31,9 @@ export function MdxVideo(props: JSX.IntrinsicElements['video']) {
       muted
       preload={'none'}
       loop
+      style={{
+        'aspect-ratio': props.ratio,
+      }}
       {...props}
     />
   );

diff --git a/apps/codeimage/src/mdx/components.css.ts b/apps/codeimage/src/mdx/components.css.ts
@@ -75,6 +75,7 @@ export const video = style({
   display: 'block',
   marginTop: themeTokens.spacing['3'],
   marginBottom: themeTokens.spacing['6'],
+  backgroundColor: themeVars.formAccent,
 });
 
 export const a = style({