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.

Sign up for GitHub

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

fix(FEC-13971): Disable detach feature on mobile devices #195

Merged
merged 2 commits into from
Jun 4, 2024
Merged

fix(FEC-13971): Disable detach feature on mobile devices #195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d0db7c3
fix(FEC-13971): disable detach feature on mobile
semarche-kaltura Jun 4, 2024
6fdd38c
fix(FEC-13971): upd tests
semarche-kaltura Jun 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions cypress/e2e/transcript.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,5 +290,14 @@ describe('Transcript plugin', () => {
cy.get(`[data-testid="transcriptDetachAttachButton"]`).should('exist');
});
});

it('should not render detach button for mobile screens', () => {
mockKalturaBe();
loadPlayer().then(kalturaPlayer => {
// @ts-ignore
kalturaPlayer.ui.store.dispatch(ui.reducers.shell.actions.updateIsMobile(true));
cy.get(`[data-testid="transcriptDetachAttachButton"]`).should('not.exist');
});
});
});
});
49 changes: 24 additions & 25 deletions src/components/transcript/transcript.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export interface TranscriptProps {
onDetach: () => void;
onAttach: () => void;
kitchenSinkDetached: boolean;
isMobile?: boolean;
}

interface TranscriptState {
Expand All @@ -88,7 +89,8 @@ const SEARCHBAR_HEIGHT = 38; // height of search bar with margins
const smallScreen = PLAYER_BREAK_POINTS?.SMALL || 480;

const mapStateToProps = (state: any, ownProps: Pick<TranscriptProps, 'expandMode'>) => ({
smallScreen: ownProps.expandMode === SidePanelModes.ALONGSIDE && state.shell.playerClientRect?.width < smallScreen
smallScreen: ownProps.expandMode === SidePanelModes.ALONGSIDE && state.shell.playerClientRect?.width < smallScreen,
isMobile: state.shell.isMobile
});

// @ts-ignore
Expand Down Expand Up @@ -157,6 +159,25 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
);
};

private _renderDetachButton = () => {
const {onAttach, onDetach, attachTranscript, detachTranscript, kitchenSinkDetached, isMobile} = this.props;
if (isMobile) {
return null;
}
return (
<div data-testid="transcriptDetachAttachButton">
<Button
type={ButtonType.borderless}
size={ButtonSize.medium}
onClick={kitchenSinkDetached ? onAttach : onDetach}
icon={kitchenSinkDetached ? 'attach' : 'detach'}
ariaLabel={kitchenSinkDetached ? attachTranscript : detachTranscript}
tooltip={{label: kitchenSinkDetached ? attachTranscript! : detachTranscript!}}
/>
</div>
);
};

private _onSearch = (search: string) => {
this.setState({search});
};
Expand Down Expand Up @@ -217,20 +238,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
};

private _renderHeader = () => {
const {
toggledWithEnter,
kitchenSinkActive,
kitchenSinkDetached,
downloadDisabled,
onDownload,
printDisabled,
onPrint,
isLoading,
onAttach,
onDetach,
attachTranscript,
detachTranscript
} = this.props;
const {toggledWithEnter, kitchenSinkActive, kitchenSinkDetached, downloadDisabled, onDownload, printDisabled, onPrint, isLoading} = this.props;
const {search, activeSearchIndex, totalSearchResults} = this.state;
return (
<div className={[styles.header, this._getHeaderStyles()].join(' ')} data-testid="transcript_header">
Expand All @@ -244,16 +252,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
kitchenSinkActive={kitchenSinkActive}
/>
<TranscriptMenu {...{downloadDisabled, onDownload, printDisabled, onPrint, isLoading}} />
<div data-testid="transcriptDetachAttachButton">
<Button
type={ButtonType.borderless}
size={ButtonSize.medium}
onClick={kitchenSinkDetached ? onAttach : onDetach}
icon={kitchenSinkDetached ? 'attach' : 'detach'}
ariaLabel={kitchenSinkDetached ? attachTranscript : detachTranscript}
tooltip={{label: kitchenSinkDetached ? attachTranscript! : detachTranscript!}}
/>
</div>
{this._renderDetachButton()}
{!kitchenSinkDetached && (
<div data-testid="transcriptCloseButton">
<Button
Expand Down
Loading