Room Widget Camera updates

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
         }
     ],

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;
+                    width: 40px;
-                    height: 56px;
+                    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);
+        }
     }
 }

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

@@ -16,7 +16,7 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = 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<CameraWidgetEditorViewProps> = props =>
 
         for(const effect of availableEffects)
         {
-            let alpha = 126;
+            thumbnails.push({name: effect.name, image: GetRoomCameraWidgetManager().applyEffects(cameraWidgetContext.cameraRoll[cameraWidgetContext.selectedPictureIndex], [ new RoomCameraWidgetSelectedEffect(effect, 1) ], false)});
-
-            if(effect.colorMatrix) alpha = 0.5;
-
-            thumbnails.push({name: effect.name, image: GetRoomCameraWidgetManager().applyEffects(cameraWidgetContext.cameraRoll[cameraWidgetContext.selectedPictureIndex], [ new RoomCameraWidgetSelectedEffect(effect, alpha) ])});
         }
 
         setEffectsThumbnails(thumbnails);
@@ -64,36 +60,30 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
 
     const getCurrentPicture = useCallback(() =>
     {
-        return GetRoomCameraWidgetManager().applyEffects(cameraWidgetContext.cameraRoll[cameraWidgetContext.selectedPictureIndex], cameraWidgetContext.selectedEffects);
+        return GetRoomCameraWidgetManager().applyEffects(cameraWidgetContext.cameraRoll[cameraWidgetContext.selectedPictureIndex], cameraWidgetContext.selectedEffects, isZoomed);
-    }, [ cameraWidgetContext.selectedEffects ]);
+    }, [ 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;
+        return selectedEffect.alpha;
-
-        let max = 255;
-        let step = 1;
-
-        if(isColormatrix)
-        {
-            max = 1;
-            step = 0.01;
-        }
-
-        return [max, step, 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<CameraWidgetEditorViewProps> = 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<CameraWidgetEditorViewProps> = props =>
                                 { getEffectList().map(effect =>
                                     {
                                         return (
-                                            <div key={ effect.name } className="col mb-3" onClick={ event => processAction('select_effect', effect.name) }>
+                                            <div key={ effect.name } className="col mb-3 position-relative">
-                                                <div title={ LocalizeText('camera.effect.name.' + 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">
+                                                { getEffectIndex(effect.name) > -1 && <button className="btn btn-danger btn-sm p-0 position-absolute btn-remove-effect" onClick={ event => processAction('remove_effect', effect.name) }><i className="fas fa-times"></i></button> }
-                                                    <div className="effect-thumbnail-image rounded">
+                                                <div title={ effect.minLevel <= MY_LEVEL ? LocalizeText('camera.effect.name.' + effect.name) : LocalizeText('camera.effect.required.level') + ' ' + effect.minLevel } onClick={ event => 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})}>
-                                                        <img alt="" className="rounded" src={ getEffectThumbnail(effect.name) } />
+                                                    { effect.minLevel <= MY_LEVEL && <div className="effect-thumbnail-image border">
-                                                    </div>
+                                                        <img alt="" src={ getEffectThumbnail(effect.name) } />
+                                                    </div> }
+                                                    { effect.minLevel > MY_LEVEL && <div className="text-center text-black">
+                                                        <div><i className="fas fa-lock"></i></div>
+                                                        <div className="fw-bold">{ effect.minLevel }</div>
+                                                    </div> }
                                                 </div>
                                             </div>
                                         );
@@ -201,10 +212,10 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
                 <div className="w-100">
                     <NitroCardTabsView></NitroCardTabsView>
                     <NitroCardContentView>
-                        <div className={ 'd-flex align-items-end picture-preview' + classNames({ ' zoomed': isZoomed }) } style={ { backgroundImage: 'url(' + getCurrentPicture().src + ')' } }>
+                        <div className="d-flex align-items-end picture-preview" style={ { backgroundImage: 'url(' + getCurrentPicture().src + ')' } }>
-                            { selectedEffectName && <div className="w-100 p-2 d-flex flex-column justify-content-center bg-black">
+                            { 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) + ' - ' + getEffectRangeConfig()[2] }</div>
+                                <div className="w-100 text-center">{ LocalizeText('camera.effect.name.' + selectedEffectName) + ' - ' + getCurrentEffectAlpha() }</div>
-                                <input type="range" min="0" max={ getEffectRangeConfig()[0] } step={ getEffectRangeConfig()[1] } value={ getEffectRangeConfig()[2] } onChange={ event => setSelectedEffectAlpha(Number(event.target.value)) } className="form-range w-100" />
+                                <input type="range" min="0" max="1" step="0.01" value={ getCurrentEffectAlpha() } onChange={ event => setSelectedEffectAlpha(Number(event.target.value)) } className="form-range w-100" />
                             </div> }
                         </div>
                         <div className="d-flex justify-content-between mt-2">

src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.tsx

@@ -37,7 +37,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = 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)
         {