Skip to content

Commit

Permalink
Video UI: Bottom bar on mobile (#57922)
Browse files Browse the repository at this point in the history
  • Loading branch information
andres-blanco authored Nov 10, 2021
1 parent 90100cf commit f1485bd
Showing 4 changed files with 123 additions and 47 deletions.
40 changes: 15 additions & 25 deletions client/components/videos-ui/index.jsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
import { Button, Gridicon } from '@automattic/components';
import { useTranslate } from 'i18n-calypso';
import { useEffect, useState, useRef } from 'react';
import { useSelector } from 'react-redux';
import useCourseQuery from 'calypso/data/courses/use-course-query';
import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
import getSelectedSiteSlug from 'calypso/state/ui/selectors/get-selected-site-slug';
import VideoLinksBar from './video-links-bar';
import VideoPlayer from './video-player';
import './style.scss';

const VideosUi = ( { shouldDisplayTopLinks = false, onBackClick = () => {} } ) => {
const translate = useTranslate();
const siteSlug = useSelector( getSelectedSiteSlug );
const { data: course } = useCourseQuery( 'blogging-quick-start', { retry: false } );
const [ selectedVideoIndex, setSelectedVideoIndex ] = useState( null );

@@ -85,28 +83,13 @@ const VideosUi = ( { shouldDisplayTopLinks = false, onBackClick = () => {} } ) =
return (
<div className="videos-ui">
<div className="videos-ui__header">
<div className="videos-ui__header-links">
<div>
<Gridicon icon="my-sites" size={ 24 } />
{ shouldDisplayTopLinks && (
<a href="/" className="videos-ui__back-link" onClick={ onBackClick }>
<Gridicon icon="chevron-left" size={ 24 } />
<span>{ translate( 'Back' ) }</span>
</a>
) }
</div>
<div>
{ shouldDisplayTopLinks && (
<a
href={ `/post/${ siteSlug }` }
className="videos-ui__skip-link"
onClick={ skipClickHandler }
>
{ translate( 'Draft your first post' ) }
</a>
) }
</div>
</div>
<VideoLinksBar
displayIcon={ true }
displayLinks={ shouldDisplayTopLinks }
isFooter={ false }
onBackClick={ onBackClick }
skipClickHandler={ skipClickHandler }
/>
<div className="videos-ui__header-content">
<div className="videos-ui__titles">
<h2>{ translate( 'Watch five videos.' ) }</h2>
@@ -194,6 +177,13 @@ const VideosUi = ( { shouldDisplayTopLinks = false, onBackClick = () => {} } ) =
</div>
</div>
</div>
<VideoLinksBar
displayIcon={ false }
displayLinks={ shouldDisplayTopLinks }
isFooter={ true }
onBackClick={ onBackClick }
skipClickHandler={ skipClickHandler }
/>
</div>
);
};
52 changes: 52 additions & 0 deletions client/components/videos-ui/style-video-links-bar.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';

.videos-ui__header-links {
padding: 24px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: $font-body-small;

&.videos-ui__is-footer {
border-top: 1px solid rgba( 255, 255, 255, 0.1 );
margin-top: auto;
}
.videos-ui__bar {
&.desktop {
display: none;
}
}

div,
a {
display: flex;
color: #fff;
align-items: center;
}

.videos-ui__back-link {
margin-left: 24px;
}

.videos-ui__bar {
display: flex;
justify-content: space-between;
width: 100%;

.videos-ui__bar-skip-link {
text-decoration: underline;
}
}
@include break-small {
.videos-ui__bar {
&.desktop {
display: flex;
}
&.mobile {
display: none;
}
}
}
}
26 changes: 4 additions & 22 deletions client/components/videos-ui/style.scss
Original file line number Diff line number Diff line change
@@ -6,31 +6,13 @@
.videos-ui {
background: #101517;
color: #fff;
display: flex;
flex-direction: column;

.videos-ui__header {
background: #151b1e;
border-bottom: 1px solid rgba( 255, 255, 255, 0.1 );

.videos-ui__header-links {
padding: 24px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: $font-body-small;
div,
a {
display: flex;
color: #fff;
align-items: center;
}
.videos-ui__back-link {
margin-left: 24px;
}
.videos-ui__skip-link {
text-decoration: underline;
}
}

.videos-ui__header-content {
display: flex;
flex-direction: column;
@@ -60,7 +42,7 @@

.videos-ui__body {
max-width: 1280px;
margin: auto;
margin: 0 auto;

h3 {
font-size: $font-title-medium;
52 changes: 52 additions & 0 deletions client/components/videos-ui/video-links-bar.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { Gridicon } from '@automattic/components';
import classNames from 'classnames';
import { useTranslate } from 'i18n-calypso';
import { useSelector } from 'react-redux';
import getSelectedSiteSlug from 'calypso/state/ui/selectors/get-selected-site-slug';

import './style-video-links-bar.scss';

const VideoLinksBar = ( {
displayIcon,
displayLinks,
isFooter = false,
onBackClick = () => {},
skipClickHandler = () => {},
} ) => {
const translate = useTranslate();
const siteSlug = useSelector( getSelectedSiteSlug );
const classes = classNames( 'videos-ui__bar', isFooter ? 'mobile' : 'desktop' );

return (
<div
className={ classNames( 'videos-ui__header-links', {
'videos-ui__is-footer': isFooter,
} ) }
>
{ displayIcon && <Gridicon icon="my-sites" size={ 24 } /> }
{ displayLinks && (
<div className={ classes }>
<div>
<a
href="/"
className={ classNames( {
'videos-ui__back-link': displayIcon,
} ) }
onClick={ onBackClick }
>
<Gridicon icon="chevron-left" size={ 24 } />
<span>{ translate( 'Back' ) }</span>
</a>
</div>
<div className="videos-ui__bar-skip-link">
<a href={ `/post/${ siteSlug }` } onClick={ skipClickHandler }>
{ translate( 'Draft your first post' ) }
</a>
</div>
</div>
) }
</div>
);
};

export default VideoLinksBar;

0 comments on commit f1485bd

Please sign in to comment.