Add skottie-inline-sk element to be used in Skia docs.
Bug: skia:
Change-Id: I766742b4f883f8c15bc5fcc4a3b63149452e5546
Reviewed-on: https://skia-review.googlesource.com/c/180763
Commit-Queue: Joe Gregorio <jcgregorio@google.com>
Auto-Submit: Joe Gregorio <jcgregorio@google.com>
Reviewed-by: Kevin Lubick <kjlubick@google.com>
diff --git a/skottie/go/skottie/main.go b/skottie/go/skottie/main.go
index 6f3c8bc..1708cf8 100644
--- a/skottie/go/skottie/main.go
+++ b/skottie/go/skottie/main.go
@@ -115,6 +115,7 @@
func (srv *Server) jsonHandler(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "application/json")
+ w.Header().Set("Access-Control-Allow-Origin", "*")
hash := mux.Vars(r)["hash"]
path := strings.Join([]string{hash, "lottie.json"}, "/")
reader, err := srv.bucket.Object(path).NewReader(r.Context())
diff --git a/skottie/modules/skottie-inline-sk/index.js b/skottie/modules/skottie-inline-sk/index.js
new file mode 100644
index 0000000..bc501c7
--- /dev/null
+++ b/skottie/modules/skottie-inline-sk/index.js
@@ -0,0 +1,2 @@
+import './skottie-inline-sk.js'
+import './skottie-inline-sk.scss'
diff --git a/skottie/modules/skottie-inline-sk/skottie-inline-sk-demo.html b/skottie/modules/skottie-inline-sk/skottie-inline-sk-demo.html
new file mode 100644
index 0000000..51ac48f
--- /dev/null
+++ b/skottie/modules/skottie-inline-sk/skottie-inline-sk-demo.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Skottie Player (Skia + Lottie)</title>
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="/static/jsoneditor.css">
+ <script type="text/javascript" charset="utf-8">
+ // This bit of script loads the custom elements v1 polyfill, but only if required.
+ // See https://webpack.js.org/guides/shimming/#loading-polyfills
+ if (!window.customElements) {
+ var newScript = document.createElement('script');
+ newScript.async = false;
+ newScript.src = '/static/custom-elements.min.js';
+ document.head.appendChild(newScript);
+ }
+ </script>
+ <script src="" type="text/javascript" charset="utf-8"></script>
+
+</head>
+<body>
+ <skottie-inline-sk width=64 height=64 src='https://www.lottiefiles.com/download/3757'></skottie-inline-sk>
+ <skottie-inline-sk width=64 height=64 src='https://www.lottiefiles.com/download/3760'></skottie-inline-sk>
+ <skottie-inline-sk width=128 height=128 src='https://www.lottiefiles.com/download/3757'></skottie-inline-sk>
+</body>
+</html>
diff --git a/skottie/modules/skottie-inline-sk/skottie-inline-sk-demo.js b/skottie/modules/skottie-inline-sk/skottie-inline-sk-demo.js
new file mode 100644
index 0000000..1c51332
--- /dev/null
+++ b/skottie/modules/skottie-inline-sk/skottie-inline-sk-demo.js
@@ -0,0 +1 @@
+import './index.js'
diff --git a/skottie/modules/skottie-inline-sk/skottie-inline-sk.js b/skottie/modules/skottie-inline-sk/skottie-inline-sk.js
new file mode 100644
index 0000000..edc975b
--- /dev/null
+++ b/skottie/modules/skottie-inline-sk/skottie-inline-sk.js
@@ -0,0 +1,90 @@
+/**
+ * @module skottie/skottie-inline-sk
+ * @description <h2><code>skottie-inline-sk</code></h2>
+ *
+ * Displays just the WASM based animation suitable for using inline in
+ * documentation.
+ *
+ * @attr width The width of the animation. Over-rides with width
+ * of an animation stored at skottie.skia.org.
+ *
+ * @attr height The height of the animation. Over-rides with height
+ * of an animation stored at skottie.skia.org.
+ *
+ * @attr src The URL to load the animation from. The contents can be
+ * either a stored skottie, or a raw BodyMovin JSON file. The
+ * stored Skotties contain width and height, but those values
+ * can be overridden by specifying the width and height on this element.
+ *
+ * @example
+ *
+ * <skottie-inline-sk width=128 height=128
+ * src="https://skottie.skia.org/e/1112d01d28a776d777cebcd0632da15b">
+ * </skottie-inline-sk>
+ */
+import '../skottie-player-sk'
+import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow'
+
+window.customElements.define('skottie-inline-sk', class extends HTMLElement {
+ static get observedAttributes() {
+ return ['width', 'height', 'src'];
+ }
+
+ constructor() {
+ super();
+ this._fetching = false;
+ }
+
+ connectedCallback() {
+ this.innerHTML = `<skottie-player-sk></skottie-player-sk>`;
+ }
+
+ /** @prop width {string} Reflects the 'width' attribute. */
+ get width() { return this.getAttribute('width'); }
+ set width(val) { this.setAttribute('width', val); }
+
+ /** @prop height {string} Reflects the 'height' attribute. */
+ get height() { return this.getAttribute('height'); }
+ set height(val) { this.setAttribute('height', val); }
+
+ /** @prop src {string} Reflects the 'src' attribute. */
+ get src() { return this.getAttribute('src'); }
+ set src(val) { this.setAttribute('src', val); }
+
+ _load() {
+ if (!this.src) {
+ return
+ }
+ this._fetching = true;
+ fetch(this.src).then(jsonOrThrow).then(json => {
+ this._fetching = false;
+ let init = {
+ width : 128,
+ height : 128,
+ lottie : json,
+ }
+ // If this is a file from skottie.skia.org.
+ if (json.lottie !== undefined) {
+ init.width = json.width;
+ init.height = json.height;
+ init.lottie = json.lottie;
+ }
+ if (this.width) {
+ init.width = +this.width;
+ }
+ if (this.height) {
+ init.height = +this.height;
+ }
+ let player = this.querySelector('skottie-player-sk');
+ player.initialize(init);
+ }).catch((msg) => {
+ this._fetching = false;
+ });
+ }
+
+ attributeChangedCallback(name, oldValue, newValue) {
+ if (!this._fetching) {
+ this._load();
+ }
+ }
+});
diff --git a/skottie/modules/skottie-inline-sk/skottie-inline-sk.scss b/skottie/modules/skottie-inline-sk/skottie-inline-sk.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/skottie/modules/skottie-inline-sk/skottie-inline-sk.scss
diff --git a/skottie/modules/skottie-player-sk/skottie-player-sk.js b/skottie/modules/skottie-player-sk/skottie-player-sk.js
index 67fac7a..42bbfd8 100644
--- a/skottie/modules/skottie-player-sk/skottie-player-sk.js
+++ b/skottie/modules/skottie-player-sk/skottie-player-sk.js
@@ -7,6 +7,7 @@
* </p>
*
*/
+import { $$ } from 'common-sk/modules/dom'
import 'elements-sk/icon/pause-icon-sk'
import 'elements-sk/icon/play-arrow-icon-sk'
import 'elements-sk/icon/settings-icon-sk'
@@ -158,10 +159,10 @@
this._render();
return canvasReady.then((ck) => {
- this._engine.kit = ck;
- this._initializeSkottie(config.lottie);
- this._render();
- });
+ this._engine.kit = ck;
+ this._initializeSkottie(config.lottie);
+ this._render();
+ });
}
duration() {
@@ -210,7 +211,8 @@
this._render();
this._engine.surface && this._engine.surface.delete();
- this._engine.surface = this._engine.kit.MakeCanvasSurface('skottie');
+ let canvasEle = $$('#skottie', this);
+ this._engine.surface = this._engine.kit.MakeCanvasSurface(canvasEle);
if (!this._engine.surface) {
throw new Error('Could not make SkSurface.');
}
@@ -268,8 +270,8 @@
window.requestAnimationFrame(this._drawFrame.bind(this));
}
- this._engine.animation.seek(this._state.seekPoint);
this._engine.kit.setCurrentContext(this._engine.context);
+ this._engine.animation.seek(this._state.seekPoint);
this._engine.animation.render(this._engine.canvas, {
fLeft: 0,
fTop: 0,
diff --git a/skottie/package.json b/skottie/package.json
index 6c3bab4..14696db 100644
--- a/skottie/package.json
+++ b/skottie/package.json
@@ -8,7 +8,7 @@
"@webcomponents/custom-elements": "^1.2.1",
"common-sk": "~3.1.0",
"elements-sk": "~2.6.0",
- "infra-sk": "~0.8.0",
+ "infra-sk": "^0.8.1",
"jsoneditor": "~5.24.3",
"lit-html": "~0.14.0",
"lottie-web": "^5.4.2"
diff --git a/skottie/webpack.config.js b/skottie/webpack.config.js
index a1c1b8b..d8ec091 100644
--- a/skottie/webpack.config.js
+++ b/skottie/webpack.config.js
@@ -19,8 +19,5 @@
config.node = {
fs: 'empty'
};
- config.resolve = config.resolve || {};
- config.resolve.alias = config.resolve.alias || {};
- config.resolve.alias['infra-sk'] = resolve(__dirname, '../infra-sk/');
return config;
}
