Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: another media custom controls type #566

Merged
merged 17 commits into from
Sep 29, 2023
Prev Previous commit
Next Next commit
feat: added ratio prop
kkmch committed Sep 29, 2023
commit a16873e5c31643b19267b0d5b8093cfb6b92d379
2 changes: 2 additions & 0 deletions src/components/Media/Media.tsx
Original file line number Diff line number Diff line change
@@ -40,6 +40,7 @@ export const Media = (props: MediaAllProps) => {
playButton,
customBarControlsClassName,
qa,
ratio,
} = props;

const [hasVideoFallback, setHasVideoFallback] = useState(false);
@@ -80,6 +81,7 @@ export const Media = (props: MediaAllProps) => {
customBarControlsClassName,
hasVideoFallback,
setHasVideoFallback,
ratio,
};

if (fullscreen) {
3 changes: 3 additions & 0 deletions src/components/Media/Video/Video.tsx
Original file line number Diff line number Diff line change
@@ -41,6 +41,7 @@ const Video = (props: VideoAllProps) => {
setHasVideoFallback,
hasVideoFallback,
qa,
ratio,
} = props;

const qaAttributes = getQaAttrubutes(qa, 'source');
@@ -105,6 +106,7 @@ const Video = (props: VideoAllProps) => {
height={height}
ariaLabel={ariaLabel}
customControlsOptions={customControlsOptions}
ratio={ratio}
/>
);
}, [
@@ -117,6 +119,7 @@ const Video = (props: VideoAllProps) => {
customBarControlsClassName,
metrika,
analyticsEvents,
ratio,
]);

const defaultVideoBlock = useMemo(() => {
2 changes: 1 addition & 1 deletion src/components/ReactPlayer/CustomBarControls.tsx
Original file line number Diff line number Diff line change
@@ -101,7 +101,7 @@ const CustomBarControls = (props: CustomBarControlsProps) => {
)}
</button>
);
}, [elapsedTimePercent, mute, muteIcon, type, unmuteIcon]);
}, [elapsedTimePercent, isMuteButtonHidden, mute, muteIcon, type, unmuteIcon]);

const playPauseButton = useMemo(() => {
const icon = isPaused ? playIcon : pauseIcon;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seems like in the end we need only playPauseButton and muteButton, I propose to join all of this useMemo

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

left as it is, but removed useMemo from the above variables

8 changes: 5 additions & 3 deletions src/components/ReactPlayer/ReactPlayer.tsx
Original file line number Diff line number Diff line change
@@ -54,6 +54,7 @@ export interface ReactPlayerBlockProps
showPreview?: boolean;
onClickPreview?: () => void;
height?: number;
ratio?: number;
children?: React.ReactNode;
}

@@ -83,6 +84,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
analyticsEvents,
height,
ariaLabel,
ratio,
} = props;

const {
@@ -177,7 +179,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
parseFloat(paddingRight);

setWidth(newWidth);
setCurrentHeight(Math.floor(getHeight(newWidth)));
setCurrentHeight(Math.floor(getHeight(newWidth, ratio)));
}
}, 200);

@@ -418,8 +420,8 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
},
);

function getHeight(width: number): number {
return (width / 16) * 9;
function getHeight(width: number, ratio: number = 9 / 16): number {
return width * ratio;
}

function getParentElement(element: HTMLElement): HTMLElement {
1 change: 1 addition & 0 deletions src/models/constructor-items/common.ts
Original file line number Diff line number Diff line change
@@ -235,6 +235,7 @@ export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
export interface MediaComponentVideoProps extends AnalyticsEventsBase {
video: MediaVideoProps;
height?: number;
ratio?: number;
metrika?: MetrikaVideo;
previewImg?: string;
}