Skip to content

feat: respect browser standard autoplay props (#319)#350

Merged
colbyfayock merged 7 commits intocloudinary-community:mainfrom
DevYemi:cldVidPlayer-autoplay-support
Dec 20, 2023
Merged

feat: respect browser standard autoplay props (#319)#350
colbyfayock merged 7 commits intocloudinary-community:mainfrom
DevYemi:cldVidPlayer-autoplay-support

Conversation

@DevYemi
Copy link
Contributor

@DevYemi DevYemi commented Nov 20, 2023

Description

Implemented a single point of value passage for both autoplay and autoplayMode in cldvideoplayer.
In summary if the value type of autoplay props passed to cldvideoplayer is a string value then its value will be assigned to autoplayMode in the playerOptions but if the value type autoplay props is a boolean value type then its value will be assigned to autoplay in the playerOptions.

Please note that both autoplayMode and autoplay falls back to their default when no value is assigned to autoplay props in the cldvideoplayer

Issue Ticket Number

Fixes #319

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Fix or improve the documentation
  • This change requires a documentation update

Checklist

  • I have followed the contributing guidelines of this project as mentioned in CONTRIBUTING.md
  • I have created an issue ticket for this PR
  • I have checked to ensure there aren't other open Pull Requests for the same update/change?
  • I have performed a self-review of my own code
  • I have run tests locally to ensure they all pass
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes needed to the documentation

@vercel
Copy link

vercel bot commented Nov 20, 2023

@DevYemi is attempting to deploy a commit to the Cloudinary DevX Team on Vercel.

A member of the Team first needs to authorize it.

@vercel
Copy link

vercel bot commented Nov 27, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
next-cloudinary ✅ Ready (Inspect) Visit Preview Dec 20, 2023 7:00pm

@colbyfayock
Copy link
Collaborator

hey @DevYemi looking good so far, two comments with questions

additionally, part of the hope was to update the prop name to autoplay (notice no capital "P") which is what the Cloudinary Video Player prop is and what the standard HTML attribute name is

for backwards compatability, we can still recognize autoPlay, at least until I can remove it in a breaking release

so perhaps you could do autoplay || autoPlay somewhere in there based on the props

you can even add a check for autoPlay like:

if ( autoPlay && process.env.NODE_ENV === 'development' ) {
  console.warn('Prop autoPlay will be removed in future versions, please use autoplay (lowercase "p")')
}

@DevYemi
Copy link
Contributor Author

DevYemi commented Nov 30, 2023

hey @DevYemi looking good so far, two comments with questions

additionally, part of the hope was to update the prop name to autoplay (notice no capital "P") which is what the Cloudinary Video Player prop is and what the standard HTML attribute name is

for backwards compatability, we can still recognize autoPlay, at least until I can remove it in a breaking release

so perhaps you could do autoplay || autoPlay somewhere in there based on the props

you can even add a check for autoPlay like:

if ( autoPlay && process.env.NODE_ENV === 'development' ) {
  console.warn('Prop autoPlay will be removed in future versions, please use autoplay (lowercase "p")')
}

Ohh my bad that's true i will make the corrections now, also you are right about backwards compatability and i will also be adding this checker:

if ( autoPlay && process.env.NODE_ENV === 'development' ) {
  console.warn('Prop autoPlay will be removed in future versions, please use autoplay (lowercase "p")')
}

Renamed cldvideoplayer autoPlay props to autoplay but also kept
supporting autoPlay in codebase for backward compactibility.
let playerOptions: CloudinaryVideoPlayerOptions = {
autoplayMode: autoPlay,
autoplayMode: autoplayModeValue,
autoPlay: autoPlayValue,
Copy link
Collaborator

Choose a reason for hiding this comment

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

@colbyfayock
Copy link
Collaborator

i think this is looking good, i thin kit just needs 1 fix to the Player types as commented

I was wrongfully passing autoPlay to cloudinaryVideoPlayerOptions and
this mistake was corrected in this commit.
@colbyfayock
Copy link
Collaborator

hey @DevYemi sorry for the hold up but noticing that autoplay doesnt actually work as expected

im playing around with this branch and it appears its because you're defining never as the default option for autoplayMode which overrides the autoplay value

if I change the autoplayModeValue variable to:

let autoplayModeValue: string | undefined = undefined;

it works as expected

in addition to that, we can optionally set the value, but i would recommend just leaving it undefined unless someone passes in a string as the rest of the logic has it

thoughts?

@DevYemi
Copy link
Contributor Author

DevYemi commented Dec 14, 2023

hey @DevYemi sorry for the hold up but noticing that autoplay doesnt actually work as expected

im playing around with this branch and it appears its because you're defining never as the default option for autoplayMode which overrides the autoplay value

if I change the autoplayModeValue variable to:

let autoplayModeValue: string | undefined = undefined;

it works as expected

in addition to that, we can optionally set the value, but i would recommend just leaving it undefined unless someone passes in a string as the rest of the logic has it

thoughts?

I believe the suggestion you made is very valid, i will make the corrections and push before night fall today.

just a question should i also do the same for autoplay ?, sets the value to undefined if no value is passed. The current implementation falls back to false

current implementation is:

  let autoPlayValue: boolean | 'true' | 'false' = false;

proposed option:

  let autoPlayValue: boolean | 'true' | 'false' | undefined = undefined;

what do you think ?

@colbyfayock
Copy link
Collaborator

doesnt hurt to remove the default as well as it realisticly doesnt do anything as both would be a falsey value that wouldnt trigger it. i dont have a strong opinion on it

Made changes to the fallback passed to autoplayModeValue, now value
falls back to undefined instead of default "never".
@colbyfayock
Copy link
Collaborator

changes look good, thank you @DevYemi

@colbyfayock colbyfayock merged commit 614dd81 into cloudinary-community:main Dec 20, 2023
github-actions bot pushed a commit that referenced this pull request Dec 20, 2023
# [5.14.0](v5.13.0...v5.14.0) (2023-12-20)

### Features

* respect browser standard autoplay props ([#319](#319)) ([#350](#350)) ([614dd81](614dd81))
@github-actions
Copy link

🎉 This PR is included in version 5.14.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

lytro-dev pushed a commit to lytro-dev/next-image-delivery that referenced this pull request Dec 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] CldVideoPlayer autoplay should respect browser standard prop of autoplay without captilization

2 participants