@car-cutter/vue-webplayer 0.4.2 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +134 -30
- package/dist/index.js +2660 -2611
- package/dist/index.umd.cjs +11 -11
- package/package.json +13 -8
package/dist/index.d.ts
CHANGED
|
@@ -1,21 +1,39 @@
|
|
|
1
1
|
import { ComponentOptionsMixin } from 'vue';
|
|
2
|
+
import { ComponentProvideOptions } from 'vue';
|
|
2
3
|
import { DefineComponent } from 'vue';
|
|
3
|
-
import { ExtractPropTypes } from 'vue';
|
|
4
|
-
import { PropType } from 'vue';
|
|
5
4
|
import { PublicProps } from 'vue';
|
|
6
5
|
|
|
7
|
-
declare type
|
|
6
|
+
declare type AspectRatio = `${number}:${number}`;
|
|
8
7
|
|
|
9
|
-
declare type
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
};
|
|
8
|
+
declare type AspectRatio_2 = `${number}:${number}`;
|
|
9
|
+
|
|
10
|
+
declare type Category = {
|
|
11
|
+
id: string;
|
|
12
|
+
title: string;
|
|
13
|
+
items: Item[];
|
|
16
14
|
};
|
|
17
15
|
|
|
18
|
-
|
|
16
|
+
declare type Category_2 = {
|
|
17
|
+
id: string;
|
|
18
|
+
title: string;
|
|
19
|
+
items: Item_2[];
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export declare type Composition = {
|
|
23
|
+
aspectRatio: AspectRatio_2;
|
|
24
|
+
imageHdWidth: ImageWidth_2;
|
|
25
|
+
imageSubWidths: ImageWidth_2[];
|
|
26
|
+
categories: Category_2[];
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
declare type Composition_2 = {
|
|
30
|
+
aspectRatio: AspectRatio;
|
|
31
|
+
imageHdWidth: ImageWidth;
|
|
32
|
+
imageSubWidths: ImageWidth[];
|
|
33
|
+
categories: Category[];
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
export declare const DEFAULT_EVENT_PREFIX: string = "cc-webplayer:";
|
|
19
37
|
|
|
20
38
|
export declare const EVENT_COMPOSITION_LOAD_ERROR = "composition-load-error";
|
|
21
39
|
|
|
@@ -35,38 +53,124 @@ export declare const EVENT_HOTSPOTS_OFF = "hotspots-off";
|
|
|
35
53
|
|
|
36
54
|
export declare const EVENT_HOTSPOTS_ON = "hotspots-on";
|
|
37
55
|
|
|
56
|
+
/**
|
|
57
|
+
* Generates a URL for fetching the composition JSON for a given customer and vehicle.
|
|
58
|
+
*
|
|
59
|
+
* @param {string} customerId - The ID of the customer.
|
|
60
|
+
* @param {string} vin - The Vehicle Identification Number.
|
|
61
|
+
* @returns {string} The URL to fetch the composition JSON.
|
|
62
|
+
*/
|
|
63
|
+
export declare function generateCompositionUrl(
|
|
64
|
+
customerId: string,
|
|
65
|
+
vin: string
|
|
66
|
+
): string {
|
|
67
|
+
return `https://cdn.car-cutter.com/gallery/${customerId}/${vin}/composition_v3.json`;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
declare type Hotspot = {
|
|
71
|
+
title: string;
|
|
72
|
+
icon?: string;
|
|
73
|
+
description?: string;
|
|
74
|
+
position: {
|
|
75
|
+
x: number;
|
|
76
|
+
y: number;
|
|
77
|
+
};
|
|
78
|
+
detail?: {
|
|
79
|
+
type: "image" | "link" | "pdf";
|
|
80
|
+
src: string;
|
|
81
|
+
};
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
declare type Hotspot_2 = {
|
|
85
|
+
title: string;
|
|
86
|
+
icon?: string;
|
|
87
|
+
description?: string;
|
|
88
|
+
position: {
|
|
89
|
+
x: number;
|
|
90
|
+
y: number;
|
|
91
|
+
};
|
|
92
|
+
detail?: {
|
|
93
|
+
type: "image" | "link" | "pdf";
|
|
94
|
+
src: string;
|
|
95
|
+
};
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
declare type ImageItem = { type: "image" } & ImageWithHotspots;
|
|
99
|
+
|
|
100
|
+
declare type ImageItem_2 = { type: "image" } & ImageWithHotspots_2;
|
|
101
|
+
|
|
38
102
|
declare type ImageLoadStrategy = "quality" | "speed";
|
|
39
103
|
|
|
104
|
+
declare type ImageWidth = number;
|
|
105
|
+
|
|
106
|
+
declare type ImageWidth_2 = number;
|
|
107
|
+
|
|
108
|
+
declare type ImageWithHotspots = {
|
|
109
|
+
src: string;
|
|
110
|
+
hotspots?: Hotspot[];
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
declare type ImageWithHotspots_2 = {
|
|
114
|
+
src: string;
|
|
115
|
+
hotspots?: Hotspot_2[];
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
declare type Item = ImageItem | VideoItem | ThreeSixtyItem;
|
|
119
|
+
|
|
120
|
+
declare type Item_2 = ImageItem_2 | VideoItem_2 | ThreeSixtyItem_2;
|
|
121
|
+
|
|
122
|
+
declare type ThreeSixtyItem = {
|
|
123
|
+
type: "360";
|
|
124
|
+
images: ImageWithHotspots[];
|
|
125
|
+
};
|
|
126
|
+
|
|
127
|
+
declare type ThreeSixtyItem_2 = {
|
|
128
|
+
type: "360";
|
|
129
|
+
images: ImageWithHotspots_2[];
|
|
130
|
+
};
|
|
131
|
+
|
|
132
|
+
declare type VideoItem = {
|
|
133
|
+
type: "video";
|
|
134
|
+
src: string;
|
|
135
|
+
poster: string;
|
|
136
|
+
};
|
|
137
|
+
|
|
138
|
+
declare type VideoItem_2 = {
|
|
139
|
+
type: "video";
|
|
140
|
+
src: string;
|
|
141
|
+
poster: string;
|
|
142
|
+
};
|
|
143
|
+
|
|
40
144
|
export declare const WEB_PLAYER_ICON_WC_TAG = "cc-webplayer-icon";
|
|
41
145
|
|
|
42
146
|
export declare const WEB_PLAYER_WC_TAG = "cc-webplayer";
|
|
43
147
|
|
|
44
|
-
export declare const WebPlayer: DefineComponent<
|
|
45
|
-
compositionLoading: () =>
|
|
46
|
-
compositionLoaded: () =>
|
|
47
|
-
compositionLoadError: () =>
|
|
48
|
-
extendModeOn: () =>
|
|
49
|
-
extendModeOff: () =>
|
|
50
|
-
hotspotsOn: () =>
|
|
51
|
-
hotspotsOff: () =>
|
|
52
|
-
galleryOpen: () =>
|
|
53
|
-
galleryClose: () =>
|
|
54
|
-
}, string, PublicProps, Readonly<
|
|
55
|
-
onCompositionLoading?: (() => any) | undefined;
|
|
56
|
-
onCompositionLoaded?: (() => any) | undefined;
|
|
57
|
-
onCompositionLoadError?: (() => any) | undefined;
|
|
148
|
+
export declare const WebPlayer: DefineComponent<WebPlayerProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
149
|
+
compositionLoading: (url: string) => any;
|
|
150
|
+
compositionLoaded: (composition: Composition_2) => any;
|
|
151
|
+
compositionLoadError: (error: unknown) => any;
|
|
152
|
+
extendModeOn: () => any;
|
|
153
|
+
extendModeOff: () => any;
|
|
154
|
+
hotspotsOn: () => any;
|
|
155
|
+
hotspotsOff: () => any;
|
|
156
|
+
galleryOpen: () => any;
|
|
157
|
+
galleryClose: () => any;
|
|
158
|
+
}, string, PublicProps, Readonly<WebPlayerProps> & Readonly<{
|
|
159
|
+
onCompositionLoading?: ((url: string) => any) | undefined;
|
|
160
|
+
onCompositionLoaded?: ((composition: Composition_2) => any) | undefined;
|
|
161
|
+
onCompositionLoadError?: ((error: unknown) => any) | undefined;
|
|
58
162
|
onExtendModeOn?: (() => any) | undefined;
|
|
59
163
|
onExtendModeOff?: (() => any) | undefined;
|
|
60
164
|
onHotspotsOn?: (() => any) | undefined;
|
|
61
165
|
onHotspotsOff?: (() => any) | undefined;
|
|
62
166
|
onGalleryOpen?: (() => any) | undefined;
|
|
63
167
|
onGalleryClose?: (() => any) | undefined;
|
|
64
|
-
}, {}, {}>;
|
|
168
|
+
}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
65
169
|
|
|
66
170
|
export declare type WebPlayerEvents = {
|
|
67
|
-
compositionLoading: [];
|
|
68
|
-
compositionLoaded: [];
|
|
69
|
-
compositionLoadError: [];
|
|
171
|
+
compositionLoading: [url: string];
|
|
172
|
+
compositionLoaded: [composition: Composition_2];
|
|
173
|
+
compositionLoadError: [error: unknown];
|
|
70
174
|
extendModeOn: [];
|
|
71
175
|
extendModeOff: [];
|
|
72
176
|
hotspotsOn: [];
|
|
@@ -77,7 +181,7 @@ export declare type WebPlayerEvents = {
|
|
|
77
181
|
|
|
78
182
|
export declare type WebPlayerProps = {
|
|
79
183
|
compositionUrl: string;
|
|
80
|
-
|
|
184
|
+
hideCategories?: boolean;
|
|
81
185
|
infiniteCarrousel?: boolean;
|
|
82
186
|
permanentGallery?: boolean;
|
|
83
187
|
imageLoadStrategy?: ImageLoadStrategy;
|