about summary refs log tree commit diff
path: root/src/lib/media/picker.tsx
blob: 70a5d906809d9790c0a48a3df48bdb87bad73470 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
import {
  openPicker as openPickerFn,
  openCamera as openCameraFn,
  openCropper as openCropperFn,
  ImageOrVideo,
} from 'react-native-image-crop-picker'
import {RootStoreModel} from 'state/index'
import {PickerOpts, CameraOpts, CropperOpts, PickedMedia} from './types'
import {
  scaleDownDimensions,
  Dim,
  compressIfNeeded,
  moveToPremanantPath,
} from 'lib/media/manip'
export type {PickedMedia} from './types'

/**
 * NOTE
 * These methods all include the RootStoreModel as the first param
 * because the web versions require it. The signatures have to remain
 * equivalent between the different forms, but the store param is not
 * used here.
 * -prf
 */

export async function openPicker(
  _store: RootStoreModel,
  opts: PickerOpts,
): Promise<PickedMedia[]> {
  const mediaType = opts.mediaType || 'photo'
  const items = await openPickerFn({
    mediaType,
    multiple: opts.multiple,
    maxFiles: opts.maxFiles,
    forceJpg: true, // ios only
    compressImageQuality: 0.8,
  })
  const toMedia = (item: ImageOrVideo) => ({
    mediaType,
    path: item.path,
    mime: item.mime,
    size: item.size,
    width: item.width,
    height: item.height,
  })
  if (Array.isArray(items)) {
    return items.map(toMedia)
  }
  return [toMedia(items)]
}

export async function openCamera(
  _store: RootStoreModel,
  opts: CameraOpts,
): Promise<PickedMedia> {
  const mediaType = opts.mediaType || 'photo'
  const item = await openCameraFn({
    mediaType,
    width: opts.width,
    height: opts.height,
    freeStyleCropEnabled: opts.freeStyleCropEnabled,
    cropperCircleOverlay: opts.cropperCircleOverlay,
    cropping: true,
    forceJpg: true, // ios only
    compressImageQuality: 0.8,
  })
  return {
    mediaType,
    path: item.path,
    mime: item.mime,
    size: item.size,
    width: item.width,
    height: item.height,
  }
}

export async function openCropper(
  _store: RootStoreModel,
  opts: CropperOpts,
): Promise<PickedMedia> {
  const mediaType = opts.mediaType || 'photo'
  const item = await openCropperFn({
    path: opts.path,
    mediaType: opts.mediaType || 'photo',
    width: opts.width,
    height: opts.height,
    freeStyleCropEnabled: opts.freeStyleCropEnabled,
    cropperCircleOverlay: opts.cropperCircleOverlay,
    forceJpg: true, // ios only
    compressImageQuality: 0.8,
  })
  return {
    mediaType,
    path: item.path,
    mime: item.mime,
    size: item.size,
    width: item.width,
    height: item.height,
  }
}

export async function pickImagesFlow(
  store: RootStoreModel,
  maxFiles: number,
  maxDim: Dim,
  maxSize: number,
) {
  const items = await openPicker(store, {
    multiple: true,
    maxFiles,
    mediaType: 'photo',
  })
  const result = []
  for (const image of items) {
    result.push(
      await cropAndCompressFlow(store, image.path, image, maxDim, maxSize),
    )
  }
  return result
}

export async function cropAndCompressFlow(
  store: RootStoreModel,
  path: string,
  imgDim: Dim,
  maxDim: Dim,
  maxSize: number,
) {
  // choose target dimensions based on the original
  // this causes the photo cropper to start with the full image "selected"
  const {width, height} = scaleDownDimensions(imgDim, maxDim)
  const cropperRes = await openCropper(store, {
    mediaType: 'photo',
    path,
    freeStyleCropEnabled: true,
    width,
    height,
  })

  const img = await compressIfNeeded(cropperRes, maxSize)
  const permanentPath = await moveToPremanantPath(img.path)
  return permanentPath
}