Merge pull request #4 from LottieFiles/fix/removed-player

fix: updated packages, fixed player bug with controls, fixed css bundling bug
LottieFiles · Jan 18, 2022 · 9d5a99b · 9d5a99b
2 parents 98c0865 + 47bbdb0
commit 9d5a99b
Show file tree

Hide file tree

Showing 8 changed files with 4,056 additions and 4,185 deletions.
diff --git a/example/src/App.vue b/example/src/App.vue
@@ -11,6 +11,7 @@
                            :theme="options.theme"
                            :player-size="options.playerSize"
                            :player-controls="true"
+                           :showColorPicker="true"
                            style="width: 100%; height:400px"></lottie-vue-player>
     </div>
 </template>

diff --git a/example/yarn.lock b/example/yarn.lock
diff --git a/package.json b/package.json
@@ -27,29 +27,29 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@lottiefiles/lottie-player": "^1.5.2",
-    "vue": "^2.6.12",
-    "vue-clickaway": "^2.2.2"
+    "@lottiefiles/lottie-player": "^1.04",
+    "vue": "^2.6.12"
   },
   "devDependencies": {
+    "@commitlint/cli": "^12.1.1",
+    "@commitlint/config-conventional": "^12.1.1",
     "@rollup/plugin-buble": "^0.21.3",
     "@rollup/plugin-commonjs": "^19.0.0",
-    "@vue/cli-service": "^4.5.13",
-    "@vue/compiler-sfc": "^3.0.11",
-    "rollup": "^2.50.1",
-    "rollup-plugin-vue": "^6.0.0",
-    "vue-template-compiler": "^2.6.12",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/commit-analyzer": "^8.0.1",
     "@semantic-release/git": "^9.0.0",
     "@semantic-release/github": "^7.2.1",
     "@semantic-release/npm": "^7.1.1",
     "@semantic-release/release-notes-generator": "^9.0.2",
-    "semantic-release": "^17.4.2",
+    "@vue/cli-service": "^4.5.13",
+    "@vue/compiler-sfc": "^3.0.11",
     "husky": ">=4",
     "lint-staged": ">=10",
-    "@commitlint/cli": "^12.1.1",
-    "@commitlint/config-conventional": "^12.1.1"
+    "rollup": "^2.50.1",
+    "rollup-plugin-vue": "^6.0.0",
+    "semantic-release": "^17.4.2",
+    "vue-clickaway": "^2.2.2",
+    "vue-template-compiler": "^2.6.12"
   },
   "husky": {
     "hooks": {

diff --git a/src/Player.vue b/src/Player.vue
@@ -3,27 +3,30 @@
         <div v-if="loading" class="w-full h-full absolute flex justify-center items-center">
             <div class="spinner"></div>
         </div>
-        <lottie-player
-                ref="player"
-                :autoplay="autoplay"
-                :src="src"
-                :loop="options.loop"
-                :speed="options.speed"
-                :style="{height: height, background: options.backgroundColor}"
-                @dblclick="toggleFullscreen"
-        ></lottie-player>
-        <controls
-                v-if="playerControls && options.animation"
-                @setBackgroundColor="setBackgroundColor"
-                @setPlayerSpeed="setPlayerSpeed"
-                @togglePlayPause="togglePlayPause"
-                @toggleLoop="toggleLoop"
-                @stop="stop"
-                :show-color-picker-tool="showColorPicker"
-                :player-size="playerSize"
-                :player-controls-position="playerControlPosition"
-                :theme="theme"
-                :options="options"></controls>
+        <div style="all: inherit">
+            <lottie-player
+                    ref="player"
+                    :autoplay="autoplay"
+                    :src="src"
+                    :loop="options.loop"
+                    :speed="options.speed"
+                    :style="{height: height, background: options.backgroundColor}"
+                    @dblclick="toggleFullscreen"
+            ></lottie-player>
+            <controls
+                    v-if="playerControls && options.animation"
+                    @setBackgroundColor="setBackgroundColor"
+                    @setPlayerSpeed="setPlayerSpeed"
+                    @togglePlayPause="togglePlayPause"
+                    @toggleLoop="toggleLoop"
+                    @stop="stop"
+                    :show-color-picker-tool="showColorPicker"
+                    :player-size="playerSize"
+                    :player-controls-position="playerControlPosition"
+                    :theme="theme"
+                    :options="options">
+            </controls>
+        </div>
     </div>
 </template>
 <script>

diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,5 @@
 import Player from "./Player.vue";
+import "./lottie_player.min.css";
 
 const LottieVuePlayer = {
   install(Vue, options = {}) {

diff --git a/src/lottie_player.min.css b/src/lottie_player.min.css
diff --git a/vue.config.js b/vue.config.js
@@ -0,0 +1,19 @@
+//Compiler options
+
+module.exports = {
+    configureWebpack: {},
+    chainWebpack: (config) => {
+      config.module
+        .rule("vue")
+        .use("vue-loader")
+        .tap((options) => {
+          return {
+            ...options,
+            compilerOptions: {
+              isCustomElement: (tag) => tag === "lottie-player",
+            },
+          };
+        });
+    },
+    css: { extract: false },
+  };