[2] Add pinch to zoom in and out to new media view

Tests/NextcloudSnapshotTests/Extensions/SwiftUIView+Extensions.swift

@@ -9,10 +9,27 @@
 import Foundation
 import SwiftUI
 
+// Custom view modifier to track rotation and call an action
+struct DeviceOrientationViewModifier: ViewModifier {
+    let action: (UIDeviceOrientation) -> Void
+
+    func body(content: Content) -> some View {
+        content
+            .onAppear()
+            .onReceive(NotificationCenter.default.publisher(for: UIDevice.orientationDidChangeNotification)) { _ in
+                action(UIDevice.current.orientation)
+            }
+    }
+}
+
 extension SwiftUI.View {
     func toVC() -> UIViewController {
         let vc = UIHostingController (rootView: self)
         vc.view.frame = UIScreen.main.bounds
         return vc
     }
+
+    func onRotate(perform action: @escaping (UIDeviceOrientation) -> Void) -> some View {
+        self.modifier(DeviceOrientationViewModifier(action: action))
+    }
 }

Tests/NextcloudSnapshotTests/NextcloudSnapshotTests.swift

@@ -21,4 +21,8 @@ final class NextcloudSnapshotTests: XCTestCase {
     func test_CapalitiesView() {
         NCCapabilitiesView_Previews.snapshots.assertSnapshots(as: .imageHEIC)
     }
+
+    func test_MediaView() {
+        NCMediaNew_Previews.snapshots.assertSnapshots(as: .imageHEIC)
+    }
 }

iOSClient/Extensions/Array+Extension.swift

@@ -26,7 +26,6 @@ import Foundation
 
 // https://stackoverflow.com/questions/33861036/unique-objects-inside-a-array-swift/45023247#45023247
 extension Array {
-
     func unique<T: Hashable>(map: ((Element) -> (T))) -> [Element] {
         var set = Set<T>() // the unique list kept in a Set for fast retrieval
         var arrayOrdered = [Element]() // keeping the unique list of elements but ordered
@@ -37,4 +36,10 @@ extension Array {
 
         return arrayOrdered
     }
+
+    func chunked(into size: Int) -> [[Element]] {
+        return stride(from: 0, to: count, by: size).map {
+            Array(self[$0..<Swift.min($0 + size, count)])
+        }
+    }
 }

iOSClient/Extensions/Binding+Extension.swift

@@ -0,0 +1,16 @@
+//
+//  Binding+Extension.swift
+//  Nextcloud
+//
+//  Created by Milen on 20.09.23.
+//  Copyright © 2023 Marino Faggiana. All rights reserved.
+//
+
+import SwiftUI
+
+prefix func ! (value: Binding<Bool>) -> Binding<Bool> {
+    Binding<Bool>(
+        get: { !value.wrappedValue },
+        set: { value.wrappedValue = !$0 }
+    )
+}

iOSClient/Main/Main.storyboard

@@ -1,22 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="21701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="FkP-Lh-8zt">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="22154" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="FkP-Lh-8zt">
     <device id="retina6_1" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21678"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22129"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
-        <!--NCMedia.storyboard-->
-        <scene sceneID="udp-lL-CYh">
-            <objects>
-                <viewControllerPlaceholder storyboardName="NCMedia" referencedIdentifier="NCMedia.storyboard" id="kO6-hz-Gsq" sceneMemberID="viewController">
-                    <navigationItem key="navigationItem" id="3mJ-L2-Cmt"/>
-                </viewControllerPlaceholder>
-                <placeholder placeholderIdentifier="IBFirstResponder" id="6gG-SV-Hvv" userLabel="First Responder" sceneMemberID="firstResponder"/>
-            </objects>
-            <point key="canvasLocation" x="7770" y="899"/>
-        </scene>
         <!--Tab Bar Controller-->
         <scene sceneID="gY3-Ur-rTC">
             <objects>
@@ -34,13 +24,13 @@
                         <segue destination="bSZ-tE-FEj" kind="relationship" relationship="viewControllers" id="qbu-nX-qCk"/>
                         <segue destination="hwM-4d-Afb" kind="relationship" relationship="viewControllers" id="tds-0Q-7Zf"/>
                         <segue destination="Cc7-4O-z6Q" kind="relationship" relationship="viewControllers" id="YKg-LH-tor"/>
-                        <segue destination="Npr-vu-PSD" kind="relationship" relationship="viewControllers" id="XeU-GF-etm"/>
+                        <segue destination="RF7-gD-gsF" kind="relationship" relationship="viewControllers" id="rvt-kL-0eL"/>
                         <segue destination="1Z8-Bx-Dqo" kind="relationship" relationship="viewControllers" id="z6l-ei-IMY"/>
                     </connections>
                 </tabBarController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="d2B-Yg-rp2" userLabel="First Responder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="7071" y="-556"/>
+            <point key="canvasLocation" x="6929" y="-527"/>
         </scene>
         <!--File-->
         <scene sceneID="dMv-43-hWy">
@@ -80,25 +70,6 @@
             </objects>
             <point key="canvasLocation" x="6367" y="327"/>
         </scene>
-        <!--Media-->
-        <scene sceneID="IuY-Iu-oAm">
-            <objects>
-                <navigationController extendedLayoutIncludesOpaqueBars="YES" automaticallyAdjustsScrollViewInsets="NO" id="Npr-vu-PSD" sceneMemberID="viewController">
-                    <tabBarItem key="tabBarItem" title="Media" id="5cw-bP-7It"/>
-                    <toolbarItems/>
-                    <navigationBar key="navigationBar" contentMode="scaleToFill" largeTitles="YES" id="ixg-Pw-TNO">
-                        <rect key="frame" x="0.0" y="48" width="414" height="96"/>
-                        <autoresizingMask key="autoresizingMask"/>
-                    </navigationBar>
-                    <nil name="viewControllers"/>
-                    <connections>
-                        <segue destination="kO6-hz-Gsq" kind="relationship" relationship="rootViewController" id="9zw-1n-Dhk"/>
-                    </connections>
-                </navigationController>
-                <placeholder placeholderIdentifier="IBFirstResponder" id="cZf-pk-3Bd" userLabel="First Responder" sceneMemberID="firstResponder"/>
-            </objects>
-            <point key="canvasLocation" x="7771" y="327"/>
-        </scene>
         <!--Navigation Controller-->
         <scene sceneID="cip-AF-Ks2">
             <objects>
@@ -263,6 +234,35 @@
             </objects>
             <point key="canvasLocation" x="8458" y="899"/>
         </scene>
+        <!--Media-->
+        <scene sceneID="cqe-8g-lRj">
+            <objects>
+                <navigationController extendedLayoutIncludesOpaqueBars="YES" automaticallyAdjustsScrollViewInsets="NO" id="RF7-gD-gsF" sceneMemberID="viewController">
+                    <tabBarItem key="tabBarItem" title="Media" id="Zte-Jp-EJV"/>
+                    <toolbarItems/>
+                    <navigationBar key="navigationBar" contentMode="scaleToFill" largeTitles="YES" id="Qwq-ub-joD">
+                        <rect key="frame" x="0.0" y="48" width="414" height="96"/>
+                        <autoresizingMask key="autoresizingMask"/>
+                    </navigationBar>
+                    <nil name="viewControllers"/>
+                    <connections>
+                        <segue destination="CW8-KW-0pe" kind="relationship" relationship="rootViewController" id="Vb9-OI-DkF"/>
+                    </connections>
+                </navigationController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="L2K-7e-6T0" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="7768" y="327"/>
+        </scene>
+        <!--MediaUI Kit Wrapper-->
+        <scene sceneID="MtR-w7-Wmy">
+            <objects>
+                <viewController id="CW8-KW-0pe" customClass="NCMediaUIKitWrapper" customModule="Nextcloud" customModuleProvider="target" sceneMemberID="viewController">
+                    <navigationItem key="navigationItem" id="oRV-lm-zC3"/>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="alF-L6-HqO" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="7852" y="1447"/>
+        </scene>
     </scenes>
     <resources>
         <image name="tabBarPlus" width="80" height="80"/>

iOSClient/Media/Cell/NCMediaCell.swift

@@ -0,0 +1,158 @@
+//
+//  NCMediaCellView.swift
+//  Nextcloud
+//
+//  Created by Milen on 05.09.23.
+//  Copyright © 2023 Marino Faggiana. All rights reserved.
+//
+
+import SwiftUI
+import VisibilityTrackingScrollView
+import Shimmer
+import NextcloudKit
+
+enum ContextMenuSelection {
+    case addToFavorites, details, openIn, saveToPhotos, viewInFolder, modify, delete
+}
+
+struct NCMediaCell: View {
+    let thumbnail: ScaledThumbnail
+    let shrinkRatio: CGFloat
+    @Binding var isInSelectMode: Bool
+    @State private var isSelected = false
+    let onSelected: (ScaledThumbnail, Bool) -> Void
+    let onContextMenuItemSelected: (ScaledThumbnail, ContextMenuSelection) -> Void
+
+    @State var isFavorite: Bool
+
+    @State private var showDeleteConfirmation = false
+
+    var body: some View {
+        let image = Image(uiImage: thumbnail.image)
+            .resizable()
+
+        ZStack(alignment: .center) {
+            if thumbnail.isPlaceholderImage {
+                image
+                    .foregroundColor(Color(uiColor: .systemGray4))
+                    .scaledToFit()
+                    .frame(width: 40)
+            } else {
+                image
+            }
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .overlay(alignment: .bottomLeading) {
+            if thumbnail.metadata.isVideo, !thumbnail.isPlaceholderImage {
+                Image(systemName: "play.fill")
+                    .resizable()
+                    .foregroundColor(Color(uiColor: .white))
+                    .scaledToFit()
+                    .frame(width: 16)
+                    .padding([.leading, .bottom], 10)
+            }
+        }
+        .overlay {
+            if isInSelectMode, isSelected {
+                Color.black.opacity(0.6).frame(maxWidth: .infinity)
+            }
+        }
+        .overlay(alignment: .bottomTrailing) {
+            if isInSelectMode, isSelected {
+                Image(systemName: "checkmark.circle.fill")
+                    .resizable()
+                    .foregroundColor(.blue)
+                    .background(.white)
+                    .clipShape(Circle())
+                    .scaledToFit()
+                    .frame(width: 20)
+                    .padding([.trailing, .bottom], 10)
+            }
+        }
+        .frame(width: CGFloat(thumbnail.scaledSize.width * shrinkRatio), height: CGFloat(thumbnail.scaledSize.height * shrinkRatio))
+        .background(Color(uiColor: .systemGray6))
+        .onTapGesture {
+            if isInSelectMode { isSelected.toggle() }
+            onSelected(thumbnail, isSelected)
+        }
+        .onChange(of: isInSelectMode) { newValue in
+            isSelected = !newValue
+        }
+        .contextMenu(menuItems: {
+            Button {
+                onContextMenuItemSelected(thumbnail, .details)
+            } label: {
+                Label(NSLocalizedString("_details_", comment: ""), systemImage: "info")
+            }
+
+            Button {
+                isFavorite.toggle()
+                onContextMenuItemSelected(thumbnail, .addToFavorites)
+            } label: {
+                Label(isFavorite ?
+                      NSLocalizedString("_remove_favorites_", comment: "") :
+                      NSLocalizedString("_add_favorites_", comment: ""), systemImage: "star.fill")
+            }
+
+            Button {
+                onContextMenuItemSelected(thumbnail, .openIn)
+            } label: {
+                Label(NSLocalizedString("_open_in_", comment: ""), systemImage: "square.and.arrow.up")
+            }
+
+            Button {
+                onContextMenuItemSelected(thumbnail, .saveToPhotos)
+            } label: {
+                Label(NSLocalizedString("_save_selected_files_", comment: ""), systemImage: "square.and.arrow.down")
+            }
+
+            Button {
+                onContextMenuItemSelected(thumbnail, .viewInFolder)
+            } label: {
+                Label(NSLocalizedString("_view_in_folder_", comment: ""), systemImage: "folder.fill")
+            }
+
+            Button {
+                onContextMenuItemSelected(thumbnail, .modify)
+            } label: {
+                Label(NSLocalizedString("_modify_", comment: ""), systemImage: "pencil.tip.crop.circle")
+            }
+
+            Button(role: .destructive) {
+                showDeleteConfirmation = true
+            } label: {
+                Label(NSLocalizedString("_delete_file_", comment: ""), systemImage: "trash")
+            }
+        })
+        .confirmationDialog("", isPresented: $showDeleteConfirmation) {
+            Button(NSLocalizedString("_delete_file_", comment: ""), role: .destructive) {
+                onContextMenuItemSelected(thumbnail, .delete)
+            }
+        }
+    }
+}
+
+struct NCMediaLoadingCell: View {
+    let itemsInRow: Int
+    let metadata: tableMetadata
+    let geometryProxy: GeometryProxy
+    let spacing: CGFloat
+
+    let gradient = Gradient(colors: [
+        .black.opacity(0.4),
+        .black.opacity(0.7),
+        .black.opacity(0.4)
+    ])
+
+    var body: some View {
+        ZStack {
+            Image(uiImage: UIImage())
+                .resizable()
+                .trackVisibility(id: CCUtility.getTitleSectionDate(metadata.date as Date) ?? "")// TODO: Fix spacing
+                .aspectRatio(1.5, contentMode: .fit)
+                .frame(width: (geometryProxy.size.width - spacing) / CGFloat(itemsInRow))
+                .redacted(reason: .placeholder)
+                .shimmering(gradient: gradient, bandSize: 0.7)
+        }
+    }
+}