avoid xero

Remotion-app/src/HelloWorld/AudioStream.jsx

@@ -6,15 +6,27 @@ import {TransitionSeries} from '@remotion/transitions';
 export default function AudioStream() {
 	const {fps} = useVideoConfig();
 	return (
-		<TransitionSeries>
+		<TransitionSeries
+			style={{
+				color: 'white',
+				position: 'absolute',
+				zIndex: 0,
+			}}
+		>
 			{audioSequences.map((entry, index) => {
 				return (
-					<Audio
-						volume={entry.props.volume}
-						endAt={entry.props.endAt}
-						startFrom={entry.props.startFrom}
-						src={staticFile(entry.name)}
-					/>
+					<TransitionSeries.Sequence
+						key={index}
+						from={fps * entry.start}
+						durationInFrames={fps * (entry.end - entry.start)}
+					>
+						<Audio
+							volume={entry.props.volume}
+							endAt={entry.props.endAt}
+							startFrom={entry.props.startFrom}
+							src={staticFile(entry.name)}
+						/>
+					</TransitionSeries.Sequence>
 				);
 			})}
 		</TransitionSeries>

Remotion-app/src/HelloWorld/ImageStream.jsx

@@ -20,7 +20,7 @@ export default function ImageStream() {
 					<TransitionSeries.Sequence
 						key={index}
 						from={fps * entry.start}
-						durationInFrames={fps * (entry.end - entry.start)}
+						durationInFrames={fps * (entry.end - entry.start) + 1}
 					>
 						<Img className="zoomInOut" src={staticFile(entry.name)} />
 					</TransitionSeries.Sequence>

Remotion-app/src/HelloWorld/SfxStream.jsx

@@ -12,7 +12,7 @@ export default function SfxStream() {
 					<TransitionSeries.Sequence
 						key={index}
 						from={fps * entry.start}
-						durationInFrames={fps * (entry.end - entry.start)}
+						durationInFrames={fps * (entry.end - entry.start) + 1}
 					>
 						<Audio
 							volume={entry.props.volume}