@car-cutter/vue-webplayer 0.3.0

package/index.ts

@@ -0,0 +1,23 @@
+export {
+  default as WebPlayer,
+  type WebPlayerProps,
+  type WebPlayerEvents,
+} from "./src/WebPlayer.vue";
+
+// Expose parent package
+export {
+  // - Components
+  WEB_PLAYER_WC_TAG,
+  WEB_PLAYER_ICON_WC_TAG,
+  // - Events
+  DEFAULT_EVENT_PREFIX,
+  EVENT_COMPOSITION_LOADING,
+  EVENT_COMPOSITION_LOADED,
+  EVENT_COMPOSITION_LOAD_ERROR,
+  EVENT_EXTEND_MODE_ON,
+  EVENT_EXTEND_MODE_OFF,
+  EVENT_HOTSPOTS_ON,
+  EVENT_HOTSPOTS_OFF,
+  EVENT_GALLERY_OPEN,
+  EVENT_GALLERY_CLOSE,
+} from "@car-cutter/wc-webplayer";

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@car-cutter/vue-webplayer",
+  "version": "0.3.0",
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "vue-tsc -b && vite build",
+    "lint": "eslint . --ext ts --max-warnings 0",
+    "analyze": "vite-bundle-visualizer"
+  },
+  "dependencies": {
+    "@car-cutter/wc-webplayer": "0.3.0"
+  },
+  "peerDependencies": {
+    "vue": ">=3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.2",
+    "eslint": "^8.57.0",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.1",
+    "vite-bundle-visualizer": "^1.2.1",
+    "vite-plugin-dts": "^4.0.3",
+    "vue": "^3.4.37",
+    "vue-tsc": "^2.0.29"
+  }
+}

package/src/WebPlayer.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { onMounted, onUnmounted } from "vue";
+
+import {
+  DEFAULT_EVENT_PREFIX,
+  EVENT_COMPOSITION_LOADING,
+  EVENT_COMPOSITION_LOADED,
+  EVENT_COMPOSITION_LOAD_ERROR,
+  EVENT_EXTEND_MODE_ON,
+  EVENT_EXTEND_MODE_OFF,
+  EVENT_HOTSPOTS_ON,
+  EVENT_HOTSPOTS_OFF,
+  EVENT_GALLERY_OPEN,
+  EVENT_GALLERY_CLOSE,
+} from "@car-cutter/core";
+import { type WebPlayerProps } from "@car-cutter/core-ui";
+import { ensureCustomElementsDefinition } from "@car-cutter/wc-webplayer";
+
+export type { WebPlayerProps };
+export type WebPlayerEvents = {
+  compositionLoading: [];
+  compositionLoaded: [];
+  compositionLoadError: [];
+  extendModeOn: [];
+  extendModeOff: [];
+  hotspotsOn: [];
+  hotspotsOff: [];
+  galleryOpen: [];
+  galleryClose: [];
+};
+
+const props = defineProps<WebPlayerProps>();
+ensureCustomElementsDefinition();
+
+// -- Event listeners
+const emit = defineEmits<WebPlayerEvents>();
+
+const eventPrefix = props.eventPrefix ?? DEFAULT_EVENT_PREFIX;
+
+const generateEventName = (event: string) => `${eventPrefix}${event}`;
+
+const eventListenerMap = new Map([
+  [EVENT_COMPOSITION_LOADING, () => emit("compositionLoading")],
+  [EVENT_COMPOSITION_LOADED, () => emit("compositionLoaded")],
+  [EVENT_COMPOSITION_LOAD_ERROR, () => emit("compositionLoadError")],
+  [EVENT_EXTEND_MODE_ON, () => emit("extendModeOn")],
+  [EVENT_EXTEND_MODE_OFF, () => emit("extendModeOff")],
+  [EVENT_HOTSPOTS_ON, () => emit("hotspotsOn")],
+  [EVENT_HOTSPOTS_OFF, () => emit("hotspotsOff")],
+  [EVENT_GALLERY_OPEN, () => emit("galleryOpen")],
+  [EVENT_GALLERY_CLOSE, () => emit("galleryClose")],
+]);
+
+onMounted(() => {
+  eventListenerMap.forEach((emiter, event) => {
+    const eventName = generateEventName(event);
+    document.addEventListener(eventName, emiter);
+  });
+});
+
+onUnmounted(() => {
+  eventListenerMap.forEach((emiter, event) => {
+    const eventName = generateEventName(event);
+    document.removeEventListener(eventName, emiter);
+  });
+});
+</script>
+
+<template>
+  <cc-webplayer
+    :composition-url="compositionUrl"
+    :infinite-carrousel="infiniteCarrousel"
+    :permanent-gallery="permanentGallery"
+    :image-load-strategy="imageLoadStrategy"
+    :min-image-width="minImageWidth"
+    :max-image-width="maxImageWidth"
+    :flatten="flatten"
+    :prevent-full-screen="preventFullScreen"
+    :eventPrefix="eventPrefix"
+    :reverse360="reverse360"
+  >
+  </cc-webplayer>
+</template>

package/tsconfig.app.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@car-cutter/typescript-config/base.json",
+
+  "compilerOptions": {
+    "jsx": "preserve"
+  },
+  "include": ["index.ts", "src/**/*.vue"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@car-cutter/typescript-config/vite.json",
+
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,52 @@
+import { resolve } from "path";
+
+import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: tag => ["cc-webplayer"].includes(tag),
+        },
+      },
+    }),
+    dts({
+      tsconfigPath: resolve(__dirname, "./tsconfig.app.json"),
+      rollupTypes: true,
+      bundledPackages: [
+        "@car-cutter/core",
+        "@car-cutter/core-ui",
+        "@car-cutter/core-wc",
+        "@car-cutter/wc-webplayer",
+      ],
+    }),
+  ],
+
+  define: {
+    "process.env": {
+      NODE_ENV: "production",
+    },
+  },
+  build: {
+    lib: {
+      name: "vue-webplayer",
+      fileName: "index",
+      entry: resolve(__dirname, "./index.ts"),
+    },
+
+    chunkSizeWarningLimit: 400,
+
+    // Vue is an external dependency, it should be provided by the consumer
+    rollupOptions: {
+      external: ["vue"],
+      output: {
+        globals: {
+          vue: "Vue",
+        },
+      },
+    },
+  },
+});