├── .gitattributes ├── .npmignore ├── style.css ├── .gitignore ├── docs ├── main.css └── index.jsx ├── .travis.yml ├── .babelrc ├── .editorconfig ├── lib └── post_install.js ├── .eslintrc.js ├── __tests__ └── ReactLivePhoto.spec.js ├── src └── index.js ├── LICENSE ├── README.md ├── package.json ├── webpack.config.babel.js └── dist └── reactlivephoto.min.js /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | bin/* eol=lf -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | demo/ 2 | dist/ 3 | tests/ 4 | src/ 5 | .* 6 | 7 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* TODO: insert default styles of your component here for easy access */ 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | build/ 2 | gh-pages/ 3 | dist-modules/ 4 | node_modules/ 5 | coverage/ 6 | npm-debug.log 7 | .eslintcache 8 | -------------------------------------------------------------------------------- /docs/main.css: -------------------------------------------------------------------------------- 1 | .github-corner svg { 2 | z-index: 1000; 3 | } 4 | 5 | /* TODO: insert main styles of your demo here */ 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "4" 4 | - "5" 5 | - "6" 6 | script: 7 | - npm run test:lint 8 | - npm run test:coverage 9 | after_success: 10 | - bash <(curl -s https://codecov.io/bash) 11 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "react", 5 | "stage-0" 6 | ], 7 | "plugins": [ 8 | [ 9 | "transform-react-remove-prop-types", 10 | { 11 | "mode": "wrap" 12 | } 13 | ] 14 | ], 15 | "env": { 16 | "start": { 17 | "presets": [ 18 | "react-hmre" 19 | ] 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # Change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # We recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /lib/post_install.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | // adapted based on rackt/history (MIT) 3 | // Node 0.10+ 4 | var execSync = require('child_process').execSync; 5 | var stat = require('fs').stat; 6 | 7 | // Node 0.10 check 8 | if (!execSync) { 9 | execSync = require('sync-exec'); 10 | } 11 | 12 | function exec(command) { 13 | execSync(command, { 14 | stdio: [0, 1, 2] 15 | }); 16 | } 17 | 18 | stat('dist-modules', function(error, stat) { 19 | // Skip building on Travis 20 | if (process.env.TRAVIS) { 21 | return; 22 | } 23 | 24 | if (error || !stat.isDirectory()) { 25 | exec('npm i babel-cli babel-preset-es2015 babel-preset-react'); 26 | exec('npm run dist:modules'); 27 | } 28 | }); 29 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "extends": "airbnb", 3 | "parser": "babel-eslint", 4 | "env": { 5 | "browser": true, 6 | "jasmine": true, 7 | "node": true 8 | }, 9 | "plugins": [ 10 | "react" 11 | ], 12 | "rules": { 13 | "arrow-body-style": [1, "as-needed"], 14 | "comma-dangle": 0, 15 | "prefer-arrow-callback": 0, 16 | "func-names": 0, 17 | "import/no-extraneous-dependencies": 0, 18 | "no-underscore-dangle": 0, 19 | "no-unused-expressions": 0, 20 | "no-use-before-define": 0, 21 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], 22 | "react/sort-comp": 0, 23 | "react/no-multi-comp": 0, 24 | "react/require-extension": 0 25 | } 26 | }; 27 | -------------------------------------------------------------------------------- /__tests__/ReactLivePhoto.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { expect } from 'chai'; 3 | import { shallow } from 'enzyme'; 4 | import LivePhoto from '../src/'; 5 | 6 | const getBaseProps = () => { 7 | return { 8 | width: 300, 9 | height: 300, 10 | imageSrc: 'http://example.com/path/file.jpg', 11 | videoSrc: 'http://example.com/path/file.mov', 12 | }; 13 | }; 14 | 15 | let baseProps; 16 | 17 | beforeEach(() => { 18 | baseProps = getBaseProps(); 19 | }); 20 | 21 | describe('ReactLivePhoto', () => { 22 | it('Renders the LivePhoto component', () => { 23 | const props = { 24 | ...baseProps, 25 | }; 26 | const wrapper = shallow(); 27 | expect(wrapper.find('.react-livephoto')).to.have.length(1); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | import * as LivePhotosKit from 'livephotoskit'; 3 | 4 | class LivePhoto extends Component { 5 | static propTypes = { 6 | imageSrc: PropTypes.string.isRequired, 7 | videoSrc: PropTypes.string.isRequired, 8 | height: PropTypes.number.isRequired, 9 | width: PropTypes.number.isRequired, 10 | } 11 | 12 | componentDidMount() { 13 | const el = this.livePhoto; 14 | const player = LivePhotosKit.Player(el); 15 | player.photoSrc = this.props.imageSrc; 16 | player.videoSrc = this.props.videoSrc; 17 | } 18 | 19 | render() { 20 | const { height, width } = this.props; 21 | return ( 22 |
{ this.livePhoto = livephoto; }} 24 | className="react-livephoto" 25 | style={{ width: `${width}px`, height: `${height}px` }} 26 | /> 27 | ); 28 | } 29 | } 30 | 31 | export default LivePhoto; 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2017 Maxime Heckel 2 | 3 | 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: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | 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. 8 | -------------------------------------------------------------------------------- /docs/index.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable global-require, import/no-unresolved, react/no-multi-comp */ 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | import GithubCorner from 'react-github-corner'; 5 | import { Catalog, CodeSpecimen, ReactSpecimen } from 'catalog'; 6 | 7 | import 'purecss/build/pure.css'; 8 | import './main.css'; 9 | import '../style.css'; 10 | 11 | // Add your documentation imports here. These are available to 12 | // React specimen. Do NOT pass React here as Catalog does that. 13 | const documentationImports = {}; 14 | const title = `${NAME} v${VERSION}`; // eslint-disable-line no-undef 15 | const project = `${USER}/${NAME}`; // eslint-disable-line no-undef 16 | const pages = [ 17 | { 18 | path: '/', 19 | title: 'Introduction', 20 | component: require('../README.md') 21 | } 22 | ]; 23 | 24 | // Catalog - logoSrc="../images/logo.png" 25 | ReactDOM.render( 26 |
27 | 35 | , 40 | js: props => , 41 | jsx: props => 42 | }} 43 | title={title} 44 | /> 45 |
, 46 | document.getElementById('app') 47 | ); 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-livephoto - A LivePhoto component for React.JS 2 | 3 | This is a simple component for React.JS build around [livephotokit](https://developer.apple.com/reference/livephotoskitjs) to make it easy to embed LivePhotos in your application. 4 | 5 | ## Usage 6 | 7 | The easiest way to use react-livephoto is to install it from NPM. 8 | ``` 9 | npm install --save react-livephoto 10 | ``` 11 | At this point you can import react-livephoto in your application as follows: 12 | ```js 13 | import LivePhoto from 'react-livephoto'; 14 | 15 | 21 | ``` 22 | 23 | ## Props 24 | 25 | 26 | | Property | Type | Description | 27 | | ------------- |:-------------:|-----| 28 | | `width` | number | The width in px of the LivePhoto component, this prop is required for the element to render. | 29 | | `height` | number | The height in px of the LivePhoto component, this prop is required for the element to render. | 30 | | `imageSrc` | string | The path of your livephoto .jpg file. This is the image which will be displayed as preview. | 31 | | `videoSrc` | string | The path of your livephoto .mov file. This is the video which will play when the `Live` label is hovered. | 32 | 33 | ## Contributing 34 | 35 | Developing 36 | 37 | * Running the project - **npm start** - Runs the development server at *localhost:8080* and use Hot Module Replacement. You can override the default host and port through env (`HOST`, `PORT`). 38 | 39 | Testing 40 | 41 | The test setup is based on Jest. Code coverage report is generated to `coverage/`. The coverage information is also uploaded to codecov.io after a successful Travis build. 42 | 43 | * Running tests once - **npm test** 44 | * Running tests continuously - **npm run test:watch** 45 | * Running individual tests - **npm test -- ** - Works with `test:watch` too. 46 | * Linting - **npm run test:lint** - Runs ESLint. 47 | 48 | ## License 49 | 50 | *react-livephoto* is available under MIT. See LICENSE for more details. 51 | 52 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-livephoto", 3 | "description": "LivePhoto React Component", 4 | "author": "Maxime Heckel", 5 | "user": "MaximeHeckel", 6 | "version": "0.5.1", 7 | "scripts": { 8 | "start": "webpack-dev-server", 9 | "test": "jest", 10 | "test:coverage": "jest --coverage", 11 | "test:watch": "jest --watch", 12 | "test:lint": "eslint . --ext .js --ext .jsx --ignore-path .gitignore --ignore-pattern dist --cache", 13 | "gh-pages": "webpack", 14 | "gh-pages:deploy": "gh-pages -d gh-pages", 15 | "gh-pages:stats": "webpack --profile --json > stats.json", 16 | "dist": "webpack", 17 | "dist:min": "webpack", 18 | "dist:modules": "rimraf ./dist-modules && babel ./src --out-dir ./dist-modules", 19 | "preversion": "npm run test && npm run dist && npm run dist:min && git commit --allow-empty -am \"Update dist\"", 20 | "prepublish": "npm run dist:modules", 21 | "postinstall": "node lib/post_install.js" 22 | }, 23 | "main": "dist-modules", 24 | "module": "src", 25 | "jsnext:main": "src", 26 | "devDependencies": { 27 | "babel-cli": "^6.18.0", 28 | "babel-core": "^6.21.0", 29 | "babel-eslint": "^7.1.1", 30 | "babel-jest": "^18.0.0", 31 | "babel-loader": "^6.2.10", 32 | "babel-plugin-transform-react-remove-prop-types": "^0.2.11", 33 | "babel-preset-es2015": "^6.18.0", 34 | "babel-preset-react": "^6.16.0", 35 | "babel-preset-react-hmre": "^1.1.1", 36 | "babel-preset-stage-0": "^6.24.1", 37 | "catalog": "^2.4.7", 38 | "chai": "^3.5.0", 39 | "clean-webpack-plugin": "^0.1.14", 40 | "css-loader": "^0.26.1", 41 | "enzyme": "^2.8.2", 42 | "eslint": "^3.12.2", 43 | "eslint-config-airbnb": "^13.0.0", 44 | "eslint-loader": "^1.6.1", 45 | "eslint-plugin-import": "^2.2.0", 46 | "eslint-plugin-jsx-a11y": "^2.2.3", 47 | "eslint-plugin-react": "^6.8.0", 48 | "extract-text-webpack-plugin": "^1.0.1", 49 | "file-loader": "^0.9.0", 50 | "gh-pages": "^0.12.0", 51 | "git-prepush-hook": "^1.0.1", 52 | "html-webpack-plugin": "^2.25.0", 53 | "html-webpack-template": "^6.0.0", 54 | "jest": "^18.1.0", 55 | "json-loader": "^0.5.4", 56 | "purecss": "^0.6.1", 57 | "raw-loader": "^0.5.1", 58 | "react": "^15.4.1", 59 | "react-addons-test-utils": "^15.4.1", 60 | "react-dom": "^15.4.1", 61 | "react-github-corner": "^0.3.0", 62 | "react-test-renderer": "^15.5.4", 63 | "rimraf": "^2.5.4", 64 | "style-loader": "^0.13.1", 65 | "sync-exec": "^0.6.2", 66 | "system-bell-webpack-plugin": "^1.0.0", 67 | "url-loader": "^0.5.7", 68 | "webpack": "^1.14.0", 69 | "webpack-dev-server": "^1.16.2", 70 | "webpack-merge": "^2.0.0" 71 | }, 72 | "peerDependencies": { 73 | "react": ">= 0.11.2 < 16.0.0", 74 | "livephotoskit": "^1.4.8" 75 | }, 76 | "repository": { 77 | "type": "git", 78 | "url": "https://github.com/MaximeHeckel/react-livephoto.git" 79 | }, 80 | "homepage": "https://livephoto.maximeheckel.com", 81 | "bugs": { 82 | "url": "https://github.com/MaximeHeckel/react-livephoto/issues" 83 | }, 84 | "jest": { 85 | "collectCoverage": true, 86 | "moduleFileExtensions": [ 87 | "js", 88 | "jsx" 89 | ], 90 | "moduleDirectories": [ 91 | "node_modules", 92 | "packages" 93 | ] 94 | }, 95 | "keywords": [ 96 | "react", 97 | "reactjs", 98 | "boilerplate" 99 | ], 100 | "license": "MIT", 101 | "pre-push": [ 102 | "test" 103 | ], 104 | "dependencies": { 105 | "livephotoskit": "^1.4.8" 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /webpack.config.babel.js: -------------------------------------------------------------------------------- 1 | import * as path from 'path'; 2 | 3 | import webpack from 'webpack'; 4 | import ExtractTextPlugin from 'extract-text-webpack-plugin'; 5 | import HtmlWebpackPlugin from 'html-webpack-plugin'; 6 | import SystemBellPlugin from 'system-bell-webpack-plugin'; 7 | import CleanWebpackPlugin from 'clean-webpack-plugin'; 8 | import merge from 'webpack-merge'; 9 | 10 | const pkg = require('./package.json'); 11 | 12 | const TARGET = process.env.npm_lifecycle_event || ''; 13 | const ROOT_PATH = __dirname; 14 | const config = { 15 | paths: { 16 | dist: path.join(ROOT_PATH, 'dist'), 17 | src: path.join(ROOT_PATH, 'src'), 18 | docs: path.join(ROOT_PATH, 'docs') 19 | }, 20 | filename: 'reactlivephoto', 21 | library: 'react-livephoto' 22 | }; 23 | 24 | process.env.BABEL_ENV = TARGET; 25 | 26 | const common = { 27 | resolve: { 28 | extensions: ['', '.js', '.jsx', '.css', '.png', '.jpg'] 29 | }, 30 | module: { 31 | preLoaders: [ 32 | { 33 | test: /\.jsx?$/, 34 | loaders: ['eslint'], 35 | include: [ 36 | config.paths.docs, 37 | config.paths.src 38 | ] 39 | } 40 | ], 41 | loaders: [ 42 | { 43 | test: /\.md$/, 44 | loaders: ['catalog/lib/loader', 'raw'] 45 | }, 46 | { 47 | test: /\.png$/, 48 | loader: 'url?limit=100000&mimetype=image/png', 49 | include: config.paths.docs 50 | }, 51 | { 52 | test: /\.jpg$/, 53 | loader: 'file', 54 | include: config.paths.docs 55 | }, 56 | { 57 | test: /\.json$/, 58 | loader: 'json', 59 | include: path.join(ROOT_PATH, 'package.json') 60 | } 61 | ] 62 | }, 63 | plugins: [ 64 | new SystemBellPlugin() 65 | ] 66 | }; 67 | 68 | const siteCommon = { 69 | plugins: [ 70 | new HtmlWebpackPlugin({ 71 | template: require('html-webpack-template'), // eslint-disable-line global-require 72 | inject: false, 73 | mobile: true, 74 | title: pkg.name, 75 | appMountId: 'app' 76 | }), 77 | new webpack.DefinePlugin({ 78 | NAME: JSON.stringify(pkg.name), 79 | USER: JSON.stringify(pkg.user), 80 | VERSION: JSON.stringify(pkg.version) 81 | }) 82 | ] 83 | }; 84 | 85 | if (TARGET === 'start') { 86 | module.exports = merge(common, siteCommon, { 87 | devtool: 'eval-source-map', 88 | entry: { 89 | docs: [config.paths.docs] 90 | }, 91 | plugins: [ 92 | new webpack.DefinePlugin({ 93 | 'process.env.NODE_ENV': '"development"' 94 | }), 95 | new webpack.HotModuleReplacementPlugin() 96 | ], 97 | module: { 98 | loaders: [ 99 | { 100 | test: /\.css$/, 101 | loaders: ['style', 'css'] 102 | }, 103 | { 104 | test: /\.jsx?$/, 105 | loaders: ['babel?cacheDirectory'], 106 | include: [ 107 | config.paths.docs, 108 | config.paths.src 109 | ] 110 | } 111 | ] 112 | }, 113 | devServer: { 114 | historyApiFallback: true, 115 | hot: true, 116 | inline: true, 117 | progress: true, 118 | host: process.env.HOST, 119 | port: process.env.PORT, 120 | stats: 'errors-only' 121 | } 122 | }); 123 | } 124 | 125 | if (TARGET === 'gh-pages' || TARGET === 'gh-pages:stats') { 126 | module.exports = merge(common, siteCommon, { 127 | entry: { 128 | app: config.paths.docs, 129 | vendors: [ 130 | 'react', 131 | 'react-dom' 132 | ] 133 | }, 134 | output: { 135 | path: './gh-pages', 136 | filename: '[name].[chunkhash].js', 137 | chunkFilename: '[chunkhash].js' 138 | }, 139 | plugins: [ 140 | new CleanWebpackPlugin(['gh-pages'], { 141 | verbose: false 142 | }), 143 | new ExtractTextPlugin('[name].[chunkhash].css'), 144 | new webpack.DefinePlugin({ 145 | // This affects the react lib size 146 | 'process.env.NODE_ENV': '"production"' 147 | }), 148 | new webpack.optimize.DedupePlugin(), 149 | new webpack.optimize.UglifyJsPlugin({ 150 | compress: { 151 | warnings: false 152 | } 153 | }), 154 | new webpack.optimize.CommonsChunkPlugin( 155 | 'vendor', 156 | '[name].[chunkhash].js' 157 | ) 158 | ], 159 | module: { 160 | loaders: [ 161 | { 162 | test: /\.css$/, 163 | loader: ExtractTextPlugin.extract('style', 'css') 164 | }, 165 | { 166 | test: /\.jsx?$/, 167 | loaders: ['babel'], 168 | include: [ 169 | config.paths.docs, 170 | config.paths.src 171 | ] 172 | } 173 | ] 174 | } 175 | }); 176 | } 177 | 178 | const distCommon = { 179 | devtool: 'source-map', 180 | output: { 181 | path: config.paths.dist, 182 | libraryTarget: 'umd', 183 | library: config.library 184 | }, 185 | entry: config.paths.src, 186 | externals: { 187 | react: { 188 | commonjs: 'react', 189 | commonjs2: 'react', 190 | amd: 'React', 191 | root: 'React' 192 | } 193 | }, 194 | module: { 195 | loaders: [ 196 | { 197 | test: /\.(js|jsx)$/, 198 | loader: 'babel', 199 | include: config.paths.src 200 | } 201 | ] 202 | }, 203 | plugins: [ 204 | new SystemBellPlugin() 205 | ] 206 | }; 207 | 208 | if (TARGET === 'dist') { 209 | module.exports = merge(distCommon, { 210 | output: { 211 | filename: `${config.filename}.js` 212 | } 213 | }); 214 | } 215 | 216 | if (TARGET === 'dist:min') { 217 | module.exports = merge(distCommon, { 218 | output: { 219 | filename: `${config.filename}.min.js` 220 | }, 221 | plugins: [ 222 | new webpack.optimize.UglifyJsPlugin({ 223 | compress: { 224 | warnings: false 225 | } 226 | }) 227 | ] 228 | }); 229 | } 230 | 231 | if (!TARGET) { 232 | module.exports = common; 233 | } 234 | -------------------------------------------------------------------------------- /dist/reactlivephoto.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["React"],t):"object"==typeof exports?exports["react-livephoto"]=t(require("react")):e["react-livephoto"]=t(e.React)}(this,function(e){return function(e){function t(i){if(r[i])return r[i].exports;var n=r[i]={exports:{},id:i,loaded:!1};return e[i].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){(function(e){"use strict";function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function n(e){return e&&e.__esModule?e:{default:e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var r=0;r1)for(var r=1;r1){r=F.arrayPool.get();for(var i=1,n=arguments.length;i1)for(var i=0;i1?t-1:0),i=1;i1?t-1:0),n=1;n1?t-1:0),n=1;n1?t-1:0),n=1;n1?t-1:0),i=1;i1?t-1:0),i=1;i=3||"string"==typeof arguments[0]&&"string"==typeof arguments[1]){var r=arguments[0],i=arguments[1],_=arguments[2],P=arguments[3]||(r||i?{}:void 0);return r&&(P.photoSrc=r),i&&(P.videoSrc=i),u.default.warn("LivePhotosKit.Player: Creating a new Player using arguments of the form 'photoSrc, videoSrc, [targetElement, [options]]' is deprecated. Instead, consider the new signature, '[targetElement, [options]]'. If necessary, either assign `photoSrc` and/or `videoSrc` after Player creation, or provide them as named parameters in an `options` hash."),P?n(_,P):_?n(_):n()}var O=e||document.createElement("div");if(O.__isLPKPlayer__)return O;m.value=!0,Object.defineProperty(O,"__isLPKPlayer__",m);var k=s.default.objectPool.get();for(var x in t)Object.prototype.hasOwnProperty.call(t,x)&&(c[x]===l?k[x]=t[x]:u.default.warn("LivePhotosKit.Player: Initial configuration for `"+x+"` was ignored, because the property is not a writable property."));var S=o.default.create(O,k);s.default.objectPool.ret(k),k=null;for(var T,w,C=0;(T=f[C])&&(w=y[C]);C++)!function(e,t,r){r===d?(m.value=S[t].bind(S),Object.defineProperty(O,t,m)):(b.set=r===l?function(e){S[t]=e}:function(){},b.get=function(){return S[t]},Object.defineProperty(O,t,b))}(0,T,w);m.value=function(){var e=arguments.length,t=arguments[e-1];if(e<1||!(t instanceof Function))throw new Error("Invalid arguments passed to `observe`. Form: key, [key, …], callback.");for(var r=s.default.arrayPool.get(),i=0,n=e;i0&&void 0!==arguments[0]?arguments[0]:{};i(this,e),this._setInstanceProps(t),this._createCanvas(),this.redraw(),this.shouldAddEventListeners&&this._addEventListeners()}return n(e,[{key:"redraw",value:function(){var e=this.progress;e>0&&this.shouldAnimateProgressRing?this._animateProgressRing():this._redraw(e)}},{key:"appendTo",value:function(e){e.appendChild(this.element)}},{key:"_createCanvas",value:function(){var e=this.element;if(e){if("canvas"!==e.tagName.toLowerCase())throw new Error("Backing element for LivePhotoBadge needs to be an HTMLCanvasElement.")}else e=this.element=document.createElement("canvas");e.classList.add("lpk-badge"),this._context=e.getContext("2d")}},{key:"_setCanvasSize",value:function(){var e=this.element,t=s.dpiInt(),r=this.height,i=this.width;e.height=r*t,e.width=i*t,e.style.height=r+"px",e.style.width=i+"px"}},{key:"_setInstanceProps",value:function(e){var t={};for(var r in u)t.hasOwnProperty.call(u,r)&&(this[r]=e.hasOwnProperty(r)?e[r]:u[r]);this.defaultProps=u}},{key:"_redraw",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;this._setCanvasSize(),this._context.clearRect(0,0,this.width,this.height),this._drawBackground(),this._drawLabel(),this.shouldShowError||(this._drawInnerCircle(),this._drawPlayArrow()),this.shouldShowError?(this._drawProgressRing(1),this._drawErrorSlash()):this.progress>0?this._drawProgressRing(e):this._drawDottedCircle()}},{key:"_drawBackground",value:function(){var e=s.dpiInt(),t=this._context,r=this.borderRadius*e,i=this.width*e,n=this.height*e;t.beginPath(),t.moveTo(r,0),t.lineTo(i-r,0),t.quadraticCurveTo(i,0,i,r),t.lineTo(i,n-r),t.quadraticCurveTo(i,n,i-r,n),t.lineTo(r,n),t.quadraticCurveTo(0,n,0,n-r),t.lineTo(0,r),t.quadraticCurveTo(0,0,r,0),t.closePath(),t.fillStyle=this.backgroundColor,t.fill()}},{key:"_drawDottedCircle",value:function(){for(var t=e.numberOfDots,r=this.dottedRadius*s.dpiInt(),i=0;i=2&&200!==this._xhr.status){var e=new Error("Failed to download resource from URL assigned to '"+this.exposedSrcKeyForErrorStrings+"'.");return e.errCode=a.Errors.FAILED_TO_DOWNLOAD_RESOURCE,this.loadDidFail(e)}return 4===this._xhr.readyState&&200===this._xhr.status?this._xhrLoadDidFinish():void 0}},_xhrProgress:function(e){if(e){var t=e.loaded/e.total;isNaN(t)||(this.progress=t)}},_xhrLoadDidFinish:function(){this._mimeTypeFromXHR=this._xhr.getResponseHeader("Content-Type"),this.beginSecondaryLoad(this._xhr.response,this.mimeType)},beginSecondaryLoad:function(e,t){this._defaultSecondaryLoadTimeout=setTimeout(this.loadDidSucceed.bind(this,e),0)},abortCurrentSecondaryLoad:function(){this._defaultSecondaryLoadTimeout&&(clearTimeout(this._defaultSecondaryLoadTimeout),this._defaultSecondaryLoadTimeout=null)},init:function(){this._xhrReadyStateChanged=this._xhrReadyStateChanged.bind(this),this._xhrProgress=this._xhrProgress.bind(this),this._super()}});t.default=o},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i={setUpForRender:function(){this.attachInto(this.renderer)},tearDownFromRender:function(){this.detach(),this._super()},renderStyles:function(e){for(var t,r=0;t=e[r];r++)this.element.style[t.styleKey]=t.value}};t.default=i},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=r(1);t.default=i.default.isEdge||i.default.isIE},function(e,t,r){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var n=function(){function e(e,t){for(var r=0;r0&&(this._k.length=0,this._v.length=0)}}]),e}();t.default=a},function(e,t,r){"use strict";function i(e){if(null===e)return"_null";if(void 0===e)return"_undefined";if(e.hasOwnProperty("_LPKGUID"))return e._LPKGUID;var t=void 0===e?"undefined":n(e);switch(t){case"number":Object.is(e,-0)&&(e="-0");case"string":case"boolean":return t+e;case"object":case"function":o++;var r=t+o;return a.value=r,Object.defineProperty(e,"_LPKGUID",a),r;default:throw"unrecognized object type"}}var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};Object.defineProperty(t,"__esModule",{value:!0});var a={value:"",enumerable:!1,writable:!1,configurable:!1},o=0;t.default=i},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=r(22),n=r(26),a=r(28),o=r(29),s=r(7),u=r(0),d=r(4),l=r(2);a.default.register(),o.default.register();var h=d.default.extend({approach:"",recipe:u.default.observableProperty({defaultValue:a.default,didChange:function(){this.hasRecipeChangedRecently=!0,this.setUpRenderLayers()}}),playbackStyle:u.default.observableProperty({dependencies:["recipe"],get:function(){var e=this.recipe;return e&&e.correspondingPlaybackStyle||null},writeDependencies:["recipe"],set:function(e){var t=s.default.recipeForPlaybackStyle(e);t&&(this.recipe=t)}}),duration:u.default.observableProperty({dependencies:["recipe","provider.videoDuration","provider.photoTime"],get:function(e){var t=this.recipe;if(!t)return 0;var r=this.provider;return Math.max(0,Math.min(e||1/0,t.calculateAnimationDuration(r.videoDuration,r.photoTime)))}}),displayWidth:0,displayHeight:0,get backingWidth(){return Math.round(this.displayWidth*devicePixelRatio)},get backingHeight(){return Math.round(this.displayHeight*devicePixelRatio)},get renderLayerWidth(){return this.displayWidth},get renderLayerHeight(){return this.displayHeight},get videoWidth(){return this.videoDecoder.videoWidth},get videoHeight(){return this.videoDecoder.videoHeight},photoWidth:u.default.proxyProperty("photo.width"),photoHeight:u.default.proxyProperty("photo.height"),photo:u.default.proxyProperty("provider.photo"),video:u.default.proxyProperty("provider.video"),photoTime:u.default.proxyProperty("provider.photoTime"),frameTimes:u.default.proxyProperty("provider.frameTimes"),currentTime:u.default.observableProperty({defaultValue:0,dependencies:["duration"],get:function(e){return Math.min(this.duration||0,Math.max(0,e||0))},didChange:function(e){this.prepareToRenderAtTime(e)}}),canRenderCurrentTime:u.default.observableProperty({readOnly:!0,dependencies:["currentTime"],get:function(){return this.canRenderAtTime(this.currentTime)}}),_currentTimeRenderObserver:u.default.observer("currentTime","canRenderCurrentTime",function(e,t){t&&(this.renderedTime=e)}),renderedTime:u.default.observableProperty({defaultValue:0,didChange:function(e){this.renderAtTime(e),this.currentTime=e}}),areAllRenderLayersPrepared:u.default.observableProperty({defaultValue:!1}),hasRecipeChangedRecently:u.default.observableProperty({defaultValue:!1,set:function(e){return this._recipeChangeTimeout&&(clearTimeout(this._recipeChangeTimeout),this._recipeChangeTimeout=null),e&&(this._recipeChangeTimeout=setTimeout(this._unsetHasRecipeChangedRecently,100)),e}}),_unsetHasRecipeChangedRecently:u.default.boundFunction(function(){this.hasRecipeChangedRecently=!1}),isFullyPreparedForPlayback:u.default.observableProperty({readOnly:!0,dependencies:["video","areAllRenderLayersPrepared","hasRecipeChangedRecently","photoTime","frameTimes"],get:function(){return Boolean(this.video&&this.areAllRenderLayersPrepared&&!this.hasRecipeChangedRecently&&this.photoTime&&Array.isArray(this.frameTimes))}}),cannotRenderDueToMissingPhotoTimeOrFrameTimes:u.default.observableProperty({readOnly:!0,dependencies:["video","areAllRenderLayersPrepared","hasRecipeChangedRecently","photoTime","frameTimes"],get:function(){return Boolean(this.video&&this.areAllRenderLayersPrepared&&!this.hasRecipeChangedRecently&&(!this.photoTime||!Array.isArray(this.frameTimes)))}}),renderLayers:u.default.property(function(){return[]}),videoDecoder:u.default.observableProperty(function(){return this._videoDecoderClass.create({owner:this})}),_videoDecoderClass:i.default.extend({owner:u.default.observableProperty(),provider:u.default.proxyProperty("owner.provider")}),provider:u.default.observableProperty(function(){return n.default.create()}),init:function(){this._super(),this.element.className=((this.element.className||"")+" lpk-live-photo-renderer").trim(),this.element.style.position="absolute",this.element.style.overflow="hidden",this.element.style.textAlign="left"},updateSize:function(e,t){if(!arguments.length)return void(this.displayWidth&&this.displayHeight&&this.updateSize(this.displayWidth,this.displayHeight));this.displayWidth=e=Math.round(e),this.displayHeight=t=Math.round(t),this.element.style.width=e+"px",this.element.style.height=t+"px";for(var r,i=0;r=this.renderLayers[i];i++)r.updateSize(this.renderLayerWidth,this.renderLayerHeight)},_imageOrVideoDidEnterOrLeave:u.default.observer("videoDecoder.canProvideFrames","photo",function(){this.prepareToRenderAtTime(this.currentTime)}),prepareToRenderAtTime:u.default.boundFunction(function(e){this.propertyChanged("canRenderCurrentTime");for(var t,r=!0,i=0;t=this.renderLayers[i];i++)r=t.prepareToRenderAtTime(e)&&r;this.areAllRenderLayersPrepared=r}),canRenderAtTime:function(e){if(0===e)return!0;if(!this.duration&&e)return!1;for(var t,r=!0,i="",n=0;t=this.renderLayers[n];n++)t.canRenderAtTime(e)||(r=!1,i+=(i?", ":"Cannot render; waiting for ")+t.layerName);return i&&l.default.log(i+"."),r},renderAtTime:function(e){if(this.duration)for(var t,r=0;t=this.renderLayers[r];r++)t.renderAtTime(e)},getNewRenderLayers:function(){return this.recipe.getRenderLayers(this)},setUpRenderLayers:function(){var e=this.renderLayers;this.renderLayers=this.getNewRenderLayers(),this.updateSize(),this.currentTime=0,this.prepareToRenderAtTime(0),e&&this._cleanUpRenderLayers(e)},_cleanUpRenderLayers:function(e){for(var t,r=0;t=e[r];r++)t.dispose()},reduceMemoryFootprint:function(){for(var e,t=0;e=this.renderLayers[t];t++)e.reduceMemoryFootprint()},_clearRetainedFramesWhenNecessary:u.default.observer("provider.videoRotation","provider.frameTimes",function(){this.reduceMemoryFootprint(),this.prepareToRenderAtTime(this.currentTime)})});t.default=h},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=r(18),n=i.default.extend({approach:"dom"});t.default=n},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=r(9),n=r(11),a=r(10);t.LivePhotoBadge=a.LivePhotoBadge;var o=r(6);t.Player=o.default;var s=r(6),u=r(5);t.PlaybackStyle=u.PlaybackStyle;var d=r(3);t.Errors=d.Errors,t.BUILD_VERSION=i.default.BUILD_VERSION,t.VERSION=i.default.VERSION,t.LIVEPHOTOSKIT_LOADED=i.default.LIVEPHOTOSKIT_LOADED;var l="undefined"!=typeof window&&"undefined"!=typeof document;if(l){var h=window.document;setTimeout(function(){return h.dispatchEvent(n.livePhotosKitLoaded())})}if(l&&document.querySelectorAll instanceof Function){var c=function(){y=!0,Array.prototype.forEach.call(document.querySelectorAll("[data-live-photo]"),function(e){return s.default(e)})},f=function(){!y&&p&&v&&c()},p=/interactive|complete|loaded/.test(document.readyState),v=!!window.LivePhotosKit,y=!1;p||document.addEventListener("DOMContentLoaded",function(){p=!0,f()}),v||document.addEventListener("livephotoskitloaded",function(){v=!0,f()}),f()}},function(e,t,r){"use strict";function i(e){if(!e)return!1;try{e.appendChild(c),e.removeChild(c)}catch(e){return!1}return!0}Object.defineProperty(t,"__esModule",{value:!0});var n=r(4),a=r(19),o=r(10),s=r(45),u=r(0),d=r(11),l=r(44),h=n.default.extend({staticMembers:{activeInstance:u.default.observableProperty(null)},renderer:u.default.observableProperty(function(){return a.default.create()}),showsNativeControls:u.default.observableProperty(!0),isPlaying:u.default.observableProperty(!1),wantsToPlay:u.default.observableProperty({defaultValue:!1,didChange:function(e){e&&(this.constructor.activeInstance=this)}}),canPlay:u.default.observableProperty({readOnly:!0,dependencies:["isPlaying","renderer.isFullyPreparedForPlayback"],get:function(){return this.isPlaying||this.renderer.isFullyPreparedForPlayback},didChange:function(e){e&&(this._hasHadCanPlay=!0,this.dispatchEvent(d.canPlay()),this.wantsToPlay&&this.play())}}),_generateErrorIfPlayedWithoutNecessaryMetadata:u.default.observer("renderer.cannotRenderDueToMissingPhotoTimeOrFrameTimes","wantsToPlay",function(e){e&&this.wantsToPlay&&(this.error=new Error("The `photoTime` and/or `frameTimes` values are missing. Provide them directly (or via `metadataVideoSrc`) if they cannot be parsed from the video.")),e||(this.error=null)}),errors:u.default.observableProperty({dependencies:["provider.error"],get:function(e){return e||this.provider.error||null}}),lastError:u.default.observableProperty({dependencies:["provider.lastError"],get:function(e){return e||this.provider.lastError||null},didChange:function(e){e&&(this.throwError(e),this.stop())}}),playbackRate:u.default.proxyProperty("renderer.videoDecoder.playbackRate"),currentTime:u.default.proxyProperty("renderer.currentTime"),renderedTime:u.default.proxyProperty("renderer.renderedTime"),duration:u.default.proxyProperty("renderer.duration"),videoWidth:u.default.proxyProperty("renderer.videoWidth"),videoHeight:u.default.proxyProperty("renderer.videoHeight"),photoWidth:u.default.proxyProperty("renderer.photoWidth"),photoHeight:u.default.proxyProperty("renderer.photoHeight"),recipe:u.default.proxyProperty("renderer.recipe"),playbackStyle:u.default.proxyProperty("renderer.playbackStyle"),provider:u.default.proxyProperty("renderer.provider"),proactivelyLoadsVideo:u.default.proxyProperty("provider.proactivelyLoadsVideo"),metadataVideoSrc:u.default.proxyProperty("provider.metadataVideoSrc"),photoMimeType:u.default.proxyProperty("provider.photoMimeType"),photoSrc:u.default.proxyProperty("provider.photoSrc"),photo:u.default.proxyProperty("provider.photo"),videoMimeType:u.default.proxyProperty("provider.videoMimeType"),videoSrc:u.default.proxyProperty("provider.videoSrc"),video:u.default.proxyProperty("provider.video"),photoTime:u.default.proxyProperty("provider.photoTime"),frameTimes:u.default.proxyProperty("provider.frameTimes"),videoRotation:u.default.proxyProperty("provider.videoRotation"),loadProgress:u.default.proxyProperty("provider.progress"),_isZeroSizeWarningLogged:u.default.observableProperty(!1),_renderWhenPossible:u.default.observer("renderer.video","renderer.photo",function(){if(this.error=null,this.updateSize(!0),!this._isZeroSizeWarningLogged){var e=this.element.getBoundingClientRect();0!==e.width&&0!==e.height||(console.warn("The LivePhotosKit Player located at position ("+e.left+", "+e.top+") in the viewport has either a zero width or zero height (or both) and will not render. To fix this, ensure that the Player has a style that will yield a non-zero width and height."),this._isZeroSizeWarningLogged=!0)}}),nativeControls:u.default.observableProperty({readOnly:!0,dependencies:["showsNativeControls"],get:function(){return this.showsNativeControls?this._nativeControls_cachedValue||(this._nativeControls_cachedValue=o.NativeControls.extend({owner:u.default.observableProperty(this),_slurpProgress:u.default.observer("owner.provider.progress",function(e){this.badgeView&&(this.badgeView.progress=e)}),_slurpError:u.default.observer("owner.errors",function(e){this.badgeView&&(this.badgeView.shouldShowError=!!e&&e.length>0)}),init:function(){var e=this;this._super.apply(this,arguments),this.badgeView.configurePlayAction(function(){return e.owner.play()}),this.badgeView.configureStopAction(function(){return e.owner.beginFinishingPlaybackEarly()})}}).create()):null},didChange:function(e){this._nativeControls_previousValue&&this._nativeControls_previousValue.detach(),this._nativeControls_previousValue=e,e&&e.attachInto(this)}}),init:function(e,t){var r=this;if(e&&!i(e))throw"Any pre-existing element provided for use as a LivePhotosKit.Player must be able to append child DOM nodes.";e&&e.childNodes.length&&(e.innerHTML="");for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(this[n]=t[n]);switch(this._super(e),this.element.className="lpk-live-photo-player",l.default(this.element,"position")||this.element.style.position){case"absolute":case"fixed":case"relative":break;default:this.element.style.position="relative"}switch(l.default(this.element,"display")||this.element.style.display){case"block":case"inline-block":case"table":case"table-caption":case"table-column-group":case"table-header-group":case"table-footer-group":case"table-row-group":case"table-cell":case"table-column":case"table-row":break;default:this.element.style.display="inline-block"}this.renderer.attachInto(this),this.renderer.eventDispatchingElement=this.element,window.addEventListener("resize",this.updateSize),"ontouchstart"in document.documentElement&&(this.addEventListener("touchstart",function(){return r.play()},!1),this.addEventListener("touchend",function(){return r.beginFinishingPlaybackEarly()},!1))},play:function(){var e=this.provider;return e.video||(e.needsLoadedVideoForPlayback=!0),this.wantsToPlay=!0,this.canPlay&&(this.isPlaying=!0,this._lastFrameNow=Date.now(),this._nextFrame()),this.renderer.prepareToRenderAtTime(this.renderer.currentTime),this.isPlaying},pause:function(){this.isPlaying=!1,this.wantsToPlay=!1,this._cancelNextFrame()},stop:function(){this.pause(),this.currentTime=0,this.renderer.duration=NaN},toggle:function(){this.wantsToPlay?this.pause():this.play()},beginFinishingPlaybackEarly:function(){if(!this.isPlaying)return void(this.wantsToPlay=!1);var e=this.recipe;this.duration=Math.min(this.duration,Math.max(e.minimumShortenedDuration,this.currentTime+e.spontaneousFinishDuration))},_stopWhenAnotherPlayerStarts:u.default.observer("_constructor.activeInstance",function(e){e&&e!==this&&(this.stop(),this.renderer.reduceMemoryFootprint())}),_constructor:u.default.observableProperty(function(){return h}),_stopPlaybackWhenItemsLoadOrUnload:u.default.observer("video","photo",function(){this.isPlaying&&this.stop()}),addEventListener:function(e,t,r){var i=this.element;i.addEventListener.call(i,e,t,r)},removeEventListener:function(e,t,r){var i=this.element;i.removeEventListener.call(i,e,t,r)},_nextFrame:function(){var e=Date.now(),t=(e-this._lastFrameNow)*this.playbackRate;this._lastFrameNow=e,this.currentTime===this.renderedTime&&(this.currentTime+=t/1e3),this.currentTime=this.frameTimes.length)return this.duration;var t=0|e,r=Math.ceil(e);if(t===r)return this.frameTimes[t];var i=this.frameTimes[t],n=r=u&&d.numbert&&h.number<=t+2&&p;if(c||(f=!1),f){if(!this._isPlaying){this._isPlaying=!0;try{var v=this.video.play();v&&v.then instanceof Function&&v.then(n,i)}catch(e){p=!1}}this._expectedNextSeenFrameNumber=h.number,this._scheduleArtificialSeek()}else this._isPlaying&&(this._isPlaying=!1,this.video.pause()),this._expectedNextSeenFrameNumber=NaN,this.video.currentTime=h.time+1e-4,this._isSeeking=!0}}),_frameWillDispose:function(e){this._removePendingFrame(e)},_removePendingFrame:function(e){o(this._pendingFrames,e),this._pendingFrames.length||this._unscheduleArtificialSeek()}});t.default=v},function(e,t,r){"use strict";function i(e){e.container=document.createElement("div"),e.container.frame=e,e.container.innerHTML='
',e.textBox=e.container.lastChild,e.container.insertBefore(e.image,e.textBox),e.image.style.position="absolute",e.container.style.cssText="position:relative; display:inline-block; border: 1px solid black;";var t=e._debug_aspect||(e._debug_aspect=e.videoDecoder&&(e.videoDecoder.videoWidth>e.videoDecoder.videoHeight?"landscape":"portrait"));e.container.style.width=e.image.style.width="landscape"===t?"40px":"30px",e.container.style.height=e.image.style.height="landscape"===t?"30px":"40px",document.body.appendChild(e.container)}Object.defineProperty(t,"__esModule",{value:!0});var n=r(12),a=r(40),o=r(2),s=r(0),u=r(38),d=r(1),l=s.default.Object.extend(u.default,a.default,{staticMembers:{getPoolingCacheKey:function(e,t){return"f"+t+"_in_"+e.id}},container:null,image:null,_context:null,number:-1,time:-1,importance:0,videoDecoder:null,readyState:0,_poolingCacheKey:null,_debugShowInDOM:n.default,lacksOwnPixelData:!1,_postDispose:function(){this.image.width=this.image.height=0},get backingFrame(){return this.lacksOwnPixelData?this.videoDecoder.getNearestDecodedFrame(this.number)||this:this},init:function(){this._postDispose=this._postDispose.bind(this);var e=this.image=document.createElement("canvas");this._context=this.image.getContext("2d"),this._super(),this._debugShowInDOM?i(this):c&&(c.appendChild(e),e.style.cssText="position: absolute; top: 0px; width:1px; height: 1px; display: inline-block;",e.style.left=h++ +"px")},initFromPool:function(e,t){clearTimeout(this._postDisposalTimeout),this.videoDecoder=e,this.number=t,this.time=e.frameTimes[t],this._debugShowInDOM&&(this.textBox.innerHTML=this.number)},dispose:function(){this.resetReadiness(),this.videoDecoder._frameWillDispose(this),this.number=this.time=-1,this.importance=0,this.videoDecoder=null,this.readyState=0,this.lacksOwnPixelData=!1,this._postDisposalTimeout=setTimeout(this._postDispose,3e3),this.constructor._disposeInstance(this),this._debugShowInDOM&&(this.textBox.innerHTML="x",this.textBox.style.color="#FF0000",this._context.clearRect(0,0,this.image.width,this.image.height))},didPend:function(){this.readyState=1,this._debugShowInDOM&&(this.textBox.style.color="#FF8800")},didDecode:function(){this.obtainPixelData(),this.readyState=2,this.resolveReadiness(this),this._debugShowInDOM&&(this.textBox.style.color="#00FF00")},obtainPixelData:function(){var e=this.image,t=this._context,r=this.videoDecoder,i=r.videoRotation,n=r.videoWidth,a=r.videoHeight,o=i%180==0?n:a,s=i%180==0?a:n;e.width===n&&e.height===a||(e.width=n,e.height=a);for(var u=0;u=2,a=0,o=e.length;a1?1:.5-.5*Math.cos(e*Math.PI)},calculateAnimationDuration:function(e,t){return e?e-t+this.exitBlurDuration:0},photo:i.default.PhotoIngredient.create({hideDuration:.06,get returnDuration(){return this.recipe.exitBlurDuration},opacity:i.default.computedStyle(function(e){if(ethis.hideDuration&&e1?1:1-(1-e)*(1-e)},quadraticEaseIn:function(e){return e<0?0:e>1?1:e*e},calculateAnimationDuration:function(e,t){return e?e+this.bottomVideoRevealBeginTime+this.enterExitBlurDuration:0},photo:i.default.PhotoIngredient.create({hideDuration:.06,get returnDuration(){return this.recipe.enterExitBlurDuration},opacity:i.default.computedStyle(function(e){if(ethis.hideDuration&&ethis.hideEnd?NaN:e+this.renderer.photoTime},prepareVideoFramesFromTime:function(){this.retainFramesForTime(0,this.hideEnd,1)},transform:i.default.computedStyle(function(e){if(e>this.blurOutDuration)return"translateZ(0)";var t=1+(this.recipe.zoomScaleFactor-1)*this.recipe.quadraticEaseOut(e/this.blurOutDuration);return"translate3d("+-(t-1)/2*this.displayWidth+"px, "+-(t-1)/2*this.displayHeight+"px, 0) scale3d("+t+", "+t+", 1)"}),filter:i.default.computedStyle(function(e){if(!s||e>this.blurOutDuration)return"";var t=this.recipe.blurRadius*this.recipe.quadraticEaseOut(e/this.blurOutDuration);return t?"blur("+this.recipe.quantizeRadius(t)+"px)":""}),opacity:i.default.computedStyle(function(e){return ethis.hideEnd?"0":(1-this.recipe.quadraticEaseOut((e-this.hideStart)/this.hideDuration)).toString()}),display:i.default.computedStyle(function(e){return!e||e>this.hideEnd?"none":""}),zIndex:i.default.computedStyle(function(){return 2})}),bottomVideo:i.default.VideoIngredient.create({get backingScaleFactor(){return this.recipe.zoomScaleFactor},get playStart(){return this.recipe.bottomVideoRevealBeginTime},blurInDuration:.5,get blurOutDuration(){return this.recipe.enterExitBlurDuration},lookaheadTime:.01+7/15,videoTimeAtTime:function(e){var t=Math.min(this.videoDuration,e-this.playStart);return Math.min(t,this.renderer.duration-this.blurOutDuration)},prepareVideoFramesFromTime:function(e){this.retainFramesForTime(e,e+this.lookaheadTime)},display:i.default.computedStyle(function(e){return en.number){var a=i;n=i,i=a}i===n&&(n=null);var o=this.videoDecoder.fractionalIndexForTime(t),s=o-(0|o);this.renderFramePair(i,n,s),this._super(e)},renderFramePair:function(){},requiredFramesForVideoTime:function(e,t,r){void 0===t&&(t=e);var i=this.videoDecoder,n=l;if(n.length=0,t<0||e>this.videoDuration||isNaN(e)||isNaN(t))return n;for(var a=Math.max(0,Math.floor(i.fractionalIndexForTime(e))),o=Math.min(i.frameCount,Math.ceil(i.fractionalIndexForTime(t))),u=a;u<=o;u++)s.default&&0===u||n.push(i.getFrame(u,r));return n},requiredFramesForTime:function(e,t,r){return this.requiredFramesForVideoTime(this._videoTimeAtTime(e),this._videoTimeAtTime(t),r)},retainFramesForVideoTime:function(e,t,r){void 0===t&&(t=e);var a=this.requiredFramesForVideoTime(e,t,r);a.forEach(i);var o=this._retainedFrames||(this._retainedFrames=[]);o.forEach(n),o.length=0,o.push.apply(o,a)},retainFramesForTime:function(e,t,r){return this.retainFramesForVideoTime(this._videoTimeAtTime(e),this._videoTimeAtTime(t),r)},dispose:function(){this.retainFramesForVideoTime(NaN),this._super()}}),d=1,l=[];t.default=u},function(e,t,r){"use strict";function i(){l.forEach(function(e){return e()})}function n(){l.length=0,d.removeListener(i),d=void 0}function a(e){l.push(e)}function o(e){var t=l.indexOf(e);t>-1&&l.splice(t,1)}function s(){return window.devicePixelRatio}function u(){return Math.ceil(s())}Object.defineProperty(t,"__esModule",{value:!0});var d=void 0,l=[];!function(){window.matchMedia&&(d=window.matchMedia("only screen and (-webkit-min-device-pixel-ratio:1.3),only screen and (-o-min-device-pixel-ratio:13/10),only screen and (min-resolution:120dpi)"),d.addListener(i))}(),t.uninitialize=n,t.addListener=a,t.removeListener=o,t.dpi=s,t.dpiInt=u},function(e,t,r){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e){var t=s.default(e),r=d.get(t);if(r)return r;var i=e.map(function(e){if("i"===e[0]&&c(e[1]))return"I"+e.substring(1)});return e=e.concat(i.filter(function(e){return!!e})),r=new RegExp(e.join("|"),"g"),d.set(t,r),r}function a(e,t){var r=e.charCodeAt(0),i=t.charCodeAt(0),n=new Map;return function(e){var t=n.get(e);if(void 0!==t)return t;var a=e.charCodeAt(0);return t=a>=r&&a<=i,n.set(e,t),t}}var o=function(){function e(e,t){for(var r=0;r>>1,this.h>>>1)}},{key:"length",value:function(){return this.w*this.h}}]),e}();t.Size=u;var d=function(){function e(t,r,n){i(this,e),this.bytes=new Uint8Array(t),this.start=r||0,this.pos=this.start,this.end=r+n||this.bytes.length}return o(e,[{key:"readU8Array",value:function(e){if(this.pos>this.end-e)return null;var t=this.bytes.subarray(this.pos,this.pos+e);return this.pos+=e,t}},{key:"readU32Array",value:function(e,t,r){if(t=t||1,this.pos>this.end-e*t*4)return null;if(1===t){for(var i=new Uint32Array(e),n=0;n>24}},{key:"readU8",value:function(){return this.pos>=this.end?null:this.bytes[this.pos++]}},{key:"read16",value:function(){return this.readU16()<<16>>16}},{key:"readU16",value:function(){if(this.pos>=this.end-1)return null;var e=this.bytes[this.pos+0]<<8|this.bytes[this.pos+1];return this.pos+=2,e}},{key:"read24",value:function(){return this.readU24()<<8>>8}},{key:"readU24",value:function(){var e=this.pos,t=this.bytes;if(e>this.end-3)return null;var r=t[e+0]<<16|t[e+1]<<8|t[e+2];return this.pos+=3,r}},{key:"peek32",value:function(e){var t=this.pos,r=this.bytes;if(t>this.end-4)return null;var i=r[t+0]<<24|r[t+1]<<16|r[t+2]<<8|r[t+3];return e&&(this.pos+=4),i}},{key:"read32",value:function(){return this.peek32(!0)}},{key:"readU32",value:function(){return this.peek32(!0)>>>0}},{key:"read4CC",value:function(){var e=this.pos;if(e>this.end-4)return null;for(var t="",r=0;r<4;r++)t+=String.fromCharCode(this.bytes[e+r]);return this.pos+=4,t}},{key:"readFP16",value:function(){return this.read32()/65536}},{key:"readFP8",value:function(){return this.read16()/256}},{key:"readISO639",value:function(){for(var e=this.readU16(),t="",r=0;r<3;r++){var i=e>>>5*(2-r)&31;t+=String.fromCharCode(i+96)}return t}},{key:"readUTF8",value:function(e){for(var t="",r=0;rthis.end)&&a("Index out of bounds (bounds: [0, "+this.end+"], index: "+e+")."),this.pos=e}},{key:"subStream",value:function(t,r){return new e(this.bytes.buffer,t,r)}},{key:"length",get:function(){return this.end-this.start}},{key:"position",get:function(){return this.pos}},{key:"remaining",get:function(){return this.end-this.pos}}]),e}();t.Bytestream=d;var l=function(){function e(t){i(this,e),this.stream=t,this.tracks={}}return o(e,[{key:"getPath",value:function(e){for(var t=e.split("."),r=this,i=0,n=t.length;i0&&(k.name=e.readUTF8(d));break;case"minf":o.name="Media Information Box",a();break;case"stbl":o.name="Sample Table Box",a();break;case"stsd":var x=o;x.name="Sample Description Box",t(),x.sd=[],e.readU32(),a();break;case"avc1":var S=o;e.reserved(6,0),S.dataReferenceIndex=e.readU16(),n(0==e.readU16()),n(0==e.readU16()),e.readU32(),e.readU32(),e.readU32(),S.width=e.readU16(),S.height=e.readU16(),S.horizontalResolution=e.readFP16(),S.verticalResolution=e.readFP16(),n(0==e.readU32()),S.frameCount=e.readU16(),S.compressorName=e.readPString(32),S.depth=e.readU16(),n(65535==e.readU16()),a();break;case"mp4a":var T=o;if(e.reserved(6,0),T.dataReferenceIndex=e.readU16(),T.version=e.readU16(),0!==T.version){i();break}e.skip(2),e.skip(4),T.channelCount=e.readU16(),T.sampleSize=e.readU16(),T.compressionId=e.readU16(),T.packetSize=e.readU16(),T.sampleRate=e.readU32()>>>16,a();break;case"esds":o.name="Elementary Stream Descriptor",t(),i();break;case"avcC":var w=o;w.name="AVC Configuration Box",w.configurationVersion=e.readU8(),w.avcProfileIndicaation=e.readU8(),w.profileCompatibility=e.readU8(),w.avcLevelIndication=e.readU8(),w.lengthSizeMinusOne=3&e.readU8(),n(3==w.lengthSizeMinusOne,"TODO"),u=31&e.readU8(),w.sps=[];for(var C=0;C=8,"Cannot parse large media data yet."),E.data=e.readU8Array(r());break;default:i()}return o}},{key:"read",value:function(){var e=(new Date).getTime();this.file={},this.readBoxes(this.stream,this.file),s.default.info("Parsed stream in "+((new Date).getTime()-e)+" ms")}},{key:"traceSamples",value:function(){var e=this.tracks[1],t=this.tracks[2];s.default.info("Video Samples: "+e.getSampleCount()),s.default.info("Audio Samples: "+t.getSampleCount());for(var r=0,i=0,n=0;n<100;n++){var a=e.sampleToOffset(r),o=t.sampleToOffset(i),u=e.sampleToSize(r,1),d=t.sampleToSize(i,1);a0){var s=t[a-1],u=o.firstChunk-s.firstChunk,d=s.samplesPerChunk*u;if(!(e>=d))return{index:i+Math.floor(e/s.samplesPerChunk),offset:e%s.samplesPerChunk};if(e-=d,a===t.length-1)return{index:i+u+Math.floor(e/o.samplesPerChunk),offset:e%o.samplesPerChunk};i+=u}}n(!1)}},{key:"chunkToOffset",value:function(e){return this.trak.mdia.minf.stbl.stco.table[e]}},{key:"sampleToOffset",value:function(e){var t=this.sampleToChunk(e);return this.chunkToOffset(t.index)+this.sampleToSize(e-t.offset,t.offset)}},{key:"timeToSample",value:function(e){for(var t=this.trak.mdia.minf.stbl.stts.table,r=0,i=0;i=n))return r+Math.floor(e/t[i].delta);e-=n,r+=t[i].count}}},{key:"sampleToTime",value:function(e){for(var t=this.trak.mdia.minf.stbl.stts.table,r=0,i=0,n=0;n0;){var a=new d(t.buffer,r).readU32();n.push(t.subarray(r+4,r+a+4)),r=r+a+4}return n}}]),e}();t.Track=h},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i={staticMembers:{_pool:null,_cache:null,init:function(){this._pool=[],this._cache={},this._super()},getPoolingCacheKey:function(){throw"Must implement `getPoolingCacheKey` to use PoolCaching."},getCached:function(){var e=this.getPoolingCacheKey.apply(this,arguments),t=this._cache[e];return t||(t=this._cache[e]=this._pool.pop()||this.create(),t._poolingCacheKey=e,t.initFromPool.apply(t,arguments)),t},peekCached:function(){var e=this.getPoolingCacheKey.apply(this,arguments);return this._cache[e]||null},_disposeInstance:function(e){delete this._cache[e._poolingCacheKey],e._poolingCacheKey=void 0,e._poolingLifecycleCount=1+(0|e._poolingLifecycleCount),this._pool.push(e)}},dispose:function(){},_poolingCacheKey:null,initFromPool:function(){},_retainCount:0,retain:function(){return this._retainCount++,this},release:function(){return this._retainCount--,this._retainCount||this.dispose(),this}};t.default=i},function(e,t,r){"use strict";function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function n(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=function(){function e(e,t){for(var r=0;r2?r-2:0),f=2;f=1)return e.drawImage.apply(e,i.apply(c,arguments)),!0;var R=void 0;if(p){R="_cachedSmoothDownsample_from"+b+","+g+","+_+","+P+"@"+F+"x";var M=t[R];if(M)return e.drawImage(M,0,0,M.width,M.height,O,k,x,S),!0}if(v)return e.drawImage.apply(e,i.apply(c,arguments)),!1;var D=1,L=_,I=P,j=Math.max(Math.pow(2,Math.ceil(Math.log(L)/Math.log(2))),a.width),A=Math.max(Math.pow(2,Math.ceil(Math.log(I)/Math.log(2))),a.height);for(a.width===j&&a.height===A||(a.width=s.width=j,a.height=s.height=A),o.drawImage(t,b,g,_,P,0,0,_,P);D>F;){u.drawImage(a,0,0,L,I,0,0,L=Math.ceil(L/2),I=Math.ceil(I/2)),o.clearRect(0,0,L,I);var E=a;a=s,s=E;var U=o;o=u,u=U,D/=2}if(p){var V=document.createElement("canvas");V.width=L,V.height=I,V.getContext("2d").drawImage(a,0,0),t[R]=V}return e.drawImage(a,0,0,L,I,O,k,x,S),o.clearRect(0,0,_,P),u.clearRect(0,0,_,P),!0}};h.usingCache=function(){return d=!0,this},h.avoidingWorkIf=function(e){return l=e,this};var c=[];t.default=h},function(e,t,r){"use strict";function i(){var e="_callbacksForEventHandler"+ ++n;return function(t){var r=this[e]||(this[e]=[]);if("function"==typeof t)return r.push(t);if(r)for(var i=0,n=r.length;ib;return p=p||{},p.width=g?c:f*m,p.height=g?c/m:f,p}function n(e,t,r,n,a){return i(!1,e,t,r,n,a,arguments.length)}function a(e,t,r,n,a){return i(!0,e,t,r,n,a,arguments.length)}Object.defineProperty(t,"__esModule",{value:!0}),t.default=i,t.innerSizeToFitOuter=n,t.innerSizeToCoverOuter=a},function(e,t,r){"use strict";function i(e){var t=e&&new DataView(e),r=t&&n(t)&&a(t);return r?r.orientation:NaN}function n(e){return 65496===e.getUint16(0)}function a(e){for(var t=e.byteLength,r=2,i={};r