|
|
@ -20,28 +20,54 @@ |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div v-if="uploading" class="flex justify-center"> |
|
|
<div v-if="uploading" class="flex justify-center"> |
|
|
<fa icon="spinner" class="fa-spin fa-3x text-center block" /> |
|
|
<fa |
|
|
|
|
|
icon="spinner" |
|
|
|
|
|
class="fa-spin fa-3x text-center block px-12 py-12" |
|
|
|
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
<div v-else-if="blob"> |
|
|
<div v-else-if="blob"> |
|
|
<div |
|
|
<div v-if="crop"> |
|
|
class="flex justify-center gap-2 absolute bottom-[1rem] left-[1rem] right-[1rem] bg-black/50 px-4 py-2" |
|
|
<VuePictureCropper |
|
|
> |
|
|
:boxStyle="{ |
|
|
|
|
|
width: '100%', |
|
|
|
|
|
height: '100%', |
|
|
|
|
|
backgroundColor: '#f8f8f8', |
|
|
|
|
|
margin: 'auto', |
|
|
|
|
|
}" |
|
|
|
|
|
:img="URL.createObjectURL(blob)" |
|
|
|
|
|
:options="{ |
|
|
|
|
|
viewMode: 1, |
|
|
|
|
|
dragMode: 'crop', |
|
|
|
|
|
aspectRatio: 9 / 9, |
|
|
|
|
|
}" |
|
|
|
|
|
/> |
|
|
|
|
|
<!-- This gives a round cropper. |
|
|
|
|
|
:presetMode="{ |
|
|
|
|
|
mode: 'round', |
|
|
|
|
|
}" |
|
|
|
|
|
--> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div v-else> |
|
|
|
|
|
<div class="flex justify-center"> |
|
|
|
|
|
<img :src="URL.createObjectURL(blob)" class="mt-2 rounded" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="absolute bottom-[1rem] left-[1rem] px-2 py-1"> |
|
|
<button |
|
|
<button |
|
|
@click="uploadImage" |
|
|
@click="uploadImage" |
|
|
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white font-bold py-2 px-4 rounded-md" |
|
|
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white py-1 px-2 rounded-md" |
|
|
> |
|
|
> |
|
|
<span>Upload</span> |
|
|
<span>Upload</span> |
|
|
</button> |
|
|
</button> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="absolute bottom-[1rem] right-[1rem] px-2 py-1"> |
|
|
<button |
|
|
<button |
|
|
@click="retryImage" |
|
|
@click="retryImage" |
|
|
class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white font-bold py-2 px-4 rounded-md" |
|
|
class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white py-1 px-2 rounded-md" |
|
|
> |
|
|
> |
|
|
<span>Retry</span> |
|
|
<span>Retry</span> |
|
|
</button> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-center"> |
|
|
|
|
|
<img :src="URL.createObjectURL(blob)" class="mt-2 rounded" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div v-else ref="cameraContainer"> |
|
|
<div v-else ref="cameraContainer"> |
|
|
<!-- |
|
|
<!-- |
|
|
@ -92,6 +118,7 @@ |
|
|
import axios from "axios"; |
|
|
import axios from "axios"; |
|
|
import Camera from "simple-vue-camera"; |
|
|
import Camera from "simple-vue-camera"; |
|
|
import { Component, Vue } from "vue-facing-decorator"; |
|
|
import { Component, Vue } from "vue-facing-decorator"; |
|
|
|
|
|
import VuePictureCropper, { cropper } from "vue-picture-cropper"; |
|
|
|
|
|
|
|
|
import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app"; |
|
|
import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app"; |
|
|
import { getIdentity } from "@/libs/util"; |
|
|
import { getIdentity } from "@/libs/util"; |
|
|
@ -99,13 +126,14 @@ import { db } from "@/db/index"; |
|
|
import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings"; |
|
|
import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings"; |
|
|
import { accessToken } from "@/libs/crypto"; |
|
|
import { accessToken } from "@/libs/crypto"; |
|
|
|
|
|
|
|
|
@Component({ components: { Camera } }) |
|
|
@Component({ components: { Camera, VuePictureCropper } }) |
|
|
export default class GiftedPhotoDialog extends Vue { |
|
|
export default class GiftedPhotoDialog extends Vue { |
|
|
$notify!: (notification: NotificationIface, timeout?: number) => void; |
|
|
$notify!: (notification: NotificationIface, timeout?: number) => void; |
|
|
|
|
|
|
|
|
activeDeviceNumber = 0; |
|
|
activeDeviceNumber = 0; |
|
|
activeDid = ""; |
|
|
activeDid = ""; |
|
|
blob: Blob | null = null; |
|
|
blob: Blob | null = null; |
|
|
|
|
|
crop: boolean; |
|
|
mirror = false; |
|
|
mirror = false; |
|
|
numDevices = 0; |
|
|
numDevices = 0; |
|
|
setImage: (arg: string) => void = () => {}; |
|
|
setImage: (arg: string) => void = () => {}; |
|
|
@ -134,8 +162,9 @@ export default class GiftedPhotoDialog extends Vue { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
open(setImageFn: (arg: string) => void) { |
|
|
open(setImageFn: (arg: string) => void, crop?: boolean) { |
|
|
this.visible = true; |
|
|
this.visible = true; |
|
|
|
|
|
this.crop = !!crop; |
|
|
const bottomNav = document.querySelector("#QuickNav") as HTMLElement; |
|
|
const bottomNav = document.querySelector("#QuickNav") as HTMLElement; |
|
|
if (bottomNav) { |
|
|
if (bottomNav) { |
|
|
bottomNav.style.display = "none"; |
|
|
bottomNav.style.display = "none"; |
|
|
@ -274,6 +303,11 @@ export default class GiftedPhotoDialog extends Vue { |
|
|
|
|
|
|
|
|
async uploadImage() { |
|
|
async uploadImage() { |
|
|
this.uploading = true; |
|
|
this.uploading = true; |
|
|
|
|
|
|
|
|
|
|
|
if (this.crop) { |
|
|
|
|
|
this.blob = await cropper?.getBlob(); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
const identifier = await getIdentity(this.activeDid); |
|
|
const identifier = await getIdentity(this.activeDid); |
|
|
const token = await accessToken(identifier); |
|
|
const token = await accessToken(identifier); |
|
|
const headers = { |
|
|
const headers = { |
|
|
|
