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

Media Library: Display tooltips if transcoding is in progress #6566

Merged
merged 1 commit into from
Mar 9, 2021

Conversation

swissspidy
Copy link
Collaborator

Context

We want to display a tooltip if video optimization is in progress for a given element/resource.

Summary

This PR adds a tooltip for resources in the media library which are still being transcoded.

I was not able to do the same on the canvas, as neither the frame nor the display layer worked well with the tooltip's absolute positioning.

Relevant Technical Choices

To-do

User-facing changes

New tooltip when hovering over media items in the library:

Screenshot 2021-03-01 at 18 01 40

Testing Instructions

QA

  • This is a non-user-facing change and requires no QA

This PR can be tested by following these steps:

  1. Upload a video
  2. Hover over video in media library
  3. See a tooltip

UAT

  • UAT should use the same steps as above.

This PR can be tested by following these steps:

Reviews

Does this PR have a security-related impact?

No

Does this PR change what data or activity we track or use?

No

Does this PR have a legal-related impact?

No

Checklist

  • This PR addresses an existing issue and I have linked this PR to it in ZenHub
  • I have tested this code to the best of my abilities
  • I have verified accessibility to the best of my abilities (docs)
  • I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
  • This PR contains automated tests (unit, integration, and/or e2e) to verify the code works as intended (docs)
  • I have added documentation where necessary
  • I have added a matching Type: XYZ label to the PR

Fixes #6089

@swissspidy swissspidy added Type: Enhancement New feature or improvement of an existing feature Group: Media Group: Video Optimization Media transcoding, compression and cropping labels Mar 1, 2021
@google-cla google-cla bot added the cla: yes label Mar 1, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Mar 1, 2021

Size Change: +51 B (0%)

Total Size: 1.22 MB

ℹ️ View Unchanged
Filename Size Change
assets/css/edit-story-rtl.css 267 B 0 B
assets/css/edit-story.css 267 B 0 B
assets/css/stories-dashboard-rtl.css 284 B 0 B
assets/css/stories-dashboard.css 284 B 0 B
assets/css/vendors~edit-story-rtl.css 702 B 0 B
assets/css/vendors~edit-story.css 702 B 0 B
assets/css/web-stories-embed-block-rtl.css 615 B 0 B
assets/css/web-stories-embed-block.css 635 B 0 B
assets/js/chunk-fonts-********************.js 45 kB 0 B
assets/js/chunk-web-stories-template-0-********************.js 11 kB 0 B
assets/js/chunk-web-stories-template-1-********************.js 11.3 kB 0 B
assets/js/chunk-web-stories-template-2-********************.js 10.9 kB 0 B
assets/js/chunk-web-stories-template-3-********************.js 10.6 kB 0 B
assets/js/chunk-web-stories-template-4-********************.js 12.7 kB 0 B
assets/js/chunk-web-stories-template-5-********************.js 7.14 kB 0 B
assets/js/chunk-web-stories-template-6-********************.js 10.3 kB 0 B
assets/js/chunk-web-stories-template-7-********************.js 10.1 kB 0 B
assets/js/chunk-web-stories-textset-0-********************.js 5.23 kB 0 B
assets/js/chunk-web-stories-textset-1-********************.js 6.79 kB 0 B
assets/js/chunk-web-stories-textset-2-********************.js 7.81 kB 0 B
assets/js/chunk-web-stories-textset-3-********************.js 15.3 kB 0 B
assets/js/chunk-web-stories-textset-4-********************.js 4.38 kB 0 B
assets/js/chunk-web-stories-textset-5-********************.js 5.64 kB 0 B
assets/js/chunk-web-stories-textset-6-********************.js 5.43 kB 0 B
assets/js/chunk-web-stories-textset-7-********************.js 10.3 kB 0 B
assets/js/edit-story.js 338 kB +51 B (0%)
assets/js/stories-dashboard.js 264 kB 0 B
assets/js/vendors~chunk-ffmpeg-********************.js 5.61 kB 0 B
assets/js/vendors~edit-story-********************.js 61.3 kB 0 B
assets/js/vendors~edit-story~stories-dashboard-********************.js 267 kB 0 B
assets/js/web-stories-activation-notice.js 68.2 kB 0 B
assets/js/web-stories-embed-block.js 19.8 kB 0 B

compressed-size-action

@spacedmonkey
Copy link
Contributor

Screenshot 2021-03-01 at 17 32 49
I uploaded a portrait video and had issue with menu overlaying the tooltip.

@swissspidy
Copy link
Collaborator Author

Screenshot 2021-03-01 at 17 32 49
I uploaded a portrait video and had issue with menu overlaying the tooltip.

That should be raised in a new ticket to update the tooltip component in the design system accordingly so it has higher z-index than the admin menu.

@spacedmonkey
Copy link
Contributor

New issue created - #6581

Copy link
Contributor

@spacedmonkey spacedmonkey left a comment

Choose a reason for hiding this comment

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

👍

Base automatically changed from add/6088-media-previews to main March 9, 2021 08:29
@codecov
Copy link

codecov bot commented Mar 9, 2021

Codecov Report

Merging #6566 (b34ef86) into main (f46a2e8) will increase coverage by 14.19%.
The diff coverage is 80.00%.

Impacted file tree graph

@@             Coverage Diff             @@
##             main    #6566       +/-   ##
===========================================
+ Coverage   68.58%   82.78%   +14.19%     
===========================================
  Files        1128     1131        +3     
  Lines       20010    20038       +28     
===========================================
+ Hits        13724    16588     +2864     
+ Misses       6286     3450     -2836     
Flag Coverage Δ
karmatests 73.41% <80.00%> (+33.24%) ⬆️
unittests 65.82% <80.00%> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
...ponents/library/panes/media/common/mediaElement.js 87.32% <80.00%> (+6.72%) ⬆️
packages/text-sets/src/loadTextSets.js 100.00% <0.00%> (ø)
assets/src/animation/types.js 100.00% <0.00%> (ø)
assets/src/edit-story/app/prepublish/types.js 100.00% <0.00%> (ø)
...edit-story/app/prepublish/warning/accessibility.js 67.06% <0.00%> (+1.19%) ⬆️
assets/src/animation/components/provider.js 100.00% <0.00%> (+1.29%) ⬆️
...story/components/helpCenter/useHelpCenter/index.js 91.42% <0.00%> (+1.42%) ⬆️
...rc/edit-story/app/story/useStoryReducer/actions.js 100.00% <0.00%> (+1.47%) ⬆️
...c/edit-story/components/carousel/gridview/index.js 92.59% <0.00%> (+1.85%) ⬆️
...src/edit-story/components/reorderable/useScroll.js 54.16% <0.00%> (+2.08%) ⬆️
... and 283 more

@swissspidy swissspidy merged commit 12f5633 into main Mar 9, 2021
@swissspidy swissspidy deleted the add/6089-tooltip branch March 9, 2021 09:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Group: Media Group: Video Optimization Media transcoding, compression and cropping Type: Enhancement New feature or improvement of an existing feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Video Optimization: Display tooltip for resource being transcoded
2 participants