nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-26 23:50:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

More camera updates

Browse Source
This commit is contained in:
Bill 2021-08-07 22:04:19 -04:00
parent a3350b8b54
commit 29b62081ad
6 changed files with 62 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/room/widgets/camera/CameraWidgetView.scss
View File

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

14
src/views/room/widgets/camera/CameraWidgetView.tsx
View File

@ -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_CHECKOUT) && <CameraWidgetCheckoutView onCloseClick={ () => processAction('close') } onCancelClick={ () => processAction('editor_cancel') } price={ price }></CameraWidgetCheckoutView> }
{ (mode === MODE_EDITOR) && <CameraWidgetEditorView picture={ cameraRoll[selectedPictureIndex] } myLevel={ myLevel } onClose={ () => processAction('close') } onCancel={ () => processAction('editor_cancel') } onCheckout={ checkoutPictureUrl } availableEffects={ availableEffects } /> }
{ (mode === MODE_CHECKOUT) && <CameraWidgetCheckoutView pictureUrl={ savedPictureUrl } onCloseClick={ () => processAction('close') } onCancelClick={ () => processAction('editor_cancel') } price={ price }></CameraWidgetCheckoutView> }
</CameraWidgetContextProvider>
);
}

25
src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.tsx
View File

@ -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 { GetRoomCameraWidgetManager } from '../../../../../../api/nitro/camera/GetRoomCameraWidgetManager';
import { FC, useCallback, useEffect, useState } from 'react';
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>

1
src/views/room/widgets/camera/views/checkout/CameraWidgetCheckoutView.types.ts
View File

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

36
src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx
View File

@ -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>

2
src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.types.ts
View File

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