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

example: update lazy + blurup example #896

Merged
merged 2 commits into from
Apr 9, 2024
Merged

example: update lazy + blurup example #896

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c0c8dbc
example: update lazy + blurup example
luwes Apr 9, 2024
412de9e
chore: upgrade Node v20 & GH action workflows
luwes Apr 9, 2024
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
4 changes: 2 additions & 2 deletions .github/workflows/cd.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ jobs:
runs-on: ubuntu-latest
environment: production
steps:
- uses: actions/checkout@v3
- uses: actions/checkout@v4
with:
fetch-depth: 0 # Fetch all history for all tags and branches
- name: read node version from the .nvmrc file
run: echo ::set-output name=NODE_VERSION::$(cat .nvmrc)
shell: bash
id: nvmrc
- uses: actions/setup-node@v3
- uses: actions/setup-node@v4
with:
node-version: ${{steps.nvmrc.outputs.NODE_VERSION}}
# this line is required for the setup-node action to be able to run the npm publish below.
Expand Down
14 changes: 7 additions & 7 deletions .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ jobs:
timeout-minutes: 15

steps:
- uses: actions/checkout@v3
- uses: actions/checkout@v4
- name: read node version from the .nvmrc file
run: echo ::set-output name=NODE_VERSION::$(cat .nvmrc)
shell: bash
id: nvmrc
- uses: actions/setup-node@v3
- uses: actions/setup-node@v4
with:
node-version: ${{steps.nvmrc.outputs.NODE_VERSION}}
# this line is required for the setup-node action to be able to run the npm publish below.
Expand All @@ -36,12 +36,12 @@ jobs:
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v3
- uses: actions/checkout@v4
- name: read node version from the .nvmrc file
run: echo ::set-output name=NODE_VERSION::$(cat .nvmrc)
shell: bash
id: nvmrc
- uses: actions/setup-node@v3
- uses: actions/setup-node@v4
with:
node-version: ${{steps.nvmrc.outputs.NODE_VERSION}}
cache: yarn
Expand All @@ -52,10 +52,10 @@ jobs:
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 16
node-version: 20
cache: yarn
# esbuild requires --ignore-scripts to NOT be added here.
- run: yarn install --frozen-lockfile
Expand Down
2 changes: 1 addition & 1 deletion .nvmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
v18.12.1
v20.12.1
2 changes: 1 addition & 1 deletion examples/nextjs-with-typescript/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
},
"dependencies": {
"@mux/assets": ">=0.1.0",
"@mux/blurhash": "^0.1.1",
"@mux/blurup": "^0.2.2",
"@mux/mux-audio": ">=0.2.0",
"@mux/mux-audio-react": ">=0.2.0",
"@mux/mux-player": ">=1.0.0-beta.0",
Expand Down
38 changes: 18 additions & 20 deletions ...ypescript/pages/MuxPlayerLazyBlurhash.tsx → ...-typescript/pages/MuxPlayerLazyBlurUp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@ import Link from "next/link";
import Head from "next/head";
import type { GetStaticProps } from "next";

import muxBlurHash from '@mux/blurhash'
import muxBlurUp from '@mux/blurup'

import MuxPlayerLazy from '@mux/mux-player-react/lazy';

type Props = {
playbackId: string
blurHashBase64: string
sourceWidth: number
sourceHeight: number
blurDataURL: string
aspectRatio: number
}
function MuxPlayerLazyPage({ playbackId, blurHashBase64, sourceWidth, sourceHeight }: Props) {

function MuxPlayerLazyPage({ playbackId, blurDataURL, aspectRatio }: Props) {
return (
<>
<Head>
Expand All @@ -22,31 +22,30 @@ function MuxPlayerLazyPage({ playbackId, blurHashBase64, sourceWidth, sourceHeig
<h3>Scroll down too see the Lazy Mux Player ↓</h3>
<pre style={{ minHeight: '100vh' }}>
<code>
{`import muxBlurHash from '@mux/blurhash'
{`import muxBlurUp from '@mux/blurup'

import MuxPlayerLazy from '@mux/mux-player-react/lazy';

function MuxPlayerLazyPage({ playbackId, blurHashBase64, sourceWidth, sourceHeight }) {
function MuxPlayerLazyPage({ playbackId, blurDataURL, aspectRatio }) {
return (
<MuxPlayerLazy
playbackId={playbackId}
placeholder={blurHashBase64}
style={{ aspectRatio: \`\${sourceWidth}/\${sourceHeight}\` }}
placeholder={blurDataURL}
style={{ aspectRatio }}
streamType="on-demand"
/>
);
}

export const getStaticProps = async () => {
const playbackId = "a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M"
const { blurHashBase64, sourceWidth, sourceHeight } = await muxBlurHash(playbackId)
const { blurDataURL, aspectRatio } = await muxBlurUp(playbackId)

return {
props: {
playbackId,
blurHashBase64,
sourceWidth,
sourceHeight
blurDataURL,
aspectRatio,
}
}
}
Expand All @@ -58,8 +57,8 @@ export default MuxPlayerLazyPage;

<MuxPlayerLazy
playbackId={playbackId}
placeholder={blurHashBase64}
style={{ aspectRatio: `${sourceWidth}/${sourceHeight}` }}
placeholder={blurDataURL}
style={{ aspectRatio }}
streamType="on-demand"
/>

Expand All @@ -71,16 +70,15 @@ export default MuxPlayerLazyPage;

export const getStaticProps: GetStaticProps<Props> = async () => {
const playbackId = "a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M"
const { blurHashBase64, sourceWidth, sourceHeight } = await muxBlurHash(playbackId)
const { blurDataURL, aspectRatio } = await muxBlurUp(playbackId)

return {
props: {
playbackId,
blurHashBase64,
sourceWidth,
sourceHeight
blurDataURL,
aspectRatio,
}
}
}

export default MuxPlayerLazyPage;
export default MuxPlayerLazyPage;
2 changes: 1 addition & 1 deletion examples/nextjs-with-typescript/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ function HomePage() {
<li><Link href="/MuxPlayerLazyDynamic"><a className="player">&lt;MuxPlayer&gt;<br/>(lazy + dynamic)</a></Link></li>
<li><Link href="/MuxPlayerIframe"><a className="player">&lt;MuxPlayer&gt;<br/>(w/o fullscreen)</a></Link></li>
<li><Link href="/MuxPlayerLazyIframe"><a className="player">&lt;MuxPlayer&gt;<br/>(lazy + w/o fullscreen)</a></Link></li>
<li><Link href="/MuxPlayerLazyBlurhash"><a className="player">&lt;MuxPlayer&gt;<br/>(lazy + @mux/blurhash)</a></Link></li>
<li><Link href="/MuxPlayerLazyBlurUp"><a className="player">&lt;MuxPlayer&gt;<br/>(lazy + @mux/blurup)</a></Link></li>
<li><Link href="/MuxUploader"><a className="uploader">&lt;MuxUploader&gt;</a></Link></li>
<li><Link href="/mux-video"><a className="video">&lt;mux-video&gt;<br/>(Web Component)</a></Link></li>
<li><Link href="/mux-audio"><a className="audio">&lt;mux-audio&gt;<br/>(Web Component)</a></Link></li>
Expand Down
Loading
Loading