feat: Creator Channels Group Chat and Audio, Camera and Image upload (#…

…2442)

* Squashed commit of the following:

commit f31e5ff
Author: github-actions <[email protected]>
Date:   Thu Aug 10 11:27:41 2023 +0000

    release v135.0.7

commit db261ef
Author: Alan Toa <[email protected]>
Date:   Thu Aug 10 19:23:41 2023 +0800

    Fix/star drop feedback (#2342)

    * fix: og image be covered

    * fix: start drop tiny feedback

commit 88c4cf2
Author: github-actions <[email protected]>
Date:   Thu Aug 10 09:24:17 2023 +0000

    release v135.0.6

commit 63d33e5
Author: Alan Toa <[email protected]>
Date:   Thu Aug 10 17:19:45 2023 +0800

    fix: share to social etc (#2341)

    * fix: share to social etc

    * clear up code

    * fix lib

    * fix import

commit 7e23ed7
Author: nishan (o^▽^o) <[email protected]>
Date:   Thu Aug 10 11:12:50 2023 +0530

    fix: star drop copy changes (#2340)

commit 02ae39f
Author: github-actions <[email protected]>
Date:   Thu Aug 10 03:42:42 2023 +0000

    release v135.0.5

commit 392947b
Author: Alan Toa <[email protected]>
Date:   Thu Aug 10 11:38:00 2023 +0800

    feat: star drop (#2339)

    * paid drops button price

    * dark mode price

    * add stripe account url

    * create drop flow done

    * paid drops

    * paid drops

    * paid drop ui

    * ui fixes

    * ui fixes

    * ui fixes

    * chore: merge stage to unlock stardrop message

    * feat(wip): unlockable message

    * paid drop domain redirect fix

    * feat: add GatedMessage component with simulation logic

    * fix: add business type

    * fix: select individual as default value

    * save button top right

    * fix: hide annoying log 33m

    * feat: add gated message and star badge

    * feat: export StarDropBadge component

    * feat: detect message types and output accordingly

    * feat(wip): star drop message variations

    * fix: format us numbers better

    * feat(wip): adjust reactions for star drop

    * fix: open edition

    * fix: text issues

    * select drop layout

    * drop ui fixes

    * Squashed commit of the following:

    commit f1441ba
    Author: Hirbod Mirjavadi <[email protected]>
    Date:   Thu Jul 20 15:37:24 2023 +0200

        fix: reduce re-renders

    * feat: update channel by id types

    * add exclusive link

    * cashpayout in settings

    * fix: exclusive link

    * fix: don't add sentry authtoken to app.config, its read automatically

    * feat: add  latest_paid_nft_slug types to channel by id

    * custom price

    * payout link in drop form

    * feat(wip): star drop style and support in  list

    * feat: claim paid nft

    * fix

    * fix

    * wip

    * fix: select countries

    * wip

    * wip

    * feat: redirect to latest drop on unlock

    * fix: dont show all in dev without data

    * fix: pressable by RNGH buggy on web

    * wip

    * wip

    * remove claim modal for paid nft

    * update share screen

    * wip

    * wip

    * wip

    * feat: edition price range

    * fix: country select

    * fixes

    * fix: custom price modal sheet

    * fixes

    * ui fixes

    * nit: native fixes

    * ui fixes

    * wip

    * feat: update twitter card

    * wip: refactor channel components for easier usage

    * default prices

    * default prices

    * feat: drop share

    * fix: button text size

    * feat: add dot indicator for unread channels

    * chore: optimize image assets

    * feat: bundle new showtime star logo

    * fix: add support for showtime image in list

    * feat: update to GatedMessage (payment flow)

    * feat: update message header

    * feat: support for ST image in list for web

    * feat: export refactored components

    * feat: optimize recycling pool types in creator channels

    * add miss star drop modal

    * feat: make all channel messages gated on send

    * update modal

    * revert modal code

    * fix modal and button text

    * feat(wip):  add star drop error modal

    * feat: paid nft info modal logic

    * feat: finalize error modal / info modal

    * fix: optimize modal styling (wrong color / centering)

    * feat: add collect a star drop channel button

    * fix: dark mode colors for star button

    * fix

    * fixes

    * fix button

    * pass currency in create drop

    * fix: reduce unread indicator size

    * fix: show cta only when star drop available

    * fix: over-reactive kv banners on home

    * fix paid button style

    * increase payment modal height

    * paid nft flow improments

    * remove stripeAccount

    * fix

    * fix

    * fix currency symbol

    * decouple payouts drop

    * fix: decouple payout

    * clean code

    * fix share screen

    * fix import order

    * add unlock tooltip and improments

    * fix: add success screen back

    * update copy

    * fix tooltip position

    * add default card payment

    * payment improments

    * fix saved card payments

    * fix

    * cleanup

    * feat: star drops (#2331)

    * paid drops button price

    * dark mode price

    * add stripe account url

    * create drop flow done

    * paid drops

    * paid drops

    * paid drop ui

    * ui fixes

    * ui fixes

    * ui fixes

    * paid drop domain redirect fix

    * fix: add business type

    * fix: select individual as default value

    * save button top right

    * fix: open edition

    * fix: text issues

    * select drop layout

    * drop ui fixes

    * add exclusive link

    * cashpayout in settings

    * fix: exclusive link

    * custom price

    * payout link in drop form

    * fix: select countries

    * feat: edition price range

    * fix: custom price modal sheet

    * nit: native fixes

    * default prices

    * default prices

    * pass currency in create drop

    * decouple payouts drop

    * fix

    * cleanup

    ---------

    Co-authored-by: alantoa <[email protected]>

    * copy rename

    * fix share modal

    * fix

    * fix drop preview

    * merge drop form

    * merge drop form

    * feat: star drops (#2332)

    * paid drops button price

    * dark mode price

    * add stripe account url

    * create drop flow done

    * paid drops

    * paid drops

    * paid drop ui

    * ui fixes

    * ui fixes

    * ui fixes

    * chore: merge stage to unlock stardrop message

    * feat(wip): unlockable message

    * paid drop domain redirect fix

    * feat: add GatedMessage component with simulation logic

    * fix: add business type

    * fix: select individual as default value

    * save button top right

    * fix: hide annoying log 33m

    * feat: add gated message and star badge

    * feat: export StarDropBadge component

    * feat: detect message types and output accordingly

    * feat(wip): star drop message variations

    * fix: format us numbers better

    * feat(wip): adjust reactions for star drop

    * fix: open edition

    * fix: text issues

    * select drop layout

    * drop ui fixes

    * Squashed commit of the following:

    commit f1441ba
    Author: Hirbod Mirjavadi <[email protected]>
    Date:   Thu Jul 20 15:37:24 2023 +0200

        fix: reduce re-renders

    * feat: update channel by id types

    * add exclusive link

    * cashpayout in settings

    * fix: exclusive link

    * fix: don't add sentry authtoken to app.config, its read automatically

    * feat: add  latest_paid_nft_slug types to channel by id

    * custom price

    * payout link in drop form

    * feat(wip): star drop style and support in  list

    * feat: claim paid nft

    * fix

    * fix

    * wip

    * fix: select countries

    * wip

    * wip

    * feat: redirect to latest drop on unlock

    * fix: dont show all in dev without data

    * fix: pressable by RNGH buggy on web

    * wip

    * wip

    * remove claim modal for paid nft

    * update share screen

    * wip

    * wip

    * wip

    * feat: edition price range

    * fix: country select

    * fixes

    * fix: custom price modal sheet

    * fixes

    * ui fixes

    * nit: native fixes

    * ui fixes

    * wip

    * feat: update twitter card

    * wip: refactor channel components for easier usage

    * default prices

    * default prices

    * feat: drop share

    * fix: button text size

    * feat: add dot indicator for unread channels

    * chore: optimize image assets

    * feat: bundle new showtime star logo

    * fix: add support for showtime image in list

    * feat: update to GatedMessage (payment flow)

    * feat: update message header

    * feat: support for ST image in list for web

    * feat: export refactored components

    * feat: optimize recycling pool types in creator channels

    * add miss star drop modal

    * feat: make all channel messages gated on send

    * update modal

    * revert modal code

    * fix modal and button text

    * feat(wip):  add star drop error modal

    * feat: paid nft info modal logic

    * feat: finalize error modal / info modal

    * fix: optimize modal styling (wrong color / centering)

    * feat: add collect a star drop channel button

    * fix: dark mode colors for star button

    * fix

    * fixes

    * fix button

    * pass currency in create drop

    * fix: reduce unread indicator size

    * fix: show cta only when star drop available

    * fix: over-reactive kv banners on home

    * fix paid button style

    * increase payment modal height

    * paid nft flow improments

    * remove stripeAccount

    * fix

    * fix

    * fix currency symbol

    * decouple payouts drop

    * fix: decouple payout

    * clean code

    * fix share screen

    * fix import order

    * add unlock tooltip and improments

    * fix: add success screen back

    * update copy

    * fix tooltip position

    * add default card payment

    * payment improments

    * fix saved card payments

    * fix

    * cleanup

    * copy rename

    * fix share modal

    * fix

    * fix drop preview

    * merge drop form

    ---------

    Co-authored-by: Hirbod Mirjavadi <[email protected]>
    Co-authored-by: alantoa <[email protected]>

    * increase drop form height

    * clear up code (#2333)

    * Feat/update share image (#2334)

    * clear up code

    * update X/IG share image

    * update drop detail on desktop (#2335)

    * fix payout spacing

    * rename drop/free to drop/star

    * fix: redirect uri and copy changes

    * fix drop star go back

    * fix: chain name

    * mutate edition on claim success

    * fix claim button status

    * catch claim error

    * fix rediect to unlock channel

    * upgrade next.js version (#2338)

    * chore: upgrade next.js version

    * update next libs

    ---------

    Co-authored-by: Nishan <[email protected]>
    Co-authored-by: Hirbod Mirjavadi <[email protected]>

* feat(wip): Add channel message audio player

* feat: add audio service and event listeners

* feat: audio progress storage with valtio

* feat: music duration to date time

* feat(wip): AudioPlayer component for CC

* feat: register audio service on boot

* chore: add react-native-track-player

* feat: add use-track-progress hook

* chore: dont warn unused vars with underscore

* fix: linting issues

* chore: refactor track player

* feat: add track player web implementation with shaka

* feat: add universal audio player solution

* feat: destroy audio player when leaving / changing channel

* feat: add platform based player export

* feat: register playback service in _app.tsx

* fix: add transpile packges

* fix: merge conflicts

* fix: dont through SetupNotCalledError, just return

* feat: add audio player demo

* fix: scrubbing logic on audio track

* fix(web): correctly pause running tracks

* fix(web): unmount of channels needs to stop music

* fix: reduce remote player capabilities

* feat: add track player metadata for trackcenter

* feat: init audio service after app mount

* feat: add minimal styling to audio player

* feat: style track player further

* feat: trigger setup player when messages loaded

* fix: imports

* fix: update track states

* fix: imports

* feat: finalize track player - YIHA

* feat: track player design (white mode)

* feat: dark mode for Audio Player

* fix: finalize AudioPlayer

* feat: created creator badge component

* feat: add URL detection for non creators in channels

* feat: add admin check to message input component

* feat: add support for username in multichat channels

* feat: replace star drop badge against creator badge

* feat: message input permission handling

* chore: bump reanimated and rngh

* chore: upgrade packages

* feat: update channelById types (added permissions)

* chore: commit yarn.lock

* feat: allow admins to delete every message

* fix: remove nativeID

* fix: remove unused stardropbadge

* fix: link detection

* fix: creator can delete all messages by any member

* fix: adjust new creator channels header

* chore: bump reanimated

* chore: add support for expo-document-picker (mp3 uploads)

* feat: add attachment types to api response

* fix: channel header

* fix: creator badge

* fix: share button in channel header

* fix: remove AudioPlayer from Message List

* fix: reaction position ios 17

* fix: remove itemType for channel message

* fix: date format wrong in channels

* feat: date format update in channels (new design)

* feat: prevent excessive audio player setup

* feat: connect attachment to audio player

* feat: add blur text with fake placeholder

* feat: utility to generate randomized lorem text

* chore: upgrade ChannelMessage types

* fix: change getItemType signature to fix reaction bug

* fix: channel message header arrow

* fix: keyboard package

* chore: package update

* feat: add blurred placeholder text to channels

* fix: issues with different attchement types

* feat: add creator channels toolbar

* fix: unblur reactions

* fix: issues with wav files and audio reset after reaching 0

* fix: message permissions for admins

* fix: support stage URLs

* fix: broken attachment types

* feat: support attachments in channel list

* feat: support attachment preview in list

* fix: gap for icons

* fix: list crashing with empty latest_message

* fix: channel list web preview

* fix: optimistic update

* Fix the lightbox on the message-item

* fix the size of the lightbox on the web

* feat(wip): support uploads

* fix lightbox

* feat: add react-native-compressor for upload

* fix: preview message

* fix: preview message for web and native

* fix lightbox

* clear up code

* add icons

* feat: support background upload and real endpoints

* feat(wip): add camera and photo upload support

* feat: add image compression before upload

* fix: packages not transpiling on web

* fix: missing preview text bug with attachments

* feat: finalize native upload and items

* fix: support channel uploads on web

* fix(creator-channels): support optimistic images on web

* fix: add width and height to image

* fix: move audio compress to native upload func

* fix: pause state on android

* fix lightbox size

* fix: severa channel item issues recycling

* fix: input issues

* fix: upload compressing pipeline was incorrect

* fix: gated urls

* feat: make creator channels 90% faster

* feat: lean text for channels

* fix: channel issues

* fix: plenty of issues with channels

* fix: calculate date and currency efficient

* fix: calculate dates faster

* fix: wrong channel permission management

* fix: imports

* Fix the stretched image on web

* fix: permission dialogs

* fix: base64 image previews on web

* fix lightbox

* Make background of the lightbox always dark

* change close button color

* fix: breaking memoization

* fix: code organization

* fix: final channel bugfixes

---------

Co-authored-by: alantoa <[email protected]>

.eslintrc.js

@@ -34,7 +34,14 @@ module.exports = {
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",
-    "unused-imports/no-unused-vars": "warn",
+    "unused-imports/no-unused-vars": [
+      "warn",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_",
+      },
+    ],
     "no-empty": "warn",
     "react/display-name": "warn",
     "no-async-promise-executor": "warn",

apps/expo/app.config.ts

@@ -67,6 +67,7 @@ const expoConfig: ExpoConfig = {
   ios: {
     bundleIdentifier: config.scheme,
     buildNumber: majorVersion.toString(),
+    usesIcloudStorage: true,
     supportsTablet: false, // TODO:
     jsEngine: "hermes",
     backgroundColor: "#FFFFFF",
@@ -150,17 +151,28 @@ const expoConfig: ExpoConfig = {
     [
       "expo-media-library",
       {
-        photosPermission: "Allow $(PRODUCT_NAME) to access your photos.",
-        savePhotosPermission: "Allow $(PRODUCT_NAME) to save photos.",
+        savePhotosPermission:
+          "Allow $(PRODUCT_NAME) to save photos to your media library.",
         isAccessMediaLocationEnabled: true,
       },
     ],
+    [
+      "expo-document-picker",
+      {
+        iCloudContainerEnvironment:
+          STAGE === "production" ? "Production" : "Development",
+      },
+    ],
     "expo-localization",
     [
       "expo-image-picker",
       {
         photosPermission:
-          "$(PRODUCT_NAME) needs to access your camera roll so that you can upload photos on Showtime.",
+          "$(PRODUCT_NAME) accesses your photos to allow you to share them with your audience and to personalize your profile.",
+        cameraPermission:
+          "$(PRODUCT_NAME) requires access to your camera to capture photos and videos, allowing you to share moments with your audience and enhance your creator channel.",
+        microphonePermission:
+          "$(PRODUCT_NAME) requires access to your microphone to record voice messages. This also ensures that when you record videos, they aren't muted, providing a richer interactive experience for your audience.",
       },
     ],
     [
@@ -233,6 +245,7 @@ const expoConfig: ExpoConfig = {
         },
       },
     ],
+    ["react-native-compressor"],
   ],
   hooks: {
     postPublish: [

apps/expo/index.js

@@ -7,10 +7,17 @@ import "expo-dev-launcher";
 import "expo/build/Expo.fx";
 import "react-native-gesture-handler";
 
+import { PlaybackService } from "app/components/audio-player/service";
+
+import TrackPlayer from "design-system/track-player";
+
 import App from "./App";
 
 // if (__DEV__) {
 //   activateKeepAwake();
 // }
 
 registerRootComponent(App);
+
+// register audio service
+TrackPlayer.registerPlaybackService(() => PlaybackService);

apps/expo/package.json

@@ -52,6 +52,7 @@
     "@hookform/resolvers": "^3.1.1",
     "@magic-ext/react-native-expo-oauth": "^8.1.0",
     "@magic-sdk/react-native-expo": "^14.1.0",
+    "@miblanchard/react-native-slider": "^2.3.1",
     "@react-native-async-storage/async-storage": "~1.19.1",
     "@react-native-community/blur": "^4.3.2",
     "@react-native-community/datetimepicker": "7.4.1",
@@ -98,6 +99,7 @@
     "expo-constants": "~14.4.2",
     "expo-dev-client": "~2.4.7",
     "expo-device": "~5.4.0",
+    "expo-document-picker": "~11.5.4",
     "expo-font": "~11.4.0",
     "expo-gl": "~13.0.1",
     "expo-haptics": "~12.4.0",
@@ -137,11 +139,12 @@
     "react-native-bignumber": "^0.2.1",
     "react-native-blob-jsi-helper": "^0.3.1",
     "react-native-blurhash": "^1.1.10",
-    "react-native-gesture-handler": "2.12.0",
+    "react-native-compressor": "^1.8.4",
+    "react-native-gesture-handler": "2.13.1",
     "react-native-get-random-values": "~1.9.0",
     "react-native-image-colors": "^2.3.0",
     "react-native-ios-context-menu": "^1.15.3",
-    "react-native-keyboard-controller": "^1.5.8",
+    "react-native-keyboard-controller": "^1.7.0",
     "react-native-level-fs": "^3.0.1",
     "react-native-localhost": "^1.0.0",
     "react-native-mmkv": "2.10.1",
@@ -151,13 +154,14 @@
     "react-native-popper": "^0.3.2",
     "react-native-quick-base64": "^2.0.7",
     "react-native-quick-crypto": "^0.6.1",
-    "react-native-reanimated": "3.4.1",
+    "react-native-reanimated": "3.5.4",
     "react-native-reanimated-carousel": "^3.5.1",
     "react-native-safe-area-context": "4.7.1",
     "react-native-screens": "^3.23.0",
     "react-native-share": "^9.2.3",
     "react-native-svg": "13.10.0",
     "react-native-tab-view": "^3.5.2",
+    "react-native-track-player": "v4.0.0-rc08",
     "react-native-view-shot": "3.7.0",
     "react-native-volume-manager": "^1.10.0",
     "react-native-web": "~0.19.7",

apps/next/next.config.js

@@ -75,6 +75,10 @@ const nextConfig = {
     "universal-tooltip",
     "react-native-image-colors",
     "react-native-reanimated-carousel",
+    "@miblanchard/react-native-slider",
+    "react-native-track-player",
+    "expo-document-picker",
+    "react-native-compressor",
   ],
   webpack: (config, options) => {
     if (!options.isServer) {
@@ -139,6 +143,7 @@ const nextConfig = {
       "storage.googleapis.com",
       "testingservice-dot-showtimenft.wl.r.appspot.com",
       "media.showtime.xyz",
+      "media-stage.showtime.xyz",
     ],
   },
   async headers() {

apps/next/package.json

@@ -70,6 +70,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "screenfull": "^6.0.2",
     "setimmediate": "^1.0.5",
+    "shaka-player": "^4.3.8",
     "swiper": "^10.0.4",
     "swr": "^2.2.0",
     "twitter-lite": "^1.1.0",

apps/next/src/pages/_app.tsx

@@ -13,6 +13,7 @@ import "react-datepicker/dist/react-datepicker.css";
 
 import { View } from "@showtime-xyz/universal.view";
 
+import { PlaybackService } from "app/components/audio-player/service";
 import Footer from "app/components/footer";
 import Header from "app/components/header";
 import { withColorScheme } from "app/components/memo-with-theme";
@@ -58,6 +59,7 @@ import { VerifyPhoneNumberScreen } from "app/screens/settings-verify-phone-numbe
 import { prevRouteRef } from "app/utilities";
 
 import { Toaster } from "design-system/toast";
+import TrackPlayer from "design-system/track-player";
 
 import "../styles/styles.css";
 
@@ -66,6 +68,8 @@ Sentry.init({
   environment: process.env.STAGE,
 });
 
+TrackPlayer.registerPlaybackService(() => PlaybackService);
+
 function App({ Component, pageProps, router }: AppProps) {
   const meta = pageProps.meta;
 

package.json

@@ -67,7 +67,7 @@
     "react-dom": "18.2.0",
     "@jest/create-cache-key-function": "29.2.1",
     "jest-runtime": "29.5.0",
-    "react-native-reanimated": "3.4.1",
+    "react-native-reanimated": "3.5.4",
     "@types/react": "~18.2.14",
     "@ethersproject/bignumber": "5.7.0",
     "@ethersproject/signing-key": "5.7.0",