@toneflix/flipbook-native 0.1.0 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @toneflix/flipbook-native
 
-A photo book for React Native and Expo. Pages peel, fold and fall with real physics, photos are printed into textured paper, and the book reads sideways like the real thing.
+Turn any set of photos into an album that bends, settles and feels like paper, in React Native and Expo, with page turns drawn by native views. A page folds exactly where a finger bends it, photos sink into the paper's grain, and phones open the book sideways across two pages.
 
 ```bash
 npx expo install @toneflix/flipbook-native react-native-svg expo-screen-orientation

package/lib/pages.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useId } from 'react';
 import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
 import Svg, { Circle, Defs, Path, RadialGradient, Rect, Stop } from 'react-native-svg';
-import { COVER_THEMES, frameOf } from '@toneflix/flipbook-core';
+import { COVER_THEMES, PLACED_LAYOUTS, photoFrame } from '@toneflix/flipbook-core';
 import { Gradient } from './Gradient';
 import { ink, useBookLook, usePaper, useSerif } from './look';
 import { PrintedPhoto } from './PrintedPhoto';
@@ -17,10 +17,12 @@ export function PageView({ page, width, number, side, showImages = true, onSlotP
     const serif = useSerif();
     const unit = width / 100;
     const { layout, caption, photos } = page;
-    const frame = frameOf(page, useBookLook().frame);
+    const bookFrame = useBookLook().frame;
+    const placed = PLACED_LAYOUTS[layout];
     const captionStyle = [serif.italic, styles.caption, { fontSize: 3.8 * unit, lineHeight: 5.2 * unit, color: ink(look) }];
     const slot = (index, style, fit = 'cover') => {
         const photo = photos[index] ?? null;
+        const frame = photoFrame(page, photo, bookFrame);
         return (_jsxs(Pressable, { disabled: !onSlotPress, onPress: () => onSlotPress?.(index), role: onSlotPress ? 'button' : undefined, "aria-label": onSlotPress ? `Photo slot ${index + 1}` : undefined, style: [style, fit === 'cover' && styles.clip], children: [photo ? (_jsx(PrintedPhoto, { photo: photo, frame: frame, unit: unit, fit: fit, show: showImages })) : (_jsx(View, { style: [
                         StyleSheet.absoluteFill,
                         styles.empty,
@@ -28,12 +30,20 @@ export function PageView({ page, width, number, side, showImages = true, onSlotP
                         onSlotPress && { borderWidth: 0.4 * unit, borderColor: ink(look, 0.3) },
                     ], children: onSlotPress && _jsx(Text, { style: { fontSize: 3.2 * unit, color: ink(look, 0.7) }, children: "Add a photo" }) })), onSlotPress && activeSlot === index && (_jsx(View, { pointerEvents: "none", style: [StyleSheet.absoluteFill, { borderWidth: 0.8 * unit, borderColor: accent }] }))] }, index));
     };
+    const boxStyle = ({ x, y, width: w, height: h, rotate }) => ({
+        position: 'absolute',
+        left: x * unit,
+        top: y * unit,
+        width: w * unit,
+        height: h * unit,
+        transform: rotate ? [{ rotate: `${rotate}deg` }] : undefined,
+    });
     const pageCaption = caption ? _jsx(Text, { style: captionStyle, children: caption }) : null;
     return (_jsxs(Paper, { width: width, side: side, children: [layout === 'single' && (_jsxs(_Fragment, { children: [slot(0, StyleSheet.absoluteFill), caption ? (_jsxs(View, { pointerEvents: "none", style: [styles.overlay, { paddingTop: 14 * unit, paddingHorizontal: 7 * unit, paddingBottom: 7 * unit }], children: [_jsx(Gradient, { to: "top", stops: [
                                     { offset: 0, color: '#000', opacity: 0.7 },
                                     { offset: 0.5, color: '#000', opacity: 0.3 },
                                     { offset: 1, color: '#000', opacity: 0 },
-                                ] }), _jsx(Text, { style: [serif.italic, { fontSize: 4.2 * unit, lineHeight: 5.7 * unit, color: '#fff' }], children: caption })] })) : null] })), layout === 'framed' && (_jsxs(View, { style: [styles.fill, { paddingTop: 10 * unit, paddingHorizontal: 9 * unit, paddingBottom: 6 * unit }], children: [slot(0, styles.flex, 'contain'), _jsx(Text, { style: [captionStyle, { marginTop: 5 * unit, minHeight: 6 * unit, fontSize: 4.2 * unit, lineHeight: 5.7 * unit }], children: caption })] })), layout === 'pair' && (_jsxs(View, { style: [styles.fill, { padding: 7 * unit, gap: 4 * unit }], children: [slot(0, styles.flex), slot(1, styles.flex), pageCaption] })), layout === 'grid' && (_jsxs(View, { style: [styles.fill, { padding: 7 * unit, gap: 3 * unit }], children: [[0, 2].map((first) => (_jsxs(View, { style: [styles.row, { gap: 3 * unit }], children: [slot(first, styles.flex), slot(first + 1, styles.flex)] }, first))), pageCaption] })), layout === 'collage' && (_jsxs(View, { style: [styles.fill, { padding: 7 * unit, gap: 3 * unit }], children: [slot(0, { flex: 1.4 }), _jsxs(View, { style: [styles.row, { gap: 3 * unit }], children: [slot(1, styles.flex), slot(2, styles.flex)] }), pageCaption] })), layout === 'text' && (_jsxs(View, { style: [styles.fill, styles.centered, { paddingVertical: 14 * unit, paddingHorizontal: 12 * unit }], children: [_jsx(Text, { style: [serif.upright, { fontSize: 18 * unit, lineHeight: 16 * unit, height: 10 * unit, color: ink(look, 0.3) }], accessible: false, children: "\u201C" }), _jsx(Text, { style: [serif.italic, styles.caption, { marginTop: 4 * unit, fontSize: 6 * unit, lineHeight: 8.4 * unit, color: ink(look) }], children: caption || (onSlotPress ? 'Write something in the caption box below.' : '') })] })), number !== undefined && layout !== 'single' && (_jsx(Text, { style: [
+                                ] }), _jsx(Text, { style: [serif.italic, { fontSize: 4.2 * unit, lineHeight: 5.7 * unit, color: '#fff' }], children: caption })] })) : null] })), layout === 'framed' && (_jsxs(View, { style: [styles.fill, { paddingTop: 10 * unit, paddingHorizontal: 9 * unit, paddingBottom: 6 * unit }], children: [slot(0, styles.flex, 'contain'), _jsx(Text, { style: [captionStyle, { marginTop: 5 * unit, minHeight: 6 * unit, fontSize: 4.2 * unit, lineHeight: 5.7 * unit }], children: caption })] })), layout === 'pair' && (_jsxs(View, { style: [styles.fill, { padding: 7 * unit, gap: 4 * unit }], children: [slot(0, styles.flex), slot(1, styles.flex), pageCaption] })), layout === 'grid' && (_jsxs(View, { style: [styles.fill, { padding: 7 * unit, gap: 3 * unit }], children: [[0, 2].map((first) => (_jsxs(View, { style: [styles.row, { gap: 3 * unit }], children: [slot(first, styles.flex), slot(first + 1, styles.flex)] }, first))), pageCaption] })), layout === 'collage' && (_jsxs(View, { style: [styles.fill, { padding: 7 * unit, gap: 3 * unit }], children: [slot(0, { flex: 1.4 }), _jsxs(View, { style: [styles.row, { gap: 3 * unit }], children: [slot(1, styles.flex), slot(2, styles.flex)] }), pageCaption] })), placed && (_jsxs(_Fragment, { children: [placed.slots.map((box, i) => slot(i, { ...boxStyle(box), ...(placed.loose && styles.loose) })), caption ? (_jsx(View, { pointerEvents: "none", style: [boxStyle(placed.caption), !placed.prose && styles.centered], children: _jsx(Text, { style: placed.prose ? [serif.upright, { fontSize: 4.4 * unit, lineHeight: 6.8 * unit, color: ink(look) }] : captionStyle, children: caption }) })) : null] })), layout === 'text' && (_jsxs(View, { style: [styles.fill, styles.centered, { paddingVertical: 14 * unit, paddingHorizontal: 12 * unit }], children: [_jsx(Text, { style: [serif.upright, { fontSize: 18 * unit, lineHeight: 16 * unit, height: 10 * unit, color: ink(look, 0.3) }], accessible: false, children: "\u201C" }), _jsx(Text, { style: [serif.italic, styles.caption, { marginTop: 4 * unit, fontSize: 6 * unit, lineHeight: 8.4 * unit, color: ink(look) }], children: caption || (onSlotPress ? 'Write something in the caption box below.' : '') })] })), number !== undefined && layout !== 'single' && (_jsx(Text, { style: [
                     serif.upright,
                     styles.number,
                     side === 'left' ? styles.left : styles.right,
@@ -110,6 +120,7 @@ const styles = StyleSheet.create({
     centered: { alignItems: 'center', justifyContent: 'center' },
     center: { textAlign: 'center' },
     clip: { overflow: 'hidden' },
+    loose: { boxShadow: '0 2px 6px rgba(0,0,0,0.25)' },
     empty: { alignItems: 'center', justifyContent: 'center', borderStyle: 'dashed' },
     overlay: { position: 'absolute', left: 0, right: 0, bottom: 0 },
     caption: { textAlign: 'center' },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@toneflix/flipbook-native",
-  "version": "0.1.0",
-  "description": "A photo book for React Native: peel-and-fold page turns, printed photos, frames and paper textures.",
+  "version": "0.2.0",
+  "description": "Bind photos into a page-turning album in React Native and Expo: fingertip page turns, prints set into paper, frames and layouts.",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "assets"
   ],
   "dependencies": {
-    "@toneflix/flipbook-core": "^0.1.0"
+    "@toneflix/flipbook-core": "^0.2.0"
   },
   "peerDependencies": {
     "expo-screen-orientation": "*",

package/src/pages.tsx

@@ -1,7 +1,7 @@
 import { useId, type ReactNode } from 'react'
 import { Image, Pressable, StyleSheet, Text, View, type ViewStyle } from 'react-native'
 import Svg, { Circle, Defs, Path, RadialGradient, Rect, Stop } from 'react-native-svg'
-import { COVER_THEMES, frameOf, type FlipbookBook, type FlipbookPage } from '@toneflix/flipbook-core'
+import { COVER_THEMES, PLACED_LAYOUTS, photoFrame, type FlipbookBook, type FlipbookPage, type PageBox } from '@toneflix/flipbook-core'
 import { Gradient } from './Gradient'
 import { ink, useBookLook, usePaper, useSerif, type PaperLook } from './look'
 import { PrintedPhoto } from './PrintedPhoto'
@@ -34,11 +34,13 @@ export function PageView({ page, width, number, side, showImages = true, onSlotP
   const serif = useSerif()
   const unit = width / 100
   const { layout, caption, photos } = page
-  const frame = frameOf(page, useBookLook().frame)
+  const bookFrame = useBookLook().frame
+  const placed = PLACED_LAYOUTS[layout]
   const captionStyle = [serif.italic, styles.caption, { fontSize: 3.8 * unit, lineHeight: 5.2 * unit, color: ink(look) }]
 
   const slot = (index: number, style: ViewStyle, fit: 'cover' | 'contain' = 'cover') => {
     const photo = photos[index] ?? null
+    const frame = photoFrame(page, photo, bookFrame)
 
     return (
       <Pressable
@@ -70,6 +72,15 @@ export function PageView({ page, width, number, side, showImages = true, onSlotP
     )
   }
 
+  const boxStyle = ({ x, y, width: w, height: h, rotate }: PageBox): ViewStyle => ({
+    position: 'absolute',
+    left: x * unit,
+    top: y * unit,
+    width: w * unit,
+    height: h * unit,
+    transform: rotate ? [{ rotate: `${rotate}deg` }] : undefined,
+  })
+
   const pageCaption = caption ? <Text style={captionStyle}>{caption}</Text> : null
 
   return (
@@ -136,6 +147,21 @@ export function PageView({ page, width, number, side, showImages = true, onSlotP
         </View>
       )}
 
+      {placed && (
+        <>
+          {placed.slots.map((box, i) => slot(i, { ...boxStyle(box), ...(placed.loose && styles.loose) }))}
+          {caption ? (
+            <View pointerEvents="none" style={[boxStyle(placed.caption), !placed.prose && styles.centered]}>
+              <Text
+                style={placed.prose ? [serif.upright, { fontSize: 4.4 * unit, lineHeight: 6.8 * unit, color: ink(look) }] : captionStyle}
+              >
+                {caption}
+              </Text>
+            </View>
+          ) : null}
+        </>
+      )}
+
       {layout === 'text' && (
         <View style={[styles.fill, styles.centered, { paddingVertical: 14 * unit, paddingHorizontal: 12 * unit }]}>
           <Text
@@ -399,6 +425,7 @@ const styles = StyleSheet.create({
   centered: { alignItems: 'center', justifyContent: 'center' },
   center: { textAlign: 'center' },
   clip: { overflow: 'hidden' },
+  loose: { boxShadow: '0 2px 6px rgba(0,0,0,0.25)' },
   empty: { alignItems: 'center', justifyContent: 'center', borderStyle: 'dashed' },
   overlay: { position: 'absolute', left: 0, right: 0, bottom: 0 },
   caption: { textAlign: 'center' },