@kinxcdn/commerce-player 1.0.0 → 1.0.3

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.
Files changed (4) hide show
  1. package/README.md +78 -140
  2. package/dist/react/esm/index.js +4 -4
  3. package/dist/react/index.d.ts +159 -0
  4. package/package.json +2 -2
package/README.md CHANGED
@@ -1,170 +1,108 @@
1
1
  # midibus commerce 플레이어 컴포넌트
2
2
 
3
- React 기반 미디버스 커머스 플레이어 컴포넌트입니다.
3
+ 미디버스 커머스 플레이어
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```shell
8
- npm install git+ssh://git@bitbucket.org:kx-cdn-dev/commerce-player-component.git
8
+ npm i @kinxcdn/commerce-player
9
9
 
10
10
  # 또는
11
11
 
12
- yarn add git+ssh://git@bitbucket.org:kx-cdn-dev/commerce-player-component.git
12
+ yarn add @kinxcdn/commerce-player
13
13
  ```
14
14
 
15
- ## Usage
16
-
17
- ```jsx
18
- import React from 'react';
19
- import {
20
- ShoppingPlayer,
21
- ViewPlayer,
22
- PreviewPlayer,
23
- } from "@kinxcdn/commerce-player";
24
-
25
- const shortform = {
26
- "shortsId": "195845afd2f2ee80",
27
- "userId": 3,
28
- "title": "공주",
29
- "openStatus": "PUB",
30
- "encStatus": 1,
31
- "thumbPath": "thumb.midibus.dev-kinxcdn.com/1648/2195845aeabbd609.png",
32
- "player": {
33
- "layout": 1,
34
- "viewPlayer": {
35
- "replay": true,
36
- "controlbar": false,
37
- "autoplay": true,
38
- "vFill": true,
39
- "height": 1080,
40
- "width": 608,
41
- "block": false,
42
- "ratio": "0.563"
43
- },
44
- "shoppingPlayer": {
45
- "replay": true,
46
- "controlbar": true,
47
- "vFill": true,
48
- "like": true,
49
- "share": true,
50
- "autoplay": true,
51
- "autopass": false,
52
- "pip": false,
53
- "comment": false,
54
- "height": 0
55
- }
56
- },
57
- "media": {
58
- "mediaId": "2195845aeabbd609",
59
- "objectId": "195845ae24bf1f79",
60
- "categoryId": 10879,
61
- "duration": "00:00:17",
62
- "width": 608,
63
- "height": 1080,
64
- "type": "SHORTS",
65
- "imgPath": "thumb.midibus.dev-kinxcdn.com/1648/2195845aeabbd609.png",
66
- "thumbPath": ""
67
- },
68
- "brand": null,
69
- "logo": null,
70
- "tag": [],
71
- "start": 1741682307000,
72
- "end": null,
73
- "description": "",
74
- "createdAt": "2025-03-11T17:38:29",
75
- "updatedAt": "2025-03-11T17:38:29",
76
- "productsInfo": [
77
- {
78
- "productId": "1136eb",
79
- "eventProductId": 1305,
80
- "productName": "루피_15",
81
- "thumbPath": "https://aka-flexg.moall.shop/data/goods/testflexg/small/thum2/FUNPHaWacAA5m1A_20230720102123639_1.jpg",
82
- "price": 11000,
83
- "sellingPrice": 10000,
84
- "discount": 9.00,
85
- "linkPath": "https://me2.do/5cALPlZa",
86
- "salesStatus": 1,
87
- "orderIdx": 1,
88
- "hflag": 0,
89
- "dflg": 0,
90
- "brand": {
91
- "brandId": 46,
92
- "brandName": "하이마트",
93
- "identifier": "롯데로고",
94
- "thumbPath": "https://live-commerce-image.s3.ap-northeast-2.amazonaws.com/3/2186e81ec7568f62_1726800462917.png",
95
- "createdAt": "2024-07-25T13:58:16",
96
- "connShorts": 0
97
- }
98
- }
99
- ]
100
- };
101
-
102
- function App() {
103
- return (
104
- <div className="w-full h-screen bg-gray-900">
105
- <ViewPlayer
106
- shortform={shortform}
107
- />
108
- </div>
109
- );
110
- }
111
-
112
- export default App;
15
+ [//]: # ()
16
+ [//]: # (## Props 설명)
113
17
 
114
- ```
18
+ [//]: # ()
19
+ [//]: # (### WidgetPlayerPreview)
20
+
21
+ [//]: # ()
22
+ [//]: # ()
23
+ [//]: # ()
24
+ [//]: # (### ViewPlayer)
25
+
26
+ [//]: # ()
27
+ [//]: # (| Prop | 타입 | 설명 | 필수 여부 |)
28
+
29
+ [//]: # (| ---------------- | ---------------- | -------------------------------------------------- | --------- |)
30
+
31
+ [//]: # (| `shortform` | `Shortform` | 쇼핑 플레이어에 사용될 숏폼 정보 | 예 |)
32
+
33
+ [//]: # ()
34
+ [//]: # ()
35
+ [//]: # (### ShoppingPlayer)
36
+
37
+ [//]: # ()
38
+ [//]: # (ShoppingPlayerProps는 두 가지 형태의 props를 받을 수 있습니다. 아래는 각각의 형태에 대한 설명입니다.)
39
+
40
+ [//]: # ()
41
+ [//]: # (#### CollectionProps)
42
+
43
+ [//]: # ()
44
+ [//]: # (| Prop | 타입 | 설명 | 필수 여부 |)
45
+
46
+ [//]: # (| ------------ | ------------ | ---------------------------------------- | --------- |)
47
+
48
+ [//]: # (| `collection` | `Collection` | 쇼핑 플레이어에 사용될 컬렉션 정보 | 예 |)
49
+
50
+ [//]: # (| `isMobile` | `boolean` | 모바일 환경 여부를 나타내는 플래그 &#40;모바일이면 true&#41; | 아니요 |)
51
+
52
+ [//]: # ()
53
+ [//]: # (#### ShortFormPlayerProps)
54
+
55
+ [//]: # ()
56
+ [//]: # (| Prop | 타입 | 설명 | 필수 여부 |)
57
+
58
+ [//]: # (| ---------------- | --------------- |----------------------------------| --------- |)
59
+
60
+ [//]: # (| `shortform` | `Shortform` | 쇼핑 플레이어에 사용될 숏폼 정보 | 예 |)
61
+
62
+ [//]: # (| `isMobile` | `boolean` | 모바일 환경 여부를 나타내는 플래그 &#40;모바일이면 true&#41; | 아니요 |)
63
+
64
+ [//]: # ()
65
+ [//]: # (### PreviewPlayerProps)
66
+
67
+ [//]: # ()
68
+ [//]: # (| Prop | 타입 | 설명 | 필수 여부 |)
69
+
70
+ [//]: # (|-----------------|------------------|--------------------------------------------------|-----------|)
115
71
 
116
- ## Props 설명
72
+ [//]: # (| `file` | `string` | 재생할 미디어 파일의 URL 또는 경로 | 예 |)
117
73
 
118
- ### WidgetPlayerPreview
74
+ [//]: # (| `duration` | `number` | 미디어의 재생 길이 &#40;초 단위&#41; | 예 |)
119
75
 
76
+ [//]: # (| `productsInfo` | `Product[]` | 제품 정보 배열 &#40;선택 사항&#41; | 아니요 |)
120
77
 
78
+ [//]: # (| `logo` | `Logo` | 로고 정보 &#40;선택 사항&#41; | 아니요 |)
121
79
 
122
- ### ViewPlayer
80
+ [//]: # (| `brand` | `Brand` | 브랜드 정보 &#40;선택 사항&#41; | 아니요 |)
123
81
 
124
- | Prop | 타입 | 설명 | 필수 여부 |
125
- | ---------------- | ---------------- | -------------------------------------------------- | --------- |
126
- | `shortform` | `Shortform` | 쇼핑 플레이어에 사용될 숏폼 정보 | 예 |
82
+ [//]: # (| `playerSettings`| `PlayerSettings` | 플레이어 동작 및 UI 설정을 위한 구성 옵션 | 예 |)
127
83
 
84
+ [//]: # (| `title` | `string` | 플레이어 제목 &#40;선택 사항&#41; | 아니요 |)
128
85
 
129
- ### ShoppingPlayer
86
+ [//]: # ()
87
+ [//]: # (### PlayerSettings 인터페이스)
130
88
 
131
- ShoppingPlayerProps는 두 가지 형태의 props를 받을 수 있습니다. 아래는 각각의 형태에 대한 설명입니다.
89
+ [//]: # ()
90
+ [//]: # (| 옵션 | 타입 | 설명 | 기본값 |)
132
91
 
133
- #### CollectionProps
92
+ [//]: # (| --------------- | --------- |---------------------------------| ------ |)
134
93
 
135
- | Prop | 타입 | 설명 | 필수 여부 |
136
- | ------------ | ------------ | ---------------------------------------- | --------- |
137
- | `collection` | `Collection` | 쇼핑 플레이어에 사용될 컬렉션 정보 | 예 |
138
- | `isMobile` | `boolean` | 모바일 환경 여부를 나타내는 플래그 (모바일이면 true) | 아니요 |
94
+ [//]: # (| `hideProducts` | `boolean` | 플레이어 UI에서 제품&#40;또는 관련 요소&#41;을 표시할지 여부 | - |)
139
95
 
140
- #### ShortFormPlayerProps
96
+ [//]: # (| `platformUi` | `boolean` | 플랫폼 별 UI 스타일 적용 여부 | - |)
141
97
 
142
- | Prop | 타입 | 설명 | 필수 여부 |
143
- | ---------------- | --------------- |----------------------------------| --------- |
144
- | `shortform` | `Shortform` | 쇼핑 플레이어에 사용될 숏폼 정보 | 예 |
145
- | `isMobile` | `boolean` | 모바일 환경 여부를 나타내는 플래그 (모바일이면 true) | 아니요 |
98
+ [//]: # (| `autopass` | `boolean` | 컬렉션 자동으로 패스할지 여부 | - |)
146
99
 
147
- ### PreviewPlayerProps
100
+ [//]: # (| `controlbar` | `boolean` | 재생, 일시정지, 볼륨 조절 등 컨트롤바 표시 여부 | - |)
148
101
 
149
- | Prop | 타입 | 설명 | 필수 여부 |
150
- |-----------------|------------------|--------------------------------------------------|-----------|
151
- | `file` | `string` | 재생할 미디어 파일의 URL 또는 경로 | 예 |
152
- | `duration` | `number` | 미디어의 재생 길이 (초 단위) | 예 |
153
- | `productsInfo` | `Product[]` | 제품 정보 배열 (선택 사항) | 아니요 |
154
- | `logo` | `Logo` | 로고 정보 (선택 사항) | 아니요 |
155
- | `brand` | `Brand` | 브랜드 정보 (선택 사항) | 아니요 |
156
- | `playerSettings`| `PlayerSettings` | 플레이어 동작 및 UI 설정을 위한 구성 옵션 | 예 |
157
- | `title` | `string` | 플레이어 제목 (선택 사항) | 아니요 |
102
+ [//]: # (| `autoplay` | `boolean` | 페이지 로드 후 자동 재생 여부 | - |)
158
103
 
159
- ### PlayerSettings 인터페이스
104
+ [//]: # (| `replay` | `boolean` | 미디어 재생 완료 후 자동 반복 여부 | - |)
160
105
 
161
- | 옵션 | 타입 | 설명 | 기본값 |
162
- | --------------- | --------- |---------------------------------| ------ |
163
- | `hideProducts` | `boolean` | 플레이어 UI에서 제품(또는 관련 요소)을 표시할지 여부 | - |
164
- | `platformUi` | `boolean` | 플랫폼 별 UI 스타일 적용 여부 | - |
165
- | `autopass` | `boolean` | 컬렉션 자동으로 패스할지 여부 | - |
166
- | `controlbar` | `boolean` | 재생, 일시정지, 볼륨 조절 등 컨트롤바 표시 여부 | - |
167
- | `autoplay` | `boolean` | 페이지 로드 후 자동 재생 여부 | - |
168
- | `replay` | `boolean` | 미디어 재생 완료 후 자동 반복 여부 | - |
169
- | `comment` | `boolean` | 플레이어 내 댓글 기능 활성화 여부 | - |
106
+ [//]: # (| `comment` | `boolean` | 플레이어 내 댓글 기능 활성화 여부 | - |)
170
107
 
108
+ [//]: # ()