AP-63 (#85)
All checks were successful
Backend Deploy / build (push) Successful in 29s
Backend Build and Test / build (push) Successful in 3m3s

closes #63

Reviewed-on: #85
This commit is contained in:
Huffle 2025-05-25 17:05:31 +02:00
parent 302ceaa629
commit daebcdeccd
170 changed files with 10517 additions and 9 deletions

View File

@ -0,0 +1,101 @@
# Using Android gitignore template: https://github.com/github/gitignore/blob/HEAD/Android.gitignore
# Built application files
*.apk
*.aar
*.ap_
*.aab
# Files for the ART/Dalvik VM
*.dex
# Java class files
*.class
# Generated files
bin/
gen/
out/
# Uncomment the following line in case you need and you don't have the release build type files in your app
# release/
# Gradle files
.gradle/
build/
# Local configuration file (sdk path, etc)
local.properties
# Proguard folder generated by Eclipse
proguard/
# Log Files
*.log
# Android Studio Navigation editor temp files
.navigation/
# Android Studio captures folder
captures/
# IntelliJ
*.iml
.idea/workspace.xml
.idea/tasks.xml
.idea/gradle.xml
.idea/assetWizardSettings.xml
.idea/dictionaries
.idea/libraries
# Android Studio 3 in .gitignore file.
.idea/caches
.idea/modules.xml
# Comment next line if keeping position of elements in Navigation Editor is relevant for you
.idea/navEditor.xml
# Keystore files
# Uncomment the following lines if you do not want to check your keystore files in.
#*.jks
#*.keystore
# External native build folder generated in Android Studio 2.2 and later
.externalNativeBuild
.cxx/
# Google Services (e.g. APIs or Firebase)
# google-services.json
# Freeline
freeline.py
freeline/
freeline_project_description.json
# fastlane
fastlane/report.xml
fastlane/Preview.html
fastlane/screenshots
fastlane/test_output
fastlane/readme.md
# Version control
vcs.xml
# lint
lint/intermediates/
lint/generated/
lint/outputs/
lint/tmp/
# lint/reports/
# Android Profiling
*.hprof
# Cordova plugins for Capacitor
capacitor-cordova-android-plugins
# Copied web assets
app/src/main/assets/public
# Generated Config files
app/src/main/assets/capacitor.config.json
app/src/main/assets/capacitor.plugins.json
app/src/main/res/xml/config.xml

View File

@ -0,0 +1,2 @@
/build/*
!/build/.npmkeep

View File

@ -0,0 +1,54 @@
apply plugin: 'com.android.application'
android {
namespace "io.ionic.starter"
compileSdk rootProject.ext.compileSdkVersion
defaultConfig {
applicationId "io.ionic.starter"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
aaptOptions {
// Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
// Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
}
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
repositories {
flatDir{
dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
}
}
dependencies {
implementation fileTree(include: ['*.jar'], dir: 'libs')
implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
implementation project(':capacitor-android')
testImplementation "junit:junit:$junitVersion"
androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
implementation project(':capacitor-cordova-android-plugins')
}
apply from: 'capacitor.build.gradle'
try {
def servicesJSON = file('google-services.json')
if (servicesJSON.text) {
apply plugin: 'com.google.gms.google-services'
}
} catch(Exception e) {
logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
}

View File

@ -0,0 +1,22 @@
// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
android {
compileOptions {
sourceCompatibility JavaVersion.VERSION_21
targetCompatibility JavaVersion.VERSION_21
}
}
apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
dependencies {
implementation project(':capacitor-app')
implementation project(':capacitor-haptics')
implementation project(':capacitor-keyboard')
implementation project(':capacitor-status-bar')
}
if (hasProperty('postBuildExtras')) {
postBuildExtras()
}

View File

@ -0,0 +1,21 @@
# Add project specific ProGuard rules here.
# You can control the set of applied configuration files using the
# proguardFiles setting in build.gradle.
#
# For more details, see
# http://developer.android.com/guide/developing/tools/proguard.html
# If your project uses WebView with JS, uncomment the following
# and specify the fully qualified class name to the JavaScript interface
# class:
#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
# public *;
#}
# Uncomment this to preserve the line number information for
# debugging stack traces.
#-keepattributes SourceFile,LineNumberTable
# If you keep the line number information, uncomment this to
# hide the original source file name.
#-renamesourcefileattribute SourceFile

View File

@ -0,0 +1,26 @@
package com.getcapacitor.myapp;
import static org.junit.Assert.*;
import android.content.Context;
import androidx.test.ext.junit.runners.AndroidJUnit4;
import androidx.test.platform.app.InstrumentationRegistry;
import org.junit.Test;
import org.junit.runner.RunWith;
/**
* Instrumented test, which will execute on an Android device.
*
* @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
*/
@RunWith(AndroidJUnit4.class)
public class ExampleInstrumentedTest {
@Test
public void useAppContext() throws Exception {
// Context of the app under test.
Context appContext = InstrumentationRegistry.getInstrumentation().getTargetContext();
assertEquals("com.getcapacitor.app", appContext.getPackageName());
}
}

View File

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode|navigation"
android:name=".MainActivity"
android:label="@string/title_activity_main"
android:theme="@style/AppTheme.NoActionBarLaunch"
android:launchMode="singleTask"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<provider
android:name="androidx.core.content.FileProvider"
android:authorities="${applicationId}.fileprovider"
android:exported="false"
android:grantUriPermissions="true">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/file_paths"></meta-data>
</provider>
</application>
<!-- Permissions -->
<uses-permission android:name="android.permission.INTERNET" />
</manifest>

View File

@ -0,0 +1,5 @@
package io.ionic.starter;
import com.getcapacitor.BridgeActivity;
public class MainActivity extends BridgeActivity {}

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View File

@ -0,0 +1,34 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="108dp"
android:height="108dp"
android:viewportHeight="108"
android:viewportWidth="108">
<path
android:fillType="evenOdd"
android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
android:strokeColor="#00000000"
android:strokeWidth="1">
<aapt:attr name="android:fillColor">
<gradient
android:endX="78.5885"
android:endY="90.9159"
android:startX="48.7653"
android:startY="61.0927"
android:type="linear">
<item
android:color="#44000000"
android:offset="0.0" />
<item
android:color="#00000000"
android:offset="1.0" />
</gradient>
</aapt:attr>
</path>
<path
android:fillColor="#FFFFFF"
android:fillType="nonZero"
android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
android:strokeColor="#00000000"
android:strokeWidth="1" />
</vector>

View File

@ -0,0 +1,170 @@
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="108dp"
android:height="108dp"
android:viewportHeight="108"
android:viewportWidth="108">
<path
android:fillColor="#26A69A"
android:pathData="M0,0h108v108h-108z" />
<path
android:fillColor="#00000000"
android:pathData="M9,0L9,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M19,0L19,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M29,0L29,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M39,0L39,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M49,0L49,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M59,0L59,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M69,0L69,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M79,0L79,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M89,0L89,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M99,0L99,108"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M0,9L108,9"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M0,19L108,19"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M0,29L108,29"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M0,39L108,39"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M0,49L108,49"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M0,59L108,59"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M0,69L108,69"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M0,79L108,79"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M0,89L108,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M0,99L108,99"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M19,29L89,29"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M19,39L89,39"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M19,49L89,49"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M19,59L89,59"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M19,69L89,69"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M19,79L89,79"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M29,19L29,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M39,19L39,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M49,19L49,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M59,19L59,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M69,19L69,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
<path
android:fillColor="#00000000"
android:pathData="M79,19L79,89"
android:strokeColor="#33FFFFFF"
android:strokeWidth="0.8" />
</vector>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@color/ic_launcher_background"/>
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>

View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@color/ic_launcher_background"/>
<foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="ic_launcher_background">#FFFFFF</color>
</resources>

View File

@ -0,0 +1,7 @@
<?xml version='1.0' encoding='utf-8'?>
<resources>
<string name="app_name">allowance-planner-v2</string>
<string name="title_activity_main">allowance-planner-v2</string>
<string name="package_name">io.ionic.starter</string>
<string name="custom_url_scheme">io.ionic.starter</string>
</resources>

View File

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:background">@null</item>
</style>
<style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
<item name="android:background">@drawable/splash</item>
</style>
</resources>

View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
<external-path name="my_images" path="." />
<cache-path name="my_cache_images" path="." />
</paths>

View File

@ -0,0 +1,18 @@
package com.getcapacitor.myapp;
import static org.junit.Assert.*;
import org.junit.Test;
/**
* Example local unit test, which will execute on the development machine (host).
*
* @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
*/
public class ExampleUnitTest {
@Test
public void addition_isCorrect() throws Exception {
assertEquals(4, 2 + 2);
}
}

View File

@ -0,0 +1,29 @@
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
repositories {
google()
mavenCentral()
}
dependencies {
classpath 'com.android.tools.build:gradle:8.7.2'
classpath 'com.google.gms:google-services:4.4.2'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
apply from: "variables.gradle"
allprojects {
repositories {
google()
mavenCentral()
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}

View File

@ -0,0 +1,15 @@
// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
include ':capacitor-android'
project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
include ':capacitor-app'
project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
include ':capacitor-haptics'
project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/haptics/android')
include ':capacitor-keyboard'
project(':capacitor-keyboard').projectDir = new File('../node_modules/@capacitor/keyboard/android')
include ':capacitor-status-bar'
project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')

View File

@ -0,0 +1,22 @@
# Project-wide Gradle settings.
# IDE (e.g. Android Studio) users:
# Gradle settings configured through the IDE *will override*
# any settings specified in this file.
# For more details on how to configure your build environment visit
# http://www.gradle.org/docs/current/userguide/build_environment.html
# Specifies the JVM arguments used for the daemon process.
# The setting is particularly useful for tweaking memory settings.
org.gradle.jvmargs=-Xmx1536m
# When configured, Gradle will run in incubating parallel mode.
# This option should only be used with decoupled projects. More details, visit
# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
# org.gradle.parallel=true
# AndroidX package structure to make it clearer which packages are bundled with the
# Android operating system, and which are packaged with your app's APK
# https://developer.android.com/topic/libraries/support-library/androidx-rn
android.useAndroidX=true

View File

@ -0,0 +1,7 @@
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-8.11.1-all.zip
networkTimeout=10000
validateDistributionUrl=true
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

View File

@ -0,0 +1,252 @@
#!/bin/sh
#
# Copyright © 2015-2021 the original authors.
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# https://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#
# SPDX-License-Identifier: Apache-2.0
#
##############################################################################
#
# Gradle start up script for POSIX generated by Gradle.
#
# Important for running:
#
# (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
# noncompliant, but you have some other compliant shell such as ksh or
# bash, then to run this script, type that shell name before the whole
# command line, like:
#
# ksh Gradle
#
# Busybox and similar reduced shells will NOT work, because this script
# requires all of these POSIX shell features:
# * functions;
# * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
# «${var#prefix}», «${var%suffix}», and «$( cmd )»;
# * compound commands having a testable exit status, especially «case»;
# * various built-in commands including «command», «set», and «ulimit».
#
# Important for patching:
#
# (2) This script targets any POSIX shell, so it avoids extensions provided
# by Bash, Ksh, etc; in particular arrays are avoided.
#
# The "traditional" practice of packing multiple parameters into a
# space-separated string is a well documented source of bugs and security
# problems, so this is (mostly) avoided, by progressively accumulating
# options in "$@", and eventually passing that to Java.
#
# Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
# and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
# see the in-line comments for details.
#
# There are tweaks for specific operating systems such as AIX, CygWin,
# Darwin, MinGW, and NonStop.
#
# (3) This script is generated from the Groovy template
# https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
# within the Gradle project.
#
# You can find Gradle at https://github.com/gradle/gradle/.
#
##############################################################################
# Attempt to set APP_HOME
# Resolve links: $0 may be a link
app_path=$0
# Need this for daisy-chained symlinks.
while
APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path
[ -h "$app_path" ]
do
ls=$( ls -ld "$app_path" )
link=${ls#*' -> '}
case $link in #(
/*) app_path=$link ;; #(
*) app_path=$APP_HOME$link ;;
esac
done
# This is normally unused
# shellcheck disable=SC2034
APP_BASE_NAME=${0##*/}
# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s
' "$PWD" ) || exit
# Use the maximum available, or set MAX_FD != -1 to use that value.
MAX_FD=maximum
warn () {
echo "$*"
} >&2
die () {
echo
echo "$*"
echo
exit 1
} >&2
# OS specific support (must be 'true' or 'false').
cygwin=false
msys=false
darwin=false
nonstop=false
case "$( uname )" in #(
CYGWIN* ) cygwin=true ;; #(
Darwin* ) darwin=true ;; #(
MSYS* | MINGW* ) msys=true ;; #(
NONSTOP* ) nonstop=true ;;
esac
CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
# Determine the Java command to use to start the JVM.
if [ -n "$JAVA_HOME" ] ; then
if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
# IBM's JDK on AIX uses strange locations for the executables
JAVACMD=$JAVA_HOME/jre/sh/java
else
JAVACMD=$JAVA_HOME/bin/java
fi
if [ ! -x "$JAVACMD" ] ; then
die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
else
JAVACMD=java
if ! command -v java >/dev/null 2>&1
then
die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
fi
# Increase the maximum file descriptors if we can.
if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
case $MAX_FD in #(
max*)
# In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
# shellcheck disable=SC2039,SC3045
MAX_FD=$( ulimit -H -n ) ||
warn "Could not query maximum file descriptor limit"
esac
case $MAX_FD in #(
'' | soft) :;; #(
*)
# In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
# shellcheck disable=SC2039,SC3045
ulimit -n "$MAX_FD" ||
warn "Could not set maximum file descriptor limit to $MAX_FD"
esac
fi
# Collect all arguments for the java command, stacking in reverse order:
# * args from the command line
# * the main class name
# * -classpath
# * -D...appname settings
# * --module-path (only if needed)
# * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
# For Cygwin or MSYS, switch paths to Windows format before running java
if "$cygwin" || "$msys" ; then
APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
JAVACMD=$( cygpath --unix "$JAVACMD" )
# Now convert the arguments - kludge to limit ourselves to /bin/sh
for arg do
if
case $arg in #(
-*) false ;; # don't mess with options #(
/?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath
[ -e "$t" ] ;; #(
*) false ;;
esac
then
arg=$( cygpath --path --ignore --mixed "$arg" )
fi
# Roll the args list around exactly as many times as the number of
# args, so each arg winds up back in the position where it started, but
# possibly modified.
#
# NB: a `for` loop captures its iteration list before it begins, so
# changing the positional parameters here affects neither the number of
# iterations, nor the values presented in `arg`.
shift # remove old arg
set -- "$@" "$arg" # push replacement arg
done
fi
# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
# Collect all arguments for the java command:
# * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
# and any embedded shellness will be escaped.
# * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
# treated as '${Hostname}' itself on the command line.
set -- \
"-Dorg.gradle.appname=$APP_BASE_NAME" \
-classpath "$CLASSPATH" \
org.gradle.wrapper.GradleWrapperMain \
"$@"
# Stop when "xargs" is not available.
if ! command -v xargs >/dev/null 2>&1
then
die "xargs is not available"
fi
# Use "xargs" to parse quoted args.
#
# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
#
# In Bash we could simply go:
#
# readarray ARGS < <( xargs -n1 <<<"$var" ) &&
# set -- "${ARGS[@]}" "$@"
#
# but POSIX shell has neither arrays nor command substitution, so instead we
# post-process each arg (as a line of input to sed) to backslash-escape any
# character that might be a shell metacharacter, then use eval to reverse
# that process (while maintaining the separation between arguments), and wrap
# the whole thing up as a single "set" statement.
#
# This will of course break if any of these variables contains a newline or
# an unmatched quote.
#
eval "set -- $(
printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
xargs -n1 |
sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
tr '\n' ' '
)" '"$@"'
exec "$JAVACMD" "$@"

View File

@ -0,0 +1,94 @@
@rem
@rem Copyright 2015 the original author or authors.
@rem
@rem Licensed under the Apache License, Version 2.0 (the "License");
@rem you may not use this file except in compliance with the License.
@rem You may obtain a copy of the License at
@rem
@rem https://www.apache.org/licenses/LICENSE-2.0
@rem
@rem Unless required by applicable law or agreed to in writing, software
@rem distributed under the License is distributed on an "AS IS" BASIS,
@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@rem See the License for the specific language governing permissions and
@rem limitations under the License.
@rem
@rem SPDX-License-Identifier: Apache-2.0
@rem
@if "%DEBUG%"=="" @echo off
@rem ##########################################################################
@rem
@rem Gradle startup script for Windows
@rem
@rem ##########################################################################
@rem Set local scope for the variables with windows NT shell
if "%OS%"=="Windows_NT" setlocal
set DIRNAME=%~dp0
if "%DIRNAME%"=="" set DIRNAME=.
@rem This is normally unused
set APP_BASE_NAME=%~n0
set APP_HOME=%DIRNAME%
@rem Resolve any "." and ".." in APP_HOME to make it shorter.
for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
@rem Find java.exe
if defined JAVA_HOME goto findJavaFromJavaHome
set JAVA_EXE=java.exe
%JAVA_EXE% -version >NUL 2>&1
if %ERRORLEVEL% equ 0 goto execute
echo. 1>&2
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
echo. 1>&2
echo Please set the JAVA_HOME variable in your environment to match the 1>&2
echo location of your Java installation. 1>&2
goto fail
:findJavaFromJavaHome
set JAVA_HOME=%JAVA_HOME:"=%
set JAVA_EXE=%JAVA_HOME%/bin/java.exe
if exist "%JAVA_EXE%" goto execute
echo. 1>&2
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
echo. 1>&2
echo Please set the JAVA_HOME variable in your environment to match the 1>&2
echo location of your Java installation. 1>&2
goto fail
:execute
@rem Setup the command line
set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
@rem Execute Gradle
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
:end
@rem End local scope for the variables with windows NT shell
if %ERRORLEVEL% equ 0 goto mainEnd
:fail
rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
rem the _cmd.exe /c_ return code!
set EXIT_CODE=%ERRORLEVEL%
if %EXIT_CODE% equ 0 set EXIT_CODE=1
if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
exit /b %EXIT_CODE%
:mainEnd
if "%OS%"=="Windows_NT" endlocal
:omega

View File

@ -0,0 +1,5 @@
include ':app'
include ':capacitor-cordova-android-plugins'
project(':capacitor-cordova-android-plugins').projectDir = new File('./capacitor-cordova-android-plugins/')
apply from: 'capacitor.settings.gradle'

View File

@ -0,0 +1,16 @@
ext {
minSdkVersion = 23
compileSdkVersion = 35
targetSdkVersion = 35
androidxActivityVersion = '1.9.2'
androidxAppCompatVersion = '1.7.0'
androidxCoordinatorLayoutVersion = '1.2.0'
androidxCoreVersion = '1.15.0'
androidxFragmentVersion = '1.8.4'
coreSplashScreenVersion = '1.0.1'
androidxWebkitVersion = '1.12.1'
junitVersion = '4.13.2'
androidxJunitVersion = '1.2.1'
androidxEspressoCoreVersion = '3.6.1'
cordovaAndroidVersion = '10.1.1'
}

View File

@ -18,6 +18,7 @@
"@angular/platform-browser": "^19.0.0",
"@angular/platform-browser-dynamic": "^19.0.0",
"@angular/router": "^19.0.0",
"@capacitor/android": "7.2.0",
"@capacitor/app": "7.0.1",
"@capacitor/core": "7.2.0",
"@capacitor/haptics": "7.0.1",
@ -2452,6 +2453,14 @@
"node": ">=6.9.0"
}
},
"node_modules/@capacitor/android": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/@capacitor/android/-/android-7.2.0.tgz",
"integrity": "sha512-zdhEy3jZPG5Toe/pGzKtDgIiBGywjaoEuQWnGVjBYPlSAEUtAhpZ2At7V0SCb26yluAuzrAUV0Ue+LQeEtHwFQ==",
"peerDependencies": {
"@capacitor/core": "^7.2.0"
}
},
"node_modules/@capacitor/app": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/@capacitor/app/-/app-7.0.1.tgz",

View File

@ -23,6 +23,7 @@
"@angular/platform-browser": "^19.0.0",
"@angular/platform-browser-dynamic": "^19.0.0",
"@angular/router": "^19.0.0",
"@capacitor/android": "7.2.0",
"@capacitor/app": "7.0.1",
"@capacitor/core": "7.2.0",
"@capacitor/haptics": "7.0.1",

View File

@ -0,0 +1,10 @@
export interface Allowance {
id: number;
name: string;
target: number;
// Current allowance value
progress: number;
// Can be any positive number (backend checks for number relative to each other)
weight: number;
colour: string;
}

View File

@ -5,14 +5,22 @@ import { FormsModule } from '@angular/forms';
import { AllowancePage } from './allowance.page';
import { AllowancePageRoutingModule } from './allowance-routing.module';
import { AllowanceService } from 'src/app/services/allowance.service';
import { provideHttpClient } from '@angular/common/http';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
AllowancePageRoutingModule
AllowancePageRoutingModule,
MatIconModule
],
declarations: [AllowancePage]
declarations: [AllowancePage],
providers: [
provideHttpClient(),
AllowanceService
]
})
export class AllowancePageModule {}

View File

@ -7,4 +7,63 @@
</ion-header>
<ion-content>
<div class="content" *ngIf="allowance$ | async as allowance">
<div class="bar">
<div class="distribution">Allowance distribution</div>
<div class="allowance-bar">
<span
*ngFor="let goal of allowance"
class="partition"
[style.--partition-color]="goal.colour"
[style.width.%]="getPartitionSize(goal, allowance)"
></span>
</div>
<div class="legend">
<div class="legend-item" [style.--legend-color]="goal.colour" *ngFor="let goal of allowance">
<div class="circle"></div>
<div class="title">{{ goal.name }}</div>
</div>
</div>
</div>
<div
class="goal"
[style.--used-color]="goal.colour"
[ngClass]="{'other-goals': goal.id !== 0}"
*ngFor="let goal of allowance"
>
<div class="main" *ngIf="goal.id === 0; else other_goal">
<div class="title">
<div class="name">Main Allowance</div>
<div class="icon">
<mat-icon>settings</mat-icon>
</div>
</div>
<div class="progress">{{ goal.progress }} SP</div>
<div class="buttons">
<button class="add-button">Add</button>
<!-- <button class="move-button">Move</button> -->
<button class="spend-button">Spend</button>
</div>
</div>
<ng-template #other_goal>
<div class="color-wrapper">
<div>
<div class="title">
<div class="name">{{ goal.name }}</div>
<div class="icon">
<mat-icon>settings</mat-icon>
</div>
</div>
<div class="progress">{{ goal.progress }} / {{ goal.target }} SP</div>
<div class="buttons">
<button class="add-button">Add</button>
<!-- <button class="move-button">Move</button> -->
<button class="spend-button" [disabled]="!canFinishGoal(goal)">Finish goal</button>
</div>
</div>
<div class="color" [style.--background]="hexToRgb(goal.colour)" [style.width.%]="getPercentage(goal)"></div>
</div>
</ng-template>
</div>
</div>
</ion-content>

View File

@ -0,0 +1,130 @@
.goal {
border: 1px solid var(--used-color);
border-radius: 10px;
padding: 10px;
margin-bottom: 20px;
margin-left: 10px;
margin-right: 10px;
color: var(--used-color);
}
.name {
font-size: 20px;
}
.progress {
color: var(--font-color);
margin-left: 15px;
margin-top: 8px;
margin-bottom: 15px;
font-size: 16px;
}
.bar {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
}
.distribution {
color: var(--ion-color-primary);
}
.allowance-bar {
display: flex;
width: 95%;
height: 15px !important;
border-radius: 15px;
background-color: var(--font-color);
overflow: hidden;
}
.partition {
--partition-color: white;
background-color: var(--partition-color);
width: 25%;
height: 100%;
//border-radius: 15px;
}
.buttons,
.title {
display: flex;
gap: 10px;
}
button {
height: 30px;
padding-inline: 30px;
border-radius: 10px;
color: white;
font-size: 16px;
}
button:disabled,
button[disabled]{
opacity: 0.5;
}
.add-button {
background-color: var(--confirm-button-color);
}
.move-button {
background-color: var(--ion-color-primary);
}
.spend-button {
background-color: var(--negative-amount-color);
}
.icon {
margin-left: auto;
color: var(--font-color);
}
.color-wrapper {
padding: 10px;
border-radius: 9px;
position: relative;
z-index: 1;
}
.color {
--background: rgba(0, 0, 0, 0.3);
background-color: var(--background);
border-radius: 9px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: -1;
}
.other-goals {
padding: unset;
}
.legend {
width: 95%;
display: flex;
font-size: 13px;
gap: 8px;
margin-top: 5px;
flex-wrap: wrap;
}
.legend-item {
display: flex;
--legend-color: white;
color: var(--legend-color);
align-items: center;
}
.circle {
width: 12px;
height: 12px;
background-color: var(--legend-color);
border-radius: 20px;
margin-right: 2px;
}

View File

@ -1,5 +1,10 @@
import { Component } from '@angular/core';
import { UserService } from 'src/app/services/user.service';
import { ActivatedRoute } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { Allowance } from 'src/app/models/allowance';
import { AllowanceService } from 'src/app/services/allowance.service';
import hexRgb from 'hex-rgb';
import { ViewWillEnter } from '@ionic/angular';
@Component({
selector: 'app-allowance',
@ -7,8 +12,64 @@ import { UserService } from 'src/app/services/user.service';
styleUrls: ['allowance.page.scss'],
standalone: false,
})
export class AllowancePage {
export class AllowancePage implements ViewWillEnter {
private id: number;
// Move to add/edit page later
private possibleColors: Array<string> = [
'#6199D9',
'#D98B61',
'#DBC307',
'#13DEB5',
'#7DCB7D',
'#CF1DBD',
'#F53311',
'#2F00FF',
'#098B0D',
'#1BC2E8'
];
public allowance$: BehaviorSubject<Array<Allowance>> = new BehaviorSubject<Array<Allowance>>([]);
constructor(private userService: UserService) {}
constructor(
private route: ActivatedRoute,
private allowanceService: AllowanceService
) {
this.id = this.route.snapshot.params['id'];
this.getAllowance();
}
ionViewWillEnter(): void {
this.getAllowance();
}
getAllowance() {
setTimeout(() => {
this.allowanceService.getAllowanceList(this.id).subscribe(allowance => {
allowance[0].colour = '#9C4BE4';
allowance[0].name = 'Main Allowance';
console.log('Allowance list: ', allowance);
this.allowance$.next(allowance);
})
}, 10);
}
canFinishGoal(allowance: Allowance): boolean {
return allowance.progress >= allowance.target;
}
hexToRgb(color: string) {
return hexRgb(color, { alpha: 0.3, format: 'css' })
}
getPercentage(allowance: Allowance): number {
return allowance.progress / allowance.target * 100;
}
// Returns number in percent
getPartitionSize(goal: Allowance, allowanceList: Array<Allowance>): number {
let allowanceTotal = 0;
for (let allowance of allowanceList) {
allowanceTotal += allowance.progress;
}
return goal.progress / allowanceTotal * 100;
}
}

View File

@ -18,7 +18,7 @@
<input id="name" type="text" formControlName="name"/>
<label>Reward</label>
<input id="name" type="number" formControlName="reward"/>
<input id="name" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="reward"/>
<label>Assigned</label>
<select formControlName="assigned">

View File

@ -30,7 +30,7 @@ export class EditTaskPage implements OnInit {
this.form = this.formBuilder.group({
name: ['', Validators.required],
reward: ['', [Validators.required, Validators.pattern("^[0-9]*$")]],
reward: ['', Validators.required],
assigned: [0, Validators.required]
});
}

View File

@ -0,0 +1,17 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Allowance } from '../models/allowance';
@Injectable({
providedIn: 'root'
})
export class AllowanceService {
private url = 'http://localhost:8080/api';
constructor(private http: HttpClient) {}
getAllowanceList(userId: number): Observable<Array<Allowance>> {
return this.http.get<Allowance[]>(`${this.url}/user/${userId}/allowance`);
}
}

27
frontend/node_modules/.package-lock.json generated vendored Normal file
View File

@ -0,0 +1,27 @@
{
"name": "frontend",
"lockfileVersion": 3,
"requires": true,
"packages": {
"node_modules/@ionic/pwa-elements": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/@ionic/pwa-elements/-/pwa-elements-3.3.0.tgz",
"integrity": "sha512-vbykpxd2nGRlA67AnqDwsiVf8PUmInLyi6lQdnPDjeiML1WZa0CPe6r632nGDV9PTi+sWNde9Xexg9SD6Pwyqw==",
"engines": {
"node": ">=16.0.0",
"npm": ">=8.0.0"
}
},
"node_modules/hex-rgb": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/hex-rgb/-/hex-rgb-5.0.0.tgz",
"integrity": "sha512-NQO+lgVUCtHxZ792FodgW0zflK+ozS9X9dwGp9XvvmPlH7pyxd588cn24TD3rmPm/N0AIRXF10Otah8yKqGw4w==",
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
}
}
}

21
frontend/node_modules/@ionic/pwa-elements/LICENSE generated vendored Normal file
View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2017 Ionic
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,2 @@
'use strict';

View File

@ -0,0 +1,26 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-d7f36e37.js');
/*
Stencil Client Patch Browser v3.4.0 | MIT Licensed | https://stenciljs.com
*/
const patchBrowser = () => {
const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('ionicpwaelements.cjs.js', document.baseURI).href));
const opts = {};
// TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
if (importMeta !== '') {
opts.resourcesUrl = new URL('.', importMeta).href;
// TODO(STENCIL-661): Remove code related to the dynamic import shim
// TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
}
return index.promiseResolve(opts);
};
patchBrowser().then(options => {
return index.bootstrapLazy([["pwa-camera-modal.cjs",[[1,"pwa-camera-modal",{"facingMode":[1,"facing-mode"],"hidePicker":[4,"hide-picker"],"present":[64],"dismiss":[64]}]]],["pwa-action-sheet.cjs",[[1,"pwa-action-sheet",{"header":[1],"cancelable":[4],"options":[16],"open":[32]}]]],["pwa-toast.cjs",[[1,"pwa-toast",{"message":[1],"duration":[2],"closing":[32]}]]],["pwa-camera.cjs",[[1,"pwa-camera",{"facingMode":[1,"facing-mode"],"handlePhoto":[16],"hidePicker":[4,"hide-picker"],"handleNoDeviceError":[16],"noDevicesText":[1,"no-devices-text"],"noDevicesButtonText":[1,"no-devices-button-text"],"photo":[32],"photoSrc":[32],"showShutterOverlay":[32],"flashIndex":[32],"hasCamera":[32],"rotation":[32],"deviceError":[32]}]]],["pwa-camera-modal-instance.cjs",[[1,"pwa-camera-modal-instance",{"facingMode":[1,"facing-mode"],"hidePicker":[4,"hide-picker"],"noDevicesText":[1,"no-devices-text"],"noDevicesButtonText":[1,"no-devices-button-text"]},[[16,"keyup","handleBackdropKeyUp"]]]]]], options);
});
exports.setNonce = index.setNonce;

View File

@ -0,0 +1,22 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-d7f36e37.js');
/*
Stencil Client Patch Esm v3.4.0 | MIT Licensed | https://stenciljs.com
*/
const patchEsm = () => {
return index.promiseResolve();
};
const defineCustomElements = (win, options) => {
if (typeof window === 'undefined') return Promise.resolve();
return patchEsm().then(() => {
return index.bootstrapLazy([["pwa-camera-modal.cjs",[[1,"pwa-camera-modal",{"facingMode":[1,"facing-mode"],"hidePicker":[4,"hide-picker"],"present":[64],"dismiss":[64]}]]],["pwa-action-sheet.cjs",[[1,"pwa-action-sheet",{"header":[1],"cancelable":[4],"options":[16],"open":[32]}]]],["pwa-toast.cjs",[[1,"pwa-toast",{"message":[1],"duration":[2],"closing":[32]}]]],["pwa-camera.cjs",[[1,"pwa-camera",{"facingMode":[1,"facing-mode"],"handlePhoto":[16],"hidePicker":[4,"hide-picker"],"handleNoDeviceError":[16],"noDevicesText":[1,"no-devices-text"],"noDevicesButtonText":[1,"no-devices-button-text"],"photo":[32],"photoSrc":[32],"showShutterOverlay":[32],"flashIndex":[32],"hasCamera":[32],"rotation":[32],"deviceError":[32]}]]],["pwa-camera-modal-instance.cjs",[[1,"pwa-camera-modal-instance",{"facingMode":[1,"facing-mode"],"hidePicker":[4,"hide-picker"],"noDevicesText":[1,"no-devices-text"],"noDevicesButtonText":[1,"no-devices-button-text"]},[[16,"keyup","handleBackdropKeyUp"]]]]]], options);
});
};
exports.setNonce = index.setNonce;
exports.defineCustomElements = defineCustomElements;

View File

@ -0,0 +1,46 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-d7f36e37.js');
const actionSheetCss = ":host{z-index:1000;position:fixed;top:0;left:0;width:100%;height:100%;display:-ms-flexbox;display:flex;contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:-apple-system, BlinkMacSystemFont, \"Helvetica Neue\", \"Roboto\", sans-serif}.wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(0, 0, 0, 0);-webkit-transition:400ms background-color cubic-bezier(.36,.66,.04,1);transition:400ms background-color cubic-bezier(.36,.66,.04,1)}.wrapper.open{background-color:rgba(0, 0, 0, 0.32)}.title{color:#999;height:23px;line-height:23px;padding-bottom:17px;-webkit-padding-end:16px;padding-inline-end:16px;-webkit-padding-start:16px;padding-inline-start:16px;padding-left:16px;padding-right:16px;padding-top:20px}.content{width:568px;-ms-flex-item-align:end;align-self:flex-end;background-color:#fff;-webkit-transition:400ms -webkit-transform cubic-bezier(.36,.66,.04,1);transition:400ms -webkit-transform cubic-bezier(.36,.66,.04,1);transition:400ms transform cubic-bezier(.36,.66,.04,1);transition:400ms transform cubic-bezier(.36,.66,.04,1), 400ms -webkit-transform cubic-bezier(.36,.66,.04,1);-webkit-transform:translateY(100%);transform:translateY(100%)}.wrapper.open .content{-webkit-transform:translateY(0%);transform:translateY(0%)}@media only screen and (max-width: 568px){.content{width:100%}}.action-sheet-option{cursor:pointer;height:52px;line-height:52px}.action-sheet-button{color:rgb(38, 38, 38);font-size:16px;-webkit-padding-end:16px;padding-inline-end:16px;-webkit-padding-start:16px;padding-inline-start:16px;padding-left:16px;padding-right:16px;padding-top:0px}.action-sheet-button:hover{background-color:#F6F6F6}";
const PWAActionSheet = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.onSelection = index.createEvent(this, "onSelection", 7);
this.header = undefined;
this.cancelable = true;
this.options = [];
this.open = false;
}
componentDidLoad() {
requestAnimationFrame(() => {
this.open = true;
});
}
dismiss() {
if (this.cancelable) {
this.close();
}
}
close() {
this.open = false;
setTimeout(() => {
this.el.parentNode.removeChild(this.el);
}, 500);
}
handleOptionClick(e, i) {
e.stopPropagation();
this.onSelection.emit(i);
this.close();
}
render() {
return (index.h("div", { class: `wrapper${this.open ? ' open' : ''}`, onClick: () => this.dismiss() }, index.h("div", { class: "content" }, index.h("div", { class: "title" }, this.header), this.options.map((option, i) => index.h("div", { class: "action-sheet-option", onClick: (e) => this.handleOptionClick(e, i) }, index.h("div", { class: "action-sheet-button" }, option.title))))));
}
get el() { return index.getElement(this); }
};
PWAActionSheet.style = actionSheetCss;
exports.pwa_action_sheet = PWAActionSheet;

View File

@ -0,0 +1,45 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-d7f36e37.js');
const cameraModalInstanceCss = ":host{z-index:1000;position:fixed;top:0;left:0;width:100%;height:100%;display:-ms-flexbox;display:flex;contain:strict;--inset-width:600px;--inset-height:600px}.wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(0, 0, 0, 0.15)}.content{-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, 0.2);box-shadow:0px 0px 5px rgba(0, 0, 0, 0.2);width:var(--inset-width);height:var(--inset-height);max-height:100%}@media only screen and (max-width: 600px){.content{width:100%;height:100%}}";
const PWACameraModal = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.onPhoto = index.createEvent(this, "onPhoto", 7);
this.noDeviceError = index.createEvent(this, "noDeviceError", 7);
this.handlePhoto = async (photo) => {
this.onPhoto.emit(photo);
};
this.handleNoDeviceError = async (photo) => {
this.noDeviceError.emit(photo);
};
this.facingMode = 'user';
this.hidePicker = false;
this.noDevicesText = 'No camera found';
this.noDevicesButtonText = 'Choose image';
}
handleBackdropClick(e) {
if (e.target !== this.el) {
this.onPhoto.emit(null);
}
}
handleComponentClick(e) {
e.stopPropagation();
}
handleBackdropKeyUp(e) {
if (e.key === "Escape") {
this.onPhoto.emit(null);
}
}
render() {
return (index.h("div", { class: "wrapper", onClick: e => this.handleBackdropClick(e) }, index.h("div", { class: "content" }, index.h("pwa-camera", { onClick: e => this.handleComponentClick(e), facingMode: this.facingMode, hidePicker: this.hidePicker, handlePhoto: this.handlePhoto, handleNoDeviceError: this.handleNoDeviceError, noDevicesButtonText: this.noDevicesButtonText, noDevicesText: this.noDevicesText }))));
}
get el() { return index.getElement(this); }
};
PWACameraModal.style = cameraModalInstanceCss;
exports.pwa_camera_modal_instance = PWACameraModal;

View File

@ -0,0 +1,47 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-d7f36e37.js');
const cameraModalCss = ":host{z-index:1000;position:fixed;top:0;left:0;width:100%;height:100%;display:-ms-flexbox;display:flex;contain:strict}.wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(0, 0, 0, 0.15)}.content{-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, 0.2);box-shadow:0px 0px 5px rgba(0, 0, 0, 0.2);width:600px;height:600px}";
const PWACameraModal = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.onPhoto = index.createEvent(this, "onPhoto", 7);
this.noDeviceError = index.createEvent(this, "noDeviceError", 7);
this.facingMode = 'user';
this.hidePicker = false;
}
async present() {
const camera = document.createElement('pwa-camera-modal-instance');
camera.facingMode = this.facingMode;
camera.hidePicker = this.hidePicker;
camera.addEventListener('onPhoto', async (e) => {
if (!this._modal) {
return;
}
const photo = e.detail;
this.onPhoto.emit(photo);
});
camera.addEventListener('noDeviceError', async (e) => {
this.noDeviceError.emit(e);
});
document.body.append(camera);
this._modal = camera;
}
async dismiss() {
if (!this._modal) {
return;
}
this._modal && this._modal.parentNode.removeChild(this._modal);
this._modal = null;
}
render() {
return (index.h("div", null));
}
};
PWACameraModal.style = cameraModalCss;
exports.pwa_camera_modal = PWACameraModal;

View File

@ -0,0 +1,485 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-d7f36e37.js');
/**
* MediaStream ImageCapture polyfill
*
* @license
* Copyright 2018 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
let ImageCapture = window.ImageCapture;
if (typeof ImageCapture === 'undefined') {
ImageCapture = class {
/**
* TODO https://www.w3.org/TR/image-capture/#constructors
*
* @param {MediaStreamTrack} videoStreamTrack - A MediaStreamTrack of the 'video' kind
*/
constructor(videoStreamTrack) {
if (videoStreamTrack.kind !== 'video')
throw new DOMException('NotSupportedError');
this._videoStreamTrack = videoStreamTrack;
if (!('readyState' in this._videoStreamTrack)) {
// Polyfill for Firefox
this._videoStreamTrack.readyState = 'live';
}
// MediaStream constructor not available until Chrome 55 - https://www.chromestatus.com/feature/5912172546752512
this._previewStream = new MediaStream([videoStreamTrack]);
this.videoElement = document.createElement('video');
this.videoElementPlaying = new Promise(resolve => {
this.videoElement.addEventListener('playing', resolve);
});
if (HTMLMediaElement) {
this.videoElement.srcObject = this._previewStream; // Safari 11 doesn't allow use of createObjectURL for MediaStream
}
else {
this.videoElement.src = URL.createObjectURL(this._previewStream);
}
this.videoElement.muted = true;
this.videoElement.setAttribute('playsinline', ''); // Required by Safari on iOS 11. See https://webkit.org/blog/6784
this.videoElement.play();
this.canvasElement = document.createElement('canvas');
// TODO Firefox has https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
this.canvas2dContext = this.canvasElement.getContext('2d');
}
/**
* https://w3c.github.io/mediacapture-image/index.html#dom-imagecapture-videostreamtrack
* @return {MediaStreamTrack} The MediaStreamTrack passed into the constructor
*/
get videoStreamTrack() {
return this._videoStreamTrack;
}
/**
* Implements https://www.w3.org/TR/image-capture/#dom-imagecapture-getphotocapabilities
* @return {Promise<PhotoCapabilities>} Fulfilled promise with
* [PhotoCapabilities](https://www.w3.org/TR/image-capture/#idl-def-photocapabilities)
* object on success, rejected promise on failure
*/
getPhotoCapabilities() {
return new Promise(function executorGPC(resolve, reject) {
// TODO see https://github.com/w3c/mediacapture-image/issues/97
const MediaSettingsRange = {
current: 0, min: 0, max: 0,
};
resolve({
exposureCompensation: MediaSettingsRange,
exposureMode: 'none',
fillLightMode: ['none'],
focusMode: 'none',
imageHeight: MediaSettingsRange,
imageWidth: MediaSettingsRange,
iso: MediaSettingsRange,
redEyeReduction: false,
whiteBalanceMode: 'none',
zoom: MediaSettingsRange,
});
reject(new DOMException('OperationError'));
});
}
/**
* Implements https://www.w3.org/TR/image-capture/#dom-imagecapture-setoptions
* @param {Object} photoSettings - Photo settings dictionary, https://www.w3.org/TR/image-capture/#idl-def-photosettings
* @return {Promise<void>} Fulfilled promise on success, rejected promise on failure
*/
setOptions(_photoSettings = {}) {
return new Promise(function executorSO(_resolve, _reject) {
// TODO
});
}
/**
* TODO
* Implements https://www.w3.org/TR/image-capture/#dom-imagecapture-takephoto
* @return {Promise<Blob>} Fulfilled promise with [Blob](https://www.w3.org/TR/FileAPI/#blob)
* argument on success; rejected promise on failure
*/
takePhoto() {
const self = this;
return new Promise(function executorTP(resolve, reject) {
// `If the readyState of the MediaStreamTrack provided in the constructor is not live,
// return a promise rejected with a new DOMException whose name is "InvalidStateError".`
if (self._videoStreamTrack.readyState !== 'live') {
return reject(new DOMException('InvalidStateError'));
}
self.videoElementPlaying.then(() => {
try {
self.canvasElement.width = self.videoElement.videoWidth;
self.canvasElement.height = self.videoElement.videoHeight;
self.canvas2dContext.drawImage(self.videoElement, 0, 0);
self.canvasElement.toBlob(resolve);
}
catch (error) {
reject(new DOMException('UnknownError'));
}
});
});
}
/**
* Implements https://www.w3.org/TR/image-capture/#dom-imagecapture-grabframe
* @return {Promise<ImageBitmap>} Fulfilled promise with
* [ImageBitmap](https://www.w3.org/TR/html51/webappapis.html#webappapis-images)
* argument on success; rejected promise on failure
*/
grabFrame() {
const self = this;
return new Promise(function executorGF(resolve, reject) {
// `If the readyState of the MediaStreamTrack provided in the constructor is not live,
// return a promise rejected with a new DOMException whose name is "InvalidStateError".`
if (self._videoStreamTrack.readyState !== 'live') {
return reject(new DOMException('InvalidStateError'));
}
self.videoElementPlaying.then(() => {
try {
self.canvasElement.width = self.videoElement.videoWidth;
self.canvasElement.height = self.videoElement.videoHeight;
self.canvas2dContext.drawImage(self.videoElement, 0, 0);
// TODO polyfill https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmapFactories/createImageBitmap for IE
resolve(window.createImageBitmap(self.canvasElement));
}
catch (error) {
reject(new DOMException('UnknownError'));
}
});
});
}
};
}
window.ImageCapture = ImageCapture;
const cameraCss = ":host{--header-height:4em;--footer-height:9em;--header-height-landscape:3em;--footer-height-landscape:6em;--shutter-size:6em;--icon-size-header:1.5em;--icon-size-footer:2.5em;--margin-size-header:1.5em;--margin-size-footer:2.0em;font-family:-apple-system, BlinkMacSystemFont,\n “Segoe UI”, “Roboto”, “Droid Sans”, “Helvetica Neue”, sans-serif;display:block;width:100%;height:100%}.items{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;height:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.items .item{-ms-flex:1;flex:1;text-align:center}.items .item:first-child{text-align:left}.items .item:last-child{text-align:right}.camera-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.camera-header{color:white;background-color:black;height:var(--header-height)}.camera-header .items{padding:var(--margin-size-header)}.camera-footer{position:relative;color:white;background-color:black;height:var(--footer-height)}.camera-footer .items{padding:var(--margin-size-footer)}@media (max-height: 375px){.camera-header{--header-height:var(--header-height-landscape)}.camera-footer{--footer-height:var(--footer-height-landscape)}.camera-footer .shutter{--shutter-size:4em}}.camera-video{position:relative;-ms-flex:1;flex:1;overflow:hidden;background-color:black}video{width:100%;height:100%;max-height:100%;min-height:100%;-o-object-fit:cover;object-fit:cover;background-color:black}.pick-image{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;position:absolute;left:var(--margin-size-footer);top:0;height:100%;width:var(--icon-size-footer);color:white}.pick-image input{visibility:hidden}.pick-image svg{cursor:pointer;fill:white;width:var(--icon-size-footer);height:var(--icon-size-footer)}.shutter{position:absolute;left:50%;top:50%;width:var(--shutter-size);height:var(--shutter-size);margin-top:calc(var(--shutter-size) / -2);margin-left:calc(var(--shutter-size) / -2);border-radius:100%;background-color:#c6cdd8;padding:12px;-webkit-box-sizing:border-box;box-sizing:border-box}.shutter:active .shutter-button{background-color:#9da9bb}.shutter-button{background-color:white;border-radius:100%;width:100%;height:100%}.rotate{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;position:absolute;right:var(--margin-size-footer);top:0;height:100%;width:var(--icon-size-footer);color:white}.rotate img{width:var(--icon-size-footer);height:var(--icon-size-footer)}.shutter-overlay{z-index:5;position:absolute;width:100%;height:100%;background-color:black}.error{width:100%;height:100%;color:white;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.no-device{background-color:black;-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:white}.no-device label{cursor:pointer;background:#fff;border-radius:6px;padding:6px 8px;color:black}.no-device input{visibility:hidden;height:0;margin-top:16px}.accept{background-color:black;-ms-flex:1;flex:1;overflow:hidden}.accept .accept-image{width:100%;height:100%;max-height:100%;background-position:center center;background-size:cover;background-repeat:no-repeat}.close img{cursor:pointer;width:var(--icon-size-header);height:var(--icon-size-header)}.flash img{width:var(--icon-size-header);height:var(--icon-size-header)}.accept-use img{width:var(--icon-size-footer);height:var(--icon-size-footer)}.accept-cancel img{width:var(--icon-size-footer);height:var(--icon-size-footer)}.offscreen-image-render{top:0;left:0;visibility:hidden;pointer-events:none;width:100%;height:100%}";
const CameraPWA = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
// Whether the device has multiple cameras (front/back)
this.hasMultipleCameras = false;
// Whether the device has flash support
this.hasFlash = false;
// Flash modes for camera
this.flashModes = [];
// Current flash mode
this.flashMode = 'off';
this.handlePickFile = (_e) => {
};
this.handleShutterClick = (_e) => {
console.debug('shutter click');
this.capture();
};
this.handleRotateClick = (_e) => {
this.rotate();
};
this.handleClose = (_e) => {
this.handlePhoto && this.handlePhoto(null);
};
this.handleFlashClick = (_e) => {
this.cycleFlash();
};
this.handleCancelPhoto = (_e) => {
const track = this.stream && this.stream.getTracks()[0];
let c = track && track.getConstraints();
this.photo = null;
this.photoSrc = null;
if (c) {
this.initCamera({
video: {
facingMode: c.facingMode
}
});
}
else {
this.initCamera();
}
};
this.handleAcceptPhoto = (_e) => {
this.handlePhoto && this.handlePhoto(this.photo);
};
this.handleFileInputChange = async (e) => {
const input = e.target;
const file = input.files[0];
try {
const orientation = await this.getOrientation(file);
console.debug('Got orientation', orientation);
this.photoOrientation = orientation;
}
catch (e) {
}
this.handlePhoto && this.handlePhoto(file);
};
this.handleVideoMetadata = (e) => {
console.debug('Video metadata', e);
};
this.facingMode = 'user';
this.handlePhoto = undefined;
this.hidePicker = false;
this.handleNoDeviceError = undefined;
this.noDevicesText = 'No camera found';
this.noDevicesButtonText = 'Choose image';
this.photo = undefined;
this.photoSrc = undefined;
this.showShutterOverlay = false;
this.flashIndex = 0;
this.hasCamera = null;
this.rotation = 0;
this.deviceError = null;
}
async componentDidLoad() {
this.defaultConstraints = {
video: {
facingMode: this.facingMode
}
};
// Figure out how many cameras we have
await this.queryDevices();
// Initialize the camera
await this.initCamera();
}
disconnectedCallback() {
this.stopStream();
this.photoSrc && URL.revokeObjectURL(this.photoSrc);
}
hasImageCapture() {
return 'ImageCapture' in window;
}
/**
* Query the list of connected devices and figure out how many video inputs we have.
*/
async queryDevices() {
try {
const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = devices.filter(d => d.kind == 'videoinput');
this.hasCamera = !!videoDevices.length;
this.hasMultipleCameras = videoDevices.length > 1;
}
catch (e) {
this.deviceError = e;
}
}
async initCamera(constraints) {
if (!constraints) {
constraints = this.defaultConstraints;
}
try {
const stream = await navigator.mediaDevices.getUserMedia(Object.assign({ video: true, audio: false }, constraints));
this.initStream(stream);
}
catch (e) {
this.deviceError = e;
this.handleNoDeviceError && this.handleNoDeviceError(e);
}
}
async initStream(stream) {
this.stream = stream;
this.videoElement.srcObject = stream;
if (this.hasImageCapture()) {
this.imageCapture = new window.ImageCapture(stream.getVideoTracks()[0]);
await this.initPhotoCapabilities(this.imageCapture);
}
else {
this.deviceError = 'No image capture';
this.handleNoDeviceError && this.handleNoDeviceError();
}
// Always re-render
index.forceUpdate(this.el);
}
async initPhotoCapabilities(imageCapture) {
const c = await imageCapture.getPhotoCapabilities();
if (c.fillLightMode && c.fillLightMode.length > 1) {
this.flashModes = c.fillLightMode.map(m => m);
// Try to recall the current flash mode
if (this.flashMode) {
this.flashMode = this.flashModes[this.flashModes.indexOf(this.flashMode)] || 'off';
this.flashIndex = this.flashModes.indexOf(this.flashMode) || 0;
}
else {
this.flashIndex = 0;
}
}
}
stopStream() {
if (this.videoElement) {
this.videoElement.srcObject = null;
}
this.stream && this.stream.getTracks().forEach(track => track.stop());
}
async capture() {
if (this.hasImageCapture()) {
try {
const photo = await this.imageCapture.takePhoto({
fillLightMode: this.flashModes.length > 1 ? this.flashMode : undefined
});
await this.flashScreen();
this.promptAccept(photo);
}
catch (e) {
console.error('Unable to take photo!', e);
}
}
this.stopStream();
}
async promptAccept(photo) {
this.photo = photo;
const orientation = await this.getOrientation(photo);
console.debug('Got orientation', orientation);
this.photoOrientation = orientation;
if (orientation) {
switch (orientation) {
case 1:
case 2:
this.rotation = 0;
break;
case 3:
case 4:
this.rotation = 180;
break;
case 5:
case 6:
this.rotation = 90;
break;
case 7:
case 8:
this.rotation = 270;
break;
}
}
this.photoSrc = URL.createObjectURL(photo);
}
getOrientation(file) {
return new Promise(resolve => {
const reader = new FileReader();
reader.onload = (event) => {
const view = new DataView(event.target.result);
if (view.getUint16(0, false) !== 0xFFD8) {
return resolve(-2);
}
const length = view.byteLength;
let offset = 2;
while (offset < length) {
const marker = view.getUint16(offset, false);
offset += 2;
if (marker === 0xFFE1) {
if (view.getUint32(offset += 2, false) !== 0x45786966) {
return resolve(-1);
}
const little = view.getUint16(offset += 6, false) === 0x4949;
offset += view.getUint32(offset + 4, little);
const tags = view.getUint16(offset, little);
offset += 2;
for (let i = 0; i < tags; i++) {
if (view.getUint16(offset + (i * 12), little) === 0x0112) {
return resolve(view.getUint16(offset + (i * 12) + 8, little));
}
}
}
else if ((marker & 0xFF00) !== 0xFF00) {
break;
}
else {
offset += view.getUint16(offset, false);
}
}
return resolve(-1);
};
reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
});
}
rotate() {
this.stopStream();
const track = this.stream && this.stream.getTracks()[0];
if (!track) {
return;
}
let c = track.getConstraints();
let facingMode = c.facingMode;
if (!facingMode) {
let c = track.getCapabilities();
if (c.facingMode) {
facingMode = c.facingMode[0];
}
}
if (facingMode === 'environment') {
this.initCamera({
video: {
facingMode: 'user'
}
});
}
else {
this.initCamera({
video: {
facingMode: 'environment'
}
});
}
}
setFlashMode(mode) {
console.debug('New flash mode: ', mode);
this.flashMode = mode;
}
cycleFlash() {
if (this.flashModes.length > 0) {
this.flashIndex = (this.flashIndex + 1) % this.flashModes.length;
this.setFlashMode(this.flashModes[this.flashIndex]);
}
}
async flashScreen() {
return new Promise((resolve, _reject) => {
this.showShutterOverlay = true;
setTimeout(() => {
this.showShutterOverlay = false;
resolve();
}, 100);
});
}
iconExit() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Cg id='Icon_5_'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M402.2,134L378,109.8c-1.6-1.6-4.1-1.6-5.7,0L258.8,223.4c-1.6,1.6-4.1,1.6-5.7,0L139.6,109.8 c-1.6-1.6-4.1-1.6-5.7,0L109.8,134c-1.6,1.6-1.6,4.1,0,5.7l113.5,113.5c1.6,1.6,1.6,4.1,0,5.7L109.8,372.4c-1.6,1.6-1.6,4.1,0,5.7 l24.1,24.1c1.6,1.6,4.1,1.6,5.7,0l113.5-113.5c1.6-1.6,4.1-1.6,5.7,0l113.5,113.5c1.6,1.6,4.1,1.6,5.7,0l24.1-24.1 c1.6-1.6,1.6-4.1,0-5.7L288.6,258.8c-1.6-1.6-1.6-4.1,0-5.7l113.5-113.5C403.7,138.1,403.7,135.5,402.2,134z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E`;
}
iconPhotos() {
return (index.h("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '512', height: '512', viewBox: '0 0 512 512' }, index.h("path", { d: 'M450.29,112H142c-34,0-62,27.51-62,61.33V418.67C80,452.49,108,480,142,480H450c34,0,62-26.18,62-60V173.33C512,139.51,484.32,112,450.29,112Zm-77.15,61.34a46,46,0,1,1-46.28,46A46.19,46.19,0,0,1,373.14,173.33Zm-231.55,276c-17,0-29.86-13.75-29.86-30.66V353.85l90.46-80.79a46.54,46.54,0,0,1,63.44,1.83L328.27,337l-113,112.33ZM480,418.67a30.67,30.67,0,0,1-30.71,30.66H259L376.08,333a46.24,46.24,0,0,1,59.44-.16L480,370.59Z' }), index.h("path", { d: 'M384,32H64A64,64,0,0,0,0,96V352a64.11,64.11,0,0,0,48,62V152a72,72,0,0,1,72-72H446A64.11,64.11,0,0,0,384,32Z' })));
}
iconConfirm() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Ccircle fill='%232CD865' cx='256' cy='256' r='256'/%3E%3Cg id='Icon_1_'%3E%3Cg%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M208,301.4l-55.4-55.5c-1.5-1.5-4-1.6-5.6-0.1l-23.4,22.3c-1.6,1.6-1.7,4.1-0.1,5.7l81.6,81.4 c3.1,3.1,8.2,3.1,11.3,0l171.8-171.7c1.6-1.6,1.6-4.2-0.1-5.7l-23.4-22.3c-1.6-1.5-4.1-1.5-5.6,0.1L213.7,301.4 C212.1,303,209.6,303,208,301.4z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E`;
}
iconReverseCamera() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M352,0H160C72,0,0,72,0,160v192c0,88,72,160,160,160h192c88,0,160-72,160-160V160C512,72,440,0,352,0z M356.7,365.8l-3.7,3.3c-27,23.2-61.4,35.9-96.8,35.9c-72.4,0-135.8-54.7-147-125.6c-0.3-1.9-2-3.3-3.9-3.3H64 c-3.3,0-5.2-3.8-3.2-6.4l61.1-81.4c1.6-2.1,4.7-2.1,6.4-0.1l63.3,81.4c2,2.6,0.2,6.5-3.2,6.5h-40.6c-2.5,0-4.5,2.4-3.9,4.8 c11.5,51.5,59.2,90.6,112.4,90.6c26.4,0,51.8-9.7,73.7-27.9l3.1-2.5c1.6-1.3,3.9-1.1,5.3,0.3l18.5,18.6 C358.5,361.6,358.4,364.3,356.7,365.8z M451.4,245.6l-61,83.5c-1.6,2.2-4.8,2.2-6.4,0.1l-63.3-83.3c-2-2.6-0.1-6.4,3.2-6.4h40.8 c2.5,0,4.4-2.3,3.9-4.8c-5.1-24.2-17.8-46.5-36.5-63.7c-21.2-19.4-48.2-30.1-76-30.1c-26.5,0-52.6,9.7-73.7,27.3l-3.1,2.5 c-1.6,1.3-3.9,1.2-5.4-0.3l-18.5-18.5c-1.6-1.6-1.5-4.3,0.2-5.9l3.5-3.1c27-23.2,61.4-35.9,96.8-35.9c38,0,73.9,13.7,101.2,38.7 c23.2,21.1,40.3,55.2,45.7,90.1c0.3,1.9,1.9,3.4,3.9,3.4h41.3C451.4,239.2,453.3,243,451.4,245.6z'/%3E%3C/g%3E%3C/svg%3E`;
}
iconRetake() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Ccircle fill='%23727A87' cx='256' cy='256' r='256'/%3E%3Cg id='Icon_5_'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M394.2,142L370,117.8c-1.6-1.6-4.1-1.6-5.7,0L258.8,223.4c-1.6,1.6-4.1,1.6-5.7,0L147.6,117.8 c-1.6-1.6-4.1-1.6-5.7,0L117.8,142c-1.6,1.6-1.6,4.1,0,5.7l105.5,105.5c1.6,1.6,1.6,4.1,0,5.7L117.8,364.4c-1.6,1.6-1.6,4.1,0,5.7 l24.1,24.1c1.6,1.6,4.1,1.6,5.7,0l105.5-105.5c1.6-1.6,4.1-1.6,5.7,0l105.5,105.5c1.6,1.6,4.1,1.6,5.7,0l24.1-24.1 c1.6-1.6,1.6-4.1,0-5.7L288.6,258.8c-1.6-1.6-1.6-4.1,0-5.7l105.5-105.5C395.7,146.1,395.7,143.5,394.2,142z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E`;
}
iconFlashOff() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M498,483.7L42.3,28L14,56.4l149.8,149.8L91,293.8c-2.5,3-0.1,7.2,3.9,7.2h143.9c1.6,0,2.7,1.3,2.4,2.7 L197.6,507c-1,4.4,5.8,6.9,8.9,3.2l118.6-142.8L469.6,512L498,483.7z'/%3E%3Cpath class='st0' d='M449,218.2c2.5-3,0.1-7.2-3.9-7.2H301.2c-1.6,0-2.7-1.3-2.4-2.7L342.4,5c1-4.4-5.8-6.9-8.9-3.2L214.9,144.6 l161.3,161.3L449,218.2z'/%3E%3C/g%3E%3C/svg%3E`;
}
iconFlashOn() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M287.2,211c-1.6,0-2.7-1.3-2.4-2.7L328.4,5c1-4.4-5.8-6.9-8.9-3.2L77,293.8c-2.5,3-0.1,7.2,3.9,7.2h143.9 c1.6,0,2.7,1.3,2.4,2.7L183.6,507c-1,4.4,5.8,6.9,8.9,3.2l242.5-292c2.5-3,0.1-7.2-3.9-7.2L287.2,211L287.2,211z'/%3E%3C/svg%3E`;
}
iconFlashAuto() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M287.2,211c-1.6,0-2.7-1.3-2.4-2.7L328.4,5c1-4.4-5.8-6.9-8.9-3.2L77,293.8c-2.5,3-0.1,7.2,3.9,7.2h143.9 c1.6,0,2.7,1.3,2.4,2.7L183.6,507c-1,4.4,5.8,6.9,8.9,3.2l242.5-292c2.5-3,0.1-7.2-3.9-7.2L287.2,211L287.2,211z'/%3E%3Cg%3E%3Cpath class='st0' d='M321.3,186l74-186H438l74,186h-43.5l-11.9-32.5h-80.9l-12,32.5H321.3z M415.8,47.9l-27.2,70.7h54.9l-27.2-70.7 H415.8z'/%3E%3C/g%3E%3C/svg%3E`;
}
render() {
// const acceptStyles = { transform: `rotate(${-this.rotation}deg)` };
const acceptStyles = {};
return (index.h("div", { class: "camera-wrapper" }, index.h("div", { class: "camera-header" }, index.h("section", { class: "items" }, index.h("div", { class: "item close", onClick: e => this.handleClose(e) }, index.h("img", { src: this.iconExit() })), index.h("div", { class: "item flash", onClick: e => this.handleFlashClick(e) }, this.flashModes.length > 0 && (index.h("div", null, this.flashMode == 'off' ? index.h("img", { src: this.iconFlashOff() }) : '', this.flashMode == 'auto' ? index.h("img", { src: this.iconFlashAuto() }) : '', this.flashMode == 'flash' ? index.h("img", { src: this.iconFlashOn() }) : ''))))), (this.hasCamera === false || !!this.deviceError) && (index.h("div", { class: "no-device" }, index.h("h2", null, this.noDevicesText), index.h("label", { htmlFor: "_pwa-elements-camera-input" }, this.noDevicesButtonText), index.h("input", { type: "file", id: "_pwa-elements-camera-input", onChange: this.handleFileInputChange, accept: "image/*", class: "select-file-button" }))), this.photoSrc ? (index.h("div", { class: "accept" }, index.h("div", { class: "accept-image", style: Object.assign({ backgroundImage: `url(${this.photoSrc})` }, acceptStyles) }))) : (index.h("div", { class: "camera-video" }, this.showShutterOverlay && (index.h("div", { class: "shutter-overlay" })), this.hasImageCapture() ? (index.h("video", { ref: (el) => this.videoElement = el, onLoadedMetaData: this.handleVideoMetadata, autoplay: true, playsinline: true })) : (index.h("canvas", { ref: (el) => this.canvasElement = el, width: "100%", height: "100%" })), index.h("canvas", { class: "offscreen-image-render", ref: e => this.offscreenCanvas = e, width: "100%", height: "100%" }))), this.hasCamera && (index.h("div", { class: "camera-footer" }, !this.photo ? ([
!this.hidePicker && (index.h("div", { class: "pick-image", onClick: this.handlePickFile }, index.h("label", { htmlFor: "_pwa-elements-file-pick" }, this.iconPhotos()), index.h("input", { type: "file", id: "_pwa-elements-file-pick", onChange: this.handleFileInputChange, accept: "image/*", class: "pick-image-button" }))),
index.h("div", { class: "shutter", onClick: this.handleShutterClick }, index.h("div", { class: "shutter-button" })),
index.h("div", { class: "rotate", onClick: this.handleRotateClick }, index.h("img", { src: this.iconReverseCamera() })),
]) : (index.h("section", { class: "items" }, index.h("div", { class: "item accept-cancel", onClick: e => this.handleCancelPhoto(e) }, index.h("img", { src: this.iconRetake() })), index.h("div", { class: "item accept-use", onClick: e => this.handleAcceptPhoto(e) }, index.h("img", { src: this.iconConfirm() }))))))));
}
static get assetsDirs() { return ["icons"]; }
get el() { return index.getElement(this); }
};
CameraPWA.style = cameraCss;
exports.pwa_camera = CameraPWA;

View File

@ -0,0 +1,49 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-d7f36e37.js');
const toastCss = ":host{position:fixed;bottom:20px;left:0;right:0;display:-ms-flexbox;display:flex;opacity:0}:host(.in){-webkit-transition:opacity 300ms;transition:opacity 300ms;opacity:1}:host(.out){-webkit-transition:opacity 1s;transition:opacity 1s;opacity:0}.wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.toast{font-family:-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif;background-color:#eee;color:black;border-radius:5px;padding:10px 15px;font-size:14px;font-weight:500;-webkit-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.20);box-shadow:0px 1px 2px rgba(0, 0, 0, 0.20)}";
const PWAToast = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.message = undefined;
this.duration = 2000;
this.closing = null;
}
hostData() {
const classes = {
out: !!this.closing
};
if (this.closing !== null) {
classes['in'] = !this.closing;
}
return {
class: classes
};
}
componentDidLoad() {
setTimeout(() => {
this.closing = false;
});
setTimeout(() => {
this.close();
}, this.duration);
}
close() {
this.closing = true;
setTimeout(() => {
this.el.parentNode.removeChild(this.el);
}, 1000);
}
__stencil_render() {
return (index.h("div", { class: "wrapper" }, index.h("div", { class: "toast" }, this.message)));
}
get el() { return index.getElement(this); }
render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
};
PWAToast.style = toastCss;
exports.pwa_toast = PWAToast;

View File

@ -0,0 +1,16 @@
{
"entries": [
"./components/action-sheet/action-sheet.js",
"./components/camera/camera.js",
"./components/camera-modal/camera-modal-instance.js",
"./components/camera-modal/camera-modal.js",
"./components/toast/toast.js"
],
"compiler": {
"name": "@stencil/core",
"version": "3.4.0",
"typescriptVersion": "5.0.4"
},
"collections": [],
"bundles": []
}

View File

@ -0,0 +1,79 @@
:host {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
contain: strict;
user-select: none;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
}
.wrapper {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0);
transition: 400ms background-color cubic-bezier(.36,.66,.04,1);
}
.wrapper.open {
background-color: rgba(0, 0, 0, 0.32);
}
.title {
color: #999;
height: 23px;
line-height: 23px;
padding-bottom: 17px;
padding-inline-end: 16px;
padding-inline-start: 16px;
padding-left: 16px;
padding-right: 16px;
padding-top: 20px;
}
.content {
width: 568px;
align-self: flex-end;
background-color:#fff;
transition: 400ms transform cubic-bezier(.36,.66,.04,1);
transform: translateY(100%);
}
.wrapper.open .content {
transform: translateY(0%);
}
@media only screen and (max-width: 568px) {
.content {
width: 100%;
}
}
.action-sheet-option {
cursor: pointer;
height: 52px;
line-height: 52px;
}
.action-sheet-button {
color: rgb(38, 38, 38);
font-size: 16px;
padding-inline-end: 16px;
padding-inline-start: 16px;
padding-left: 16px;
padding-right: 16px;
padding-top: 0px;
}
.action-sheet-button:hover {
background-color: #F6F6F6;
}

View File

@ -0,0 +1,129 @@
import { h } from '@stencil/core';
export class PWAActionSheet {
constructor() {
this.header = undefined;
this.cancelable = true;
this.options = [];
this.open = false;
}
componentDidLoad() {
requestAnimationFrame(() => {
this.open = true;
});
}
dismiss() {
if (this.cancelable) {
this.close();
}
}
close() {
this.open = false;
setTimeout(() => {
this.el.parentNode.removeChild(this.el);
}, 500);
}
handleOptionClick(e, i) {
e.stopPropagation();
this.onSelection.emit(i);
this.close();
}
render() {
return (h("div", { class: `wrapper${this.open ? ' open' : ''}`, onClick: () => this.dismiss() }, h("div", { class: "content" }, h("div", { class: "title" }, this.header), this.options.map((option, i) => h("div", { class: "action-sheet-option", onClick: (e) => this.handleOptionClick(e, i) }, h("div", { class: "action-sheet-button" }, option.title))))));
}
static get is() { return "pwa-action-sheet"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["action-sheet.css"]
};
}
static get styleUrls() {
return {
"$": ["action-sheet.css"]
};
}
static get properties() {
return {
"header": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "header",
"reflect": false
},
"cancelable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "cancelable",
"reflect": false,
"defaultValue": "true"
},
"options": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "ActionSheetOption[]",
"resolved": "ActionSheetOption[]",
"references": {
"ActionSheetOption": {
"location": "import",
"path": "../../definitions"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"defaultValue": "[]"
}
};
}
static get states() {
return {
"open": {}
};
}
static get events() {
return [{
"method": "onSelection",
"name": "onSelection",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
}

View File

@ -0,0 +1,35 @@
:host {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
contain: strict;
--inset-width: 600px;
--inset-height: 600px;
}
.wrapper {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.15);
}
.content {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
width: var(--inset-width);
height: var(--inset-height);
max-height: 100%;
}
@media only screen and (max-width: 600px) {
.content {
width: 100%;
height: 100%;
}
}

View File

@ -0,0 +1,162 @@
import { h } from '@stencil/core';
export class PWACameraModal {
constructor() {
this.handlePhoto = async (photo) => {
this.onPhoto.emit(photo);
};
this.handleNoDeviceError = async (photo) => {
this.noDeviceError.emit(photo);
};
this.facingMode = 'user';
this.hidePicker = false;
this.noDevicesText = 'No camera found';
this.noDevicesButtonText = 'Choose image';
}
handleBackdropClick(e) {
if (e.target !== this.el) {
this.onPhoto.emit(null);
}
}
handleComponentClick(e) {
e.stopPropagation();
}
handleBackdropKeyUp(e) {
if (e.key === "Escape") {
this.onPhoto.emit(null);
}
}
render() {
return (h("div", { class: "wrapper", onClick: e => this.handleBackdropClick(e) }, h("div", { class: "content" }, h("pwa-camera", { onClick: e => this.handleComponentClick(e), facingMode: this.facingMode, hidePicker: this.hidePicker, handlePhoto: this.handlePhoto, handleNoDeviceError: this.handleNoDeviceError, noDevicesButtonText: this.noDevicesButtonText, noDevicesText: this.noDevicesText }))));
}
static get is() { return "pwa-camera-modal-instance"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["camera-modal-instance.css"]
};
}
static get styleUrls() {
return {
"$": ["camera-modal-instance.css"]
};
}
static get properties() {
return {
"facingMode": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "facing-mode",
"reflect": false,
"defaultValue": "'user'"
},
"hidePicker": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "hide-picker",
"reflect": false,
"defaultValue": "false"
},
"noDevicesText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "no-devices-text",
"reflect": false,
"defaultValue": "'No camera found'"
},
"noDevicesButtonText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "no-devices-button-text",
"reflect": false,
"defaultValue": "'Choose image'"
}
};
}
static get events() {
return [{
"method": "onPhoto",
"name": "onPhoto",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "noDeviceError",
"name": "noDeviceError",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get listeners() {
return [{
"name": "keyup",
"method": "handleBackdropKeyUp",
"target": "body",
"capture": false,
"passive": false
}];
}
}

View File

@ -0,0 +1,24 @@
:host {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
contain: strict;
}
.wrapper {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.15);
}
.content {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
width: 600px;
height: 600px;
}

View File

@ -0,0 +1,155 @@
import { h } from '@stencil/core';
export class PWACameraModal {
constructor() {
this.facingMode = 'user';
this.hidePicker = false;
}
async present() {
const camera = document.createElement('pwa-camera-modal-instance');
camera.facingMode = this.facingMode;
camera.hidePicker = this.hidePicker;
camera.addEventListener('onPhoto', async (e) => {
if (!this._modal) {
return;
}
const photo = e.detail;
this.onPhoto.emit(photo);
});
camera.addEventListener('noDeviceError', async (e) => {
this.noDeviceError.emit(e);
});
document.body.append(camera);
this._modal = camera;
}
async dismiss() {
if (!this._modal) {
return;
}
this._modal && this._modal.parentNode.removeChild(this._modal);
this._modal = null;
}
render() {
return (h("div", null));
}
static get is() { return "pwa-camera-modal"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["camera-modal.css"]
};
}
static get styleUrls() {
return {
"$": ["camera-modal.css"]
};
}
static get properties() {
return {
"facingMode": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "facing-mode",
"reflect": false,
"defaultValue": "'user'"
},
"hidePicker": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "hide-picker",
"reflect": false,
"defaultValue": "false"
}
};
}
static get events() {
return [{
"method": "onPhoto",
"name": "onPhoto",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "noDeviceError",
"name": "noDeviceError",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get methods() {
return {
"present": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"dismiss": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
}
};
}
}

View File

@ -0,0 +1,244 @@
:host {
--header-height: 4em;
--footer-height: 9em;
--header-height-landscape: 3em;
--footer-height-landscape: 6em;
--shutter-size: 6em;
--icon-size-header: 1.5em;
--icon-size-footer: 2.5em;
--margin-size-header: 1.5em;
--margin-size-footer: 2.0em;
font-family: -apple-system, BlinkMacSystemFont,
Segoe UI, Roboto, Droid Sans, Helvetica Neue, sans-serif;
display: block;
width: 100%;
height: 100%;
}
.items {
box-sizing: border-box;
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.items .item {
flex: 1;
text-align: center;
}
.items .item:first-child {
text-align: left;
}
.items .item:last-child {
text-align: right;
}
.camera-wrapper {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.camera-header {
color: white;
background-color: black;
height: var(--header-height);
}
.camera-header .items {
padding: var(--margin-size-header);
}
.camera-footer {
position: relative;
color: white;
background-color: black;
height: var(--footer-height);
}
.camera-footer .items {
padding: var(--margin-size-footer);
}
@media (max-height: 375px) {
.camera-header {
--header-height: var(--header-height-landscape);
}
.camera-footer {
--footer-height: var(--footer-height-landscape);
}
.camera-footer .shutter {
--shutter-size: 4em;
}
}
.camera-video {
position: relative;
flex: 1;
overflow: hidden;
background-color: black;
}
video {
width: 100%;
height: 100%;
max-height: 100%;
min-height: 100%;
object-fit: cover;
background-color: black;
}
.pick-image {
display: flex;
align-items: center;
position: absolute;
left: var(--margin-size-footer);
top: 0;
height: 100%;
width: var(--icon-size-footer);
color: white;
}
.pick-image input {
visibility: hidden;
}
.pick-image svg {
cursor: pointer;
fill: white;
width: var(--icon-size-footer);
height: var(--icon-size-footer);
}
.shutter {
position: absolute;
left: 50%;
top: 50%;
width: var(--shutter-size);
height: var(--shutter-size);
margin-top: calc(var(--shutter-size) / -2);
margin-left: calc(var(--shutter-size) / -2);
border-radius: 100%;
background-color: #c6cdd8;
padding: 12px;
box-sizing: border-box;
}
.shutter:active .shutter-button {
background-color: #9da9bb;
}
.shutter-button {
background-color: white;
border-radius: 100%;
width: 100%;
height: 100%;
}
.rotate {
display: flex;
align-items: center;
position: absolute;
right: var(--margin-size-footer);
top: 0;
height: 100%;
width: var(--icon-size-footer);
color: white;
}
.rotate img {
width: var(--icon-size-footer);
height: var(--icon-size-footer);
}
.shutter-overlay {
z-index: 5;
position: absolute;
width: 100%;
height: 100%;
background-color: black;
}
.error {
width: 100%;
height: 100%;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.no-device {
background-color: black;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
}
.no-device label {
cursor: pointer;
background: #fff;
border-radius: 6px;
padding: 6px 8px;
color: black;
}
.no-device input {
visibility: hidden;
height: 0;
margin-top: 16px;
}
.accept {
background-color: black;
flex: 1;
overflow: hidden;
}
.accept .accept-image {
width: 100%;
height: 100%;
max-height: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.close img {
cursor: pointer;
width: var(--icon-size-header);
height: var(--icon-size-header);
}
.flash img {
width: var(--icon-size-header);
height: var(--icon-size-header);
}
.accept-use img {
width: var(--icon-size-footer);
height: var(--icon-size-footer);
}
.accept-cancel img {
width: var(--icon-size-footer);
height: var(--icon-size-footer);
}
.offscreen-image-render {
top: 0;
left: 0;
visibility: hidden;
pointer-events: none;
width: 100%;
height: 100%;
}

View File

@ -0,0 +1,455 @@
import { h, Build, forceUpdate } from '@stencil/core';
import './imagecapture';
export class CameraPWA {
constructor() {
// Whether the device has multiple cameras (front/back)
this.hasMultipleCameras = false;
// Whether the device has flash support
this.hasFlash = false;
// Flash modes for camera
this.flashModes = [];
// Current flash mode
this.flashMode = 'off';
this.handlePickFile = (_e) => {
};
this.handleShutterClick = (_e) => {
console.debug('shutter click');
this.capture();
};
this.handleRotateClick = (_e) => {
this.rotate();
};
this.handleClose = (_e) => {
this.handlePhoto && this.handlePhoto(null);
};
this.handleFlashClick = (_e) => {
this.cycleFlash();
};
this.handleCancelPhoto = (_e) => {
const track = this.stream && this.stream.getTracks()[0];
let c = track && track.getConstraints();
this.photo = null;
this.photoSrc = null;
if (c) {
this.initCamera({
video: {
facingMode: c.facingMode
}
});
}
else {
this.initCamera();
}
};
this.handleAcceptPhoto = (_e) => {
this.handlePhoto && this.handlePhoto(this.photo);
};
this.handleFileInputChange = async (e) => {
const input = e.target;
const file = input.files[0];
try {
const orientation = await this.getOrientation(file);
console.debug('Got orientation', orientation);
this.photoOrientation = orientation;
}
catch (e) {
}
this.handlePhoto && this.handlePhoto(file);
};
this.handleVideoMetadata = (e) => {
console.debug('Video metadata', e);
};
this.facingMode = 'user';
this.handlePhoto = undefined;
this.hidePicker = false;
this.handleNoDeviceError = undefined;
this.noDevicesText = 'No camera found';
this.noDevicesButtonText = 'Choose image';
this.photo = undefined;
this.photoSrc = undefined;
this.showShutterOverlay = false;
this.flashIndex = 0;
this.hasCamera = null;
this.rotation = 0;
this.deviceError = null;
}
async componentDidLoad() {
if (Build.isServer) {
return;
}
this.defaultConstraints = {
video: {
facingMode: this.facingMode
}
};
// Figure out how many cameras we have
await this.queryDevices();
// Initialize the camera
await this.initCamera();
}
disconnectedCallback() {
this.stopStream();
this.photoSrc && URL.revokeObjectURL(this.photoSrc);
}
hasImageCapture() {
return 'ImageCapture' in window;
}
/**
* Query the list of connected devices and figure out how many video inputs we have.
*/
async queryDevices() {
try {
const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = devices.filter(d => d.kind == 'videoinput');
this.hasCamera = !!videoDevices.length;
this.hasMultipleCameras = videoDevices.length > 1;
}
catch (e) {
this.deviceError = e;
}
}
async initCamera(constraints) {
if (!constraints) {
constraints = this.defaultConstraints;
}
try {
const stream = await navigator.mediaDevices.getUserMedia(Object.assign({ video: true, audio: false }, constraints));
this.initStream(stream);
}
catch (e) {
this.deviceError = e;
this.handleNoDeviceError && this.handleNoDeviceError(e);
}
}
async initStream(stream) {
this.stream = stream;
this.videoElement.srcObject = stream;
if (this.hasImageCapture()) {
this.imageCapture = new window.ImageCapture(stream.getVideoTracks()[0]);
await this.initPhotoCapabilities(this.imageCapture);
}
else {
this.deviceError = 'No image capture';
this.handleNoDeviceError && this.handleNoDeviceError();
}
// Always re-render
forceUpdate(this.el);
}
async initPhotoCapabilities(imageCapture) {
const c = await imageCapture.getPhotoCapabilities();
if (c.fillLightMode && c.fillLightMode.length > 1) {
this.flashModes = c.fillLightMode.map(m => m);
// Try to recall the current flash mode
if (this.flashMode) {
this.flashMode = this.flashModes[this.flashModes.indexOf(this.flashMode)] || 'off';
this.flashIndex = this.flashModes.indexOf(this.flashMode) || 0;
}
else {
this.flashIndex = 0;
}
}
}
stopStream() {
if (this.videoElement) {
this.videoElement.srcObject = null;
}
this.stream && this.stream.getTracks().forEach(track => track.stop());
}
async capture() {
if (this.hasImageCapture()) {
try {
const photo = await this.imageCapture.takePhoto({
fillLightMode: this.flashModes.length > 1 ? this.flashMode : undefined
});
await this.flashScreen();
this.promptAccept(photo);
}
catch (e) {
console.error('Unable to take photo!', e);
}
}
this.stopStream();
}
async promptAccept(photo) {
this.photo = photo;
const orientation = await this.getOrientation(photo);
console.debug('Got orientation', orientation);
this.photoOrientation = orientation;
if (orientation) {
switch (orientation) {
case 1:
case 2:
this.rotation = 0;
break;
case 3:
case 4:
this.rotation = 180;
break;
case 5:
case 6:
this.rotation = 90;
break;
case 7:
case 8:
this.rotation = 270;
break;
}
}
this.photoSrc = URL.createObjectURL(photo);
}
getOrientation(file) {
return new Promise(resolve => {
const reader = new FileReader();
reader.onload = (event) => {
const view = new DataView(event.target.result);
if (view.getUint16(0, false) !== 0xFFD8) {
return resolve(-2);
}
const length = view.byteLength;
let offset = 2;
while (offset < length) {
const marker = view.getUint16(offset, false);
offset += 2;
if (marker === 0xFFE1) {
if (view.getUint32(offset += 2, false) !== 0x45786966) {
return resolve(-1);
}
const little = view.getUint16(offset += 6, false) === 0x4949;
offset += view.getUint32(offset + 4, little);
const tags = view.getUint16(offset, little);
offset += 2;
for (let i = 0; i < tags; i++) {
if (view.getUint16(offset + (i * 12), little) === 0x0112) {
return resolve(view.getUint16(offset + (i * 12) + 8, little));
}
}
}
else if ((marker & 0xFF00) !== 0xFF00) {
break;
}
else {
offset += view.getUint16(offset, false);
}
}
return resolve(-1);
};
reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
});
}
rotate() {
this.stopStream();
const track = this.stream && this.stream.getTracks()[0];
if (!track) {
return;
}
let c = track.getConstraints();
let facingMode = c.facingMode;
if (!facingMode) {
let c = track.getCapabilities();
if (c.facingMode) {
facingMode = c.facingMode[0];
}
}
if (facingMode === 'environment') {
this.initCamera({
video: {
facingMode: 'user'
}
});
}
else {
this.initCamera({
video: {
facingMode: 'environment'
}
});
}
}
setFlashMode(mode) {
console.debug('New flash mode: ', mode);
this.flashMode = mode;
}
cycleFlash() {
if (this.flashModes.length > 0) {
this.flashIndex = (this.flashIndex + 1) % this.flashModes.length;
this.setFlashMode(this.flashModes[this.flashIndex]);
}
}
async flashScreen() {
return new Promise((resolve, _reject) => {
this.showShutterOverlay = true;
setTimeout(() => {
this.showShutterOverlay = false;
resolve();
}, 100);
});
}
iconExit() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Cg id='Icon_5_'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M402.2,134L378,109.8c-1.6-1.6-4.1-1.6-5.7,0L258.8,223.4c-1.6,1.6-4.1,1.6-5.7,0L139.6,109.8 c-1.6-1.6-4.1-1.6-5.7,0L109.8,134c-1.6,1.6-1.6,4.1,0,5.7l113.5,113.5c1.6,1.6,1.6,4.1,0,5.7L109.8,372.4c-1.6,1.6-1.6,4.1,0,5.7 l24.1,24.1c1.6,1.6,4.1,1.6,5.7,0l113.5-113.5c1.6-1.6,4.1-1.6,5.7,0l113.5,113.5c1.6,1.6,4.1,1.6,5.7,0l24.1-24.1 c1.6-1.6,1.6-4.1,0-5.7L288.6,258.8c-1.6-1.6-1.6-4.1,0-5.7l113.5-113.5C403.7,138.1,403.7,135.5,402.2,134z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E`;
}
iconPhotos() {
return (h("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '512', height: '512', viewBox: '0 0 512 512' }, h("path", { d: 'M450.29,112H142c-34,0-62,27.51-62,61.33V418.67C80,452.49,108,480,142,480H450c34,0,62-26.18,62-60V173.33C512,139.51,484.32,112,450.29,112Zm-77.15,61.34a46,46,0,1,1-46.28,46A46.19,46.19,0,0,1,373.14,173.33Zm-231.55,276c-17,0-29.86-13.75-29.86-30.66V353.85l90.46-80.79a46.54,46.54,0,0,1,63.44,1.83L328.27,337l-113,112.33ZM480,418.67a30.67,30.67,0,0,1-30.71,30.66H259L376.08,333a46.24,46.24,0,0,1,59.44-.16L480,370.59Z' }), h("path", { d: 'M384,32H64A64,64,0,0,0,0,96V352a64.11,64.11,0,0,0,48,62V152a72,72,0,0,1,72-72H446A64.11,64.11,0,0,0,384,32Z' })));
}
iconConfirm() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Ccircle fill='%232CD865' cx='256' cy='256' r='256'/%3E%3Cg id='Icon_1_'%3E%3Cg%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M208,301.4l-55.4-55.5c-1.5-1.5-4-1.6-5.6-0.1l-23.4,22.3c-1.6,1.6-1.7,4.1-0.1,5.7l81.6,81.4 c3.1,3.1,8.2,3.1,11.3,0l171.8-171.7c1.6-1.6,1.6-4.2-0.1-5.7l-23.4-22.3c-1.6-1.5-4.1-1.5-5.6,0.1L213.7,301.4 C212.1,303,209.6,303,208,301.4z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E`;
}
iconReverseCamera() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M352,0H160C72,0,0,72,0,160v192c0,88,72,160,160,160h192c88,0,160-72,160-160V160C512,72,440,0,352,0z M356.7,365.8l-3.7,3.3c-27,23.2-61.4,35.9-96.8,35.9c-72.4,0-135.8-54.7-147-125.6c-0.3-1.9-2-3.3-3.9-3.3H64 c-3.3,0-5.2-3.8-3.2-6.4l61.1-81.4c1.6-2.1,4.7-2.1,6.4-0.1l63.3,81.4c2,2.6,0.2,6.5-3.2,6.5h-40.6c-2.5,0-4.5,2.4-3.9,4.8 c11.5,51.5,59.2,90.6,112.4,90.6c26.4,0,51.8-9.7,73.7-27.9l3.1-2.5c1.6-1.3,3.9-1.1,5.3,0.3l18.5,18.6 C358.5,361.6,358.4,364.3,356.7,365.8z M451.4,245.6l-61,83.5c-1.6,2.2-4.8,2.2-6.4,0.1l-63.3-83.3c-2-2.6-0.1-6.4,3.2-6.4h40.8 c2.5,0,4.4-2.3,3.9-4.8c-5.1-24.2-17.8-46.5-36.5-63.7c-21.2-19.4-48.2-30.1-76-30.1c-26.5,0-52.6,9.7-73.7,27.3l-3.1,2.5 c-1.6,1.3-3.9,1.2-5.4-0.3l-18.5-18.5c-1.6-1.6-1.5-4.3,0.2-5.9l3.5-3.1c27-23.2,61.4-35.9,96.8-35.9c38,0,73.9,13.7,101.2,38.7 c23.2,21.1,40.3,55.2,45.7,90.1c0.3,1.9,1.9,3.4,3.9,3.4h41.3C451.4,239.2,453.3,243,451.4,245.6z'/%3E%3C/g%3E%3C/svg%3E`;
}
iconRetake() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3E%3Ccircle fill='%23727A87' cx='256' cy='256' r='256'/%3E%3Cg id='Icon_5_'%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M394.2,142L370,117.8c-1.6-1.6-4.1-1.6-5.7,0L258.8,223.4c-1.6,1.6-4.1,1.6-5.7,0L147.6,117.8 c-1.6-1.6-4.1-1.6-5.7,0L117.8,142c-1.6,1.6-1.6,4.1,0,5.7l105.5,105.5c1.6,1.6,1.6,4.1,0,5.7L117.8,364.4c-1.6,1.6-1.6,4.1,0,5.7 l24.1,24.1c1.6,1.6,4.1,1.6,5.7,0l105.5-105.5c1.6-1.6,4.1-1.6,5.7,0l105.5,105.5c1.6,1.6,4.1,1.6,5.7,0l24.1-24.1 c1.6-1.6,1.6-4.1,0-5.7L288.6,258.8c-1.6-1.6-1.6-4.1,0-5.7l105.5-105.5C395.7,146.1,395.7,143.5,394.2,142z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E`;
}
iconFlashOff() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M498,483.7L42.3,28L14,56.4l149.8,149.8L91,293.8c-2.5,3-0.1,7.2,3.9,7.2h143.9c1.6,0,2.7,1.3,2.4,2.7 L197.6,507c-1,4.4,5.8,6.9,8.9,3.2l118.6-142.8L469.6,512L498,483.7z'/%3E%3Cpath class='st0' d='M449,218.2c2.5-3,0.1-7.2-3.9-7.2H301.2c-1.6,0-2.7-1.3-2.4-2.7L342.4,5c1-4.4-5.8-6.9-8.9-3.2L214.9,144.6 l161.3,161.3L449,218.2z'/%3E%3C/g%3E%3C/svg%3E`;
}
iconFlashOn() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M287.2,211c-1.6,0-2.7-1.3-2.4-2.7L328.4,5c1-4.4-5.8-6.9-8.9-3.2L77,293.8c-2.5,3-0.1,7.2,3.9,7.2h143.9 c1.6,0,2.7,1.3,2.4,2.7L183.6,507c-1,4.4,5.8,6.9,8.9,3.2l242.5-292c2.5-3,0.1-7.2-3.9-7.2L287.2,211L287.2,211z'/%3E%3C/svg%3E`;
}
iconFlashAuto() {
return `data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M287.2,211c-1.6,0-2.7-1.3-2.4-2.7L328.4,5c1-4.4-5.8-6.9-8.9-3.2L77,293.8c-2.5,3-0.1,7.2,3.9,7.2h143.9 c1.6,0,2.7,1.3,2.4,2.7L183.6,507c-1,4.4,5.8,6.9,8.9,3.2l242.5-292c2.5-3,0.1-7.2-3.9-7.2L287.2,211L287.2,211z'/%3E%3Cg%3E%3Cpath class='st0' d='M321.3,186l74-186H438l74,186h-43.5l-11.9-32.5h-80.9l-12,32.5H321.3z M415.8,47.9l-27.2,70.7h54.9l-27.2-70.7 H415.8z'/%3E%3C/g%3E%3C/svg%3E`;
}
render() {
// const acceptStyles = { transform: `rotate(${-this.rotation}deg)` };
const acceptStyles = {};
return (h("div", { class: "camera-wrapper" }, h("div", { class: "camera-header" }, h("section", { class: "items" }, h("div", { class: "item close", onClick: e => this.handleClose(e) }, h("img", { src: this.iconExit() })), h("div", { class: "item flash", onClick: e => this.handleFlashClick(e) }, this.flashModes.length > 0 && (h("div", null, this.flashMode == 'off' ? h("img", { src: this.iconFlashOff() }) : '', this.flashMode == 'auto' ? h("img", { src: this.iconFlashAuto() }) : '', this.flashMode == 'flash' ? h("img", { src: this.iconFlashOn() }) : ''))))), (this.hasCamera === false || !!this.deviceError) && (h("div", { class: "no-device" }, h("h2", null, this.noDevicesText), h("label", { htmlFor: "_pwa-elements-camera-input" }, this.noDevicesButtonText), h("input", { type: "file", id: "_pwa-elements-camera-input", onChange: this.handleFileInputChange, accept: "image/*", class: "select-file-button" }))), this.photoSrc ? (h("div", { class: "accept" }, h("div", { class: "accept-image", style: Object.assign({ backgroundImage: `url(${this.photoSrc})` }, acceptStyles) }))) : (h("div", { class: "camera-video" }, this.showShutterOverlay && (h("div", { class: "shutter-overlay" })), this.hasImageCapture() ? (h("video", { ref: (el) => this.videoElement = el, onLoadedMetaData: this.handleVideoMetadata, autoplay: true, playsinline: true })) : (h("canvas", { ref: (el) => this.canvasElement = el, width: "100%", height: "100%" })), h("canvas", { class: "offscreen-image-render", ref: e => this.offscreenCanvas = e, width: "100%", height: "100%" }))), this.hasCamera && (h("div", { class: "camera-footer" }, !this.photo ? ([
!this.hidePicker && (h("div", { class: "pick-image", onClick: this.handlePickFile }, h("label", { htmlFor: "_pwa-elements-file-pick" }, this.iconPhotos()), h("input", { type: "file", id: "_pwa-elements-file-pick", onChange: this.handleFileInputChange, accept: "image/*", class: "pick-image-button" }))),
h("div", { class: "shutter", onClick: this.handleShutterClick }, h("div", { class: "shutter-button" })),
h("div", { class: "rotate", onClick: this.handleRotateClick }, h("img", { src: this.iconReverseCamera() })),
]) : (h("section", { class: "items" }, h("div", { class: "item accept-cancel", onClick: e => this.handleCancelPhoto(e) }, h("img", { src: this.iconRetake() })), h("div", { class: "item accept-use", onClick: e => this.handleAcceptPhoto(e) }, h("img", { src: this.iconConfirm() }))))))));
}
static get is() { return "pwa-camera"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["camera.css"]
};
}
static get styleUrls() {
return {
"$": ["camera.css"]
};
}
static get assetsDirs() { return ["icons"]; }
static get properties() {
return {
"facingMode": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "facing-mode",
"reflect": false,
"defaultValue": "'user'"
},
"handlePhoto": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "(photo: Blob) => void",
"resolved": "(photo: Blob) => void",
"references": {
"Blob": {
"location": "global"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
},
"hidePicker": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "hide-picker",
"reflect": false,
"defaultValue": "false"
},
"handleNoDeviceError": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "(e?: any) => void",
"resolved": "(e?: any) => void",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
},
"noDevicesText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "no-devices-text",
"reflect": false,
"defaultValue": "'No camera found'"
},
"noDevicesButtonText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "no-devices-button-text",
"reflect": false,
"defaultValue": "'Choose image'"
}
};
}
static get states() {
return {
"photo": {},
"photoSrc": {},
"showShutterOverlay": {},
"flashIndex": {},
"hasCamera": {},
"rotation": {},
"deviceError": {}
};
}
static get elementRef() { return "el"; }
}

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<circle fill="#2CD865" cx="256" cy="256" r="256"/>
<g id="Icon_1_">
<g>
<g>
<path fill="#FFFFFF" d="M208,301.4l-55.4-55.5c-1.5-1.5-4-1.6-5.6-0.1l-23.4,22.3c-1.6,1.6-1.7,4.1-0.1,5.7l81.6,81.4
c3.1,3.1,8.2,3.1,11.3,0l171.8-171.7c1.6-1.6,1.6-4.2-0.1-5.7l-23.4-22.3c-1.6-1.5-4.1-1.5-5.6,0.1L213.7,301.4
C212.1,303,209.6,303,208,301.4z"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 715 B

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<g id="Icon_5_">
<g>
<path fill="#FFFFFF" d="M402.2,134L378,109.8c-1.6-1.6-4.1-1.6-5.7,0L258.8,223.4c-1.6,1.6-4.1,1.6-5.7,0L139.6,109.8
c-1.6-1.6-4.1-1.6-5.7,0L109.8,134c-1.6,1.6-1.6,4.1,0,5.7l113.5,113.5c1.6,1.6,1.6,4.1,0,5.7L109.8,372.4c-1.6,1.6-1.6,4.1,0,5.7
l24.1,24.1c1.6,1.6,4.1,1.6,5.7,0l113.5-113.5c1.6-1.6,4.1-1.6,5.7,0l113.5,113.5c1.6,1.6,4.1,1.6,5.7,0l24.1-24.1
c1.6-1.6,1.6-4.1,0-5.7L288.6,258.8c-1.6-1.6-1.6-4.1,0-5.7l113.5-113.5C403.7,138.1,403.7,135.5,402.2,134z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 853 B

View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M287.2,211c-1.6,0-2.7-1.3-2.4-2.7L328.4,5c1-4.4-5.8-6.9-8.9-3.2L77,293.8c-2.5,3-0.1,7.2,3.9,7.2h143.9
c1.6,0,2.7,1.3,2.4,2.7L183.6,507c-1,4.4,5.8,6.9,8.9,3.2l242.5-292c2.5-3,0.1-7.2-3.9-7.2L287.2,211L287.2,211z"/>
<g>
<path class="st0" d="M321.3,186l74-186H438l74,186h-43.5l-11.9-32.5h-80.9l-12,32.5H321.3z M415.8,47.9l-27.2,70.7h54.9l-27.2-70.7
H415.8z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 797 B

View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<path class="st0" d="M498,483.7L42.3,28L14,56.4l149.8,149.8L91,293.8c-2.5,3-0.1,7.2,3.9,7.2h143.9c1.6,0,2.7,1.3,2.4,2.7
L197.6,507c-1,4.4,5.8,6.9,8.9,3.2l118.6-142.8L469.6,512L498,483.7z"/>
<path class="st0" d="M449,218.2c2.5-3,0.1-7.2-3.9-7.2H301.2c-1.6,0-2.7-1.3-2.4-2.7L342.4,5c1-4.4-5.8-6.9-8.9-3.2L214.9,144.6
l161.3,161.3L449,218.2z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 767 B

View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M287.2,211c-1.6,0-2.7-1.3-2.4-2.7L328.4,5c1-4.4-5.8-6.9-8.9-3.2L77,293.8c-2.5,3-0.1,7.2,3.9,7.2h143.9
c1.6,0,2.7,1.3,2.4,2.7L183.6,507c-1,4.4,5.8,6.9,8.9,3.2l242.5-292c2.5-3,0.1-7.2-3.9-7.2L287.2,211L287.2,211z"/>
</svg>

After

Width:  |  Height:  |  Size: 646 B

View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<circle fill="#727A87" cx="256" cy="256" r="256"/>
<g id="Icon_5_">
<g>
<path fill="#FFFFFF" d="M394.2,142L370,117.8c-1.6-1.6-4.1-1.6-5.7,0L258.8,223.4c-1.6,1.6-4.1,1.6-5.7,0L147.6,117.8
c-1.6-1.6-4.1-1.6-5.7,0L117.8,142c-1.6,1.6-1.6,4.1,0,5.7l105.5,105.5c1.6,1.6,1.6,4.1,0,5.7L117.8,364.4c-1.6,1.6-1.6,4.1,0,5.7
l24.1,24.1c1.6,1.6,4.1,1.6,5.7,0l105.5-105.5c1.6-1.6,4.1-1.6,5.7,0l105.5,105.5c1.6,1.6,4.1,1.6,5.7,0l24.1-24.1
c1.6-1.6,1.6-4.1,0-5.7L288.6,258.8c-1.6-1.6-1.6-4.1,0-5.7l105.5-105.5C395.7,146.1,395.7,143.5,394.2,142z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 904 B

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M352,0H160C72,0,0,72,0,160v192c0,88,72,160,160,160h192c88,0,160-72,160-160V160C512,72,440,0,352,0z
M356.7,365.8l-3.7,3.3c-27,23.2-61.4,35.9-96.8,35.9c-72.4,0-135.8-54.7-147-125.6c-0.3-1.9-2-3.3-3.9-3.3H64
c-3.3,0-5.2-3.8-3.2-6.4l61.1-81.4c1.6-2.1,4.7-2.1,6.4-0.1l63.3,81.4c2,2.6,0.2,6.5-3.2,6.5h-40.6c-2.5,0-4.5,2.4-3.9,4.8
c11.5,51.5,59.2,90.6,112.4,90.6c26.4,0,51.8-9.7,73.7-27.9l3.1-2.5c1.6-1.3,3.9-1.1,5.3,0.3l18.5,18.6
C358.5,361.6,358.4,364.3,356.7,365.8z M451.4,245.6l-61,83.5c-1.6,2.2-4.8,2.2-6.4,0.1l-63.3-83.3c-2-2.6-0.1-6.4,3.2-6.4h40.8
c2.5,0,4.4-2.3,3.9-4.8c-5.1-24.2-17.8-46.5-36.5-63.7c-21.2-19.4-48.2-30.1-76-30.1c-26.5,0-52.6,9.7-73.7,27.3l-3.1,2.5
c-1.6,1.3-3.9,1.2-5.4-0.3l-18.5-18.5c-1.6-1.6-1.5-4.3,0.2-5.9l3.5-3.1c27-23.2,61.4-35.9,96.8-35.9c38,0,73.9,13.7,101.2,38.7
c23.2,21.1,40.3,55.2,45.7,90.1c0.3,1.9,1.9,3.4,3.9,3.4h41.3C451.4,239.2,453.3,243,451.4,245.6z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,155 @@
/**
* MediaStream ImageCapture polyfill
*
* @license
* Copyright 2018 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export let ImageCapture = window.ImageCapture;
if (typeof ImageCapture === 'undefined') {
ImageCapture = class {
/**
* TODO https://www.w3.org/TR/image-capture/#constructors
*
* @param {MediaStreamTrack} videoStreamTrack - A MediaStreamTrack of the 'video' kind
*/
constructor(videoStreamTrack) {
if (videoStreamTrack.kind !== 'video')
throw new DOMException('NotSupportedError');
this._videoStreamTrack = videoStreamTrack;
if (!('readyState' in this._videoStreamTrack)) {
// Polyfill for Firefox
this._videoStreamTrack.readyState = 'live';
}
// MediaStream constructor not available until Chrome 55 - https://www.chromestatus.com/feature/5912172546752512
this._previewStream = new MediaStream([videoStreamTrack]);
this.videoElement = document.createElement('video');
this.videoElementPlaying = new Promise(resolve => {
this.videoElement.addEventListener('playing', resolve);
});
if (HTMLMediaElement) {
this.videoElement.srcObject = this._previewStream; // Safari 11 doesn't allow use of createObjectURL for MediaStream
}
else {
this.videoElement.src = URL.createObjectURL(this._previewStream);
}
this.videoElement.muted = true;
this.videoElement.setAttribute('playsinline', ''); // Required by Safari on iOS 11. See https://webkit.org/blog/6784
this.videoElement.play();
this.canvasElement = document.createElement('canvas');
// TODO Firefox has https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
this.canvas2dContext = this.canvasElement.getContext('2d');
}
/**
* https://w3c.github.io/mediacapture-image/index.html#dom-imagecapture-videostreamtrack
* @return {MediaStreamTrack} The MediaStreamTrack passed into the constructor
*/
get videoStreamTrack() {
return this._videoStreamTrack;
}
/**
* Implements https://www.w3.org/TR/image-capture/#dom-imagecapture-getphotocapabilities
* @return {Promise<PhotoCapabilities>} Fulfilled promise with
* [PhotoCapabilities](https://www.w3.org/TR/image-capture/#idl-def-photocapabilities)
* object on success, rejected promise on failure
*/
getPhotoCapabilities() {
return new Promise(function executorGPC(resolve, reject) {
// TODO see https://github.com/w3c/mediacapture-image/issues/97
const MediaSettingsRange = {
current: 0, min: 0, max: 0,
};
resolve({
exposureCompensation: MediaSettingsRange,
exposureMode: 'none',
fillLightMode: ['none'],
focusMode: 'none',
imageHeight: MediaSettingsRange,
imageWidth: MediaSettingsRange,
iso: MediaSettingsRange,
redEyeReduction: false,
whiteBalanceMode: 'none',
zoom: MediaSettingsRange,
});
reject(new DOMException('OperationError'));
});
}
/**
* Implements https://www.w3.org/TR/image-capture/#dom-imagecapture-setoptions
* @param {Object} photoSettings - Photo settings dictionary, https://www.w3.org/TR/image-capture/#idl-def-photosettings
* @return {Promise<void>} Fulfilled promise on success, rejected promise on failure
*/
setOptions(_photoSettings = {}) {
return new Promise(function executorSO(_resolve, _reject) {
// TODO
});
}
/**
* TODO
* Implements https://www.w3.org/TR/image-capture/#dom-imagecapture-takephoto
* @return {Promise<Blob>} Fulfilled promise with [Blob](https://www.w3.org/TR/FileAPI/#blob)
* argument on success; rejected promise on failure
*/
takePhoto() {
const self = this;
return new Promise(function executorTP(resolve, reject) {
// `If the readyState of the MediaStreamTrack provided in the constructor is not live,
// return a promise rejected with a new DOMException whose name is "InvalidStateError".`
if (self._videoStreamTrack.readyState !== 'live') {
return reject(new DOMException('InvalidStateError'));
}
self.videoElementPlaying.then(() => {
try {
self.canvasElement.width = self.videoElement.videoWidth;
self.canvasElement.height = self.videoElement.videoHeight;
self.canvas2dContext.drawImage(self.videoElement, 0, 0);
self.canvasElement.toBlob(resolve);
}
catch (error) {
reject(new DOMException('UnknownError'));
}
});
});
}
/**
* Implements https://www.w3.org/TR/image-capture/#dom-imagecapture-grabframe
* @return {Promise<ImageBitmap>} Fulfilled promise with
* [ImageBitmap](https://www.w3.org/TR/html51/webappapis.html#webappapis-images)
* argument on success; rejected promise on failure
*/
grabFrame() {
const self = this;
return new Promise(function executorGF(resolve, reject) {
// `If the readyState of the MediaStreamTrack provided in the constructor is not live,
// return a promise rejected with a new DOMException whose name is "InvalidStateError".`
if (self._videoStreamTrack.readyState !== 'live') {
return reject(new DOMException('InvalidStateError'));
}
self.videoElementPlaying.then(() => {
try {
self.canvasElement.width = self.videoElement.videoWidth;
self.canvasElement.height = self.videoElement.videoHeight;
self.canvas2dContext.drawImage(self.videoElement, 0, 0);
// TODO polyfill https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmapFactories/createImageBitmap for IE
resolve(window.createImageBitmap(self.canvasElement));
}
catch (error) {
reject(new DOMException('UnknownError'));
}
});
});
}
};
}
window.ImageCapture = ImageCapture;

View File

@ -0,0 +1,37 @@
:host {
position: fixed;
bottom: 20px;
left: 0;
right: 0;
display: flex;
opacity: 0;
}
:host(.in) {
transition: opacity 300ms;
opacity: 1;
}
:host(.out) {
transition: opacity 1s;
opacity: 0;
}
.wrapper {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.toast {
font-family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
background-color: #eee;
color: black;
border-radius: 5px;
padding: 10px 15px;
font-size: 14px;
font-weight: 500;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
}

View File

@ -0,0 +1,93 @@
import { h } from '@stencil/core';
export class PWAToast {
constructor() {
this.message = undefined;
this.duration = 2000;
this.closing = null;
}
hostData() {
const classes = {
out: !!this.closing
};
if (this.closing !== null) {
classes['in'] = !this.closing;
}
return {
class: classes
};
}
componentDidLoad() {
setTimeout(() => {
this.closing = false;
});
setTimeout(() => {
this.close();
}, this.duration);
}
close() {
this.closing = true;
setTimeout(() => {
this.el.parentNode.removeChild(this.el);
}, 1000);
}
render() {
return (h("div", { class: "wrapper" }, h("div", { class: "toast" }, this.message)));
}
static get is() { return "pwa-toast"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["toast.css"]
};
}
static get styleUrls() {
return {
"$": ["toast.css"]
};
}
static get properties() {
return {
"message": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "message",
"reflect": false
},
"duration": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "duration",
"reflect": false,
"defaultValue": "2000"
}
};
}
static get states() {
return {
"closing": {}
};
}
static get elementRef() { return "el"; }
}

View File

@ -0,0 +1 @@
export {};

View File

@ -0,0 +1 @@
export * from './components';

File diff suppressed because one or more lines are too long

View File

View File

@ -0,0 +1 @@
import{p as promiseResolve,b as bootstrapLazy}from"./index-1c5c47b4.js";export{s as setNonce}from"./index-1c5c47b4.js";var patchBrowser=function(){var e=import.meta.url;var a={};if(e!==""){a.resourcesUrl=new URL(".",e).href}return promiseResolve(a)};patchBrowser().then((function(e){return bootstrapLazy([["pwa-camera-modal",[[1,"pwa-camera-modal",{facingMode:[1,"facing-mode"],hidePicker:[4,"hide-picker"],present:[64],dismiss:[64]}]]],["pwa-action-sheet",[[1,"pwa-action-sheet",{header:[1],cancelable:[4],options:[16],open:[32]}]]],["pwa-toast",[[1,"pwa-toast",{message:[1],duration:[2],closing:[32]}]]],["pwa-camera",[[1,"pwa-camera",{facingMode:[1,"facing-mode"],handlePhoto:[16],hidePicker:[4,"hide-picker"],handleNoDeviceError:[16],noDevicesText:[1,"no-devices-text"],noDevicesButtonText:[1,"no-devices-button-text"],photo:[32],photoSrc:[32],showShutterOverlay:[32],flashIndex:[32],hasCamera:[32],rotation:[32],deviceError:[32]}]]],["pwa-camera-modal-instance",[[1,"pwa-camera-modal-instance",{facingMode:[1,"facing-mode"],hidePicker:[4,"hide-picker"],noDevicesText:[1,"no-devices-text"],noDevicesButtonText:[1,"no-devices-button-text"]},[[16,"keyup","handleBackdropKeyUp"]]]]]],e)}));

View File

@ -0,0 +1 @@
import{p as promiseResolve,b as bootstrapLazy}from"./index-1c5c47b4.js";export{s as setNonce}from"./index-1c5c47b4.js";var patchEsm=function(){return promiseResolve()};var defineCustomElements=function(e,o){if(typeof window==="undefined")return Promise.resolve();return patchEsm().then((function(){return bootstrapLazy([["pwa-camera-modal",[[1,"pwa-camera-modal",{facingMode:[1,"facing-mode"],hidePicker:[4,"hide-picker"],present:[64],dismiss:[64]}]]],["pwa-action-sheet",[[1,"pwa-action-sheet",{header:[1],cancelable:[4],options:[16],open:[32]}]]],["pwa-toast",[[1,"pwa-toast",{message:[1],duration:[2],closing:[32]}]]],["pwa-camera",[[1,"pwa-camera",{facingMode:[1,"facing-mode"],handlePhoto:[16],hidePicker:[4,"hide-picker"],handleNoDeviceError:[16],noDevicesText:[1,"no-devices-text"],noDevicesButtonText:[1,"no-devices-button-text"],photo:[32],photoSrc:[32],showShutterOverlay:[32],flashIndex:[32],hasCamera:[32],rotation:[32],deviceError:[32]}]]],["pwa-camera-modal-instance",[[1,"pwa-camera-modal-instance",{facingMode:[1,"facing-mode"],hidePicker:[4,"hide-picker"],noDevicesText:[1,"no-devices-text"],noDevicesButtonText:[1,"no-devices-button-text"]},[[16,"keyup","handleBackdropKeyUp"]]]]]],o)}))};export{defineCustomElements};

View File

@ -0,0 +1 @@
import{r as registerInstance,c as createEvent,h,g as getElement}from"./index-1c5c47b4.js";var actionSheetCss=':host{z-index:1000;position:fixed;top:0;left:0;width:100%;height:100%;display:-ms-flexbox;display:flex;contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif}.wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(0, 0, 0, 0);-webkit-transition:400ms background-color cubic-bezier(.36,.66,.04,1);transition:400ms background-color cubic-bezier(.36,.66,.04,1)}.wrapper.open{background-color:rgba(0, 0, 0, 0.32)}.title{color:#999;height:23px;line-height:23px;padding-bottom:17px;-webkit-padding-end:16px;padding-inline-end:16px;-webkit-padding-start:16px;padding-inline-start:16px;padding-left:16px;padding-right:16px;padding-top:20px}.content{width:568px;-ms-flex-item-align:end;align-self:flex-end;background-color:#fff;-webkit-transition:400ms -webkit-transform cubic-bezier(.36,.66,.04,1);transition:400ms -webkit-transform cubic-bezier(.36,.66,.04,1);transition:400ms transform cubic-bezier(.36,.66,.04,1);transition:400ms transform cubic-bezier(.36,.66,.04,1), 400ms -webkit-transform cubic-bezier(.36,.66,.04,1);-webkit-transform:translateY(100%);transform:translateY(100%)}.wrapper.open .content{-webkit-transform:translateY(0%);transform:translateY(0%)}@media only screen and (max-width: 568px){.content{width:100%}}.action-sheet-option{cursor:pointer;height:52px;line-height:52px}.action-sheet-button{color:rgb(38, 38, 38);font-size:16px;-webkit-padding-end:16px;padding-inline-end:16px;-webkit-padding-start:16px;padding-inline-start:16px;padding-left:16px;padding-right:16px;padding-top:0px}.action-sheet-button:hover{background-color:#F6F6F6}';var PWAActionSheet=function(){function e(e){registerInstance(this,e);this.onSelection=createEvent(this,"onSelection",7);this.header=undefined;this.cancelable=true;this.options=[];this.open=false}e.prototype.componentDidLoad=function(){var e=this;requestAnimationFrame((function(){e.open=true}))};e.prototype.dismiss=function(){if(this.cancelable){this.close()}};e.prototype.close=function(){var e=this;this.open=false;setTimeout((function(){e.el.parentNode.removeChild(e.el)}),500)};e.prototype.handleOptionClick=function(e,t){e.stopPropagation();this.onSelection.emit(t);this.close()};e.prototype.render=function(){var e=this;return h("div",{class:"wrapper".concat(this.open?" open":""),onClick:function(){return e.dismiss()}},h("div",{class:"content"},h("div",{class:"title"},this.header),this.options.map((function(t,n){return h("div",{class:"action-sheet-option",onClick:function(t){return e.handleOptionClick(t,n)}},h("div",{class:"action-sheet-button"},t.title))}))))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PWAActionSheet.style=actionSheetCss;export{PWAActionSheet as pwa_action_sheet};

Some files were not shown because too many files have changed in this diff Show More