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(video-player): control panel design fixes (VIV-2246, VIV-2275) #2074

Merged
merged 11 commits into from
Jan 15, 2025
Merged

fix(video-player): control panel design fixes (VIV-2246, VIV-2275) #2074

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
f8e8b5d
design QA
rachelbt Jan 6, 2025
db1b4d5
video design fixes
rachelbt Jan 6, 2025
d6baa04
new ui test png
rachelbt Jan 6, 2025
e2e2ddc
Merge branch 'main' into VIV-2246-video-QA
rachelbt Jan 6, 2025
4fe450f
add scroll
rachelbt Jan 7, 2025
726ddb8
Merge branch 'main' into VIV-2246-video-QA
rachelbt Jan 7, 2025
714000e
Merge branch 'main' into VIV-2246-video-QA
rachelbt Jan 12, 2025
0c6ee6a
fix design QA
rachelbt Jan 12, 2025
6bddd5d
Merge branch 'main' into VIV-2246-video-QA
rachelbt Jan 14, 2025
ac5b084
update ui tests
rachelbt Jan 14, 2025
bac814e
Merge branch 'main' into VIV-2246-video-QA
rachelbt Jan 15, 2025
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
8 changes: 8 additions & 0 deletions libs/components/src/lib/video-player/partials/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
// setting variables with hard-coded color, since design required both dark & light be the same
$video-player-neutral-900: #1a1a1a;
$video-player-neutral-950: --vvd-color-neutral-950;
$video-player-neutral-800: #333;
$video-player-canvas-text: #fff;
$video-player-canvas: #0d0d0d;
$video-player-canvas-opacity: #0d0d0dcc;
$video-player-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;
2 changes: 1 addition & 1 deletion libs/components/src/lib/video-player/ui.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ test('should show the component', async ({ page }: { page: Page }) => {
const template = `
<style>
.layout {
max-width: 800px;
max-width: 760px;
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 changed the width so the new pngs will be generated

padding: 8px;
}
.spacer {
Expand Down
Binary file modified ...o-player/ui.test.ts-snapshots/snapshots-video-player-Desktop-Chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...eo-player/ui.test.ts-snapshots/snapshots-video-player-Desktop-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...deo-player/ui.test.ts-snapshots/snapshots-video-player-Desktop-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 32 additions & 25 deletions libs/components/src/lib/video-player/video-player.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
@use 'partials/variables' as variables;
@use '../../../../shared/src/lib/sass/mixins/border-radius' as
border-radius-variables;
@use '../../../../../dist/libs/tokens/scss/tokens.constants' as constants;
@use '../../../../shared/src/lib/sass/mixins/focus' as focus;
@use '../../../../shared/src/lib/sass/mixins/focus' as focus-variables;
@use '../../../../shared/src/lib/sass/mixins/scrollbar' as scrollbar;
@import '../../../../../node_modules/video.js/dist/video-js.css';

:host {
Expand All @@ -11,18 +13,15 @@

.vjs-theme-vivid {
$control-size: 40px;
$control-background-color: color-mix(
in srgb,
var(#{constants.$vvd-color-canvas-text}),
transparent 40%
);
$control-background-color-hover: var(#{constants.$vvd-color-neutral-900});
$control-background-color-active: var(#{constants.$vvd-color-neutral-800});
$control-background-color: variables.$video-player-canvas-opacity;
$control-background-color-hover: variables.$video-player-neutral-900;
$control-background-color-active: variables.$video-player-neutral-800;
$control-menu-background-color: variables.$video-player-color-surface-4dp;

position: relative;
overflow: hidden;
border-radius: #{border-radius-variables.$border-radius-normal};
color: var(#{constants.$vvd-color-canvas});
color: variables.$video-player-canvas-text;
container-type: inline-size;
font: var(#{constants.$vvd-typography-base});

Expand Down Expand Up @@ -94,22 +93,22 @@
$border: #{border-radius-variables.$border-radius-normal};

flex-wrap: wrap;
padding: 4px;
padding: 4px 4px 8px;
border-radius: 0 0 $border $border;
margin: 4px;
margin: 8px;
background-color: $control-background-color;
block-size: $control-size;
block-size: calc($control-size + 4px);
column-gap: 4px;
inline-size: calc(100% - 8px);
inline-size: calc(100% - 16px);

&::before {
position: absolute;
border-radius: $border $border 0 0;
background-color: inherit;
block-size: 24px;
block-size: 32px;
content: '';
inline-size: 100%;
inset-block-start: -24px;
inset-block-start: -32px;
inset-inline-start: 0;
}
}
Expand Down Expand Up @@ -138,14 +137,20 @@
}

> .vjs-svg-icon {
block-size: 18px;
block-size: 16px;
filter: none;
inline-size: 18px;
inline-size: 16px;
}
}

/* playback rates */
.vjs-menu {
@include scrollbar.scrollbar;

& {
#{variables.$video-player-neutral-950}: #fff;
}

&-button {
border-radius: #{border-radius-variables.$border-radius-normal};
}
Expand All @@ -157,7 +162,7 @@
align-items: center;
justify-content: start;
padding: 4px 8px;
color: var(#{constants.$vvd-color-canvas-text});
color: variables.$video-player-canvas-text;
font: var(#{constants.$vvd-typography-base});
min-block-size: 40px;
text-align: left;
Expand All @@ -168,13 +173,13 @@
}

li:not(.vjs-selected, .vjs-menu-title):hover {
background: var(#{constants.$vvd-color-neutral-100});
background: variables.$video-player-neutral-900;
}

li.vjs-selected {
background: var(#{constants.$vvd-color-neutral-200});
background: variables.$video-player-neutral-800;
&:hover {
color: var(#{constants.$vvd-color-canvas-text});
color: variables.$video-player-canvas-text;
}
}
}
Expand Down Expand Up @@ -257,8 +262,7 @@
.vjs-menu-content {
display: flex;
flex-direction: column;
background: var(#{constants.$vvd-color-surface-2dp});
filter: var(#{constants.$vvd-shadow-surface-2dp});
background: $control-menu-background-color;
gap: 1px;
inset-block-end: 20px;
padding-block: 8px;
Expand All @@ -272,16 +276,19 @@

.vjs-volume-control {
border-radius: #{border-radius-variables.$border-radius-normal};
background-color: $control-background-color;
inline-size: 20px;
background: $control-menu-background-color;
inset-block-end: calc(8em + 4px);

&.vjs-volume-vertical {
inline-size: 32px;
}
}

&.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-vertical,
&.vjs-slider-active
.vjs-mute-control
~ .vjs-volume-control.vjs-volume-vertical {
left: -38px;
left: -31px;
}
}

Expand Down
32 changes: 15 additions & 17 deletions libs/components/src/lib/video-player/vivid-video-svg.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,9 +111,10 @@ export function renderSvgIcons() {
d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm2-6h4c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1h-4V9zm1.5 4.5h2v-3h-2v3z"
></path>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-chapters">
<symbol viewBox="0 0 24 24" id="vjs-icon-chapters">
<path
d="M6 26h4v-4H6v4zm0 8h4v-4H6v4zm0-16h4v-4H6v4zm8 8h28v-4H14v4zm0 8h28v-4H14v4zm0-20v4h28v-4H14z"
d="M1.5 3C1.5 2.17158 2.17158 1.5 3 1.5C3.82842 1.5 4.5 2.17158 4.5 3C4.5 3.82842 3.82842 4.5 3 4.5C2.17158 4.5 1.5 3.82842 1.5 3ZM3 0C1.34314 0 0 1.34314 0 3C0 4.65686 1.34314 6 3 6C4.65686 6 6 4.65686 6 3C6 1.34314 4.65686 0 3 0ZM1.5 12C1.5 11.1716 2.17158 10.5 3 10.5C3.82842 10.5 4.5 11.1716 4.5 12C4.5 12.8284 3.82842 13.5 3 13.5C2.17158 13.5 1.5 12.8284 1.5 12ZM3 9C1.34314 9 0 10.3431 0 12C0 13.6569 1.34314 15 3 15C4.65686 15 6 13.6569 6 12C6 10.3431 4.65686 9 3 9ZM3 19.5C2.17158 19.5 1.5 20.1716 1.5 21C1.5 21.8284 2.17158 22.5 3 22.5C3.82842 22.5 4.5 21.8284 4.5 21C4.5 20.1716 3.82842 19.5 3 19.5ZM0 21C0 19.3431 1.34314 18 3 18C4.65686 18 6 19.3431 6 21C6 22.6569 4.65686 24 3 24C1.34314 24 0 22.6569 0 21ZM9.75 3C9.33579 3 9 3.33579 9 3.75C9 4.16421 9.33579 4.5 9.75 4.5H23.25C23.6642 4.5 24 4.16421 24 3.75C24 3.33579 23.6642 3 23.25 3H9.75ZM9 12.75C9 12.3358 9.33579 12 9.75 12H23.25C23.6642 12 24 12.3358 24 12.75C24 13.1642 23.6642 13.5 23.25 13.5H9.75C9.33579 13.5 9 13.1642 9 12.75ZM9.75 21C9.33579 21 9 21.3358 9 21.75C9 22.1642 9.33579 22.5 9.75 22.5H23.25C23.6642 22.5 24 22.1642 24 21.75C24 21.3358 23.6642 21 23.25 21H9.75Z"
clip-rule="evenodd"
></path>
</symbol>
<symbol viewBox="0 0 40 40" id="vjs-icon-downloading">
Expand Down Expand Up @@ -231,21 +232,18 @@ export function renderSvgIcons() {
d="M14.3859 13.9863H8.16516V15.459H12.3483L9.51721 17.9727L10.2535 19.2104C10.5646 19.1152 11.0343 19.0264 11.4723 19.0264C12.4752 19.0264 13.0656 19.4834 13.0656 20.2832C13.0656 21.1338 12.399 21.6797 11.4088 21.6797C10.3995 21.6797 9.75208 21.0894 9.54895 20.2896L8.00012 20.7529C8.40002 22.2002 9.70129 23.1016 11.4215 23.1016C13.4147 23.1016 14.6715 21.9082 14.6715 20.2642C14.6715 18.6011 13.3512 17.7188 11.6945 17.7886L14.3859 15.4082V13.9863Z"
></path>
</symbol>
<symbol viewBox="0 0 512 512" id="vjs-icon-audio-description">
<g fill-rule="evenodd">
<path
d="M227.29 381.351V162.993c50.38-1.017 89.108-3.028 117.631 17.126 27.374 19.342 48.734 56.965 44.89 105.325-4.067 51.155-41.335 94.139-89.776 98.475-24.085 2.155-71.972 0-71.972 0s-.84-1.352-.773-2.568m48.755-54.804c31.43 1.26 53.208-16.633 56.495-45.386 4.403-38.51-21.188-63.552-58.041-60.796v103.612c-.036 1.466.575 2.22 1.546 2.57"
></path>
<path
d="M383.78 381.328c13.336 3.71 17.387-11.06 23.215-21.408 12.722-22.571 22.294-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.226 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894"
></path>
<path
d="M425.154 381.328c13.336 3.71 17.384-11.061 23.215-21.408 12.721-22.571 22.291-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.511c-.586 3.874 2.226 7.315 3.866 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894"
></path>
<path
d="M466.26 381.328c13.337 3.71 17.385-11.061 23.216-21.408 12.722-22.571 22.292-51.594 22.445-84.774.221-47.594-18.343-82.517-35.6-106.182h-8.51c-.587 3.874 2.225 7.315 3.865 10.276 13.166 23.762 25.367 56.553 25.54 94.194.2 43.176-14.162 79.278-30.955 107.894M4.477 383.005H72.58l18.573-28.484 64.169-.135s.065 19.413.065 28.62h48.756V160.307h-58.816c-5.653 9.537-140.85 222.697-140.85 222.697zm152.667-145.282v71.158l-40.453-.27 40.453-70.888z"
></path>
</g>
<symbol viewBox="0 0 24 24" id="vjs-icon-audio-description">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 5C0 3.89543 0.895431 3 2 3H22C23.1046 3 24 3.89543 24 5V19C24 20.1046 23.1046 21 22 21H2C0.89543 21 0 20.1046 0 19V5ZM2 4.5H22C22.2761 4.5 22.5 4.72386 22.5 5V19C22.5 19.2761 22.2761 19.5 22 19.5H2C1.72386 19.5 1.5 19.2761 1.5 19V5C1.5 4.72386 1.72386 4.5 2 4.5Z"
/>
<path
d="M4 16L6.99013 8H8.81805L11.8138 16H10.2906L9.57969 14.0586H6.23413L5.52891 16H4ZM6.71368 12.7197H9.10014L7.90409 9.44491L6.71368 12.7197Z"
/>
<path
d="M13.2073 8H16.3272C18.5839 8 20 9.52301 20 11.9833C20 14.4156 18.6178 16 16.3103 16H13.2073V8ZM14.6403 9.33891V14.6611H16.1467C17.7489 14.6611 18.5444 13.7015 18.5444 12C18.5444 10.2929 17.7489 9.33891 16.1467 9.33891H14.6403Z"
/>
</symbol>
<symbol viewBox="0 0 48 48" id="vjs-icon-next-item">
<path d="M12 36l17-12-17-12v24zm20-24v24h4V12h-4z"></path>
Expand Down
Loading