From 28539e6923f709e3183f918bd16dfa23f7d966b8 Mon Sep 17 00:00:00 2001 From: Bill Date: Thu, 5 Aug 2021 02:26:43 -0400 Subject: [PATCH] Camera updates --- .../images/room-widgets/camera-widget/btn.png | Bin 0 -> 830 bytes .../room-widgets/camera-widget/btn_down.png | Bin 0 -> 1000 bytes .../room-widgets/camera-widget/btn_hi.png | Bin 0 -> 935 bytes .../room-widgets/camera-widget/cam_bg.png | Bin 0 -> 2166 bytes .../camera-widget/camera-spritesheet.png | Bin 6286 -> 15640 bytes .../room-widgets/camera-widget/viewfinder.png | Bin 0 -> 959 bytes src/assets/styles/icons.scss | 4 +- .../room/widgets/camera/CameraWidgetView.scss | 69 ++++++---- .../room/widgets/camera/CameraWidgetView.tsx | 118 ++++++++---------- .../widgets/camera/common/CameraPicture.ts | 8 ++ .../context/CameraWidgetContext.types.ts | 5 +- .../views/capture/CameraWidgetCaptureView.tsx | 116 +++++++---------- .../capture/CameraWidgetCaptureView.types.ts | 5 +- .../checkout/CameraWidgetCheckoutView.tsx | 37 +++--- .../CameraWidgetCheckoutView.types.ts | 2 +- .../views/editor/CameraWidgetEditorView.tsx | 58 +++++---- .../editor/CameraWidgetEditorView.types.ts | 6 +- 17 files changed, 214 insertions(+), 214 deletions(-) create mode 100644 src/assets/images/room-widgets/camera-widget/btn.png create mode 100644 src/assets/images/room-widgets/camera-widget/btn_down.png create mode 100644 src/assets/images/room-widgets/camera-widget/btn_hi.png create mode 100644 src/assets/images/room-widgets/camera-widget/cam_bg.png create mode 100644 src/assets/images/room-widgets/camera-widget/viewfinder.png create mode 100644 src/views/room/widgets/camera/common/CameraPicture.ts diff --git a/src/assets/images/room-widgets/camera-widget/btn.png b/src/assets/images/room-widgets/camera-widget/btn.png new file mode 100644 index 0000000000000000000000000000000000000000..76b086b18d5e90dc805d8789eb016de98b676c07 GIT binary patch literal 830 zcmV-E1Ht@>P)bprI+)OmN6Qzx-f!oa}5z`(#* za=e%mqX+UUXVyd*0&Fg_FbrUmv46g46CsqryC8Q6V}$_9;JvY#Aw&$|8ocB3(d%&| z1Rw)fI=QYA0Po4mUn0t0dh!EsioQLu=aakMvR`JhewG-32mJj(-)?`C0A7W<-)U3w z*n|LP#y_IJ!T+NdP^!q(wY>7P>;NXmXQLkgB*>C5Y5_RHXQ5w$YrUGe3ZWE$1AI2R z88{&TFZeQaYw$t<9`NPpvw)ukFgboabSL;R(Hrnbz@N803OW~mVC(k>5fNR8uL*yB z0MXDn_ybyh-u9^I0(=d4(k~5%Ucw*L`n8srNm{>l+YMX4cH0eGPiy-^lVYN?%&gXS zYU?{LH)y+2>v2*Qo@86#>C4ROjqkkNV3{#mZU7H>zyn?x9w%0#6D-xS8P4M?Oovctq=GQ z)M@$NL#geo)`!EV+{;F>?e*42#IK{N70-(IHF%fz*zIgz(^xN-k>3E+BJoD#i`?|Z9? zsnHMkDaPh3F3>;mpF07*qo IM6N<$f^1`jw*UYD literal 0 HcmV?d00001 diff --git a/src/assets/images/room-widgets/camera-widget/btn_down.png b/src/assets/images/room-widgets/camera-widget/btn_down.png new file mode 100644 index 0000000000000000000000000000000000000000..76f25da1d9243426aa9bb4852f3121c80e910385 GIT binary patch literal 1000 zcmV>P)S_5?q5U31f=@VAwx@ z&;}@kWx*lHfH0N`Kn#w?W`+d6ei zB|ZuL`M|!uSo7_9{C<5U4OSS$0Nmks(LX=`4+3}(`Pa(}Y4pO72H*ytgnodZ(Hr1B z}I3P0g@ zgWnCk#83F0;CDqo|b)<;FJ;8P2zf>*abI(mVBS-#^ywq4r# z2Q+`W5ke=vHlKw|*sj3i@#Y4Xd`ZTfYK61-*bbL1(u8N$VSOZTGAUeQ(fgv*$V zmzEn#x#X*8Kf%4Clko*RC0t#6pYukA=)(QaC4kDb=n9>MA9$+@m*_40+X9=jxJIwx zs{)w39ntwQgxU-0e8;;1INE@#yx(DWKw}3mY0J6r;M@RilQ&sh4xAc*C8bW~b3BOrE#5CD7I5U#CrXFk}y)@n_++cqwPi^ERRmY zrXmBv-~^Bp9F5HkVYvWQ;K1>L`n}Wu!lH}8jZUr>0faK_E4j>M{VXwn5cn+gkB{G-06v8J`l9WU-%SX>6`zfM1Aj#C&C(Gvb(Rl)mK}gM zJ{tWAK!Pj@V-!F%d=z>U-0Etk6+$ln1%6m`H*i7#q4448-r$`8LgB;Fqkz8(0El1c ztKpMIOeS;%K6K=;+MWfSi;r$SsqN=m09nw5_>k6<+TKfkb#x9ss`c!)XGIs_t6DE@ zdrI^kKC<=Xwr3wPvs+(ncWQmL-M016F=P25q^LW|ggS0mV`jIuQ(G??H`Vqzt;dd; z9oo)3$&$v6dd%$Jc?BK0#8O+8u2myY};BvXxwLS_sAOMQd&60eF(gZ## zxFP^4{G9votAGmvi2Fv!s^~;~dw9tSc6IatzS*1IsyUwpy@Rhlv9|EV@Y&EC`05iY zblhY`KjE8ygpb|&9pN=&Ml){yypRpxsUOoOjTzV%6E>Lf)4rHct;e*T{XM8B_#Io% zY&&brKwF>iKTt2rciRwc*S0<#KIK_9h_;JcpAmnAj&8fS^_lP~=(h)GAlt5LeFl6A z`UxJ^c2(FL7>n-cV*G`dstAKl#m}%fOE`22zA6Cc<%k}SVX3vC9$)w{fItgyonQB|E1~ETFS1AhPqE77`9MV>D3=v|^%}NW)AiNCpF=o+3+cB0y{%U=ZlUzT z=zsO_k2UI-;TA<9^&es`PrZ1N5+?uv002ov JPDHLkV1g3Zz}Wx* literal 0 HcmV?d00001 diff --git a/src/assets/images/room-widgets/camera-widget/cam_bg.png b/src/assets/images/room-widgets/camera-widget/cam_bg.png new file mode 100644 index 0000000000000000000000000000000000000000..d6cf994d063352f748ce25d259c4dd3e54645754 GIT binary patch literal 2166 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 literal 6286 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 bW7fZMJ?bj0li!1XFyJ^o%e^mohQ|LN)PY}4 diff --git a/src/assets/images/room-widgets/camera-widget/viewfinder.png b/src/assets/images/room-widgets/camera-widget/viewfinder.png new file mode 100644 index 0000000000000000000000000000000000000000..ab6a9b24f6bfbe61befeddf8e75e1690811a46e6 GIT binary patch literal 959 zcmeAS@N?(olHy`uVBq!ia0y~yV6+2a4mO~Oh((P70|RrLr;B4q#jUq@eNVk|5NNx& z#!UJQ)9Hza8z#Q{a=x0c<1l|vC_k6@`$C`=28P=!SFQefI(V!0x6YN)DH|(_58ARW zyJ38~A8NPV+=HY? zq2`7$*dAIE5Bx%7*T&CVmCkcne(CarvpQlvg;&y(WQq3Bv{hy!3{t>X-)^+da%@`v1?sM~#X{vlv{5lGnoFt1q~FISuQ zCG3B7&&`$BrBfOO>}#&F0woiCdj2S*N2pc`=9l%#X|um6hrgfX)-x)yALJser}% zJO7x?#Rw*xA$^9Yz$J~%LJ1zys1X2(A8whz{^{zke==dQj;cZj)~$N=Nn}H|%iEc$ zF2Il$uxsIO;eW{d(D{c0kPAxOH%uXkyOjkhh@@si`ZU3Zhv!AQA?X1|Do6b5>F)dA lJM~sne)@Lm9LU8E>-f1hoe(_ia##<<^>p=fS?83{1OQ0_I2!-} literal 0 HcmV?d00001 diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss index 95ef7a2b..53cfa487 100644 --- a/src/assets/styles/icons.scss +++ b/src/assets/styles/icons.scss @@ -476,13 +476,13 @@ &.icon-camera-colormatrix { background: url('../images/icons/camera-colormatrix.png'); width: 32px; - height: 14px; + height: 21px; } &.icon-camera-composite { background: url('../images/icons/camera-composite.png'); width: 32px; - height: 14px; + height: 21px; } &.icon-user-profile { diff --git a/src/views/room/widgets/camera/CameraWidgetView.scss b/src/views/room/widgets/camera/CameraWidgetView.scss index f56fecd3..52844d70 100644 --- a/src/views/room/widgets/camera/CameraWidgetView.scss +++ b/src/views/room/widgets/camera/CameraWidgetView.scss @@ -1,30 +1,41 @@ .nitro-camera-capture { - .nitro-close { - top: 7px; - right: 9px; + position: relative; + + .header-close { + top: 8px; + right: 8px; + border-radius: $border-radius; + box-shadow: 0 0 0 1.5px $white; + border: 2px solid #921911; + background: repeating-linear-gradient(rgba(245,80,65,1), rgba(245,80,65,1) 50%, rgba(194,48,39,1) 50%, rgba(194,48,39,1) 100%); + cursor: pointer; + line-height: 1; + padding: 1px 3px; + + &:hover { + filter: brightness(1.2); + } + + &:active { + filter: brightness(0.8); + } + } + + .camera-area { + position: absolute; + top: 37px; + left: 10px; + width: 320px; + height: 320px; } .camera-canvas { + position: relative; width: 340px; height: 462px; - background-image: url('../../../../assets/images/room-widgets/camera-widget/camera-spritesheet.png'); - - .camera-frame { - position: absolute; - width: 320px; - height: 320px; - margin-top: 37px; - margin-left: 11.4px; - - &.bg { - background: black; - } - - .camera-frame-preview-actions { - background: rgba(0, 0, 0, .5); - } - } + background-position: -1px -1px; + z-index: 2; .camera-button { width: 94px; @@ -33,14 +44,26 @@ margin-top: 362px; background-image: url('../../../../assets/images/room-widgets/camera-widget/camera-spritesheet.png'); - background-position: -340px 0px; + background-position: -343px -321px; &:hover { - background-position: -340px -94px; + background-position: -535px -321px; } &:active { - background-position: -340px -188px; + background-position: -439px -321px; + } + } + + .camera-view-finder { + background-image: url('../../../../assets/images/room-widgets/camera-widget/camera-spritesheet.png'); + background-position: -343px -1px; + } + + .camera-frame { + + .camera-frame-preview-actions { + background: rgba(0, 0, 0, .5); } } } diff --git a/src/views/room/widgets/camera/CameraWidgetView.tsx b/src/views/room/widgets/camera/CameraWidgetView.tsx index 5b57cdcf..b9ca0a10 100644 --- a/src/views/room/widgets/camera/CameraWidgetView.tsx +++ b/src/views/room/widgets/camera/CameraWidgetView.tsx @@ -1,48 +1,50 @@ -import { RoomWidgetCameraConfigurationComposer, RoomWidgetCameraConfigurationEvent } from 'nitro-renderer'; +import { InitCameraMessageEvent, IRoomCameraWidgetEffect, RequestCameraConfigurationComposer } from 'nitro-renderer'; import { RoomCameraWidgetManagerEvent } from 'nitro-renderer/src/nitro/camera/events/RoomCameraWidgetManagerEvent'; import { IRoomCameraWidgetSelectedEffect } from 'nitro-renderer/src/nitro/camera/IRoomCameraWidgetSelectedEffect'; -import { FC, useCallback, useEffect, useMemo, useState } from 'react'; +import { FC, useCallback, useEffect, useState } from 'react'; import { GetRoomCameraWidgetManager } from '../../../../api'; import { RoomWidgetCameraEvent } from '../../../../events/room-widgets/camera/RoomWidgetCameraEvent'; import { useCameraEvent } from '../../../../hooks/events/nitro/camera/camera-event'; import { useUiEvent } from '../../../../hooks/events/ui/ui-event'; import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages/message-event'; +import { CameraPicture } from './common/CameraPicture'; import { CameraWidgetContextProvider } from './context/CameraWidgetContext'; import { CameraWidgetCaptureView } from './views/capture/CameraWidgetCaptureView'; import { CameraWidgetCheckoutView } from './views/checkout/CameraWidgetCheckoutView'; import { CameraWidgetEditorView } from './views/editor/CameraWidgetEditorView'; +const MODE_NONE: number = 0; +const MODE_CAPTURE: number = 1; +const MODE_EDITOR: number = 2; +const MODE_CHECKOUT: number = 3; + export const CameraWidgetView: FC<{}> = props => { - const [ effectsReady, setEffectsReady ] = useState(false); - - const [ isCaptureVisible, setIsCaptureVisible ] = useState(false); - const [ isEditorVisible, setIsEditorVisible ] = useState(false); - const [ isCheckoutVisible, setIsCheckoutVisible ] = useState(false); - - const [ myLevel, setMyLevel ] = useState(10); - const [ cameraRoll, setCameraRoll ] = useState([]); + const [ mode, setMode ] = useState(MODE_NONE); + const [ availableEffects, setAvailableEffects ] = useState([]); + const [ cameraRoll, setCameraRoll ] = useState([]); const [ selectedPictureIndex, setSelectedPictureIndex ] = useState(-1); - const [ selectedEffects, setSelectedEffects ] = useState([]); - const [ isZoomed, setIsZoomed ] = useState(false); - const [ price, setPrice ] = useState<{credits: Number, points: Number, pointsType: number}>(null); + const [ selectedEffects, setSelectedEffects ] = useState([]); + const [ isZoomed, setIsZoomed ] = useState(false); + const [ myLevel, setMyLevel ] = useState(10); + const [ price, setPrice ] = useState<{ credits: number, duckets: number, publishDucketPrice: number }>(null); const onNitroEvent = useCallback((event: RoomWidgetCameraEvent) => { switch(event.type) { case RoomWidgetCameraEvent.SHOW_CAMERA: - setIsCaptureVisible(true); + setMode(MODE_CAPTURE); return; case RoomWidgetCameraEvent.HIDE_CAMERA: - setIsCaptureVisible(false); - setIsEditorVisible(false); - setIsCheckoutVisible(false); + setMode(MODE_NONE); return; case RoomWidgetCameraEvent.TOGGLE_CAMERA: - setIsCaptureVisible(value => !value); - setIsEditorVisible(false); - setIsCheckoutVisible(false); + setMode(prevValue => + { + if(!prevValue) return MODE_CAPTURE; + else return MODE_NONE; + }); return; } }, []); @@ -51,78 +53,68 @@ export const CameraWidgetView: FC<{}> = props => useUiEvent(RoomWidgetCameraEvent.HIDE_CAMERA, onNitroEvent); useUiEvent(RoomWidgetCameraEvent.TOGGLE_CAMERA, onNitroEvent); - useEffect(() => - { - if(price) return; - - SendMessageHook(new RoomWidgetCameraConfigurationComposer()); - }, [ price ]); - - const onCameraConfigurationEvent = useCallback((event: RoomWidgetCameraConfigurationEvent) => - { - const parser = event.getParser(); - - setPrice({ credits: parser.credits, points: parser.points, pointsType: parser.pointsType }); - }, []); - - CreateMessageHook(RoomWidgetCameraConfigurationEvent, onCameraConfigurationEvent); - - const availableEffects = useMemo(() => - { - if(!effectsReady) return null; - - return Array.from(GetRoomCameraWidgetManager().effects.values()); - }, [ effectsReady ]); - const onRoomCameraWidgetManagerEvent = useCallback((event: RoomCameraWidgetManagerEvent) => { - setEffectsReady(true); + setAvailableEffects(Array.from(GetRoomCameraWidgetManager().effects.values())) }, []); useCameraEvent(RoomCameraWidgetManagerEvent.INITIALIZED, onRoomCameraWidgetManagerEvent); + const onCameraConfigurationEvent = useCallback((event: InitCameraMessageEvent) => + { + const parser = event.getParser(); + + setPrice({ credits: parser.creditPrice, duckets: parser.ducketPrice, publishDucketPrice: parser.publishDucketPrice }); + }, []); + + CreateMessageHook(InitCameraMessageEvent, onCameraConfigurationEvent); + useEffect(() => { if(!GetRoomCameraWidgetManager().isLoaded) { GetRoomCameraWidgetManager().init(); + SendMessageHook(new RequestCameraConfigurationComposer()); + return; } - - setEffectsReady(true); }, []); - const processAction = useCallback((type: string, value: any = null) => + const processAction = useCallback((type: string) => { switch(type) { case 'close': - setIsCaptureVisible(false); - setIsEditorVisible(false); - setIsCheckoutVisible(false); + setMode(MODE_NONE); return; - case 'capture_edit': - setIsCaptureVisible(false); - setIsEditorVisible(true); + case 'edit': + setMode(MODE_EDITOR); + return; + case 'delete': + setCameraRoll(prevValue => + { + const clone = [ ...prevValue ]; + + clone.splice(selectedPictureIndex, 1); + + return clone; + }); return; case 'editor_cancel': - setIsCaptureVisible(true); - setIsEditorVisible(false); - setIsCheckoutVisible(false); + setMode(MODE_CAPTURE); return; - case 'editor_checkout': - setIsEditorVisible(false); - setIsCheckoutVisible(true); + case 'checkout': + setMode(MODE_CHECKOUT); return; } - }, []); + }, [ selectedPictureIndex ]); return ( - { isCaptureVisible && processAction('close') } onEditClick={ () => processAction('capture_edit') } /> } - { isEditorVisible && processAction('close') } onCancelClick={ () => processAction('editor_cancel') } onCheckoutClick={ () => processAction('editor_checkout') } availableEffects={ availableEffects } /> } - { isCheckoutVisible && processAction('close') } onCancelClick={ () => processAction('editor_cancel') } price={ price }> } + { (mode === MODE_CAPTURE) && processAction('close') } onEdit={ () => processAction('edit') } onDelete={ () => processAction('delete') } /> } + { (mode === MODE_EDITOR) && processAction('close') } onCancel={ () => processAction('editor_cancel') } onCheckout={ () => processAction('checkout') } availableEffects={ availableEffects } /> } + { (mode === MODE_CHECKOUT) && processAction('close') } onCancelClick={ () => processAction('editor_cancel') } price={ price }> } ); } diff --git a/src/views/room/widgets/camera/common/CameraPicture.ts b/src/views/room/widgets/camera/common/CameraPicture.ts new file mode 100644 index 00000000..34019568 --- /dev/null +++ b/src/views/room/widgets/camera/common/CameraPicture.ts @@ -0,0 +1,8 @@ +import { NitroTexture } from 'nitro-renderer'; + +export class CameraPicture +{ + constructor( + public texture: NitroTexture, + public imageUrl: string) {} +} diff --git a/src/views/room/widgets/camera/context/CameraWidgetContext.types.ts b/src/views/room/widgets/camera/context/CameraWidgetContext.types.ts index 8a25cb92..f1c1125d 100644 --- a/src/views/room/widgets/camera/context/CameraWidgetContext.types.ts +++ b/src/views/room/widgets/camera/context/CameraWidgetContext.types.ts @@ -1,10 +1,11 @@ import { IRoomCameraWidgetSelectedEffect } from 'nitro-renderer/src/nitro/camera/IRoomCameraWidgetSelectedEffect'; import { ProviderProps } from 'react'; +import { CameraPicture } from '../common/CameraPicture'; export interface ICameraWidgetContext { - cameraRoll: HTMLImageElement[], - setCameraRoll: (cameraRoll: HTMLImageElement[]) => void, + cameraRoll: CameraPicture[], + setCameraRoll: (cameraRoll: CameraPicture[]) => void, selectedPictureIndex: number, setSelectedPictureIndex: (index: number) => void, selectedEffects: IRoomCameraWidgetSelectedEffect[], diff --git a/src/views/room/widgets/camera/views/capture/CameraWidgetCaptureView.tsx b/src/views/room/widgets/camera/views/capture/CameraWidgetCaptureView.tsx index 659541ca..a0c9171b 100644 --- a/src/views/room/widgets/camera/views/capture/CameraWidgetCaptureView.tsx +++ b/src/views/room/widgets/camera/views/capture/CameraWidgetCaptureView.tsx @@ -1,105 +1,83 @@ -import classNames from 'classnames'; -import { NitroRectangle } from 'nitro-renderer'; +import { NitroRectangle, TextureUtils } from 'nitro-renderer'; import { FC, useCallback, useRef } from 'react'; import { GetRoomEngine, GetRoomSession } from '../../../../../../api'; import { DraggableWindow } from '../../../../../../layout/draggable-window/DraggableWindow'; import { LocalizeText } from '../../../../../../utils/LocalizeText'; +import { CameraPicture } from '../../common/CameraPicture'; import { useCameraWidgetContext } from '../../context/CameraWidgetContext'; import { CameraWidgetCaptureViewProps } from './CameraWidgetCaptureView.types'; +const CAMERA_ROLL_LIMIT: number = 5; + export const CameraWidgetCaptureView: FC = props => { - const { onCloseClick = null, onEditClick = null } = props; + const { onClose = null, onEdit = null, onDelete = null } = props; + const { cameraRoll = null, setCameraRoll = null, selectedPictureIndex = -1, setSelectedPictureIndex = null } = useCameraWidgetContext(); + const elementRef = useRef(); - const CAMERA_ROLL_LIMIT: number = 5; - const cameraFrameRef = useRef(); + const selectedPicture = ((selectedPictureIndex > -1) ? cameraRoll[selectedPictureIndex] : null); - const cameraWidgetContext = useCameraWidgetContext(); + const getCameraBounds = useCallback(() => + { + if(!elementRef || !elementRef.current) return null; + + const frameBounds = elementRef.current.getBoundingClientRect(); + + return new NitroRectangle(Math.floor(frameBounds.x), Math.floor(frameBounds.y), Math.floor(frameBounds.width), Math.floor(frameBounds.height)); + }, []); const takePicture = useCallback(() => { - if(cameraWidgetContext.selectedPictureIndex > -1) + if(selectedPictureIndex > -1) { - cameraWidgetContext.setSelectedPictureIndex(-1); + setSelectedPictureIndex(-1); + return; } - - const frameBounds = cameraFrameRef.current.getBoundingClientRect(); - if(!frameBounds) return; + const texture = GetRoomEngine().createTextureFromRoom(GetRoomSession().roomId, 1, getCameraBounds()); - const rectangle = new NitroRectangle(Math.floor(frameBounds.x), Math.floor(frameBounds.y), Math.floor(frameBounds.width), Math.floor(frameBounds.height)); + const clone = [ ...cameraRoll ]; - const texture = GetRoomEngine().createTextureFromRoom(GetRoomSession().roomId, 1, rectangle); - - if(cameraWidgetContext.cameraRoll.length + 1 === CAMERA_ROLL_LIMIT) + if(clone.length >= CAMERA_ROLL_LIMIT) { alert(LocalizeText('camera.full.body')); + + clone.pop(); } - let remainingRoll = cameraWidgetContext.cameraRoll; + clone.push(new CameraPicture(texture, TextureUtils.generateImageUrl(texture))); - if(cameraWidgetContext.cameraRoll.length === CAMERA_ROLL_LIMIT) - { - remainingRoll = remainingRoll.slice(0, CAMERA_ROLL_LIMIT - 1); - } - - //cameraWidgetContext.setCameraRoll([ ...remainingRoll, image ]); - }, [ cameraWidgetContext ]); - - const processAction = useCallback((type: string, value: string | number = null) => - { - switch(type) - { - case 'take_picture': - takePicture(); - return; - case 'preview_picture': - cameraWidgetContext.setSelectedPictureIndex(Number(value)); - return; - case 'discard_picture': - cameraWidgetContext.setSelectedPictureIndex(-1); - - const clone = Array.from(cameraWidgetContext.cameraRoll); - clone.splice(cameraWidgetContext.selectedPictureIndex, 1); - - cameraWidgetContext.setCameraRoll(clone); - return; - case 'edit_picture': - onEditClick(); - return; - case 'close': - onCloseClick(); - return; - } - }, [ takePicture, cameraWidgetContext, onEditClick, onCloseClick ]); + setCameraRoll(clone); + }, [ cameraRoll, selectedPictureIndex, getCameraBounds, setCameraRoll, setSelectedPictureIndex ]); return ( - -
-
-
processAction('close') }> - + +
+ { selectedPicture && } +
+
+
-
-1}) }> - { cameraWidgetContext.selectedPictureIndex > -1 &&
- + { !selectedPicture &&
} + { selectedPicture && +
- - + +
} -
-
+
-
- { cameraWidgetContext.cameraRoll.length > 0 &&
- { cameraWidgetContext.cameraRoll.map((picture, index) => - { - return processAction('preview_picture', index) } />; - }) } -
} +
+ { (cameraRoll.length > 0) && +
+ { cameraRoll.map((picture, index) => + { + return setSelectedPictureIndex(index) } />; + }) } +
}
); diff --git a/src/views/room/widgets/camera/views/capture/CameraWidgetCaptureView.types.ts b/src/views/room/widgets/camera/views/capture/CameraWidgetCaptureView.types.ts index 84f6d560..413aed8f 100644 --- a/src/views/room/widgets/camera/views/capture/CameraWidgetCaptureView.types.ts +++ b/src/views/room/widgets/camera/views/capture/CameraWidgetCaptureView.types.ts @@ -1,5 +1,6 @@ export interface CameraWidgetCaptureViewProps { - onCloseClick: () => void; - onEditClick: () => void; + onClose: () => void; + onEdit: () => void; + onDelete: () => void; } diff --git a/src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.tsx b/src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.tsx index 21b4727c..88188463 100644 --- a/src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.tsx +++ b/src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.tsx @@ -1,5 +1,5 @@ /* eslint-disable jsx-a11y/anchor-is-valid */ -import { RoomWidgetCameraPublishComposer, RoomWidgetCameraPublishedEvent, RoomWidgetCameraPurchaseComposer, RoomWidgetCameraPurchaseSuccessfulEvent } from 'nitro-renderer'; +import { CameraPublishStatusMessageEvent, CameraPurchaseOKMessageEvent, PublishPhotoMessageComposer, PurchasePhotoMessageComposer } from 'nitro-renderer'; import { FC, useCallback, useState } from 'react'; import { GetRoomCameraWidgetManager } from '../../../../../../api/nitro/camera/GetRoomCameraWidgetManager'; import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks/messages/message-event'; @@ -12,36 +12,35 @@ import { CameraWidgetCheckoutViewProps } from './CameraWidgetCheckoutView.types' export const CameraWidgetCheckoutView: FC = props => { const { onCloseClick = null, onCancelClick = null, price = null } = props; - - const cameraWidgetContext = useCameraWidgetContext(); + 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(); - const [ picturesBought, setPicturesBought ] = useState(0); - const [ wasPicturePublished, setWasPicturePublished ] = useState(false); - const [ isWaiting, setIsWaiting ] = useState(false); - const [ publishCooldown, setPublishCooldown ] = useState(0); - - const onCameraPurchaseSuccessfulEvent = useCallback((event: RoomWidgetCameraPurchaseSuccessfulEvent) => + const onCameraPurchaseOKMessageEvent = useCallback((event: CameraPurchaseOKMessageEvent) => { setPicturesBought(value => value + 1); setIsWaiting(false); }, []); - const onRoomWidgetCameraPublishedEvent = useCallback((event: RoomWidgetCameraPublishedEvent) => + CreateMessageHook(CameraPurchaseOKMessageEvent, onCameraPurchaseOKMessageEvent); + + const onCameraPublishStatusMessageEvent = useCallback((event: CameraPublishStatusMessageEvent) => { const parser = event.getParser(); - setPublishCooldown(parser.cooldownSeconds); - setWasPicturePublished(parser.wasSuccessful); + setPublishCooldown(parser.secondsToWait); + setWasPicturePublished(parser.ok); setIsWaiting(false); }, []); - CreateMessageHook(RoomWidgetCameraPurchaseSuccessfulEvent, onCameraPurchaseSuccessfulEvent); - CreateMessageHook(RoomWidgetCameraPublishedEvent, onRoomWidgetCameraPublishedEvent); + CreateMessageHook(CameraPublishStatusMessageEvent, onCameraPublishStatusMessageEvent); const getCurrentPicture = useCallback(() => { - return GetRoomCameraWidgetManager().applyEffects(cameraWidgetContext.cameraRoll[cameraWidgetContext.selectedPictureIndex], cameraWidgetContext.selectedEffects, cameraWidgetContext.isZoomed); - }, [ cameraWidgetContext ]); + return GetRoomCameraWidgetManager().applyEffects(cameraRoll[selectedPictureIndex].texture, selectedEffects, isZoomed); + }, [ cameraRoll, selectedPictureIndex, selectedEffects, isZoomed ]); const processAction = useCallback((type: string, value: string | number = null) => { @@ -54,13 +53,13 @@ export const CameraWidgetCheckoutView: FC = props if(isWaiting) return; setIsWaiting(true); - SendMessageHook(new RoomWidgetCameraPurchaseComposer()); + SendMessageHook(new PurchasePhotoMessageComposer('1_1627697499')); return; case 'publish': if(isWaiting) return; setIsWaiting(true); - SendMessageHook(new RoomWidgetCameraPublishComposer()); + SendMessageHook(new PublishPhotoMessageComposer()); return; case 'cancel': onCancelClick(); @@ -88,7 +87,7 @@ export const CameraWidgetCheckoutView: FC = props
-
{ LocalizeText(wasPicturePublished ? 'camera.publish.successful' : 'camera.publish.explanation') }{ !wasPicturePublished && price.points > 0 && <>: { price.points } }
+
{ 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') } }
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 c73dc021..dbbac494 100644 --- a/src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.types.ts +++ b/src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.types.ts @@ -2,5 +2,5 @@ export interface CameraWidgetCheckoutViewProps { onCloseClick: () => void; onCancelClick: () => void; - price: {credits: Number, points: Number, pointsType: number}; + price: { credits: number, duckets: number, publishDucketPrice: number }; } diff --git a/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx b/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx index b079dd9f..5bd4d4c1 100644 --- a/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx +++ b/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx @@ -7,17 +7,15 @@ import { LocalizeText } from '../../../../../../utils/LocalizeText'; import { useCameraWidgetContext } from '../../context/CameraWidgetContext'; import { CameraWidgetEditorTabs, CameraWidgetEditorViewProps } from './CameraWidgetEditorView.types'; +const TABS: string[] = [ CameraWidgetEditorTabs.COLORMATRIX, CameraWidgetEditorTabs.COMPOSITE ]; + export const CameraWidgetEditorView: FC = props => { - const { availableEffects = null, myLevel = null, onCloseClick = null, onCancelClick = null, onCheckoutClick = null } = props; - - const TABS: string[] = [ CameraWidgetEditorTabs.COLORMATRIX, CameraWidgetEditorTabs.COMPOSITE ]; - - const cameraWidgetContext = useCameraWidgetContext(); - - const [ currentTab, setCurrentTab ] = useState(CameraWidgetEditorTabs.COLORMATRIX); + const { availableEffects = null, myLevel = 1, onClose = null, onCancel = null, onCheckout = null } = props; + const [ currentTab, setCurrentTab ] = useState(TABS[0]); const [ selectedEffectName, setSelectedEffectName ] = useState(null); const [ effectsThumbnails, setEffectsThumbnails ] = useState<{ name: string, image: HTMLImageElement }[]>([]); + const { cameraRoll = null, selectedPictureIndex = -1, selectedEffects = null, isZoomed = false, setSelectedEffects = null, setIsZoomed = null } = useCameraWidgetContext(); useEffect(() => { @@ -25,11 +23,11 @@ export const CameraWidgetEditorView: FC = props => for(const effect of availableEffects) { - thumbnails.push({name: effect.name, image: GetRoomCameraWidgetManager().applyEffects(cameraWidgetContext.cameraRoll[cameraWidgetContext.selectedPictureIndex], [ new RoomCameraWidgetSelectedEffect(effect, 1) ], false)}); + thumbnails.push({name: effect.name, image: GetRoomCameraWidgetManager().applyEffects(cameraRoll[selectedPictureIndex].texture, [ new RoomCameraWidgetSelectedEffect(effect, 1) ], false)}); } setEffectsThumbnails(thumbnails); - }, [ cameraWidgetContext, availableEffects ]); + }, [ cameraRoll, selectedPictureIndex, availableEffects ]); const getEffectThumbnail = useCallback((effectName: string) => { @@ -54,24 +52,24 @@ export const CameraWidgetEditorView: FC = props => const getCurrentPicture = useCallback(() => { - return GetRoomCameraWidgetManager().applyEffects(cameraWidgetContext.cameraRoll[cameraWidgetContext.selectedPictureIndex], cameraWidgetContext.selectedEffects, cameraWidgetContext.isZoomed); - }, [ cameraWidgetContext ]); + return GetRoomCameraWidgetManager().applyEffects(cameraRoll[selectedPictureIndex].texture, selectedEffects, isZoomed); + }, [ cameraRoll, selectedPictureIndex, selectedEffects, isZoomed ]); const getCurrentEffectAlpha = useCallback(() => { if(!selectedEffectName) return 0; - const selectedEffect = cameraWidgetContext.selectedEffects.find(effect => effect.effect.name === selectedEffectName); + const selectedEffect = selectedEffects.find(effect => effect.effect.name === selectedEffectName); if(!selectedEffect) return 0; return selectedEffect.alpha; - }, [ selectedEffectName, cameraWidgetContext.selectedEffects ]); + }, [ selectedEffectName, selectedEffects ]); const getEffectIndex = useCallback((effectName) => { - return cameraWidgetContext.selectedEffects.findIndex(effect => effect.effect.name === effectName); - }, [ cameraWidgetContext.selectedEffects ]) + return selectedEffects.findIndex(effect => effect.effect.name === effectName); + }, [ selectedEffects ]) const setSelectedEffectAlpha = useCallback((newAlpha: number) => { @@ -81,27 +79,27 @@ export const CameraWidgetEditorView: FC = props => if(selectedEffectIndex === -1) return; - const clone = Array.from(cameraWidgetContext.selectedEffects); + const clone = Array.from(selectedEffects); const selectedEffect = clone[selectedEffectIndex]; clone[selectedEffectIndex] = new RoomCameraWidgetSelectedEffect(selectedEffect.effect, newAlpha); - cameraWidgetContext.setSelectedEffects(clone); - }, [ selectedEffectName, getEffectIndex, cameraWidgetContext ]); + setSelectedEffects(clone); + }, [ selectedEffectName, getEffectIndex, selectedEffects, setSelectedEffects ]); const processAction = useCallback((type: string, value: string | number = null) => { switch(type) { case 'close': - onCloseClick(); + onClose(); return; case 'cancel': - onCancelClick(); + onCancel(); return; case 'checkout': - onCheckoutClick(); + onCheckout(); return; case 'change_tab': setCurrentTab(String(value)); @@ -110,7 +108,7 @@ export const CameraWidgetEditorView: FC = props => { let existingIndex = -1; - if(cameraWidgetContext.selectedEffects.length > 0) + if(selectedEffects.length > 0) { existingIndex = getEffectIndex(value); } @@ -123,7 +121,7 @@ export const CameraWidgetEditorView: FC = props => if(effect.minLevel > myLevel) return; - cameraWidgetContext.setSelectedEffects([...cameraWidgetContext.selectedEffects, new RoomCameraWidgetSelectedEffect(effect, 0.5)]); + setSelectedEffects([...selectedEffects, new RoomCameraWidgetSelectedEffect(effect, 0.5)]); } if(effect && effect.minLevel > myLevel) return; @@ -144,32 +142,32 @@ export const CameraWidgetEditorView: FC = props => if(existingIndex > -1) { - const effect = cameraWidgetContext.selectedEffects[existingIndex]; + const effect = selectedEffects[existingIndex]; if(effect.effect.name === selectedEffectName) { setSelectedEffectName(null); } - const clone = Array.from(cameraWidgetContext.selectedEffects); + const clone = Array.from(selectedEffects); clone.splice(existingIndex, 1); - cameraWidgetContext.setSelectedEffects(clone); + setSelectedEffects(clone); } } return; case 'clear_effects': setSelectedEffectName(null); - cameraWidgetContext.setSelectedEffects([]); + setSelectedEffects([]); return; case 'download': window.open(getCurrentPicture().src, '_blank'); return; case 'zoom': - cameraWidgetContext.setIsZoomed(!cameraWidgetContext.isZoomed); + setIsZoomed(!isZoomed); return; } - }, [onCloseClick, onCancelClick, onCheckoutClick, cameraWidgetContext, getCurrentPicture, myLevel, selectedEffectName, getEffectIndex, availableEffects]); + }, [ onClose, onCancel, onCheckout, getCurrentPicture, myLevel, selectedEffectName, getEffectIndex, availableEffects, isZoomed, setIsZoomed, selectedEffects, setSelectedEffects ]); return ( @@ -219,7 +217,7 @@ export const CameraWidgetEditorView: FC = props =>
- +
diff --git a/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.types.ts b/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.types.ts index b953f117..38c58155 100644 --- a/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.types.ts +++ b/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.types.ts @@ -4,9 +4,9 @@ export interface CameraWidgetEditorViewProps { availableEffects: IRoomCameraWidgetEffect[]; myLevel: number; - onCloseClick: () => void; - onCancelClick: () => void; - onCheckoutClick: () => void; + onClose: () => void; + onCancel: () => void; + onCheckout: () => void; } export class CameraWidgetEditorTabs