feat(DefaultVideo): add onVideoEnd callback (#1282)

* feat(DefaultVideo): add onVideoEnd callback

* fix(DefaultVideo): fix lint problems

Author: Marginy605

src/components/DefaultVideo/DefaultVideo.tsx

@@ -21,7 +21,7 @@ interface DefaultVideoProps {
 export const DefaultVideo = React.forwardRef<DefaultVideoRefType, DefaultVideoProps>(
     (props, ref) => {
         const {video, qa, customBarControlsClassName} = props;
-        const {controls, customControlsOptions, muted: initiallyMuted = true} = video;
+        const {controls, customControlsOptions, muted: initiallyMuted = true, onVideoEnd} = video;
         const {
             muteButtonShown,
             positioning,
@@ -44,6 +44,23 @@ export const DefaultVideo = React.forwardRef<DefaultVideoRefType, DefaultVideoPr
 
             return videoRef.current;
         }, [videoRef]);
+
+        React.useEffect(() => {
+            const videoElement = videoRef.current;
+            if (!videoElement || !onVideoEnd) {
+                return undefined;
+            }
+
+            const handleVideoEnd = () => {
+                onVideoEnd?.();
+            };
+
+            videoElement.addEventListener('ended', handleVideoEnd);
+            return () => {
+                videoElement.removeEventListener('ended', handleVideoEnd);
+            };
+        }, [videoRef, onVideoEnd]);
+
         const onPlayToggle = React.useCallback(() => {
             setIsPaused((value) => {
                 if (value) {

src/components/Media/__stories__/Media.stories.tsx

@@ -35,7 +35,15 @@ export const Iframe = IframeTemplate.bind({});
 
 Image.args = data.image.content;
 ImageSlider.args = data.imageSlider.content;
-Video.args = data.video.content;
+Video.args = {
+    ...data.video.content,
+    video: {
+        ...data.video.content.video,
+        onVideoEnd: () => {
+            console.log('Video has ended, onVideoEnd callback has fired');
+        },
+    },
+};
 Youtube.args = data.youtube.content;
 DataLens.args = data.dataLens.content;
 DataLensDarkTheme.args = data.dataLensDarkTheme.content as MediaProps;

src/models/constructor-items/common.ts

@@ -189,6 +189,7 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
     customControlsOptions?: CustomControlsOptions;
     ariaLabel?: string;
     contain?: boolean;
+    onVideoEnd?: () => void;
 }
 
 // links