diff --git a/public/configuration.json b/public/configuration.json index 6854994a..07875190 100644 --- a/public/configuration.json +++ b/public/configuration.json @@ -425,222 +425,242 @@ "name":"shadow_multiply_02", "colorMatrix": [], "minLevel": 0, + "blendMode": 2, "enabled": true }, { "name":"color_1", "colorMatrix": [0.393, 0.769, 0.189, 0, 0, 0.349, 0.686, 0.168, 0, 0, 0.272, 0.534, 0.131, 0, 0, 0, 0, 0, 1, 0], - "minlevel": 1, + "minLevel": 1, "enabled": true }, { "name":"hue_bright_sat", "colorMatrix": [1, 0.6, 0.2, 0, -50, 0.2, 1, 0.6, 0, -50, 0.6, 0.2, 1, 0, -50, 0, 0, 0, 1, 0], - "minlevel": 1, + "minLevel": 1, "enabled": true }, { "name":"hearts_hardlight_02", "colorMatrix": [], - "minlevel": 1, + "minLevel": 1, + "blendMode": 9, "enabled": true }, { "name":"texture_overlay", "colorMatrix": [], - "minlevel": 1, + "minLevel": 1, + "blendMode": 4, "enabled": true }, { "name":"pinky_nrm", "colorMatrix": [], - "minlevel": 1, + "minLevel": 1, + "blendMode": 0, "enabled": true }, { "name":"color_2", "colorMatrix": [0.333, 0.333, 0.333, 0, 0, 0.333, 0.333, 0.333, 0, 0, 0.333, 0.333, 0.333, 0, 0, 0, 0, 0, 1, 0], - "minlevel": 2, + "minLevel": 2, "enabled": true }, { "name":"night_vision", "colorMatrix": [0, 0, 0, 0, 0, 0, 1.1, 0, 0, -50, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], - "minlevel": 2, + "minLevel": 2, "enabled": true }, { "name":"stars_hardlight_02", "colorMatrix": [], - "minlevel": 2, + "minLevel": 2, + "blendMode": 9, "enabled": true }, { "name":"coffee_mpl", "colorMatrix": [], - "minlevel": 2, + "minLevel": 2, + "blendMode": 2, "enabled": true }, { "name":"security_hardlight", "colorMatrix": [], - "minlevel": 3, + "minLevel": 3, + "blendMode": 9, "enabled": true }, { "name":"bluemood_mpl", "colorMatrix": [], - "minlevel": 3, + "minLevel": 3, + "blendMode": 2, "enabled": true }, { "name":"rusty_mpl", "colorMatrix": [], - "minlevel": 3, + "minLevel": 3, + "blendMode": 2, "enabled": true }, { "name":"decr_conrast", "colorMatrix": [0.5, 0, 0, 0, 50, 0, 0.5, 0, 0, 50, 0, 0, 0.5, 0, 50, 0, 0, 0, 1, 0], - "minlevel": 4, + "minLevel": 4, "enabled": true }, { "name":"green_2", "colorMatrix": [0.5, 0.5, 0.5, 0, 0, 0.5, 0.5, 0.5, 0, 90, 0.5, 0.5, 0.5, 0, 0, 0, 0, 0, 1, 0], - "minlevel": 4, + "minLevel": 4, "enabled": true }, { "name":"alien_hrd", "colorMatrix": [], - "minlevel": 4, + "minLevel": 4, + "blendMode": 9, "enabled": true }, { "name":"color_3", "colorMatrix": [0.609, 0.609, 0.082, 0, 0, 0.309, 0.609, 0.082, 0, 0, 0.309, 0.609, 0.082, 0, 0, 0, 0, 0, 1, 0], - "minlevel": 5, + "minLevel": 5, "enabled": true }, { "name":"color_4", "colorMatrix": [0.8, -0.8, 1, 0, 70, 0.8, -0.8, 1, 0, 70, 0.8, -0.8, 1, 0, 70, 0, 0, 0, 1, 0], - "minlevel": 5, + "minLevel": 5, "enabled": true }, { "name":"toxic_hrd", "colorMatrix": [], - "minlevel": 5, + "minLevel": 5, + "blendMode": 9, "enabled": true }, { "name":"hypersaturated", "colorMatrix": [2, -1, 0, 0, 0, -1, 2, 0, 0, 0, 0, -1, 2, 0, 0, 0, 0, 0, 1, 0], - "minlevel": 6, + "minLevel": 6, "enabled": true }, { "name":"Yellow", "colorMatrix": [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], - "minlevel": 6, + "minLevel": 6, "enabled": true }, { "name":"misty_hrd", "colorMatrix": [], - "minlevel": 6, + "minLevel": 6, + "blendMode": 9, "enabled": true }, { "name":"x_ray", "colorMatrix": [0, 1.2, 0, 0, -100, 0, 2, 0, 0, -120, 0, 2, 0, 0, -120, 0, 0, 0, 1, 0], - "minlevel": 7, + "minLevel": 7, "enabled": true }, { "name":"decrease_saturation", "colorMatrix": [0.7, 0.2, 0.2, 0, 0, 0.2, 0.7, 0.2, 0, 0, 0.2, 0.2, 0.7, 0, 0, 0, 0, 0, 1, 0], - "minlevel": 7, + "minLevel": 7, "enabled": true }, { "name":"drops_mpl", "colorMatrix": [], - "minlevel": 8, + "minLevel": 8, + "blendMode": 2, "enabled": true }, { "name":"shiny_hrd", "colorMatrix": [], - "minlevel": 9, + "minLevel": 9, + "blendMode": 9, "enabled": true }, { "name":"glitter_hrd", "colorMatrix": [], - "minlevel": 10, + "minLevel": 10, + "blendMode": 9, "enabled": true }, { "name":"frame_gold", "colorMatrix": [], - "minlevel": 10, + "minLevel": 10, + "blendMode": 0, "enabled": true }, { "name":"frame_gray_4", "colorMatrix": [], - "minlevel": 10, + "minLevel": 10, + "blendMode": 0, "enabled": true }, { "name":"frame_black_2", "colorMatrix": [], - "minlevel": 10, + "minLevel": 10, + "blendMode": 0, "enabled": true }, { "name":"frame_wood_2", "colorMatrix": [], - "minlevel": 10, + "minLevel": 10, + "blendMode": 0, "enabled": true }, { "name":"finger_nrm", "colorMatrix": [], - "minlevel": 10, + "minLevel": 10, + "blendMode": 0, "enabled": true }, { "name":"color_5", "colorMatrix": [3.309, 0.609, 1.082, 0.2, 0, 0.309, 0.609, 0.082, 0, 0, 1.309, 0.609, 0.082, 0, 0, 0, 0, 0, 1, 0], - "minlevel": 10, + "minLevel": 10, "enabled": true }, { "name":"black_white_negative", "colorMatrix": [-0.5, -0.5, -0.5, 0, 0, -0.5, -0.5, -0.5, 0, 0, -0.5, -0.5, -0.5, 0, 0, 0, 0, 0, 1, 0], - "minlevel": 10, + "minLevel": 10, "enabled": true }, { "name":"blue", "colorMatrix": [0.5, 0.5, 0.5, 0, -255, 0.5, 0.5, 0.5, 0, -170, 0.5, 0.5, 0.5, 0, 0, 0, 0, 0, 1, 0], - "minlevel": 10, + "minLevel": 10, "enabled": true }, { "name":"red", "colorMatrix": [0.5, 0.5, 0.5, 0, 0, 0.5, 0.5, 0.5, 0, -170, 0.5, 0.5, 0.5, 0, -170, 0, 0, 0, 1, 0], - "minlevel": 10, + "minLevel": 10, "enabled": true }, { "name":"green", "colorMatrix": [0.5, 0.5, 0.5, 0, -170, 0.5, 0.5, 0.5, 0, 0, 0.5, 0.5, 0.5, 0, -170, 0, 0, 0, 1, 0], - "minlevel": 10, + "minLevel": 10, "enabled": true } ], diff --git a/src/views/room/widgets/camera/CameraWidgetView.scss b/src/views/room/widgets/camera/CameraWidgetView.scss index 337ae3d0..b019f057 100644 --- a/src/views/room/widgets/camera/CameraWidgetView.scss +++ b/src/views/room/widgets/camera/CameraWidgetView.scss @@ -60,11 +60,21 @@ width: 600px; .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; @@ -73,8 +83,8 @@ .effect-thumbnail-image { img { - width: 56px; - height: 56px; + width: 40px; + height: 40px; } } } @@ -88,5 +98,10 @@ background-size: 636px; background-position: center; } + + .slider { + background: linear-gradient(180deg, transparent, black); + text-shadow: 1px 1px rgba(0, 0, 0, .5); + } } } diff --git a/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx b/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx index 47ae9b5b..9b447110 100644 --- a/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx +++ b/src/views/room/widgets/camera/views/editor/CameraWidgetEditorView.tsx @@ -16,7 +16,7 @@ export const CameraWidgetEditorView: FC = props => const { availableEffects = null, onCloseClick = null, onCancelClick = null } = props; const TABS: string[] = [ CameraWidgetEditorTabs.COLORMATRIX, CameraWidgetEditorTabs.COMPOSITE ]; - const MY_LEVEL: number = 0; + const MY_LEVEL: number = 6; const cameraWidgetContext = useCameraWidgetContext(); @@ -31,11 +31,7 @@ export const CameraWidgetEditorView: FC = props => for(const effect of availableEffects) { - let alpha = 126; - - if(effect.colorMatrix) alpha = 0.5; - - thumbnails.push({name: effect.name, image: GetRoomCameraWidgetManager().applyEffects(cameraWidgetContext.cameraRoll[cameraWidgetContext.selectedPictureIndex], [ new RoomCameraWidgetSelectedEffect(effect, alpha) ])}); + thumbnails.push({name: effect.name, image: GetRoomCameraWidgetManager().applyEffects(cameraWidgetContext.cameraRoll[cameraWidgetContext.selectedPictureIndex], [ new RoomCameraWidgetSelectedEffect(effect, 1) ], false)}); } setEffectsThumbnails(thumbnails); @@ -64,36 +60,30 @@ export const CameraWidgetEditorView: FC = props => const getCurrentPicture = useCallback(() => { - return GetRoomCameraWidgetManager().applyEffects(cameraWidgetContext.cameraRoll[cameraWidgetContext.selectedPictureIndex], cameraWidgetContext.selectedEffects); - }, [ cameraWidgetContext.selectedEffects ]); + return GetRoomCameraWidgetManager().applyEffects(cameraWidgetContext.cameraRoll[cameraWidgetContext.selectedPictureIndex], cameraWidgetContext.selectedEffects, isZoomed); + }, [ cameraWidgetContext.selectedEffects, isZoomed ]); - const getEffectRangeConfig = useCallback(() => + const getCurrentEffectAlpha = useCallback(() => { - if(!selectedEffectName) return [0, 0]; + if(!selectedEffectName) return 0; const selectedEffect = cameraWidgetContext.selectedEffects.find(effect => effect.effect.name === selectedEffectName); - if(!selectedEffect) return [0, 0]; + if(!selectedEffect) return 0; - let isColormatrix = selectedEffect.effect.colorMatrix != null; - - let max = 255; - let step = 1; - - if(isColormatrix) - { - max = 1; - step = 0.01; - } - - return [max, step, selectedEffect.alpha]; + return selectedEffect.alpha; }, [ selectedEffectName, cameraWidgetContext.selectedEffects ]); + const getEffectIndex = useCallback((effectName) => + { + return cameraWidgetContext.selectedEffects.findIndex(effect => effect.effect.name === effectName); + }, [ cameraWidgetContext.selectedEffects ]) + const setSelectedEffectAlpha = useCallback((newAlpha: number) => { if(!selectedEffectName) return; - const selectedEffectIndex = cameraWidgetContext.selectedEffects.findIndex(effect => effect.effect.name === selectedEffectName); + const selectedEffectIndex = getEffectIndex(selectedEffectName); if(selectedEffectIndex === -1) return; @@ -120,39 +110,55 @@ export const CameraWidgetEditorView: FC = props => setCurrentTab(String(value)); return; case 'select_effect': - let existingIndex = -1; - - if(cameraWidgetContext.selectedEffects.length > 0) { - existingIndex = cameraWidgetContext.selectedEffects.findIndex(effect => effect.effect.name === value); + let existingIndex = -1; - /*if(existingIndex > -1) + if(cameraWidgetContext.selectedEffects.length > 0) { + existingIndex = getEffectIndex(value); + } + + let effect = null; + + if(existingIndex === -1) + { + effect = availableEffects.find(effect => effect.name === value); + + if(effect.minLevel > MY_LEVEL) return; + + cameraWidgetContext.setSelectedEffects([...cameraWidgetContext.selectedEffects, new RoomCameraWidgetSelectedEffect(effect, 0.5)]); + } + + if(effect && effect.minLevel > MY_LEVEL) return; + + if(selectedEffectName !== value) + { + setSelectedEffectName(value); + } + else + { + setSelectedEffectName(null); + } + } + return; + case 'remove_effect': + { + const existingIndex = getEffectIndex(value); + + if(existingIndex > -1) + { + const effect = cameraWidgetContext.selectedEffects[existingIndex]; + + if(effect.effect.name === selectedEffectName) + { + setSelectedEffectName(null); + } + const clone = Array.from(cameraWidgetContext.selectedEffects); clone.splice(existingIndex, 1); cameraWidgetContext.setSelectedEffects(clone); - }*/ - } - - if(existingIndex === -1) - { - const effect = availableEffects.find(effect => effect.name === value); - - let alpha = 126; - - if(effect.colorMatrix) alpha = 0.5; - - cameraWidgetContext.setSelectedEffects([...cameraWidgetContext.selectedEffects, new RoomCameraWidgetSelectedEffect(effect, alpha)]); - } - - if(selectedEffectName !== value) - { - setSelectedEffectName(value); - } - else - { - setSelectedEffectName(null); + } } return; case 'clear_effects': @@ -185,11 +191,16 @@ export const CameraWidgetEditorView: FC = props => { getEffectList().map(effect => { return ( -
processAction('select_effect', effect.name) }> -
-
- -
+
+ { getEffectIndex(effect.name) > -1 && } +
processAction('select_effect', effect.name) } className={"effect-thumbnail cursor-pointer position-relative border border-2 rounded d-flex flex-column justify-content-center align-items-center py-1" + classNames({' active': selectedEffectName === effect.name})}> + { effect.minLevel <= MY_LEVEL &&
+ +
} + { effect.minLevel > MY_LEVEL &&
+
+
{ effect.minLevel }
+
}
); @@ -201,10 +212,10 @@ export const CameraWidgetEditorView: FC = props =>
-
- { selectedEffectName &&
-
{ LocalizeText('camera.effect.name.' + selectedEffectName) + ' - ' + getEffectRangeConfig()[2] }
- setSelectedEffectAlpha(Number(event.target.value)) } className="form-range w-100" /> +
+ { selectedEffectName &&
+
{ LocalizeText('camera.effect.name.' + selectedEffectName) + ' - ' + getCurrentEffectAlpha() }
+ setSelectedEffectAlpha(Number(event.target.value)) } className="form-range w-100" />
}
diff --git a/src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.tsx b/src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.tsx index fa025081..e072bbdd 100644 --- a/src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.tsx +++ b/src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.tsx @@ -37,7 +37,7 @@ export const InfoStandWidgetFurniView: FC = props if(furniData.roomControllerLevel >= RoomControllerLevel.MODERATOR) godMode = true; } - if((((furniData.usagePolicy === RoomWidgetFurniInfoUsagePolicyEnum._Str_18353) || ((furniData.usagePolicy === RoomWidgetFurniInfoUsagePolicyEnum._Str_18194) && isValidController)) || ((furniData.extraParam === RoomWidgetEnumItemExtradataParameter.JUKEBOX) && isValidController)) || ((furniData.extraParam === RoomWidgetEnumItemExtradataParameter.USABLE_PRODUCT) && isValidController)) setCanUse(true); + if((((furniData.usagePolicy === RoomWidgetFurniInfoUsagePolicyEnum.EVERYBODY) || ((furniData.usagePolicy === RoomWidgetFurniInfoUsagePolicyEnum.CONTROLLER) && isValidController)) || ((furniData.extraParam === RoomWidgetEnumItemExtradataParameter.JUKEBOX) && isValidController)) || ((furniData.extraParam === RoomWidgetEnumItemExtradataParameter.USABLE_PRODUCT) && isValidController)) setCanUse(true); if(furniData.extraParam) {