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

[C-4316, C-4317] SSR work to render webplayer and track page for web #8268

Merged
merged 4 commits into from
Apr 30, 2024

Conversation

Kyle-Shanks
Copy link
Contributor

Description

Work to render the app from the root all the way to the track page on the web side

Lots of updates here so I'll probably go through the PR and add some comments

How Has This Been Tested?

Lots of testing, bundle size analysis, and in app checking

@Kyle-Shanks Kyle-Shanks requested review from dylanjeffers, sliptype and a team April 29, 2024 21:01
Copy link

changeset-bot bot commented Apr 29, 2024

⚠️ No Changeset found

Latest commit: 0ab28c3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

socket-security bot commented Apr 29, 2024

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/@amplitude/node@1.9.2 network +4 590 kB kevinpagtakhan
npm/@amplitude/react-native@2.17.2 None 0 187 kB hao.yu
npm/@apollo/client@3.3.7 environment, network Transitive: eval +2 3.3 MB apollo-bot
npm/@babel/cli@7.7.0 Transitive: environment, filesystem, shell, unsafe +30 7.68 MB nicolo-ribaudo
npm/@babel/plugin-proposal-class-static-block@7.21.0 Transitive: environment, filesystem, unsafe +37 7.91 MB nicolo-ribaudo
npm/@babel/plugin-transform-react-jsx@7.21.0 Transitive: environment, filesystem, unsafe +32 7.69 MB nicolo-ribaudo
npm/@babel/plugin-transform-runtime@7.18.2 unsafe Transitive: environment, filesystem +30 7.61 MB nicolo-ribaudo
npm/@babel/preset-env@7.22.15 environment Transitive: filesystem, unsafe +114 9.64 MB nicolo-ribaudo
npm/@babel/preset-typescript@7.22.15 Transitive: environment, filesystem, unsafe +40 8.1 MB nicolo-ribaudo
npm/@babel/register@7.7.0 environment, filesystem Transitive: unsafe +29 7.6 MB nicolo-ribaudo
npm/@changesets/cli@2.27.1 environment, filesystem, shell +27 1.43 MB changesets-release-bot
npm/@cloudflare/kv-asset-handler@0.3.1 None +1 126 kB wrangler-publisher
npm/@coinbase/cbpay-js@1.2.0 None 0 172 kB lachiet
npm/@coinflowlabs/react-native@2.1.5 Transitive: environment, eval, network +7 12.1 MB meeder-coinflow
npm/@coinflowlabs/react@3.1.5 network 0 206 kB meeder-coinflow
npm/@coral-xyz/anchor@0.29.0 environment, filesystem, network +3 2.23 MB acheroncrypto
npm/@elastic/elasticsearch@8.1.0 Transitive: network +1 2.45 MB delvedor
npm/@emotion/babel-preset-css-prop@11.11.0 environment Transitive: filesystem, unsafe +32 7.63 MB emotion-release-bot
npm/@emotion/css@11.11.2 environment +8 527 kB emotion-release-bot
npm/@emotion/eslint-plugin@11.11.0 environment 0 101 kB emotion-release-bot
npm/@emotion/native@11.11.0 environment +1 75.3 kB emotion-release-bot
npm/@emotion/react@11.11.1 environment +9 856 kB emotion-release-bot
npm/@emotion/server@11.11.0 environment +2 77.7 kB emotion-release-bot
npm/@emotion/styled@11.11.0 environment +7 311 kB emotion-release-bot
npm/@esbuild-plugins/node-globals-polyfill@0.2.3 None 0 105 kB xmorse
npm/@escape.tech/mookme@2.4.1 environment, filesystem, shell +4 271 kB steffthestunt
npm/@fingerprintjs/fingerprintjs-pro@3.5.6 eval, network +1 852 kB surgie
npm/@google/model-viewer@3.3.0 network 0 30.9 MB google-wombot
npm/@gorhom/portal@1.0.9 None 0 89.6 kB gorhom
npm/@hcaptcha/react-hcaptcha@0.3.6 None 0 30.8 kB brdlyptrs
npm/nodemon@2.0.19 environment, filesystem, shell Transitive: network +17 835 kB remy
npm/web3@1.7.5 Transitive: network +63 14.5 MB jdevcs

🚮 Removed packages: npm/@cloudflare/workers-types@3.16.0, npm/@tanstack/react-query@4.10.3, npm/@types/react-dom@18.0.6, npm/@types/react@18.0.21, npm/@vitejs/plugin-react@4.0.4, npm/ethers@6.8.1, npm/hashids@2.2.10, npm/postcss@8.4.30, npm/react-dom@18.2.0, npm/react-router-dom@6.4.2, npm/react@18.2.0, npm/regenerator-runtime@0.14.0, npm/typescript@4.8.4

View full report↗︎

Copy link

socket-security bot commented Apr 29, 2024

🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎

To accept the risk, merge this PR and you will not be notified again.

Alert Package NoteSource
Install scripts npm/nodemon@2.0.19
  • Install script: postinstall
  • Source: node bin/postinstall || exit 0
Install scripts npm/@apollo/protobufjs@1.2.7
  • Install script: postinstall
  • Source: node scripts/postinstall
  • orphan: npm/@apollo/protobufjs@1.2.7
Install scripts npm/web3@1.7.5
  • Install script: postinstall
  • Source: echo "WARNING: the web3-shh and web3-bzz api will be deprecated in the next version"
Install scripts npm/web3-bzz@1.7.5
  • Install script: postinstall
  • Source: echo "WARNING: the web3-bzz api will be deprecated in the next version"
Install scripts npm/web3-shh@1.7.5
  • Install script: postinstall
  • Source: echo "WARNING: the web3-shh api will be deprecated in the next version"

View full report↗︎

Next steps

What is an install script?

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead.

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/foo@1.0.0 or ignore all packages with @SocketSecurity ignore-all

  • @SocketSecurity ignore npm/nodemon@2.0.19
  • @SocketSecurity ignore npm/@apollo/protobufjs@1.2.7
  • @SocketSecurity ignore npm/web3@1.7.5
  • @SocketSecurity ignore npm/web3-bzz@1.7.5
  • @SocketSecurity ignore npm/web3-shh@1.7.5

@@ -3,7 +3,7 @@ import type { full } from '@audius/sdk'
import { AudiusQueryContextType, createApi } from '~/audius-query'
import { UserCollectionMetadata } from '~/models/Collection'
import { Kind } from '~/models/Kind'
import { makeActivity } from '~/services/audius-api-client/ResponseAdapter'
import { makeActivity } from '~/services/audius-api-client'
Copy link
Contributor Author

Choose a reason for hiding this comment

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

split out bc it pulls in sdk

Comment on lines +89 to +90
{/* {isMobile && <TopLevelPage />} */}
{/* {isMobile && <HeaderContextConsumer />} */}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Not needed yet, but will be needed later for web mobile track page

const ServerCoverPhoto = ({ className }: CoverPhotoProps) => {
return (
<div className={cn(styles.coverPhoto, className)}>
{/* TODO: Add static image here */}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

We don't render cover photos on the server side, so this is placeholder until whenever that work is done

isMobile,
...other
}: ServerTrackPageProps) => {
// return isMobile ? <MobilePage {...other} /> : <DesktopPage {...other} />
Copy link
Contributor Author

Choose a reason for hiding this comment

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

placeholder for the web mobile track page work

streamConditions={defaults.streamConditions}
isDownloadGated={defaults.isDownloadGated}
downloadConditions={defaults.downloadConditions}
// TODO: fix this
Copy link
Contributor Author

Choose a reason for hiding this comment

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

will look into this

Copy link
Contributor

@sliptype sliptype left a comment

Choose a reason for hiding this comment

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

Awesome work! The amount of duplicated components definitely pains me 😭 but let's stick to the plan and hopefully we can consolidate things later with ClientOnly or once libs is dead

packages/libs/rollup.config.ts Outdated Show resolved Hide resolved
popover?: boolean
}

// NOTE: Can't use user badges or user cache selectors bc it pulls in libs
Copy link
Contributor

Choose a reason for hiding this comment

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

🤯

Copy link
Contributor Author

Choose a reason for hiding this comment

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

😢

packages/web/src/components/nav-banner/NavBanner.tsx Outdated Show resolved Hide resolved
@@ -23,7 +23,7 @@ const HYDRATE_CLIENT = true

export default async function render(
pageContext: PageContextClient & {
pageProps: { track: FullSdk.TrackFull }
pageProps: Pick<SsrPageProps, 'track'>
Copy link
Contributor

Choose a reason for hiding this comment

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

Nice

packages/web/src/ssr/track/onRenderHtml.tsx Show resolved Hide resolved
@Kyle-Shanks Kyle-Shanks force-pushed the kj-SSR-bundle-testing branch 2 times, most recently from befea5f to 7d62bf8 Compare April 30, 2024 15:29
@audius-infra
Copy link
Collaborator

Preview this change https://demo.audius.co/kj-SSR-bundle-testing

@Kyle-Shanks Kyle-Shanks merged commit 909db7c into main Apr 30, 2024
40 of 43 checks passed
@Kyle-Shanks Kyle-Shanks deleted the kj-SSR-bundle-testing branch April 30, 2024 16:30
audius-infra pushed a commit that referenced this pull request May 4, 2024
[9f44712] Reapply "Convert swagger.json to OAS 3.0 before generating SDK types (#8274)" (#8324) (#8344) Marcus Pasell
[2ea74f3] Fix issues with text-link variant (#8343) Dylan Jeffers
[f005b25] [PAY-2860] SDK Services Config - Configure SDK using environment (#8329) Marcus Pasell
[11a0813] Disable add to playlist for prem tracks if not purchased (#8336) Reed
[33b1916] [C-4335] Migrate all user and collection cards (#8338) Dylan Jeffers
[dafaa21] [QA-1241] Fix hidden track add to playlist allowing non hidden items (#8340) JD Francis
[4c95031] [QA-956] Add deleted tile for tracks/albums/playlists (#8333) JD Francis
[b8f5990] Add error message to upload flow (#8334) JD Francis
[22894e8] [QA-957] Fix android overflowing text on access & sale modal (#8313) JD Francis
[86f6447] [PAY-2812] Change spend to earn challenge copy (#8332) Reed
[d4c4264] Close modal on done (#8331) Saliou Diallo
[ded4933] [PAY-2861] CollectionCard fixes (#8330) Dylan Jeffers
[36277cd] Revert "Convert swagger.json to OAS 3.0 before generating SDK types (#8274)" (#8324) Marcus Pasell
[146b2e0] [QA-1212] Fix chromecast (#8323) Raymond Jacobson
[0b33e68] [PAY-2738] Public album with prem track always shows buy button (#8321) Reed
[d897a98] [C-4333] Migrate follow-users to new sign-up flow (#8312) Dylan Jeffers
[3129a3a] [PAY-2799] Show preview button for collections (#8271) Reed
[8c58601] Modify /etc/hosts on CI machines before api test (#8319) Danny
[3586f41] [PAY-2859] Fix bugs in edit app flow (#8320) Raymond Jacobson
[1bf3e97] [PAY-2801] Purchased selectable filter in library albums (#8318) Reed
[6db35c6] [C-4285] Add claim all rewards button functionality (#8292) Saliou Diallo
[a20d85a] [PAY-2728] Implement edit app flow (#8256) Raymond Jacobson
[714a3d1] [C-4288] Migrate to new cards in profile, search, and library (#8300) Dylan Jeffers
[4dceb61] Upgrade dapp-store to 0.8.1 (#8311) Dylan Jeffers
[4d37233] [PAY-2794] Use UserLink for purchases/sales tables (#8306) Reed
[fc2aef3] [PAY-2772] Fix collection description text size (#8309) Reed
[c35bfe1] [PAY-2822] Convert LockedContentDetailsTile to Harmony (#8308) Reed
[f7a921e] [PAY-2781] Poll for track access on album purchase (#8296) Reed
[621c3ee] Convert swagger.json to OAS 3.0 before generating SDK types (#8274) Marcus Pasell
[09789c1] Retrigger logic for android notification permissions post-manifest fix (#8305) JD Francis
[b9c042a] [PAY-2815] Show unlocked icon if dm content is purchased (#8303) Andrew Mendelsohn
[722e933] [PAY-2779] Fix validation for albumTrackPrice (#8302) Andrew Mendelsohn
[963bec4] Fix EditCollection playwright test (#8304) Andrew Mendelsohn
[7e0aa7e] [PAY-2823] Edit Album access control fixes (#8298) Andrew Mendelsohn
[b42b6fd] [QA-971] Fix smart collections (#8299) Raymond Jacobson
[eceb876] [PAY-2791] Show only own albums in artist dashboard (#8297) Reed
[87ce027] [Web] [Harmony] Add accounts managing you modal [C-4295] [C-4292] (#8258) nicoback2
[7a3567c] [C-4238, C-4318] Add ssr small bundle flow for mobile track page (#8293) Kyle Shanks
[c7c3752] [PAY-2800] Fix mobile navigate to album on purchase success (#8295) Reed
[f113a91] [PAY-2802] Auto-favorite tracks in purchased album (#8294) Reed
[d32934f] [C-4284] Fix rewards in mobile web (#8291) Saliou Diallo
[45c4bc6] [PAY-2775] Remove suggested tracks for albums (#8288) Andrew Mendelsohn
[22280c6] [C-4080] Mobile cooldown and claim all (#8263) Isaac Solo
[80cca19] Jail broken test (#8289) Raymond Jacobson
[d7c8e34] [PAY-2766] Analytics events for premium albums (#8262) JD Francis
[c3ee4a8] [PAY-2817] Web collections show reposts, remove artist column (#8272) Reed
[6f8bab6] Fix lint items (#8285) Raymond Jacobson
[e8debc0] [PAY-2703] Redesign mobile collection and track screen tiles (#8255) Andrew Mendelsohn
[a3964a8] Bump android build number for release-client-v1.5.78 (#8286) Raymond Jacobson
[8481f8d] [C-4327] Fix track ordering within playlist/album (#8284) Raymond Jacobson
[5165172] Bump android version for manifest changes (#8283) JD Francis
[4e60f97] [C-4312] Add UserCard (#8276) Dylan Jeffers
[35ed4ec] [ONC-82] Fix android notif permissions (#8279) JD Francis
[82e1c67] [C-4323] Improve Avatar (#8273) Dylan Jeffers
[909db7c] [C-4316, C-4317] SSR work to render webplayer and track page for web (#8268) Kyle Shanks
[7417a40] Generate sdk after ursm code removal (#8275) Raymond Jacobson
[62b5a08] Update Add Funds copy and loading state (#8266) Saliou Diallo
[4503cc7] PROTO-1328: always default to discovery relay (#8247) alecsavvy
[f42c6cd] Fix text-input spacing (#8270) Dylan Jeffers
[75fd847] [C-4270] Fix text-link transition (#8260) Dylan Jeffers
[df0349a] [PAY-2761] Add managed users endpoints (#8238) Randy Schott
[5b4c998] [ONC-84] Add try/catch (#8264) Raymond Jacobson
[2b5f89c] Fix clipped text in TracksTable name column (#8265) Reed
[c3256fa] [C-4275] Add google-inspectiontool to crawler regex (#8261) Sebastian Klingler
[5750045] [C-4033] Prevent useTabs from redirecting on page load (#8259) Sebastian Klingler
[b17ff70] [PAY-2758] Allow gated tracks to be added to playlists (#8227) Reed
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.

None yet

3 participants