✨ Use map function to define the side margins on Photos page

Also defines the amount of viewport from the screen width to height ratio for small screens

Merci @sixclones et @raphael! (devs slack)

src/utils/functions.ts

@@ -32,6 +32,27 @@ export const lerp = (start: number, end: number, amt: number): number => {
 }
 
 
+/**
+ * Re-maps a number from one range to another
+ * @param value the incoming value to be converted
+ * @param start1 lower bound of the value's current range
+ * @param stop1 upper bound of the value's current range
+ * @param start2 lower bound of the value's target range
+ * @param stop2 upper bound of the value's target range
+ * @param [withinBounds] constrain the value to the newly mapped range
+ * @return remapped number
+ */
+export const map = (n: number, start1: number, stop1: number, start2: number, stop2: number, withinBounds: boolean): number => {
+    const value = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2
+    if (!withinBounds) return value
+    if (start2 < stop2) {
+        return clamp(value, start2, stop2)
+    } else {
+        return clamp(value, stop2, start2)
+    }
+}
+
+
 /**
  * Clamp a number
  */