diff --git a/src/App.scss b/src/App.scss index 65597415..21d61957 100644 --- a/src/App.scss +++ b/src/App.scss @@ -62,6 +62,11 @@ $messenger-height: 370px; $marketplace-post-offer-width: 430px; $marketplace-post-offer-height: 250px; +$camera-editor-width: 600px; +$camera-editor-height: 500px; + +$camera-checkout-width: 350px; + $room-info-width: 325px; .nitro-app { diff --git a/src/views/camera/CameraWidgetView.scss b/src/components/camera/CameraWidgetView.scss similarity index 55% rename from src/views/camera/CameraWidgetView.scss rename to src/components/camera/CameraWidgetView.scss index 312181bb..6ad9b68a 100644 --- a/src/views/camera/CameraWidgetView.scss +++ b/src/components/camera/CameraWidgetView.scss @@ -85,89 +85,41 @@ } .nitro-camera-editor { - width: 600px; - - .content-area { - min-height: 441px; - height: 441px; - resize: vertical; - - .picture-preview { - width: 320px; - height: 320px; + width: $camera-editor-width; + height: $camera-editor-height; - .slider { - background: linear-gradient(180deg, transparent, black); - text-shadow: 1px 1px rgba(0, 0, 0, .5); - } + .picture-preview { + width: 320px; + height: 320px; + } + + .layout-grid-item { + height: 60px !important; + max-height: 60px !important; + } + + .effect-thumbnail-image { + + img { + width: 50px; + height: 50px; + image-rendering: auto; + object-fit: contain; } } - .effect-grid { - - .grid-item-container { - height: 60px !important; - max-height: 60px !important; - - .grid-item { - overflow: unset; - - .remove-effect { - position: absolute; - top: -1px; - right: -1px; - padding: 2px; - font-size: 11px; - line-height: 11px; - min-height: unset; - } - - .effect-thumbnail-image { - - img { - width: 40px; - height: 40px; - image-rendering: auto; - } - } - } - } - } - - .effects { - height: 363px; - min-height: 363px; - max-height: 363px; - - .btn-remove-effect { - z-index: 10; - min-height: 0px; - border-radius: 100px; - width: 20px; - } - - .effect-thumbnail { - border-color: $grid-border-color !important; - background-color: $grid-bg-color; - height: 60px; - - &.active { - border-color: $grid-active-border-color !important; - background-color: $grid-active-bg-color; - } - - .effect-thumbnail-image { - img { - width: 40px; - height: 40px; - } - } - } + .remove-effect { + position: absolute; + top: 1px; + right: 1px; + padding: 2px; + font-size: 10px; + min-height: unset; } } .nitro-camera-checkout { - width: 388px; + width: $camera-checkout-width; .picture-preview { width: 320px; diff --git a/src/views/camera/CameraWidgetView.tsx b/src/components/camera/CameraWidgetView.tsx similarity index 100% rename from src/views/camera/CameraWidgetView.tsx rename to src/components/camera/CameraWidgetView.tsx diff --git a/src/components/camera/common/CameraEditorTabs.ts b/src/components/camera/common/CameraEditorTabs.ts new file mode 100644 index 00000000..6e894e74 --- /dev/null +++ b/src/components/camera/common/CameraEditorTabs.ts @@ -0,0 +1,5 @@ +export class CameraEditorTabs +{ + public static readonly COLORMATRIX: string = 'colormatrix'; + public static readonly COMPOSITE: string = 'composite'; +} diff --git a/src/views/camera/common/CameraPicture.ts b/src/components/camera/common/CameraPicture.ts similarity index 100% rename from src/views/camera/common/CameraPicture.ts rename to src/components/camera/common/CameraPicture.ts diff --git a/src/views/camera/common/CameraPictureThumbnail.ts b/src/components/camera/common/CameraPictureThumbnail.ts similarity index 100% rename from src/views/camera/common/CameraPictureThumbnail.ts rename to src/components/camera/common/CameraPictureThumbnail.ts diff --git a/src/components/camera/context/CameraWidgetContext.tsx b/src/components/camera/context/CameraWidgetContext.tsx new file mode 100644 index 00000000..48009bc5 --- /dev/null +++ b/src/components/camera/context/CameraWidgetContext.tsx @@ -0,0 +1,24 @@ +import { createContext, Dispatch, FC, ProviderProps, SetStateAction, useContext } from 'react'; +import { CameraPicture } from '../common/CameraPicture'; + +export interface ICameraWidgetContext +{ + cameraRoll: CameraPicture[], + setCameraRoll: Dispatch>; + selectedPictureIndex: number, + setSelectedPictureIndex: Dispatch>; +} + +const CameraWidgetContext = createContext({ + cameraRoll: null, + setCameraRoll: null, + selectedPictureIndex: null, + setSelectedPictureIndex: null +}); + +export const CameraWidgetContextProvider: FC> = props => +{ + return { props.children } +} + +export const useCameraWidgetContext = () => useContext(CameraWidgetContext); diff --git a/src/views/camera/views/capture/CameraWidgetCaptureView.tsx b/src/components/camera/views/capture/CameraWidgetCaptureView.tsx similarity index 79% rename from src/views/camera/views/capture/CameraWidgetCaptureView.tsx rename to src/components/camera/views/capture/CameraWidgetCaptureView.tsx index 1c369a78..c0ab5631 100644 --- a/src/views/camera/views/capture/CameraWidgetCaptureView.tsx +++ b/src/components/camera/views/capture/CameraWidgetCaptureView.tsx @@ -1,11 +1,21 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { NitroRectangle, TextureUtils } from '@nitrots/nitro-renderer'; import { FC, useCallback, useRef } from 'react'; import { GetRoomEngine, GetRoomSession, LocalizeText } from '../../../../api'; import { CAMERA_SHUTTER, PlaySound } from '../../../../api/utils/PlaySound'; +import { Column } from '../../../../common/Column'; +import { Flex } from '../../../../common/Flex'; import { DraggableWindow } from '../../../../layout'; +import { NotificationUtilities } from '../../../../views/notification-center/common/NotificationUtilities'; import { CameraPicture } from '../../common/CameraPicture'; import { useCameraWidgetContext } from '../../context/CameraWidgetContext'; -import { CameraWidgetCaptureViewProps } from './CameraWidgetCaptureView.types'; + +export interface CameraWidgetCaptureViewProps +{ + onClose: () => void; + onEdit: () => void; + onDelete: () => void; +} const CAMERA_ROLL_LIMIT: number = 5; @@ -40,7 +50,7 @@ export const CameraWidgetCaptureView: FC = props = if(clone.length >= CAMERA_ROLL_LIMIT) { - alert(LocalizeText('camera.full.body')); + NotificationUtilities.simpleAlert(LocalizeText('camera.full.body')); clone.pop(); } @@ -52,12 +62,12 @@ export const CameraWidgetCaptureView: FC = props = }, [ cameraRoll, selectedPictureIndex, getCameraBounds, setCameraRoll, setSelectedPictureIndex ]); return ( - -
+ + { selectedPicture && }
- +
{ !selectedPicture &&
} { selectedPicture && @@ -72,13 +82,13 @@ export const CameraWidgetCaptureView: FC = props =
{ (cameraRoll.length > 0) && -
+ { cameraRoll.map((picture, index) => { - return setSelectedPictureIndex(index) } />; + return setSelectedPictureIndex(index) } />; }) } -
} -
+ } + ); } diff --git a/src/components/camera/views/checkout/CameraWidgetCheckoutView.tsx b/src/components/camera/views/checkout/CameraWidgetCheckoutView.tsx new file mode 100644 index 00000000..865d1162 --- /dev/null +++ b/src/components/camera/views/checkout/CameraWidgetCheckoutView.tsx @@ -0,0 +1,175 @@ +import { CameraPublishStatusMessageEvent, CameraPurchaseOKMessageEvent, CameraStorageUrlMessageEvent, PublishPhotoMessageComposer, PurchasePhotoMessageComposer } from '@nitrots/nitro-renderer'; +import { FC, useCallback, useEffect, useState } from 'react'; +import { GetConfiguration, GetRoomEngine, LocalizeText } from '../../../../api'; +import { Button } from '../../../../common/Button'; +import { Column } from '../../../../common/Column'; +import { Flex } from '../../../../common/Flex'; +import { LayoutImage } from '../../../../common/layout/LayoutImage'; +import { Text } from '../../../../common/Text'; +import { InventoryEvent } from '../../../../events'; +import { BatchUpdates, CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks'; +import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; +import { CurrencyIcon } from '../../../../views/shared/currency-icon/CurrencyIcon'; + +export interface CameraWidgetCheckoutViewProps +{ + base64Url: string; + onCloseClick: () => void; + onCancelClick: () => void; + price: { credits: number, duckets: number, publishDucketPrice: number }; +} + +export const CameraWidgetCheckoutView: FC = 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 onCameraPurchaseOKMessageEvent = useCallback((event: CameraPurchaseOKMessageEvent) => + { + BatchUpdates(() => + { + setPicturesBought(value => (value + 1)); + setIsWaiting(false); + }); + }, []); + + CreateMessageHook(CameraPurchaseOKMessageEvent, onCameraPurchaseOKMessageEvent); + + const onCameraPublishStatusMessageEvent = useCallback((event: CameraPublishStatusMessageEvent) => + { + const parser = event.getParser(); + + BatchUpdates(() => + { + setPublishUrl(parser.extraDataId); + setPublishCooldown(parser.secondsToWait); + setWasPicturePublished(parser.ok); + setIsWaiting(false); + }); + }, []); + + CreateMessageHook(CameraPublishStatusMessageEvent, onCameraPublishStatusMessageEvent); + + const onCameraStorageUrlMessageEvent = useCallback((event: CameraStorageUrlMessageEvent) => + { + const parser = event.getParser(); + + setPictureUrl(GetConfiguration('camera.url') + '/' + parser.url); + }, []); + + CreateMessageHook(CameraStorageUrlMessageEvent, onCameraStorageUrlMessageEvent); + + const processAction = (type: string, value: string | number = null) => + { + switch(type) + { + case 'close': + onCloseClick(); + return; + case 'buy': + if(isWaiting) return; + + setIsWaiting(true); + SendMessageHook(new PurchasePhotoMessageComposer('')); + return; + case 'publish': + if(isWaiting) return; + + setIsWaiting(true); + SendMessageHook(new PublishPhotoMessageComposer()); + return; + case 'cancel': + onCancelClick(); + return; + } + } + + useEffect(() => + { + if(!base64Url) return; + + GetRoomEngine().saveBase64AsScreenshot(base64Url); + }, [ base64Url ]); + + if(!price) return null; + + return ( + + processAction('close') } /> + + + { (pictureUrl && pictureUrl.length) && + } + { (!pictureUrl || !pictureUrl.length) && + + { LocalizeText('camera.loading') } + } + + + + + { 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 } + dispatchUiEvent(new InventoryEvent(InventoryEvent.SHOW_INVENTORY)) }>{ LocalizeText('camera.open.inventory') } + } + + + + + + + + + { LocalizeText(wasPicturePublished ? 'camera.publish.successful' : 'camera.publish.explanation') } + + + { LocalizeText(wasPicturePublished ? 'camera.publish.success.short.info' : 'camera.publish.detailed.explanation') } + + { 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() ]) }
} + + { !wasPicturePublished && + + + } + + { LocalizeText('camera.warning.disclaimer') } + + + + + + ); +} diff --git a/src/views/camera/views/editor/CameraWidgetEditorView.tsx b/src/components/camera/views/editor/CameraWidgetEditorView.tsx similarity index 64% rename from src/views/camera/views/editor/CameraWidgetEditorView.tsx rename to src/components/camera/views/editor/CameraWidgetEditorView.tsx index ad88301c..a4114232 100644 --- a/src/views/camera/views/editor/CameraWidgetEditorView.tsx +++ b/src/components/camera/views/editor/CameraWidgetEditorView.tsx @@ -1,13 +1,32 @@ -import { IRoomCameraWidgetSelectedEffect, RoomCameraWidgetSelectedEffect } from '@nitrots/nitro-renderer'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { IRoomCameraWidgetEffect, IRoomCameraWidgetSelectedEffect, RoomCameraWidgetSelectedEffect } from '@nitrots/nitro-renderer'; import { FC, useCallback, useEffect, useMemo, useState } from 'react'; import ReactSlider from 'react-slider'; import { GetRoomCameraWidgetManager, LocalizeText } from '../../../../api'; +import { Button } from '../../../../common/Button'; +import { ButtonGroup } from '../../../../common/ButtonGroup'; +import { Column } from '../../../../common/Column'; +import { Flex } from '../../../../common/Flex'; +import { Grid } from '../../../../common/Grid'; +import { LayoutImage } from '../../../../common/layout/LayoutImage'; +import { Text } from '../../../../common/Text'; import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout'; +import { CameraEditorTabs } from '../../common/CameraEditorTabs'; +import { CameraPicture } from '../../common/CameraPicture'; import { CameraPictureThumbnail } from '../../common/CameraPictureThumbnail'; -import { CameraWidgetEditorTabs, CameraWidgetEditorViewProps } from './CameraWidgetEditorView.types'; import { CameraWidgetEffectListView } from './effect-list/CameraWidgetEffectListView'; -const TABS: string[] = [ CameraWidgetEditorTabs.COLORMATRIX, CameraWidgetEditorTabs.COMPOSITE ]; +export interface CameraWidgetEditorViewProps +{ + picture: CameraPicture; + availableEffects: IRoomCameraWidgetEffect[]; + myLevel: number; + onClose: () => void; + onCancel: () => void; + onCheckout: (pictureUrl: string) => void; +} + +const TABS: string[] = [ CameraEditorTabs.COLORMATRIX, CameraEditorTabs.COMPOSITE ]; export const CameraWidgetEditorView: FC = props => { @@ -30,7 +49,7 @@ export const CameraWidgetEditorView: FC = props => const getEffectList = useCallback(() => { - if(currentTab === CameraWidgetEditorTabs.COLORMATRIX) + if(currentTab === CameraEditorTabs.COLORMATRIX) { return getColorMatrixEffects; } @@ -170,45 +189,49 @@ export const CameraWidgetEditorView: FC = props => }) } -
-
+ + -
-
-
- -
- { selectedEffectName && -
-
{ LocalizeText('camera.effect.name.' + selectedEffectName) }
- setSelectedEffectAlpha(event) } - renderThumb={ (props, state) =>
{ state.valueNow }
} /> -
} -
-
- - - -
-
- - -
-
-
-
+ + + + + { selectedEffectName && + + { LocalizeText('camera.effect.name.' + selectedEffectName) } + setSelectedEffectAlpha(event) } + renderThumb={ (props, state) =>
{ state.valueNow }
} /> + } + + + + + + + + + + + + + + ); diff --git a/src/components/camera/views/editor/effect-list/CameraWidgetEffectListItemView.tsx b/src/components/camera/views/editor/effect-list/CameraWidgetEffectListItemView.tsx new file mode 100644 index 00000000..bcfb7d3d --- /dev/null +++ b/src/components/camera/views/editor/effect-list/CameraWidgetEffectListItemView.tsx @@ -0,0 +1,42 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { IRoomCameraWidgetEffect } from '@nitrots/nitro-renderer'; +import { FC } from 'react'; +import { LocalizeText } from '../../../../../api'; +import { Button } from '../../../../../common/Button'; +import { LayoutGridItem } from '../../../../../common/layout/LayoutGridItem'; +import { Text } from '../../../../../common/Text'; + +export interface CameraWidgetEffectListItemViewProps +{ + effect: IRoomCameraWidgetEffect; + thumbnailUrl: string; + isActive: boolean; + isLocked: boolean; + selectEffect: () => void; + removeEffect: () => void; +} + +export const CameraWidgetEffectListItemView: FC = props => +{ + const { effect = null, thumbnailUrl = null, isActive = false, isLocked = false, selectEffect = null, removeEffect = null } = props; + + return ( + (!isActive && selectEffect()) }> + { isActive && + } + { !isLocked && (thumbnailUrl && thumbnailUrl.length > 0) && +
+ +
} + { isLocked && + +
+ +
+ { effect.minLevel } + } + + ); +} diff --git a/src/views/camera/views/editor/effect-list/CameraWidgetEffectListView.tsx b/src/components/camera/views/editor/effect-list/CameraWidgetEffectListView.tsx similarity index 59% rename from src/views/camera/views/editor/effect-list/CameraWidgetEffectListView.tsx rename to src/components/camera/views/editor/effect-list/CameraWidgetEffectListView.tsx index fb509702..b9349aac 100644 --- a/src/views/camera/views/editor/effect-list/CameraWidgetEffectListView.tsx +++ b/src/components/camera/views/editor/effect-list/CameraWidgetEffectListView.tsx @@ -1,14 +1,24 @@ +import { IRoomCameraWidgetEffect, IRoomCameraWidgetSelectedEffect } from '@nitrots/nitro-renderer'; import { FC } from 'react'; -import { NitroCardGridView } from '../../../../../layout'; -import { CameraWidgetEffectListItemView } from '../effect-list-item/CameraWidgetEffectListItemView'; -import { CameraWidgetEffectListViewProps } from './CameraWidgetEffectListView.types'; +import { Grid } from '../../../../../common/Grid'; +import { CameraPictureThumbnail } from '../../../common/CameraPictureThumbnail'; +import { CameraWidgetEffectListItemView } from './CameraWidgetEffectListItemView'; + +export interface CameraWidgetEffectListViewProps +{ + myLevel: number; + selectedEffects: IRoomCameraWidgetSelectedEffect[]; + effects: IRoomCameraWidgetEffect[]; + thumbnails: CameraPictureThumbnail[]; + processAction: (type: string, name: string) => void; +} export const CameraWidgetEffectListView: FC = props => { const { myLevel = 0, selectedEffects = [], effects = [], thumbnails = [], processAction = null } = props; return ( - + { effects && (effects.length > 0) && effects.map((effect, index) => { const thumbnailUrl = (thumbnails.find(thumbnail => (thumbnail.effectName === effect.name))); @@ -16,6 +26,6 @@ export const CameraWidgetEffectListView: FC = p return myLevel) } selectEffect={ () => processAction('select_effect', effect.name) } removeEffect={ () => processAction('remove_effect', effect.name) } /> }) } - + ); } diff --git a/src/components/index.scss b/src/components/index.scss index 83df5b8b..9736d874 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -1,5 +1,6 @@ @import './achievements/AchievementsView'; @import './avatar-editor/AvatarEditorView'; +@import './camera/CameraWidgetView'; @import './catalog/CatalogView'; @import './inventory/InventoryView'; @import './navigator/NavigatorView'; diff --git a/src/views/Styles.scss b/src/views/Styles.scss index dc28033c..db447719 100644 --- a/src/views/Styles.scss +++ b/src/views/Styles.scss @@ -1,5 +1,4 @@ @import "./shared/Shared"; -@import "./camera/CameraWidgetView"; @import "./friends/FriendsView"; @import "./groups/GroupView"; @import "./hotel-view/HotelView"; diff --git a/src/views/camera/context/CameraWidgetContext.tsx b/src/views/camera/context/CameraWidgetContext.tsx deleted file mode 100644 index 16253f22..00000000 --- a/src/views/camera/context/CameraWidgetContext.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { createContext, FC, useContext } from 'react'; -import { CameraWidgetContextProps, ICameraWidgetContext } from './CameraWidgetContext.types'; - -const CameraWidgetContext = createContext({ - cameraRoll: null, - setCameraRoll: null, - selectedPictureIndex: null, - setSelectedPictureIndex: null -}); - -export const CameraWidgetContextProvider: FC = props => -{ - return { props.children } -} - -export const useCameraWidgetContext = () => useContext(CameraWidgetContext); diff --git a/src/views/camera/context/CameraWidgetContext.types.ts b/src/views/camera/context/CameraWidgetContext.types.ts deleted file mode 100644 index 00dba3f0..00000000 --- a/src/views/camera/context/CameraWidgetContext.types.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Dispatch, ProviderProps, SetStateAction } from 'react'; -import { CameraPicture } from '../common/CameraPicture'; - -export interface ICameraWidgetContext -{ - cameraRoll: CameraPicture[], - setCameraRoll: Dispatch>; - selectedPictureIndex: number, - setSelectedPictureIndex: Dispatch>; -} - -export interface CameraWidgetContextProps extends ProviderProps -{} diff --git a/src/views/camera/views/capture/CameraWidgetCaptureView.types.ts b/src/views/camera/views/capture/CameraWidgetCaptureView.types.ts deleted file mode 100644 index 413aed8f..00000000 --- a/src/views/camera/views/capture/CameraWidgetCaptureView.types.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface CameraWidgetCaptureViewProps -{ - onClose: () => void; - onEdit: () => void; - onDelete: () => void; -} diff --git a/src/views/camera/views/checkout/CameraWidgetCheckoutView.tsx b/src/views/camera/views/checkout/CameraWidgetCheckoutView.tsx deleted file mode 100644 index bc05dc5d..00000000 --- a/src/views/camera/views/checkout/CameraWidgetCheckoutView.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import { CameraPublishStatusMessageEvent, CameraPurchaseOKMessageEvent, CameraStorageUrlMessageEvent, PublishPhotoMessageComposer, PurchasePhotoMessageComposer } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useEffect, useState } from 'react'; -import { GetConfiguration, GetRoomEngine, LocalizeText } from '../../../../api'; -import { InventoryEvent } from '../../../../events'; -import { CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks'; -import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; -import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon'; -import { CameraWidgetCheckoutViewProps } from './CameraWidgetCheckoutView.types'; - -export const CameraWidgetCheckoutView: FC = 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); - - useEffect(() => - { - if(!base64Url) return; - - GetRoomEngine().saveBase64AsScreenshot(base64Url); - }, [ base64Url ]); - - const onCameraPurchaseOKMessageEvent = useCallback((event: CameraPurchaseOKMessageEvent) => - { - setPicturesBought(value => (value + 1)); - setIsWaiting(false); - }, []); - - CreateMessageHook(CameraPurchaseOKMessageEvent, onCameraPurchaseOKMessageEvent); - - const onCameraPublishStatusMessageEvent = useCallback((event: CameraPublishStatusMessageEvent) => - { - const parser = event.getParser(); - - setPublishUrl(parser.extraDataId); - setPublishCooldown(parser.secondsToWait); - setWasPicturePublished(parser.ok); - setIsWaiting(false); - }, []); - - 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) - { - case 'close': - onCloseClick(); - return; - case 'buy': - if(isWaiting) return; - - setIsWaiting(true); - SendMessageHook(new PurchasePhotoMessageComposer('')); - return; - case 'publish': - if(isWaiting) return; - - setIsWaiting(true); - SendMessageHook(new PublishPhotoMessageComposer()); - return; - case 'cancel': - onCancelClick(); - return; - } - }, [onCloseClick, isWaiting, onCancelClick]); - - if(!price) return null; - - return ( - - processAction('close') } /> - -
- { !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 } - dispatchUiEvent(new InventoryEvent(InventoryEvent.SHOW_INVENTORY)) }>{ LocalizeText('camera.open.inventory') } -
} -
-
- -
-
-
-
-
{ LocalizeText(wasPicturePublished ? 'camera.publish.successful' : 'camera.publish.explanation') }
-
- { LocalizeText(wasPicturePublished ? 'camera.publish.success.short.info' : 'camera.publish.detailed.explanation') } -
- { 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() ]) }
} -
- { !wasPicturePublished && -
- -
} -
-
{ LocalizeText('camera.warning.disclaimer') }
-
- -
- - - ); -} diff --git a/src/views/camera/views/checkout/CameraWidgetCheckoutView.types.ts b/src/views/camera/views/checkout/CameraWidgetCheckoutView.types.ts deleted file mode 100644 index a4fafb06..00000000 --- a/src/views/camera/views/checkout/CameraWidgetCheckoutView.types.ts +++ /dev/null @@ -1,7 +0,0 @@ -export interface CameraWidgetCheckoutViewProps -{ - base64Url: string; - onCloseClick: () => void; - onCancelClick: () => void; - price: { credits: number, duckets: number, publishDucketPrice: number }; -} diff --git a/src/views/camera/views/editor/CameraWidgetEditorView.types.ts b/src/views/camera/views/editor/CameraWidgetEditorView.types.ts deleted file mode 100644 index 4bd58fbc..00000000 --- a/src/views/camera/views/editor/CameraWidgetEditorView.types.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { IRoomCameraWidgetEffect } from '@nitrots/nitro-renderer'; -import { CameraPicture } from '../../common/CameraPicture'; - -export interface CameraWidgetEditorViewProps -{ - picture: CameraPicture; - availableEffects: IRoomCameraWidgetEffect[]; - myLevel: number; - onClose: () => void; - onCancel: () => void; - onCheckout: (pictureUrl: string) => void; -} - -export class CameraWidgetEditorTabs -{ - public static readonly COLORMATRIX: string = 'colormatrix'; - public static readonly COMPOSITE: string = 'composite'; -} diff --git a/src/views/camera/views/editor/effect-list-item/CameraWidgetEffectListItemView.tsx b/src/views/camera/views/editor/effect-list-item/CameraWidgetEffectListItemView.tsx deleted file mode 100644 index 75e047e8..00000000 --- a/src/views/camera/views/editor/effect-list-item/CameraWidgetEffectListItemView.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { FC } from 'react'; -import { LocalizeText } from '../../../../../api'; -import { NitroCardGridItemView } from '../../../../../layout'; -import { CameraWidgetEffectListItemViewProps } from './CameraWidgetEffectListItemView.types'; - -export const CameraWidgetEffectListItemView: FC = props => -{ - const { effect = null, thumbnailUrl = null, isActive = false, isLocked = false, selectEffect = null, removeEffect = null } = props; - - return ( - (!isActive && selectEffect()) }> - { isActive && - } - { !isLocked && (thumbnailUrl && thumbnailUrl.length > 0) && -
- -
} - { isLocked && -
-
- -
-
{ effect.minLevel }
-
} - - ); -} diff --git a/src/views/camera/views/editor/effect-list-item/CameraWidgetEffectListItemView.types.ts b/src/views/camera/views/editor/effect-list-item/CameraWidgetEffectListItemView.types.ts deleted file mode 100644 index 19028be3..00000000 --- a/src/views/camera/views/editor/effect-list-item/CameraWidgetEffectListItemView.types.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { IRoomCameraWidgetEffect } from '@nitrots/nitro-renderer'; - -export interface CameraWidgetEffectListItemViewProps -{ - effect: IRoomCameraWidgetEffect; - thumbnailUrl: string; - isActive: boolean; - isLocked: boolean; - selectEffect: () => void; - removeEffect: () => void; -} diff --git a/src/views/camera/views/editor/effect-list/CameraWidgetEffectListView.types.ts b/src/views/camera/views/editor/effect-list/CameraWidgetEffectListView.types.ts deleted file mode 100644 index 7bdfccf1..00000000 --- a/src/views/camera/views/editor/effect-list/CameraWidgetEffectListView.types.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { IRoomCameraWidgetEffect, IRoomCameraWidgetSelectedEffect } from '@nitrots/nitro-renderer'; -import { CameraPictureThumbnail } from '../../../common/CameraPictureThumbnail'; - -export interface CameraWidgetEffectListViewProps -{ - myLevel: number; - selectedEffects: IRoomCameraWidgetSelectedEffect[]; - effects: IRoomCameraWidgetEffect[]; - thumbnails: CameraPictureThumbnail[]; - processAction: (type: string, name: string) => void; -} diff --git a/src/views/main/MainView.tsx b/src/views/main/MainView.tsx index 53b50dae..ec281f7e 100644 --- a/src/views/main/MainView.tsx +++ b/src/views/main/MainView.tsx @@ -3,13 +3,13 @@ import { FC, useCallback, useEffect, useState } from 'react'; import { AddEventLinkTracker, GetCommunication, RemoveLinkEventTracker } from '../../api'; import { AchievementsView } from '../../components/achievements/AchievementsView'; import { AvatarEditorView } from '../../components/avatar-editor/AvatarEditorView'; +import { CameraWidgetView } from '../../components/camera/CameraWidgetView'; import { CatalogView } from '../../components/catalog/CatalogView'; import { InventoryView } from '../../components/inventory/InventoryView'; import { NavigatorView } from '../../components/navigator/NavigatorView'; import { ToolbarView } from '../../components/toolbar/ToolbarView'; import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event'; import { TransitionAnimation, TransitionAnimationTypes } from '../../layout'; -import { CameraWidgetView } from '../camera/CameraWidgetView'; import { CampaignView } from '../campaign/CampaignView'; import { ChatHistoryView } from '../chat-history/ChatHistoryView'; import { FloorplanEditorView } from '../floorplan-editor/FloorplanEditorView';