fixed camera reel thumbnail scroll masking

Author: lorux0

unity-renderer/Assets/DCLFeatures/CameraReel/CameraReel.asmdef

@@ -28,7 +28,8 @@
         "GUID:6426fc92c49cbb342916620a1009be8d",
         "GUID:fd6a19eb8dfe417a84a27e537222d98d",
         "GUID:4720e174f2805c74bb7aa94cc8bb5bf8",
-        "GUID:99cea83ca76dcd846abed7e61a8c90bd"
+        "GUID:99cea83ca76dcd846abed7e61a8c90bd",
+        "GUID:6e9be8e4a71701b48b60c8881e27a0e3"
     ],
     "includePlatforms": [],
     "excludePlatforms": [],

unity-renderer/Assets/DCLFeatures/CameraReel/Gallery/Prefabs/GalleryView.prefab

@@ -645,6 +645,7 @@ MonoBehaviour:
   showMoreButtonPanel: {fileID: 4290208090933550867}
   canvas: {fileID: 2452549162064602847}
   emptyStateContainer: {fileID: 8552701980970885336}
+  scrollMaskTransform: {fileID: 8598900832005062844}
   monthHeaderPrefab: {fileID: 816142868648288106, guid: 4631d5288231697489b884df705df08e,
     type: 3}
   monthGridContainerPrefab: {fileID: 6408376535620168257, guid: ec6e563cf5a659e4c8d81d46d9a8eec2,

unity-renderer/Assets/DCLFeatures/CameraReel/Gallery/Prefabs/ScreenshotThumbnail.prefab

@@ -843,6 +843,7 @@ GameObject:
   - component: {fileID: 2566079238092881621}
   - component: {fileID: 8156839644814245974}
   - component: {fileID: 6465448134092813593}
+  - component: {fileID: 6784646814467949724}
   m_Layer: 5
   m_Name: ScreenshotThumbnail
   m_TagString: Untagged
@@ -1055,6 +1056,20 @@ MonoBehaviour:
   m_BlockingMask:
     serializedVersion: 2
     m_Bits: 4294967295
+--- !u!114 &6784646814467949724
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 3698480427522893417}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: 02d167b0ab684984b0ac522278bcd459, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  maskRectTransform: {fileID: 0}
+  offset: {x: 0, y: -70}
 --- !u!1 &4314700736003648970
 GameObject:
   m_ObjectHideFlags: 0

unity-renderer/Assets/DCLFeatures/CameraReel/Gallery/Scripts/CameraReelGalleryView.cs

@@ -1,4 +1,5 @@
 using Cysharp.Threading.Tasks;
+using DCL.Components.UI;
 using DCL.Helpers;
 using DCL.Tasks;
 using DCLServices.CameraReelService;
@@ -25,6 +26,7 @@ public class CameraReelGalleryView : MonoBehaviour
         [SerializeField] private RectTransform showMoreButtonPanel;
         [SerializeField] private Canvas canvas;
         [SerializeField] private GameObject emptyStateContainer;
+        [SerializeField] private RectTransform scrollMaskTransform;
 
         [Header("RESOURCES")]
         [SerializeField] private GameObject monthHeaderPrefab;
@@ -95,6 +97,13 @@ public void AddScreenshotThumbnail(CameraReelResponse reel, bool setAsFirst)
             thumbnail.Show(reel);
             thumbnail.OnClicked += () => ScreenshotThumbnailClicked?.Invoke(reel);
 
+            // The thumbnail has an internal Canvas to be able to override the Z sorting when playing animations
+            // but this messes up the UI masking
+            // As a workaround, a manual masking is applied to the thumbnail given by the current's mask rectangle
+            MaskCanvasRenderer masking = thumbnail.GetComponent<MaskCanvasRenderer>();
+            if (masking)
+                masking.MaskRectTransform = scrollMaskTransform;
+
             if (setAsFirst)
                 thumbnail.transform.SetAsFirstSibling();
 

unity-renderer/Assets/Scripts/MainScripts/DCL/Components/UI/MaskCanvasRenderer.cs

@@ -0,0 +1,62 @@
+using System.Linq;
+using UnityEngine;
+
+namespace DCL.Components.UI
+{
+    [RequireComponent(typeof(CanvasRenderer))]
+    public class MaskCanvasRenderer : MonoBehaviour
+    {
+        [SerializeField] private RectTransform maskRectTransform;
+        [SerializeField] private Vector2 offset;
+
+        public RectTransform MaskRectTransform
+        {
+            get => maskRectTransform;
+
+            set
+            {
+                maskRectTransform = value;
+
+                if (enabled)
+                    SetTargetClippingRect();
+            }
+        }
+
+        private CanvasRenderer canvasRenderer;
+        private Canvas rootCanvas;
+
+        private void Awake()
+        {
+            canvasRenderer = GetComponent<CanvasRenderer>();
+            rootCanvas = transform.GetComponentsInParent<Canvas>().FirstOrDefault(canvas => canvas.isRootCanvas);
+        }
+
+        private void OnEnable()
+        {
+            SetTargetClippingRect();
+        }
+
+        private void OnDisable()
+        {
+            canvasRenderer.DisableRectClipping();
+        }
+
+        private void OnRectTransformDimensionsChange()
+        {
+            SetTargetClippingRect();
+        }
+
+        private void SetTargetClippingRect()
+        {
+            if (rootCanvas == null) return;
+            if (canvasRenderer == null) return;
+            if (maskRectTransform == null) return;
+
+            Rect rect = maskRectTransform.rect;
+            // Get local position of maskRect as if it was direct child of root canvas, then offset mask rect by that amount
+            rect.center += (Vector2)rootCanvas.transform.InverseTransformPoint(maskRectTransform.position);
+            rect.center += offset;
+            canvasRenderer.EnableRectClipping(rect);
+        }
+    }
+}