Skip to content

Update self-hosted video icons#15831

Merged
domlander merged 1 commit into
mainfrom
doml/sh-update-icons
May 13, 2026
Merged

Update self-hosted video icons#15831
domlander merged 1 commit into
mainfrom
doml/sh-update-icons

Conversation

@domlander
Copy link
Copy Markdown
Contributor

@domlander domlander commented May 8, 2026 •
edited
Loading

What does this change?

  • Update icons in the long-form video player
  • Updates icons for loops, to bring consistency across self-hosted video styles
  • Removes div's surrounding button's. These are no longer needed.
  • Refactors audio: instead of importing the SVG in the island and passing it down via props, we pass down the boolean instead and import the SVG where it is used.

Why?

To match designs.

Screenshots

Before After
Loop mobile-before mobile-after
Default desktop-before desktop-after

@domlander domlander self-assigned this May 8, 2026
@domlander domlander added run_chromatic Runs chromatic when label is applied fronts + curation feature Departmental tracking: work on a new feature labels May 8, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label May 8, 2026
@domlander domlander marked this pull request as ready for review May 8, 2026 18:26
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 8, 2026

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

Base automatically changed from doml/sh-hide-controls to main May 11, 2026 12:21
@domlander domlander force-pushed the doml/sh-update-icons branch from 2531f90 to c635882 Compare May 12, 2026 17:22
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 12, 2026 •
edited
Loading

Deploy build 1408 of dotcom:ab-testing to CODE

All deployment options

From guardian/actions-riff-raff.

@domlander domlander added the run_chromatic Runs chromatic when label is applied label May 12, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label May 12, 2026
abeddow91
abeddow91 approved these changes May 13, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@abeddow91 abeddow91 left a comment

Choose a reason for hiding this comment

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

Tested locally and the icons look as per designs. Also happy to see that the new designs have meant we are able to simplify both the icon styling and the API.

I have left some comments regarding tracking names for these icons. This is non-blocking but should be addressed in a separate ticket.

Comment thread dotcom-rendering/src/components/SelfHostedVideoPlayerIcons.tsx
type="button"
onClick={handleClick}
css={[buttonStyles, playPauseButtonStyles]}
data-link-name={`gu-video-loop-${type}-${atomId}`}
Copy link
Copy Markdown
Contributor

@abeddow91 abeddow91 May 13, 2026

Choose a reason for hiding this comment

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

I appreciate this is existing code so this issue may be addressed outside of this PR but it this link name correct given new tracking naming conventions?

Copy link
Copy Markdown
Contributor Author

@domlander domlander May 13, 2026

Choose a reason for hiding this comment

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

What should the data-link-name be with the new tracking naming convention? I'll update in a separate PR

Copy link
Copy Markdown
Contributor

@abeddow91 abeddow91 May 13, 2026

Choose a reason for hiding this comment

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

#15806 (comment) <- From this PR by @SHession it looks like these might go away entirely as it will be replaced by new media event tracking. It might be best in that case to avoid any further work on these tracking link-names until PR15806 is merged.

Comment thread dotcom-rendering/src/components/SelfHostedVideoPlayerIcons.tsx
@domlander domlander force-pushed the doml/sh-update-icons branch from c635882 to 5874658 Compare May 13, 2026 09:22
@domlander domlander added the run_chromatic Runs chromatic when label is applied label May 13, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label May 13, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 13, 2026

Deploy build 26813 of dotcom:rendering-all to CODE

All deployment options

From guardian/actions-riff-raff.

@domlander domlander merged commit 58df268 into main May 13, 2026
35 checks passed
@domlander domlander deleted the doml/sh-update-icons branch May 13, 2026 10:27
@gu-prout
Copy link
Copy Markdown

gu-prout Bot commented May 13, 2026

Seen on PROD (merged by @domlander 12 minutes and 26 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@abeddow91 abeddow91 abeddow91 approved these changes

Assignees

@domlander domlander

Labels

feature Departmental tracking: work on a new feature fronts + curation Seen-on-PROD

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@domlander @abeddow91