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

Dashboard: Now with Poster Images and Faster Content Rendering #8274

Merged
merged 18 commits into from
Jul 16, 2021
Merged

Dashboard: Now with Poster Images and Faster Content Rendering #8274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
24a141f
wip, trying not loading story previews
BrittanyIRL Jul 8, 2021
77bf8e6
separate card preview for stories now that they are using the poster …
BrittanyIRL Jul 9, 2021
cb71dcd
pull apart story grid view and story grid item and put them in the my…
BrittanyIRL Jul 9, 2021
05af10f
catch list view up to poster changes
BrittanyIRL Jul 9, 2021
fa9c4e3
remove excess fetch when toggling between grid and list view, theres …
BrittanyIRL Jul 9, 2021
2fb268c
fix tests after updating serializer, fix storybook warnings.
BrittanyIRL Jul 12, 2021
0a57de4
first pass at cleaning up story grid now that we are using images, ad…
BrittanyIRL Jul 12, 2021
9d9d53a
fix keyboard nav on story grid
BrittanyIRL Jul 12, 2021
b4a82c0
update karma tests now that grid navigation by keyboard isnt so intense
BrittanyIRL Jul 12, 2021
154b39a
consistent aria labeling.
BrittanyIRL Jul 13, 2021
e966e13
restore grid
BrittanyIRL Jul 13, 2021
af060d0
Update assets/src/dashboard/app/views/myStories/karma/myStories.karma.js
BrittanyIRL Jul 13, 2021
b95a992
better refocus
BrittanyIRL Jul 13, 2021
7732e48
clean up serializer post rebase
BrittanyIRL Jul 13, 2021
1ba21b1
conditionally render poster as img based on if theres a url for it or…
BrittanyIRL Jul 14, 2021
6698088
catch list view up
BrittanyIRL Jul 14, 2021
0b2ac1e
better explaination of usePageView heights and making the storyMenu b…
BrittanyIRL Jul 15, 2021
6d34c3b
whoops, gotta make sure were lookin for a class in the focus query.
BrittanyIRL Jul 15, 2021
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
45 changes: 10 additions & 35 deletions assets/src/dashboard/app/api/test/apiProvider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ jest.mock('../wpAdapter', () => ({
{
id: 123,
status: 'publish',
featured_media_url: 'https://www.featured-media-123',
author: 1,
link: 'https://www.story-link.com',
preview_link: 'https://www.story-link.com/?preview=true',
Expand All @@ -60,6 +61,7 @@ jest.mock('../wpAdapter', () => ({
const id = data.id || 456;
return Promise.resolve({
id,
featured_media_url: `https://www.featured-media-${data.id || 456}`,
status: 'publish',
title: { raw: title, rendered: title },
content: { raw: content, rendered: content },
Expand Down Expand Up @@ -113,12 +115,11 @@ describe('ApiProvider', () => {
123: {
bottomTargetAction:
'https://www.story-link.com/wp-admin/post.php?id=123',
centerTargetAction: '',
editStoryLink: 'https://www.story-link.com/wp-admin/post.php?id=123',
id: 123,
modified: '1970-01-01T00:00:00.000',
modified_gmt: '1970-01-01T00:00:00.000Z',

featuredMediaUrl: 'https://www.featured-media-123',
created: '1970-01-01T00:00:00.000',
created_gmt: '1970-01-01T00:00:00.000Z',
author: 'admin',
Expand All @@ -131,6 +132,7 @@ describe('ApiProvider', () => {
locked: false,
originalStoryData: {
id: 123,
featured_media_url: 'https://www.featured-media-123',
modified: '1970-01-01T00:00:00.000',
modified_gmt: '1970-01-01T00:00:00.000',
preview_link: 'https://www.story-link.com/?preview=true',
Expand Down Expand Up @@ -158,12 +160,6 @@ describe('ApiProvider', () => {
},
_embedded: { author: [{ id: 1, name: 'admin' }] },
},
pages: [
{
elements: [],
id: 1,
},
],
previewLink: 'https://www.story-link.com/?preview=true',
status: 'publish',
title: 'Carlos',
Expand All @@ -189,12 +185,6 @@ describe('ApiProvider', () => {
await result.current.actions.storyApi.updateStory({
id: 123,
modified: undefined,
pages: [
{
elements: [],
id: 1,
},
],
status: 'publish',
title: { raw: 'New Title' },
content: { raw: 'Content', rendered: 'Content' },
Expand All @@ -211,7 +201,7 @@ describe('ApiProvider', () => {
123: {
bottomTargetAction:
'https://www.story-link.com/wp-admin/post.php?id=123',
centerTargetAction: '',
featuredMediaUrl: 'https://www.featured-media-123',
editStoryLink: 'https://www.story-link.com/wp-admin/post.php?id=123',
id: 123,
modified: '1970-01-01T00:00:00.000',
Expand All @@ -230,6 +220,7 @@ describe('ApiProvider', () => {
id: 123,
modified: '1970-01-01T00:00:00.000',
modified_gmt: '1970-01-01T00:00:00.000',
featured_media_url: 'https://www.featured-media-123',
preview_link: 'https://www.story-link.com/?preview=true',
edit_link: 'https://www.story-link.com/wp-admin/post.php?id=123',
date: '1970-01-01T00:00:00.000',
Expand All @@ -255,12 +246,6 @@ describe('ApiProvider', () => {
},
_embedded: { author: [{ id: 1, name: 'admin' }] },
},
pages: [
{
elements: [],
id: 1,
},
],
previewLink: 'https://www.story-link.com/?preview=true',
status: 'publish',
title: 'New Title',
Expand Down Expand Up @@ -319,7 +304,7 @@ describe('ApiProvider', () => {
123: {
bottomTargetAction:
'https://www.story-link.com/wp-admin/post.php?id=123',
centerTargetAction: '',
featuredMediaUrl: 'https://www.featured-media-123',
editStoryLink: 'https://www.story-link.com/wp-admin/post.php?id=123',
id: 123,
modified: '1970-01-01T00:00:00.000',
Expand All @@ -338,6 +323,7 @@ describe('ApiProvider', () => {
id: 123,
modified: '1970-01-01T00:00:00.000',
modified_gmt: '1970-01-01T00:00:00.000',
featured_media_url: 'https://www.featured-media-123',
preview_link: 'https://www.story-link.com/?preview=true',
edit_link: 'https://www.story-link.com/wp-admin/post.php?id=123',
date: '1970-01-01T00:00:00.000',
Expand All @@ -363,20 +349,14 @@ describe('ApiProvider', () => {
},
_embedded: { author: [{ id: 1, name: 'admin' }] },
},
pages: [
{
elements: [],
id: 1,
},
],
previewLink: 'https://www.story-link.com/?preview=true',
status: 'publish',
title: 'Carlos',
},
456: {
bottomTargetAction:
'https://www.story-link.com/wp-admin/post.php?id=456',
centerTargetAction: '',
featuredMediaUrl: 'https://www.featured-media-456',
editStoryLink: 'https://www.story-link.com/wp-admin/post.php?id=456',
id: 456,
modified: '1970-01-01T00:00:00.000',
Expand All @@ -395,6 +375,7 @@ describe('ApiProvider', () => {
id: 456,
modified: '1970-01-01T00:00:00.000',
modified_gmt: '1970-01-01T00:00:00.000',
featured_media_url: 'https://www.featured-media-456',
preview_link: 'https://www.story-link.com/?preview=true',
edit_link: 'https://www.story-link.com/wp-admin/post.php?id=456',
date: '1970-01-01T00:00:00.000',
Expand All @@ -420,12 +401,6 @@ describe('ApiProvider', () => {
},
_embedded: { author: [{ id: 1, name: 'admin' }] },
},
pages: [
{
elements: [],
id: 1,
},
],
previewLink: 'https://www.story-link.com/?preview=true',
status: 'publish',
title: 'Carlos (Copy)',
Expand Down
14 changes: 2 additions & 12 deletions assets/src/dashboard/app/serializers/stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,6 @@
* limitations under the License.
*/

/**
* External dependencies
*/
import { migrate, DATA_VERSION } from '@web-stories-wp/migration';

export default function reshapeStoryObject(originalStoryData) {
const {
id,
Expand All @@ -29,6 +24,7 @@ export default function reshapeStoryObject(originalStoryData) {
modified,
modified_gmt,
link,
featured_media_url: featuredMediaUrl,
preview_link: previewLink,
edit_link: editStoryLink,
story_data: storyData,
Expand All @@ -42,11 +38,6 @@ export default function reshapeStoryObject(originalStoryData) {
return null;
}

const updatedStoryData = {
...migrate(storyData, storyData.version),
version: DATA_VERSION,
};

return {
id,
status,
Expand All @@ -55,16 +46,15 @@ export default function reshapeStoryObject(originalStoryData) {
created_gmt: `${date_gmt}Z`,
modified,
modified_gmt: `${modified_gmt}Z`,
pages: updatedStoryData.pages,
author: author[0].name,
locked: lock[0]?.locked,
lockUser: {
id: lockUser[0].id,
name: lockUser[0].name,
avatar: lockUser[0].avatar_urls['24'] || null,
},
centerTargetAction: '',
bottomTargetAction: editStoryLink,
featuredMediaUrl,
editStoryLink,
previewLink,
link,
Expand Down
118 changes: 52 additions & 66 deletions assets/src/dashboard/app/views/myStories/content/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
*/
import PropTypes from 'prop-types';
import { __, sprintf } from '@web-stories-wp/i18n';
import { UnitsProvider } from '@web-stories-wp/units';
import {
Button,
BUTTON_SIZES,
Expand All @@ -31,7 +30,6 @@ import {
/**
* Internal dependencies
*/
import { TransformProvider } from '../../../../../edit-story/components/transform';
Copy link
Collaborator

Choose a reason for hiding this comment

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

I particularly love getting rid of this dependency on edit-story 🎉

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm not sure yet what to do about templates, but this will at least help with my stories.

Copy link
Collaborator

Choose a reason for hiding this comment

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

We should probably do that for templates too. We could host the preview images on the CDN.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's a matter of how we're generating the preview images, since the related image rendering for thumbnails is still being researched.

Copy link
Contributor

Choose a reason for hiding this comment

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

For templates, I imagine poster generation is a matter of flattening/rasterizing the first page after removing elements that are duplicative with the story preview (i.e. title text/author/publisher logo). For example:

Before:
Screen Shot 2021-07-13 at 3 25 25 PM

After (removed title, author, logo):
Screen Shot 2021-07-13 at 3 25 37 PM

In many cases this might just be the background image of the first page, but some templates have stickers/scrims that may still be desired. I took screenshots of the editor above, but actual posters should be exported from Figma.

/cc @o-fernandez

Copy link
Contributor Author

Choose a reason for hiding this comment

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

i suppose if we want to just export this from figma we could do this pretty quickly.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@choumx @swissspidy following up on this, should we just export from figma and add asset paths to the templates for poster images and use those here or should we put a pin in this until later when we deal with text sets and page layouts?

import { resolveRoute } from '../../../router';
import { APP_ROUTES } from '../../../../constants';
import {
Expand All @@ -47,7 +45,6 @@ import {
SortPropTypes,
ShowStoriesWhileLoadingPropType,
} from '../../../../utils/useStoryView';
import FontProvider from '../../../font/fontProvider';
import { EmptyContentMessage } from '../../shared';
import StoriesView from './storiesView';

Expand All @@ -65,69 +62,58 @@ function Content({
}) {
return (
<Layout.Scrollable>
<FontProvider>
<TransformProvider>
<UnitsProvider
pageSize={{
width: view.pageSize.width,
height: view.pageSize.height,
}}
>
<StandardViewContentGutter>
{stories.length > 0 ? (
<>
<StoriesView
filterValue={filter.value}
isLoading={isLoading}
sort={sort}
storyActions={storyActions}
stories={stories}
view={view}
loading={{
isLoading,
showStoriesWhileLoading,
}}
/>
<InfiniteScroller
canLoadMore={!allPagesFetched}
isLoading={isLoading}
allDataLoadedMessage={__('No more stories', 'web-stories')}
onLoadMore={page.requestNextPage}
/>
</>
) : (
<EmptyContentMessage>
<Headline
size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL}
as="h3"
>
{search?.keyword
? sprintf(
/* translators: %s: search term. */
__(
'Sorry, we couldn\'t find any results matching "%s"',
'web-stories'
),
search.keyword
)
: __('Start telling Stories.', 'web-stories')}
</Headline>
{!search?.keyword && (
<Button
type={BUTTON_TYPES.PRIMARY}
size={BUTTON_SIZES.MEDIUM}
as="a"
href={resolveRoute(APP_ROUTES.TEMPLATES_GALLERY)}
>
{__('Explore Templates', 'web-stories')}
</Button>
)}
</EmptyContentMessage>
)}
</StandardViewContentGutter>
</UnitsProvider>
</TransformProvider>
</FontProvider>
<StandardViewContentGutter>
{stories.length > 0 ? (
<>
<StoriesView
filterValue={filter.value}
isLoading={isLoading}
sort={sort}
storyActions={storyActions}
stories={stories}
view={view}
loading={{
isLoading,
showStoriesWhileLoading,
}}
/>
<InfiniteScroller
canLoadMore={!allPagesFetched}
isLoading={isLoading}
allDataLoadedMessage={__('No more stories', 'web-stories')}
onLoadMore={page.requestNextPage}
/>
</>
) : (
<EmptyContentMessage>
<Headline
size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL}
as="h3"
>
{search?.keyword
? sprintf(
/* translators: %s: search term. */
__(
'Sorry, we couldn\'t find any results matching "%s"',
'web-stories'
),
search.keyword
)
: __('Start telling Stories.', 'web-stories')}
</Headline>
{!search?.keyword && (
<Button
type={BUTTON_TYPES.PRIMARY}
size={BUTTON_SIZES.MEDIUM}
as="a"
href={resolveRoute(APP_ROUTES.TEMPLATES_GALLERY)}
>
{__('Explore Templates', 'web-stories')}
</Button>
)}
</EmptyContentMessage>
)}
</StandardViewContentGutter>
Copy link
Contributor

Choose a reason for hiding this comment

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

😍

</Layout.Scrollable>
);
}
Expand Down
Loading