Skip to content

Commit

Permalink
IconButton Replacement Finished (#2151)
Browse files Browse the repository at this point in the history
* replace iconbutton and other material ui items in media controls [CV2-3360]

* remove last use of iconbutton in favor or buttonmain cds component [CV2-3360]

* fix linter errors in test files

* Update testing class for playback speed [CV2-3360]

* replace mistakenly removed id [CV2-3360]

* use BEM class on volume button for testing [CV2-3360]

* [smoke tests] Run all smoke tests for this branch
  • Loading branch information
brianfleming authored Oct 7, 2024
1 parent a9ebfce commit 9b460ba
Show file tree
Hide file tree
Showing 14 changed files with 270 additions and 245 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -189,4 +189,4 @@
"description": "Label for input to select language",
"defaultMessage": "Language"
}
]
]
Original file line number Diff line number Diff line change
@@ -1,17 +1,7 @@
[
{
"id": "smoochBot.designYourBot",
"description": "Title of tipline settings page",
"defaultMessage": "Design your bot"
},
{
"id": "smoochBot.settings",
"description": "Tab label to click to see the settings area",
"defaultMessage": "Settings"
},
{
"id": "smoochBot.addResource",
"description": "Button label to add a resource to this bot",
"defaultMessage": "Resource"
"defaultMessage": "New Tipline Resource"
}
]
Original file line number Diff line number Diff line change
@@ -1,4 +1,29 @@
[
{
"id": "smoochBotResourceEditor.newResource",
"description": "Page title for creating a new resource for the tipline bot to deliver",
"defaultMessage": "Create New Resource"
},
{
"id": "smoochBotResourceEditor.editResource",
"description": "Page title for editing an existing resource for the tipline bot to deliver",
"defaultMessage": "Edit Resource"
},
{
"id": "smoochBotResourceEditor.newResourceDescription",
"description": "Page description for adding a new tipline resource",
"defaultMessage": "Add multimedia content as a response to a Tipline Menu option by adding a new resource."
},
{
"id": "smoochBotResourceEditor.save",
"description": "Label for action button to save a tipline resource.",
"defaultMessage": "Save"
},
{
"id": "smoochBotResourceEditor.create",
"description": "Label for action button to create a new tipline resource.",
"defaultMessage": "Create Resource"
},
{
"id": "smoochBotResourceEditor.errorRssFeedUrl",
"description": "Error message displayed when a user submits a form with a URL that the server does not recognize.",
Expand Down Expand Up @@ -59,11 +84,6 @@
"description": "Label for a switch where the user turns on RSS (Really Simple Syndication) capability - should not be translated unless there is a local idiom for 'RSS'",
"defaultMessage": "RSS"
},
{
"id": "smoochBotResourceEditor.save",
"description": "Label for action button to save a tipline resource.",
"defaultMessage": "Save"
},
{
"id": "smoochBotResourceEditor.delete",
"description": "Label for action button to delete a tipline resource.",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
[
{
"id": "smoochBotSettings.messagingPlatform",
"description": "Title of available messaging platforms that can be connected in the tipline settings page",
"defaultMessage": "Messaging Platforms"
},
{
"id": "smoochBotSettings.internalSettings",
"description": "Title of Internal Settings section in the tipline settings page",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
[
{
"id": "smoochBot.labelContent",
"description": "Button label in tipline settings page",
"defaultMessage": "Content & translation"
"id": "smoochBot.labelSettings",
"description": "Label for the bot platform settings area",
"defaultMessage": "Platforms"
},
{
"id": "smoochBot.labelMainMenu",
"description": "Label for the bot Main menu content area",
"defaultMessage": "Main menu"
"defaultMessage": "Main Menu"
},
{
"id": "smoochBot.labelContent",
"description": "Button label in tipline settings page",
"defaultMessage": "Content & Translation"
},
{
"id": "smoochBot.placeholderGreeting",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,21 @@
"description": "Title for the tags settings page",
"defaultMessage": "Tags [{count}]"
},
{
"id": "search.previousPage",
"description": "Pagination button to go to previous page",
"defaultMessage": "Previous page"
},
{
"id": "searchResults.itemsCount",
"description": "Pagination count of items returned",
"defaultMessage": "{totalCount, plural, one {1 / 1} other {{from} - {to} / #}}"
},
{
"id": "search.nextPage",
"description": "Pagination button to go to next page",
"defaultMessage": "Next page"
},
{
"id": "teamTagsComponent.blank",
"description": "Message displayed when there are no tags in the workspace",
Expand Down
4 changes: 4 additions & 0 deletions src/app/components/cds/buttons-checkboxes-chips/ButtonMain.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const ButtonMain = ({
iconRight,
label,
onClick,
onPointerUp,
size,
theme,
title,
Expand All @@ -40,6 +41,7 @@ const ButtonMain = ({
type="button"
variant={variant}
onClick={onClick}
onPointerUp={onPointerUp}
{...buttonProps}
>
{ iconLeft && (
Expand Down Expand Up @@ -77,6 +79,7 @@ ButtonMain.defaultProps = {
customStyle: {},
buttonProps: {},
onClick: () => {},
onPointerUp: () => {},
};

ButtonMain.propTypes = {
Expand All @@ -93,6 +96,7 @@ ButtonMain.propTypes = {
title: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
variant: PropTypes.oneOf(['contained', 'outlined', 'text']),
onClick: PropTypes.func,
onPointerUp: PropTypes.func,
};

export default ButtonMain;
103 changes: 26 additions & 77 deletions src/app/components/cds/media-cards/MediaControls.js
Original file line number Diff line number Diff line change
@@ -1,47 +1,16 @@
import React from 'react';
// import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import {
Box,
Grid,
IconButton,
} from '@material-ui/core';
import MediaTimeline from './MediaTimeline';
import MediaVolume from './MediaVolume';
import MediaPlaybackSpeed from './MediaPlaybackSpeed';
import ButtonMain from '../buttons-checkboxes-chips/ButtonMain';
import PauseIcon from '../../../icons/pause.svg';
import PlayArrowIcon from '../../../icons/play_arrow.svg';

const useStyles = makeStyles(theme => ({
root: {
color: 'var(--color-white-100)',
background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.31) 51.56%, rgba(0, 0, 0, 0.7) 100%)',
position: 'absolute',
bottom: 0,
width: '100%',
padding: theme.spacing(1.5, 1, 0, 1),
},
icon: {
color: 'var(--color-white-100)',
fontSize: '24px',
marginRight: theme.spacing(1),
'&:hover': {
color: 'var(--color-white-100)',
backgroundColor: 'var(--overlayLight)',
},
},
overlay: {
position: 'absolute',
top: 0,
height: '100%',
width: '100%',
},
}));
import styles from './MediaControls.module.css';

const MediaControls = ({
videoRef,
}) => {
const classes = useStyles();
const [isPlaying, setIsPlaying] = React.useState(false);
const [duration, setDuration] = React.useState(0);
const [currentTime, setCurrentTime] = React.useState(0);
Expand Down Expand Up @@ -74,13 +43,13 @@ const MediaControls = ({
};

const PlayButton = () => (
<IconButton
className={classes.icon}
size="small"
<ButtonMain
iconCenter={isPlaying ? <PauseIcon /> : <PlayArrowIcon />}
size="default"
theme="white"
variant="text"
onPointerUp={togglePlay}
>
{ isPlaying ? <PauseIcon /> : <PlayArrowIcon /> }
</IconButton>
/>
);

const prettyPrintTime = (seconds) => {
Expand All @@ -96,58 +65,38 @@ const MediaControls = ({
};
const durationDisplay = prettyPrintTime(duration);
const TimeDisplay = () => (
<div className="typography-body1">
<div>
{prettyPrintTime(currentTime)} / {durationDisplay}
</div>
);

return (
<>
<div className={classes.overlay} onKeyUp={togglePlay} onPointerUp={togglePlay} />
<Grid
alignItems="center"
className={classes.root}
container
display="flex"
>
<Grid
alignItems="center"
container
item
xs={6}
>
<div className={styles['media-controls-overlay']} onKeyUp={togglePlay} onPointerUp={togglePlay} />
<div className={styles['media-controls']}>
<div className={styles['media-controls-play-time']}>
<PlayButton />
<TimeDisplay />
</Grid>
<Grid
alignItems="center"
container
item
justify="flex-end"
xs={6}
>
<Grid container item justify="flex-end" xs={6}>
<MediaVolume
setVolume={setVolume}
videoRef={videoRef}
volume={volume}
/>
</Grid>
<Box alignItems="center" display="flex">
<MediaPlaybackSpeed
playbackSpeed={playbackSpeed}
setPlaybackSpeed={setPlaybackSpeed}
videoRef={videoRef}
/>
</Box>
</Grid>
</div>
<div className={styles['media-controls-volume-speed']}>
<MediaVolume
setVolume={setVolume}
videoRef={videoRef}
volume={volume}
/>
<MediaPlaybackSpeed
playbackSpeed={playbackSpeed}
setPlaybackSpeed={setPlaybackSpeed}
videoRef={videoRef}
/>
</div>
<MediaTimeline
currentTime={currentTime}
duration={duration}
setCurrentTime={setCurrentTime}
videoRef={videoRef}
/>
</Grid>
</div>
</>
);
};
Expand Down
Loading

0 comments on commit 9b460ba

Please sign in to comment.