diff --git a/src/views/room/widgets/camera/CameraWidgetView.scss b/src/views/room/widgets/camera/CameraWidgetView.scss index b100900d..22217552 100644 --- a/src/views/room/widgets/camera/CameraWidgetView.scss +++ b/src/views/room/widgets/camera/CameraWidgetView.scss @@ -167,7 +167,7 @@ } .nitro-camera-checkout { - width: 336px; + width: 388px; .picture-preview { width: 320px; diff --git a/src/views/room/widgets/camera/CameraWidgetView.tsx b/src/views/room/widgets/camera/CameraWidgetView.tsx index 1a15b828..0dcfe8aa 100644 --- a/src/views/room/widgets/camera/CameraWidgetView.tsx +++ b/src/views/room/widgets/camera/CameraWidgetView.tsx @@ -1,4 +1,4 @@ -import { InitCameraMessageEvent, IRoomCameraWidgetEffect, IRoomCameraWidgetSelectedEffect, RequestCameraConfigurationComposer, RoomCameraWidgetManagerEvent } from '@nitrots/nitro-renderer'; +import { InitCameraMessageEvent, IRoomCameraWidgetEffect, RequestCameraConfigurationComposer, RoomCameraWidgetManagerEvent } from '@nitrots/nitro-renderer'; import { FC, useCallback, useEffect, useState } from 'react'; import { GetRoomCameraWidgetManager } from '../../../../api'; import { RoomWidgetCameraEvent } from '../../../../events/room-widgets/camera/RoomWidgetCameraEvent'; @@ -22,10 +22,8 @@ export const CameraWidgetView: FC<{}> = props => const [ availableEffects, setAvailableEffects ] = useState([]); const [ cameraRoll, setCameraRoll ] = useState([]); const [ selectedPictureIndex, setSelectedPictureIndex ] = useState(-1); - const [ selectedEffects, setSelectedEffects ] = useState([]); - const [ isZoomed, setIsZoomed ] = useState(false); - const [ myLevel, setMyLevel ] = useState(1); - const [ savedPictureUrl, setSavedPictureUrl ] = useState(null); + const [ myLevel, setMyLevel ] = useState(10); + const [ base64Url, setSavedPictureUrl ] = useState(null); const [ price, setPrice ] = useState<{ credits: number, duckets: number, publishDucketPrice: number }>(null); const onNitroEvent = useCallback((event: RoomWidgetCameraEvent) => @@ -113,10 +111,10 @@ export const CameraWidgetView: FC<{}> = props => }, []); return ( - + { (mode === MODE_CAPTURE) && processAction('close') } onEdit={ () => processAction('edit') } onDelete={ () => processAction('delete') } /> } { (mode === MODE_EDITOR) && processAction('close') } onCancel={ () => processAction('editor_cancel') } onCheckout={ checkoutPictureUrl } availableEffects={ availableEffects } /> } - { (mode === MODE_CHECKOUT) && processAction('close') } onCancelClick={ () => processAction('editor_cancel') } price={ price }> } + { (mode === MODE_CHECKOUT) && processAction('close') } onCancelClick={ () => processAction('editor_cancel') } price={ price }> } ); } diff --git a/src/views/room/widgets/camera/context/CameraWidgetContext.tsx b/src/views/room/widgets/camera/context/CameraWidgetContext.tsx index 3fd936aa..16253f22 100644 --- a/src/views/room/widgets/camera/context/CameraWidgetContext.tsx +++ b/src/views/room/widgets/camera/context/CameraWidgetContext.tsx @@ -5,11 +5,7 @@ const CameraWidgetContext = createContext({ cameraRoll: null, setCameraRoll: null, selectedPictureIndex: null, - setSelectedPictureIndex: null, - selectedEffects: null, - setSelectedEffects: null, - isZoomed: null, - setIsZoomed: null + setSelectedPictureIndex: null }); export const CameraWidgetContextProvider: FC = props => diff --git a/src/views/room/widgets/camera/context/CameraWidgetContext.types.ts b/src/views/room/widgets/camera/context/CameraWidgetContext.types.ts index b162cbb7..00dba3f0 100644 --- a/src/views/room/widgets/camera/context/CameraWidgetContext.types.ts +++ b/src/views/room/widgets/camera/context/CameraWidgetContext.types.ts @@ -1,4 +1,3 @@ -import { IRoomCameraWidgetSelectedEffect } from '@nitrots/nitro-renderer'; import { Dispatch, ProviderProps, SetStateAction } from 'react'; import { CameraPicture } from '../common/CameraPicture'; @@ -8,10 +7,6 @@ export interface ICameraWidgetContext setCameraRoll: Dispatch>; selectedPictureIndex: number, setSelectedPictureIndex: Dispatch>; - selectedEffects: IRoomCameraWidgetSelectedEffect[], - setSelectedEffects: Dispatch>; - isZoomed: boolean, - setIsZoomed: Dispatch>; } export interface CameraWidgetContextProps extends ProviderProps diff --git a/src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.tsx b/src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.tsx index a6400007..66d5f7d4 100644 --- a/src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.tsx +++ b/src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.tsx @@ -1,36 +1,32 @@ -/* eslint-disable jsx-a11y/anchor-is-valid */ -import { CameraPublishStatusMessageEvent, CameraPurchaseOKMessageEvent, PublishPhotoMessageComposer, PurchasePhotoMessageComposer } from '@nitrots/nitro-renderer'; +import { CameraPublishStatusMessageEvent, CameraPurchaseOKMessageEvent, CameraStorageUrlMessageEvent, PublishPhotoMessageComposer, PurchasePhotoMessageComposer } from '@nitrots/nitro-renderer'; import { FC, useCallback, useEffect, useState } from 'react'; -import { GetRoomEngine } from '../../../../../../api'; +import { GetConfiguration, GetRoomEngine } from '../../../../../../api'; import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks/messages/message-event'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout'; import { LocalizeText } from '../../../../../../utils/LocalizeText'; import { CurrencyIcon } from '../../../../../shared/currency-icon/CurrencyIcon'; -import { useCameraWidgetContext } from '../../context/CameraWidgetContext'; import { CameraWidgetCheckoutViewProps } from './CameraWidgetCheckoutView.types'; export const CameraWidgetCheckoutView: FC = props => { - const { pictureUrl = null, onCloseClick = null, onCancelClick = null, price = null } = props; + const { base64Url = null, onCloseClick = null, onCancelClick = null, price = null } = props; + const [ pictureUrl, setPictureUrl ] = useState(null); + const [ publishUrl, setPublishUrl ] = useState(null); const [ picturesBought, setPicturesBought ] = useState(0); const [ wasPicturePublished, setWasPicturePublished ] = useState(false); const [ isWaiting, setIsWaiting ] = useState(false); const [ publishCooldown, setPublishCooldown ] = useState(0); - const { cameraRoll = null, selectedPictureIndex = -1, selectedEffects = null, isZoomed = false } = useCameraWidgetContext(); useEffect(() => { - if(!pictureUrl) return; + if(!base64Url) return; - console.log(pictureUrl); - - GetRoomEngine().saveBase64AsScreenshot(pictureUrl); - }, [ pictureUrl ]); + GetRoomEngine().saveBase64AsScreenshot(base64Url); + }, [ base64Url ]); const onCameraPurchaseOKMessageEvent = useCallback((event: CameraPurchaseOKMessageEvent) => { - console.log(event); - setPicturesBought(value => value + 1); + setPicturesBought(value => (value + 1)); setIsWaiting(false); }, []); @@ -40,8 +36,7 @@ export const CameraWidgetCheckoutView: FC = props { const parser = event.getParser(); - console.log(parser); - + setPublishUrl(parser.extraDataId); setPublishCooldown(parser.secondsToWait); setWasPicturePublished(parser.ok); setIsWaiting(false); @@ -49,6 +44,15 @@ export const CameraWidgetCheckoutView: FC = props CreateMessageHook(CameraPublishStatusMessageEvent, onCameraPublishStatusMessageEvent); + const onCameraStorageUrlMessageEvent = useCallback((event: CameraStorageUrlMessageEvent) => + { + const parser = event.getParser(); + + setPictureUrl(GetConfiguration('camera.url') + '/' + parser.url); + }, []); + + CreateMessageHook(CameraStorageUrlMessageEvent, onCameraStorageUrlMessageEvent); + const processAction = useCallback((type: string, value: string | number = null) => { switch(type) @@ -60,7 +64,7 @@ export const CameraWidgetCheckoutView: FC = props if(isWaiting) return; setIsWaiting(true); - SendMessageHook(new PurchasePhotoMessageComposer('1_1627697499')); + SendMessageHook(new PurchasePhotoMessageComposer('')); return; case 'publish': if(isWaiting) return; @@ -80,27 +84,58 @@ export const CameraWidgetCheckoutView: FC = props processAction('close') } /> -
-
-
-
{ LocalizeText('camera.purchase.header') }{ price.credits > 0 && <>: { price.credits } }
- { picturesBought > 0 &&
{ LocalizeText('camera.purchase.count.info') + ' ' + picturesBought }
} +
+ { !pictureUrl && +
+ { LocalizeText('camera.loading') } +
} +
+ { pictureUrl &&
{ LocalizeText('camera.confirm_phase.info') }
} +
+
+
{ LocalizeText('camera.purchase.header') }
+ { ((price.credits > 0) || (price.duckets > 0)) && +
+
{ LocalizeText('catalog.purchase.confirmation.dialog.cost') }
+ { (price.credits > 0) && +
+ { price.credits } +
} + { (price.duckets > 0) && +
+ { price.duckets } +
} +
} + { (picturesBought > 0) && +
+ { LocalizeText('camera.purchase.count.info') } { picturesBought } + { LocalizeText('camera.open.inventory') } +
}
-
- - { picturesBought > 0 && } +
+
-
-
-
-
{ LocalizeText(wasPicturePublished ? 'camera.publish.successful' : 'camera.publish.explanation') }{ !wasPicturePublished && price.duckets > 0 && <>: { price.duckets } }
-
{ LocalizeText(wasPicturePublished ? 'camera.publish.success.short.info' : 'camera.publish.detailed.explanation') }
- { wasPicturePublished && { LocalizeText('camera.link.to.published') } } +
+
+
{ LocalizeText(wasPicturePublished ? 'camera.publish.successful' : 'camera.publish.explanation') }
+
+ { LocalizeText(wasPicturePublished ? 'camera.publish.success.short.info' : 'camera.publish.detailed.explanation') }
- { !wasPicturePublished && } + { wasPicturePublished && { LocalizeText('camera.link.to.published') } } + { !wasPicturePublished && (price.publishDucketPrice > 0) && +
+
{ LocalizeText('catalog.purchase.confirmation.dialog.cost') }
+
+ { price.publishDucketPrice } +
+
} + { (publishCooldown > 0) &&
{ LocalizeText('camera.publish.wait', [ 'minutes' ], [ Math.ceil( publishCooldown / 60).toString() ]) }
}
- { publishCooldown > 0 &&
{ LocalizeText('camera.publish.wait', ['minutes'], [Math.ceil(publishCooldown/60).toString()]) }
} + { !wasPicturePublished && +
+ +
}
{ LocalizeText('camera.warning.disclaimer') }
diff --git a/src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.types.ts b/src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.types.ts index 4698df7d..a4fafb06 100644 --- a/src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.types.ts +++ b/src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.types.ts @@ -1,6 +1,6 @@ export interface CameraWidgetCheckoutViewProps { - pictureUrl: string; + base64Url: string; onCloseClick: () => void; onCancelClick: () => void; price: { credits: number, duckets: number, publishDucketPrice: number };