More camera updates

src/views/room/widgets/camera/CameraWidgetView.scss

@@ -88,8 +88,8 @@
     width: 600px;
 
     .content-area {
-        min-height: 350px;
+        min-height: 441px;
-        height: 350px;
+        height: 441px;
         resize: vertical;
 
         .picture-preview {

src/views/room/widgets/camera/CameraWidgetView.tsx

@@ -25,6 +25,7 @@ export const CameraWidgetView: FC<{}> = props =>
     const [ selectedEffects, setSelectedEffects ] = useState<IRoomCameraWidgetSelectedEffect[]>([]);
     const [ isZoomed, setIsZoomed ] = useState(false);
     const [ myLevel, setMyLevel ] = useState(1);
+    const [ savedPictureUrl, setSavedPictureUrl ] = useState<string>(null);
     const [ price, setPrice ] = useState<{ credits: number, duckets: number, publishDucketPrice: number }>(null);
 
     const onNitroEvent = useCallback((event: RoomWidgetCameraEvent) =>
@@ -102,17 +103,20 @@ export const CameraWidgetView: FC<{}> = props =>
             case 'editor_cancel':
                 setMode(MODE_CAPTURE);
                 return;
-            case 'checkout':
-                setMode(MODE_CHECKOUT);
-                return;
         }
     }, [ selectedPictureIndex ]);
 
+    const checkoutPictureUrl = useCallback((pictureUrl: string) =>
+    {
+        setSavedPictureUrl(pictureUrl);
+        setMode(MODE_CHECKOUT);
+    }, []);
+
     return (
         <CameraWidgetContextProvider value={ { cameraRoll, setCameraRoll, selectedPictureIndex, setSelectedPictureIndex, selectedEffects, setSelectedEffects, isZoomed, setIsZoomed } }>
             { (mode === MODE_CAPTURE) && <CameraWidgetCaptureView onClose={ () => processAction('close') } onEdit={ () => processAction('edit') } onDelete={ () => processAction('delete') } /> }
-            { (mode === MODE_EDITOR) && <CameraWidgetEditorView picture={ cameraRoll[selectedPictureIndex] } myLevel={ myLevel } onClose={ () => processAction('close') } onCancel={ () => processAction('editor_cancel') } onCheckout={ () => processAction('checkout') } availableEffects={ availableEffects } /> }
+            { (mode === MODE_EDITOR) && <CameraWidgetEditorView picture={ cameraRoll[selectedPictureIndex] } myLevel={ myLevel } onClose={ () => processAction('close') } onCancel={ () => processAction('editor_cancel') } onCheckout={ checkoutPictureUrl } availableEffects={ availableEffects } /> }
-            { (mode === MODE_CHECKOUT) && <CameraWidgetCheckoutView onCloseClick={ () => processAction('close') } onCancelClick={ () => processAction('editor_cancel') } price={ price }></CameraWidgetCheckoutView> }
+            { (mode === MODE_CHECKOUT) && <CameraWidgetCheckoutView pictureUrl={ savedPictureUrl } onCloseClick={ () => processAction('close') } onCancelClick={ () => processAction('editor_cancel') } price={ price }></CameraWidgetCheckoutView> }
         </CameraWidgetContextProvider>
     );
 }

src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { CameraPublishStatusMessageEvent, CameraPurchaseOKMessageEvent, PublishPhotoMessageComposer, PurchasePhotoMessageComposer } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useState } from 'react';
+import { FC, useCallback, useEffect, useState } from 'react';
-import { GetRoomCameraWidgetManager } from '../../../../../../api/nitro/camera/GetRoomCameraWidgetManager';
+import { GetRoomEngine } from '../../../../../../api';
 import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks/messages/message-event';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
 import { LocalizeText } from '../../../../../../utils/LocalizeText';
@@ -11,15 +11,25 @@ import { CameraWidgetCheckoutViewProps } from './CameraWidgetCheckoutView.types'
 
 export const CameraWidgetCheckoutView: FC<CameraWidgetCheckoutViewProps> = props =>
 {
-    const { onCloseClick = null, onCancelClick = null, price = null } = props;
+    const { pictureUrl = null, onCloseClick = null, onCancelClick = null, price = null } = props;
     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;
+
+        console.log(pictureUrl);
+
+        GetRoomEngine().saveBase64AsScreenshot(pictureUrl);
+    }, [ pictureUrl ]);
+
     const onCameraPurchaseOKMessageEvent = useCallback((event: CameraPurchaseOKMessageEvent) =>
     {
+        console.log(event);
         setPicturesBought(value => value + 1);
         setIsWaiting(false);
     }, []);
@@ -30,6 +40,8 @@ export const CameraWidgetCheckoutView: FC<CameraWidgetCheckoutViewProps> = props
     {
         const parser = event.getParser();
 
+        console.log(parser);
+
         setPublishCooldown(parser.secondsToWait);
         setWasPicturePublished(parser.ok);
         setIsWaiting(false);
@@ -37,11 +49,6 @@ export const CameraWidgetCheckoutView: FC<CameraWidgetCheckoutViewProps> = props
 
     CreateMessageHook(CameraPublishStatusMessageEvent, onCameraPublishStatusMessageEvent);
 
-    const getCurrentPicture = useCallback(() =>
-    {
-        return GetRoomCameraWidgetManager().applyEffects(cameraRoll[selectedPictureIndex].texture, selectedEffects, isZoomed);
-    }, [ cameraRoll, selectedPictureIndex, selectedEffects, isZoomed ]);
-
     const processAction = useCallback((type: string, value: string | number = null) =>
     {
         switch(type)
@@ -73,7 +80,7 @@ export const CameraWidgetCheckoutView: FC<CameraWidgetCheckoutViewProps> = props
         <NitroCardView className="nitro-camera-checkout" simple={ true }>
             <NitroCardHeaderView headerText={ LocalizeText('camera.confirm_phase.title') } onCloseClick={ event => processAction('close') } />
             <NitroCardContentView>
-                <div className="picture-preview border mb-2" style={ { backgroundImage: 'url(' + getCurrentPicture().src + ')' } }></div>
+                <div className="picture-preview border mb-2" style={ { backgroundImage: 'url(' + null + ')' } }></div>
                 <div className="bg-muted rounded p-2 text-black mb-2 d-flex justify-content-between align-items-center">
                     <div>
                         <div className="fw-bold d-flex justify-content-start">{ LocalizeText('camera.purchase.header') }{ price.credits > 0 && <>: { price.credits } <CurrencyIcon type={ -1 } /></> }</div>

src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.types.ts

@@ -1,5 +1,6 @@
 export interface CameraWidgetCheckoutViewProps
 {
+    pictureUrl: string;
     onCloseClick: () => void;
     onCancelClick: () => void;
     price: { credits: number, duckets: number, publishDucketPrice: number };

src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx

@@ -1,5 +1,6 @@
 import { IRoomCameraWidgetSelectedEffect, RoomCameraWidgetSelectedEffect } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import ReactSlider from 'react-slider';
 import { GetRoomCameraWidgetManager } from '../../../../../../api';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../../../layout';
 import { LocalizeText } from '../../../../../../utils/LocalizeText';
@@ -57,7 +58,7 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
         return (selectedEffects[getCurrentEffectIndex] || null);
     }, [ selectedEffectName, getCurrentEffectIndex, selectedEffects ]);
 
-    const setCurrentEffectAlpha = useCallback((alpha: number) =>
+    const setSelectedEffectAlpha = useCallback((alpha: number) =>
     {
         const index = getCurrentEffectIndex;
 
@@ -90,7 +91,7 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
                 onCancel();
                 return;
             case 'checkout':
-                onCheckout();
+                onCheckout(getCurrentPictureUrl);
                 return;
             case 'change_tab':
                 setCurrentTab(String(effectName));
@@ -140,7 +141,7 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
                 setIsZoomed(!isZoomed);
                 return;
         }
-    }, [ isZoomed, availableEffects, getSelectedEffectIndex, selectedEffectName, onCancel, onCheckout, onClose, setIsZoomed, setSelectedEffects ]);
+    }, [ isZoomed, availableEffects, selectedEffectName, getCurrentPictureUrl, getSelectedEffectIndex, onCancel, onCheckout, onClose, setIsZoomed, setSelectedEffects ]);
 
     useEffect(() =>
     {
@@ -172,6 +173,35 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
                         <div className="picture-preview">
                             <img alt="" src={ getCurrentPictureUrl } />
                         </div>
+                        { selectedEffectName &&
+                            <div className="w-100 p-2 d-flex flex-column justify-content-center slider">
+                                <div className="w-100 text-center">{ LocalizeText('camera.effect.name.' + selectedEffectName) }</div>
+                                <ReactSlider
+                                    className={ 'nitro-slider' }
+                                    min={ 0 }
+                                    max={ 1 }
+                                    step={ 0.01 }
+                                    value={ getCurrentEffect.alpha }
+                                    onChange={ event => setSelectedEffectAlpha(event) }
+                                    renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
+                            </div> }
+                        <div className="d-flex justify-content-between mt-2">
+                            <div className="btn-group">
+                                <button className="btn btn-primary" onClick={ event => processAction('clear_effects') }>
+                                    <i className="fas fa-trash"></i>
+                                </button>
+                                <button className="btn btn-primary" onClick={ event => processAction('download') }>
+                                    <i className="fas fa-save"></i>
+                                </button>
+                                <button className="btn btn-primary" onClick={ event => processAction('zoom') }>
+                                    <i className={ `fas fa-search-${ isZoomed ? 'minus': 'plus' }` } />
+                                </button>
+                            </div>
+                            <div className="d-flex justify-content-end">
+                                <button className="btn btn-primary me-2" onClick={ event => processAction('cancel') }>{ LocalizeText('generic.cancel') }</button>
+                                <button className="btn btn-success" onClick={ event => processAction('checkout') }>{ LocalizeText('camera.preview.button.text') }</button>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </NitroCardContentView>

src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.types.ts

@@ -8,7 +8,7 @@ export interface CameraWidgetEditorViewProps
     myLevel: number;
     onClose: () => void;
     onCancel: () => void;
-    onCheckout: () => void;
+    onCheckout: (pictureUrl: string) => void;
 }
 
 export class CameraWidgetEditorTabs