[C-4008] Fix video collectible card

[dylanjeffers]

Description

Fixes issue where video collectibles were not rendering on native collectibles list.

• Leverages cool "react-native-create-thumbnail" package to process mp4 urls and generate a thumbnail with native performance.
• Also fixes issue with video collectibles play button.

[socket-security]

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/@audius/fetch-nft@0.1.8	network	0	532 kB	audius-project
npm/@aws-sdk/client-s3@3.504.0	Transitive: environment, filesystem, shell	+42	5.51 MB	aws-sdk-bot
npm/@aws-sdk/s3-request-presigner@3.504.0	None	+5	218 kB	aws-sdk-bot
npm/@babel/cli@7.7.0	Transitive: environment, filesystem, shell, unsafe	+37	8.06 MB	nicolo-ribaudo
npm/@babel/plugin-proposal-class-static-block@7.21.0	Transitive: environment, filesystem, unsafe	+44	8.28 MB	nicolo-ribaudo
npm/@babel/plugin-transform-react-jsx@7.21.0	Transitive: environment, filesystem, unsafe	+39	8.06 MB	nicolo-ribaudo
npm/@babel/plugin-transform-runtime@7.18.2	unsafe Transitive: environment, filesystem	+37	7.99 MB	nicolo-ribaudo
npm/@babel/preset-env@7.22.15	environment Transitive: filesystem, unsafe	+121	10 MB	nicolo-ribaudo
npm/@babel/preset-typescript@7.22.15	Transitive: environment, filesystem, unsafe	+47	8.47 MB	nicolo-ribaudo
npm/@babel/register@7.7.0	environment, filesystem Transitive: unsafe	+36	7.97 MB	nicolo-ribaudo
npm/@cloudflare/kv-asset-handler@0.3.0	None	+1	172 kB	caass
npm/@coinbase/cbpay-js@1.2.0	None	0	172 kB	lachiet
npm/@coinflowlabs/react-native@2.1.5	Transitive: environment, eval, network	+9	13.4 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-plugin@11.11.0	environment	+9	2.84 MB	emotion-release-bot
npm/@emotion/babel-preset-css-prop@11.11.0	environment Transitive: filesystem, unsafe	+39	8.01 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/@juggle/resize-observer@3.3.1	None	0	73.7 kB	trem
npm/@jup-ag/api@6.0.6	network	0	142 kB	zhengyutay
npm/@metamask/eth-sig-util@7.0.0	None	+7	1.75 MB	metamaskbot
npm/@metaplex-foundation/mpl-token-metadata@2.5.2	None	+3	834 kB	samuelvanderwaal
npm/eslint-config-prettier@8.5.0	None	0	18.2 kB	lydell
npm/typescript@5.0.4	None	0	39.2 MB	typescript-bot

🚮 Removed packages: npm/@audius/sdk@3.0.8-beta.10, npm/@babel/runtime@7.24.1, npm/@coral-xyz/anchor@0.28.0, npm/@coral-xyz/borsh@0.28.0, npm/@noble/curves@1.4.0, npm/@noble/hashes@1.4.0, npm/@npmcli/fs@3.1.0, npm/@pkgjs/parseargs@0.11.0, npm/@solana/buffer-layout-utils@0.2.0, npm/@solana/buffer-layout@4.0.1, npm/@solana/spl-token@0.3.8, npm/@solana/web3.js@1.78.4, npm/@types/bn.js@5.1.0, npm/@types/chai@4.3.0, npm/@types/connect@3.4.38, npm/@types/json5@0.0.29, npm/@types/mocha@9.0.0, npm/@types/node@20.11.30, npm/@types/ws@7.4.7, npm/@ungap/promise-all-settled@1.1.2, npm/abbrev@2.0.0, npm/agent-base@7.1.0, npm/agentkeepalive@4.5.0, npm/aggregate-error@3.1.0, npm/ansi-colors@4.1.1, npm/ansi-regex@5.0.1, npm/arrify@1.0.1, npm/assertion-error@1.1.0, npm/balanced-match@1.0.2, npm/base-x@3.0.9, npm/base64-js@1.5.1, npm/bigint-buffer@1.1.5, npm/bignumber.js@9.1.2, npm/binary-extensions@2.3.0, npm/bindings@1.5.0, npm/bn.js@5.2.1, npm/brace-expansion@1.1.11, npm/braces@3.0.2, npm/browser-stdout@1.3.1, npm/buffer-from@1.1.2, npm/buffer-layout@1.2.2, npm/buffer@6.0.3, npm/bufferutil@4.0.8, npm/cacache@18.0.1, npm/chai@4.3.4, npm/check-error@1.0.3, npm/chokidar@3.5.2, npm/chownr@2.0.0, npm/clean-stack@2.2.0, npm/cliui@7.0.4, npm/color-convert@2.0.1, npm/color-name@1.1.4, npm/concat-map@0.0.1, npm/cross-fetch@3.1.8, npm/crypto-hash@1.3.0, npm/debug@4.3.1, npm/decamelize@4.0.0, npm/deep-eql@3.0.1, npm/delay@5.0.0, npm/diff@5.0.0, npm/dot-case@3.0.4, npm/eastasianwidth@0.2.0, npm/emoji-regex@8.0.0, npm/encoding@0.1.13, npm/env-paths@2.2.1, npm/err-code@2.0.3, npm/es6-promise@4.2.8, npm/es6-promisify@5.0.0, npm/escalade@3.1.2, npm/escape-string-regexp@4.0.0, npm/eventemitter3@4.0.7, npm/exponential-backoff@3.1.1, npm/eyes@0.1.8, npm/fast-stable-stringify@1.0.0, npm/file-uri-to-path@1.0.0, npm/fill-range@7.0.1, npm/flat@5.0.2, npm/foreground-child@3.1.1, npm/fs-minipass@3.0.3, npm/fs.realpath@1.0.0, npm/get-caller-file@2.0.5, npm/get-func-name@2.0.2, npm/glob-parent@5.1.2, npm/graceful-fs@4.2.11, npm/growl@1.10.5, npm/has-flag@4.0.0, npm/he@1.2.0, npm/http-cache-semantics@4.1.1, npm/http-proxy-agent@7.0.0, npm/https-proxy-agent@7.0.2, npm/humanize-ms@1.2.1, npm/iconv-lite@0.6.3, npm/ieee754@1.2.1, npm/imurmurhash@0.1.4, npm/indent-string@4.0.0, npm/inflight@1.0.6, npm/inherits@2.0.4, npm/ip@2.0.0, npm/is-binary-path@2.1.0, npm/is-extglob@2.1.1, npm/is-fullwidth-code-point@3.0.0, npm/is-glob@4.0.3, npm/is-lambda@1.0.1, npm/is-number@7.0.0, npm/is-plain-obj@2.1.0, npm/is-unicode-supported@0.1.0, npm/isexe@2.0.0, npm/isomorphic-ws@4.0.1, npm/jackspeak@2.3.6, npm/jayson@4.1.0, npm/js-sha256@0.9.0, npm/json-stringify-safe@5.0.1, npm/jsonparse@1.3.1, npm/jsonstream@1.3.5, npm/log-symbols@4.1.0, npm/lower-case@2.0.2, npm/make-error@1.3.6, npm/make-fetch-happen@13.0.0, npm/minimatch@3.0.4, npm/minimist@1.2.8, npm/minipass-collect@2.0.1, npm/minipass-fetch@3.0.4, npm/minipass-flush@1.0.5, npm/minipass-pipeline@1.2.4, npm/minipass-sized@1.0.3, npm/minipass@7.0.4, npm/minizlib@2.1.2, npm/mkdirp@1.0.4, npm/mocha@9.0.3, npm/nanoid@3.1.23, npm/negotiator@0.6.3, npm/no-case@3.0.4, npm/node-gyp-build@4.8.0, npm/node-gyp@10.0.1, npm/nodemon@2.0.19, npm/nopt@7.2.0, npm/normalize-path@3.0.0, npm/once@1.4.0, npm/p-limit@3.1.0, npm/p-map@4.0.0, npm/pako@2.1.0, npm/path-exists@4.0.0, npm/path-is-absolute@1.0.1, npm/path-scurry@1.10.1, npm/pathval@1.1.1, npm/picomatch@2.3.1, npm/prettier@2.6.2, npm/proc-log@3.0.0, npm/prom-client@14.0.1, npm/promise-retry@2.0.1, npm/randombytes@2.1.0, npm/readdirp@3.6.0, npm/require-directory@2.1.1, npm/retry@0.12.0, npm/rpc-websockets@7.9.0, npm/safe-buffer@5.2.1, npm/safer-buffer@2.1.2, npm/semver@7.6.0, npm/serialize-javascript@6.0.0, npm/signal-exit@4.1.0, npm/snake-case@3.0.4, npm/socks-proxy-agent@8.0.2, npm/source-map-support@0.5.21, npm/ssri@10.0.5, npm/string-width@4.2.3, npm/strip-ansi@6.0.1, npm/strip-json-comments@3.1.1, npm/tar@6.2.1, npm/text-encoding-utf-8@1.0.2, npm/through@2.3.8, npm/to-regex-range@5.0.1, npm/toml@3.0.0, npm/ts-node@7.0.1, npm/tsconfig-paths@3.14.2, npm/type-detect@4.0.8, npm/typescript@4.3.5, npm/unique-filename@3.0.0, npm/unique-slug@4.0.0, npm/utf-8-validate@5.0.10, npm/which@2.0.2, npm/wrap-ansi@7.0.0, npm/wrappy@1.0.2, npm/ws@7.5.9, npm/y18n@5.0.8, npm/yargs-parser@20.2.4, npm/yargs@16.2.0, npm/yn@2.0.0, npm/yocto-queue@0.1.0

View full report↗︎

[socket-security]

🚨 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	Note	Source
Install scripts	npm/@nestjs/core@8.2.6	Install script: postinstall Source: opencollective || exit 0	orphan: npm/@nestjs/core@8.2.6
Install scripts	npm/@apollo/protobufjs@1.2.7	Install script: postinstall Source: node scripts/postinstall	orphan: npm/@apollo/protobufjs@1.2.7

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/@nestjs/core@8.2.6
• @SocketSecurity ignore npm/@apollo/protobufjs@1.2.7

[audius-infra]

It looks like there may be some changes to native mobile code, which requires triggering a full app release. Please follow the instructions here: https://www.notion.so/audiusproject/When-to-bump-app-version-2644a8f772364a4d91f44abcba44ce0b?pvs=4. cc @nicoback2 @sliptype

[sliptype]

Very nice! I was wondering if we could remove any of this logic here but I think probably not: https://github.com/AudiusProject/audius-protocol/blob/main/packages/common/src/services/opensea-client/ethCollectibleHelpers.ts#L237

[dylanjeffers]

Very nice! I was wondering if we could remove any of this logic here but I think probably not: https://github.com/AudiusProject/audius-protocol/blob/main/packages/common/src/services/opensea-client/ethCollectibleHelpers.ts#L237

oh interesting... maybe i update my code to check for frameUrl in object first, and if not there we do the thumbnail stuff?

[dylanjeffers]

@sliptype just followed up on this, and basically there are cases wher the ethcollectibleHelpers do not have a "frameUrl". In web we render a paused video element, and on mobile im using the thumbnail approach to avoid having to load the entire video! going to roll forward with this