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

Dynamic Imports for Video Player #181

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Conversation

colbyfayock
Copy link
Collaborator

@colbyfayock colbyfayock commented Apr 25, 2023

Description

This dynamically loads in the Cloudinary Video Player via the npm package.

It makes the version prop that was previously available to control the downloaded assets unavailable due to it now being loaded as a package dependency.

It also copies over assets from the node module, particularly CSS and Fonts (icons) to make available to load from the page adding the player which is needed in the App Router.

Issue Ticket Number

Fixes #180

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 Apr 25, 2023

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

Name Status Preview Comments Updated (UTC)
next-cloudinary ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 26, 2023 3:21pm

@colbyfayock colbyfayock changed the title Dynamic Imports Dynamic Imports for Video Player Jul 24, 2023
await mkdirp(distPath);

for ( const asset of assets ) {
const assetPath = await resolveAssetPath(asset);
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

i dont love this solution but couldn't figure out a way to resolve the node_modules reliably with being in a yarn workspace

colbyfayock added a commit that referenced this pull request Aug 28, 2023
# Description

With the App Router, we no longer have access to the <Head component.
CldVideoPlayer was utilizing this component in order to load a
stylesheet, preventing the need to include it from the project, but
without <Head, the player breaks.

Given this is no longer an option, this includes the CSS and associated
files on build so that they're able to be imported from within the App
Router project, allowing the stylesheet to be imported for a working
player.

This is currently downloading the assets from unpkg, where the player is
officially hosted, though future iterations may include these files from
the cloudinary-video-player node_module, though thats currently on hold
for performance reasons. See #181

This also deprecates the `version` prop as we're no longer able to
reliably grab assets based on the configured version (or at all for that
matter). In future versions using the node module, the assets will be
synced based on the installed dependency via next-cloudinary without
configuration available.

## Issue Ticket Number

Fixes #248 

<!-- Specify above which issue this fixes by referencing the issue
number (`#<ISSUE_NUMBER>`) or issue URL. -->
<!-- Example: Fixes
https://github.com/colbyfayock/next-cloudinary/issues/<ISSUE_NUMBER> -->

## Type of change

<!-- Please select all options that are applicable. -->

- [ ] 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

<!-- These must all be followed and checked. -->

- [ ] I have followed the contributing guidelines of this project as
mentioned in [CONTRIBUTING.md](/CONTRIBUTING.md)
- [ ] I have created an
[issue](https://github.com/colbyfayock/next-cloudinary/issues) ticket
for this PR
- [ ] I have checked to ensure there aren't other open [Pull
Requests](https://github.com/colbyfayock/next-cloudinary/pulls) 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
github-actions bot pushed a commit that referenced this pull request Aug 28, 2023
# [4.19.0](v4.18.1...v4.19.0) (2023-08-28)

### Features

* CldVideoPlayer support for Next.js 13 App Router ([#265](#265)) ([8674b95](8674b95)), closes [#181](#181) [#248](#248)
cham74 added a commit to cham74/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
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature] Dynamic imports with npm module
1 participant