Merge pull request #327 from Tangerine-Community/implement-tangy-vide…

…o-capture Implement tangy-video-capture input
Tangerine-Community · Apr 1, 2022 · a82efed · a82efed
2 parents 5c413d7 + 8f5ab41
commit a82efed
Show file tree

Hide file tree

Showing 7 changed files with 36,808 additions and 12,474 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # CHANGELOG
 
+## v4.33.0
+- Add new input `<tangy-video-capture>`. Takes the following properties:
+  - frontCamera: Boolean. Whether to use the front camera or the back camera. Default is `true`. 
+  - noVideoConstraints: Boolean. Whether to force use of front or back camera. If tue, chooses the first available source.  Default is `true`. 
+  - codec: String. The codec to use. Default is 'video/webm;codecs=vp9,opus' - AKA webm vp9. It is possible the device may not support all of these codecs. Other potential codecs:
+    - video/webm;codecs=vp8,opus
+    - video/webm;codecs=h264,opus
+  - videoWidth: Number. The width of the video. Default is `1280`.
+  - videoHeight: Number. The height of the video. Default is `720`.
+
 ## v4.32.1
 - Fix URL for sortable dependency to be https instead of `git://`.
 

diff --git a/demo/index.html b/demo/index.html
@@ -55,6 +55,7 @@
     <script type="module" src="../input/tangy-toggle-button.js"></script>
     <script type="module" src="../input/tangy-partial-date.js"></script>
     <script type="module" src="../input/tangy-photo-capture.js"></script>
+    <script type="module" src="../input/tangy-video-capture.js"></script>
     <script type="module" src="../input/tangy-qr.js"></script>
 
     <custom-style>
@@ -113,6 +114,7 @@ <h3>tangy-form's tangy-* elements demo</h3>
                 required>
               </tangy-input>
               <tangy-photo-capture name="picture" compression="0.10" max-size-in-kb=2000></tangy-photo-capture>
+<!--              <tangy-video-capture name="test-video" label="Take a video" ></tangy-video-capture>-->
               <tangy-radio-buttons
                 name="fruit_selection"
                 label="What is your <b>favorite</b> fruit?"

diff --git a/demo/tangy-video-capture.html b/demo/tangy-video-capture.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>tangy-video-capture demo</title>
+
+    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../node_modules/devtools-detect/index.js"></script>
+    <script src="../node_modules/redux/dist/redux.min.js"></script>
+
+    <script type="module">
+        import '@polymer/iron-demo-helpers/demo-pages-shared-styles';
+        import '@polymer/iron-demo-helpers/demo-snippet';
+    </script>
+    <custom-style>
+        <style>
+            html {
+                --document-background-color: #FAFAFA;
+                --primary-color-dark: #3c5b8d;
+                --primary-text-color: var(--light-theme-text-color);
+                --primary-color: #3c5b8d;
+                --accent-color: #f26f10;
+                --accent-text-color: #FFF;
+                --error-color: var(--paper-red-500);
+                --disabled-color: #BBB;
+            }
+
+            h1,
+            h2,
+            h3,
+            h4,
+            h5 {
+                @apply --paper-font-common-base;
+                color: var(--primary-text-color);
+                margin: 25px 0px 5px 15px;
+            }
+        </style>
+    </custom-style>
+    <script type="module" src="../tangy-form.js"></script>
+    <script type="module" src="../input/tangy-acasi.js"></script>
+    <script type="module" src="../input/tangy-box.js"></script>
+    <script type="module" src="../input/tangy-checkbox.js"></script>
+    <script type="module" src="../input/tangy-checkboxes.js"></script>
+    <script type="module" src="../input/tangy-checkboxes-dynamic.js"></script>
+    <script type="module" src="../input/tangy-eftouch.js"></script>
+    <script type="module" src="../input/tangy-gps.js"></script>
+    <script type="module" src="../input/tangy-input.js"></script>
+    <script type="module" src="../input/tangy-location.js"></script>
+    <script type="module" src="../input/tangy-radio-button.js"></script>
+    <script type="module" src="../input/tangy-radio-buttons.js"></script>
+    <script type="module" src="../input/tangy-select.js"></script>
+    <script type="module" src="../input/tangy-timed.js"></script>
+    <script type="module" src="../input/tangy-untimed-grid.js"></script>
+    <script type="module" src="../input/tangy-toggle-button.js"></script>
+    <script type="module" src="../input/tangy-video-capture.js"></script>
+    <script type="module" src="../input/tangy-qr.js"></script>
+    <script type="module" src="../input/tangy-consent.js"></script>
+    <script type="module" src="../input/tangy-signature.js"></script>
+
+    <custom-style>
+        <style is="custom-style" include="demo-pages-shared-styles">
+        </style>
+    </custom-style>
+</head>
+
+<body>
+    <div class="vertical-section-container centered">
+        <h3>tangy-video-capture demo</h3>
+        <demo-snippet>
+            <template>
+                <tangy-video-capture name="test-video" label="Take a video" ></tangy-video-capture>
+            </template>
+        </demo-snippet>
+    </div>
+</body>
+
+</html>
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/index.js b/index.js
@@ -13,9 +13,10 @@ import './input/tangy-gps.js'
 import './input/tangy-acasi.js';
 import './input/tangy-eftouch.js';
 import './input/tangy-photo-capture.js';
+import './input/tangy-video-capture.js';
 import './input/tangy-qr.js';
 import './input/tangy-consent.js';
 import './input/tangy-partial-date.js';
 import './input/tangy-toggle.js';
 import './input/tangy-gate.js';
-import './input/tangy-ethio-date.js';
+import './input/tangy-ethio-date.js';