-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathui.html
264 lines (216 loc) · 15.4 KB
/
ui.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<style>
body {
overflow-y: hidden;
display: grid;
grid-template-rows: 40px 1fr 40px;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
align-self: stretch;
border: 1px solid #E3E3E3;
padding: 4px 8px;
gap: 10px;
}
main h3 {
text-align: center;
}
footer {
display: flex;
justify-content: center;
gap: 10px;
}
button {
border: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0px 2px;
gap: 10px;
width: 99px;
height: 38px;
cursor: pointer;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 43px;
flex: none;
order: 0;
flex-grow: 0;
}
button.primary {
background: #25D3D0;
color: #fff;
}
button.secondary {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 43px;
}
.loading {
color: red;
display: none;
}
.show {
display: block !important;
}
</style>
<header>
<svg width="134" height="50" viewBox="0 0 134 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M2 14.3315L21.6786 24.6927C21.972 24.8472 22.323 24.8462 22.6155 24.69L32.0808 19.6356M2 14.3315L21.6541 3.27765C21.9603 3.10541 22.3345 3.10654 22.6398 3.28063L40.4403 13.434C41.1239 13.8239 41.11 14.8141 40.4159 15.1848L32.0808 19.6356M2 14.3315L12.0739 30.6658M22.1478 47L42.0287 36.1963C42.5487 35.9138 42.7108 35.2439 42.3777 34.7548L32.0808 19.6356M22.1478 47L12.0739 30.6658M22.1478 47L4.2525 36.5707C3.57619 36.1765 3.5945 35.1933 4.28501 34.8246L12.0739 30.6658"
stroke="#25D3D0" stroke-width="1.5" />
<path
d="M49.6619 23C49.6918 22.6719 49.6122 22.415 49.4233 22.2294C49.2344 22.0405 48.9162 21.946 48.4688 21.946C48.1837 21.946 47.9451 21.9792 47.7528 22.0455C47.5639 22.1117 47.4164 22.2029 47.3104 22.3189C47.2076 22.4349 47.143 22.5691 47.1165 22.7216C47.0866 22.8409 47.0883 22.9503 47.1214 23.0497C47.1579 23.1458 47.2259 23.2337 47.3253 23.3132C47.428 23.3928 47.5623 23.464 47.728 23.527C47.897 23.59 48.0975 23.6463 48.3295 23.696L49.125 23.875C49.6686 23.9943 50.1243 24.1518 50.4922 24.3473C50.8634 24.5395 51.1551 24.7682 51.3672 25.0334C51.5793 25.2985 51.7185 25.5952 51.7848 25.9233C51.8544 26.2514 51.8561 26.6094 51.7898 26.9972C51.6771 27.6667 51.4169 28.2334 51.0092 28.6974C50.6016 29.1615 50.0696 29.5144 49.4134 29.7564C48.7571 29.9983 47.9981 30.1193 47.1364 30.1193C46.2547 30.1193 45.5057 29.9884 44.8892 29.7266C44.276 29.4614 43.8319 29.0571 43.5568 28.5135C43.285 27.9666 43.2188 27.2689 43.358 26.4205H45.983C45.9432 26.732 45.9763 26.9938 46.0824 27.206C46.1884 27.4181 46.3591 27.5788 46.5945 27.6882C46.8298 27.7976 47.1231 27.8523 47.4744 27.8523C47.7727 27.8523 48.0279 27.8158 48.2401 27.7429C48.4522 27.67 48.6196 27.5689 48.7422 27.4396C48.8648 27.3104 48.9394 27.1629 48.9659 26.9972C48.9924 26.8447 48.9659 26.7088 48.8864 26.5895C48.8068 26.4702 48.6626 26.3625 48.4538 26.2663C48.245 26.1702 47.9583 26.0824 47.5938 26.0028L46.6193 25.7841C45.7543 25.5852 45.1013 25.2571 44.6605 24.7997C44.2197 24.3423 44.0639 23.7159 44.1932 22.9205C44.2992 22.2708 44.5661 21.7041 44.9936 21.2202C45.4245 20.733 45.9714 20.3551 46.6342 20.0866C47.3004 19.8149 48.0379 19.679 48.8466 19.679C49.6686 19.679 50.3563 19.8165 50.9098 20.0916C51.4666 20.3667 51.866 20.7528 52.108 21.25C52.3532 21.7472 52.4195 22.3305 52.3068 23H49.6619ZM52.3441 30L54.0344 19.8182H56.7987L56.1424 23.7955H59.8015L60.4577 19.8182H63.2219L61.5316 30H58.7674L59.4237 26.0227H55.7646L55.1083 30H52.3441ZM73.5231 25.0881C73.3375 26.1951 72.9696 27.1231 72.4194 27.8722C71.8692 28.6212 71.2014 29.1863 70.4158 29.5675C69.6303 29.9486 68.7901 30.1392 67.8952 30.1392C66.9407 30.1392 66.1121 29.9321 65.4094 29.5178C64.7068 29.1035 64.1947 28.4969 63.8732 27.6982C63.5517 26.8994 63.4871 25.9233 63.6793 24.7699C63.8583 23.6629 64.2229 22.7315 64.7731 21.9759C65.3233 21.2202 65.9944 20.6484 66.7866 20.2607C67.5787 19.8729 68.4255 19.679 69.3271 19.679C70.275 19.679 71.0986 19.8878 71.7979 20.3054C72.5006 20.723 73.011 21.3345 73.3292 22.1399C73.6507 22.9453 73.7153 23.928 73.5231 25.0881ZM70.739 24.7699C70.8318 24.1866 70.8384 23.696 70.7589 23.2983C70.6793 22.8973 70.512 22.5956 70.2567 22.3935C70.0015 22.188 69.6585 22.0852 69.2276 22.0852C68.7371 22.0852 68.3029 22.2045 67.9251 22.4432C67.5472 22.6818 67.234 23.0249 66.9854 23.4723C66.7369 23.9197 66.5629 24.4583 66.4634 25.0881C66.3574 25.678 66.3474 26.1686 66.4336 26.5597C66.5231 26.9508 66.6987 27.2441 66.9606 27.4396C67.2257 27.6352 67.5704 27.733 67.9947 27.733C68.4786 27.733 68.9061 27.617 69.2773 27.3849C69.6519 27.1529 69.9618 26.8165 70.207 26.3757C70.4556 25.9349 70.6329 25.3996 70.739 24.7699ZM74.5423 22.0455L74.9201 19.8182H83.7695L83.3917 22.0455H80.3292L79.0167 30H76.2923L77.6048 22.0455H74.5423ZM89.7615 23C89.7914 22.6719 89.7118 22.415 89.5229 22.2294C89.334 22.0405 89.0158 21.946 88.5684 21.946C88.2833 21.946 88.0447 21.9792 87.8525 22.0455C87.6635 22.1117 87.516 22.2029 87.41 22.3189C87.3072 22.4349 87.2426 22.5691 87.2161 22.7216C87.1863 22.8409 87.1879 22.9503 87.2211 23.0497C87.2575 23.1458 87.3255 23.2337 87.4249 23.3132C87.5276 23.3928 87.6619 23.464 87.8276 23.527C87.9966 23.59 88.1971 23.6463 88.4292 23.696L89.2246 23.875C89.7682 23.9943 90.2239 24.1518 90.5918 24.3473C90.963 24.5395 91.2547 24.7682 91.4668 25.0334C91.6789 25.2985 91.8181 25.5952 91.8844 25.9233C91.954 26.2514 91.9557 26.6094 91.8894 26.9972C91.7767 27.6667 91.5165 28.2334 91.1088 28.6974C90.7012 29.1615 90.1692 29.5144 89.513 29.7564C88.8567 29.9983 88.0977 30.1193 87.236 30.1193C86.3543 30.1193 85.6053 29.9884 84.9888 29.7266C84.3757 29.4614 83.9315 29.0571 83.6564 28.5135C83.3846 27.9666 83.3184 27.2689 83.4576 26.4205H86.0826C86.0428 26.732 86.0759 26.9938 86.182 27.206C86.2881 27.4181 86.4587 27.5788 86.6941 27.6882C86.9294 27.7976 87.2227 27.8523 87.574 27.8523C87.8723 27.8523 88.1275 27.8158 88.3397 27.7429C88.5518 27.67 88.7192 27.5689 88.8418 27.4396C88.9644 27.3104 89.039 27.1629 89.0655 26.9972C89.092 26.8447 89.0655 26.7088 88.986 26.5895C88.9064 26.4702 88.7623 26.3625 88.5534 26.2663C88.3446 26.1702 88.0579 26.0824 87.6934 26.0028L86.7189 25.7841C85.8539 25.5852 85.2009 25.2571 84.7601 24.7997C84.3193 24.3423 84.1635 23.7159 84.2928 22.9205C84.3989 22.2708 84.6657 21.7041 85.0932 21.2202C85.5241 20.733 86.071 20.3551 86.7338 20.0866C87.4 19.8149 88.1375 19.679 88.9462 19.679C89.7682 19.679 90.4559 19.8165 91.0094 20.0916C91.5662 20.3667 91.9656 20.7528 92.2076 21.25C92.4528 21.7472 92.5191 22.3305 92.4064 23H89.7615ZM93.4778 22.0455L93.8556 19.8182H102.705L102.327 22.0455H99.2647L97.9522 30H95.2278L96.5403 22.0455H93.4778ZM103.415 30H100.432L105.483 19.8182H109.261L110.932 30H107.949L106.955 22.6222H106.875L103.415 30ZM103.534 25.983H109.142L108.784 28.0511H103.176L103.534 25.983ZM121.984 23.6364H119.219C119.239 23.401 119.226 23.1889 119.18 23C119.133 22.8111 119.054 22.6487 118.941 22.5128C118.828 22.3736 118.681 22.2675 118.499 22.1946C118.316 22.1217 118.099 22.0852 117.847 22.0852C117.363 22.0852 116.931 22.2062 116.55 22.4482C116.169 22.6868 115.852 23.0298 115.6 23.4773C115.348 23.9214 115.169 24.4517 115.063 25.0682C114.97 25.6648 114.967 26.1603 115.053 26.5547C115.143 26.9491 115.317 27.2441 115.575 27.4396C115.837 27.6352 116.177 27.733 116.594 27.733C116.873 27.733 117.128 27.6998 117.36 27.6335C117.595 27.5672 117.804 27.4728 117.987 27.3501C118.172 27.2242 118.33 27.075 118.459 26.9027C118.591 26.727 118.692 26.5331 118.762 26.321H121.546C121.44 26.7519 121.251 27.1927 120.979 27.6435C120.708 28.0909 120.356 28.5036 119.925 28.8814C119.495 29.2559 118.987 29.5592 118.404 29.7912C117.821 30.0232 117.165 30.1392 116.435 30.1392C115.481 30.1392 114.657 29.9304 113.964 29.5128C113.275 29.0952 112.775 28.4853 112.463 27.6832C112.155 26.8812 112.094 25.9034 112.279 24.75C112.465 23.6364 112.831 22.7034 113.378 21.951C113.925 21.1986 114.589 20.6319 115.371 20.2507C116.154 19.8696 116.986 19.679 117.867 19.679C118.533 19.679 119.13 19.7668 119.657 19.9425C120.187 20.1181 120.633 20.375 120.994 20.7131C121.359 21.0478 121.627 21.4605 121.8 21.951C121.972 22.4415 122.033 23.0033 121.984 23.6364ZM122.194 30L123.884 19.8182H126.648L125.972 23.9347H126.111L129.85 19.8182H133.072L128.895 24.3523L131.461 30H128.16L126.529 26.1818L125.395 27.3949L124.958 30H122.194Z"
fill="#2D2D2D" />
</svg>
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="44" height="44" rx="22" fill="#F1F1F1" />
<path
d="M19.47 33L18.92 29.535C18.5717 29.4067 18.205 29.2325 17.82 29.0125C17.435 28.7925 17.0958 28.5633 16.8025 28.325L13.5575 29.81L11 25.3L13.97 23.1275C13.9333 22.9625 13.9104 22.7746 13.9012 22.5638C13.8921 22.3529 13.8875 22.165 13.8875 22C13.8875 21.835 13.8921 21.6471 13.9012 21.4363C13.9104 21.2254 13.9333 21.0375 13.97 20.8725L11 18.7L13.5575 14.19L16.8025 15.675C17.0958 15.4367 17.435 15.2075 17.82 14.9875C18.205 14.7675 18.5717 14.6025 18.92 14.4925L19.47 11H24.53L25.08 14.465C25.4283 14.5933 25.7996 14.7629 26.1938 14.9738C26.5879 15.1846 26.9225 15.4183 27.1975 15.675L30.4425 14.19L33 18.7L30.03 20.8175C30.0667 21.0008 30.0896 21.1979 30.0987 21.4087C30.1079 21.6196 30.1125 21.8167 30.1125 22C30.1125 22.1833 30.1079 22.3758 30.0987 22.5775C30.0896 22.7792 30.0667 22.9717 30.03 23.155L33 25.3L30.4425 29.81L27.1975 28.325C26.9042 28.5633 26.5696 28.7971 26.1938 29.0263C25.8179 29.2554 25.4467 29.425 25.08 29.535L24.53 33H19.47ZM22 25.575C22.99 25.575 23.8333 25.2267 24.53 24.53C25.2267 23.8333 25.575 22.99 25.575 22C25.575 21.01 25.2267 20.1667 24.53 19.47C23.8333 18.7733 22.99 18.425 22 18.425C21.01 18.425 20.1667 18.7733 19.47 19.47C18.7733 20.1667 18.425 21.01 18.425 22C18.425 22.99 18.7733 23.8333 19.47 24.53C20.1667 25.2267 21.01 25.575 22 25.575ZM22 23.925C21.4683 23.925 21.0146 23.7371 20.6387 23.3613C20.2629 22.9854 20.075 22.5317 20.075 22C20.075 21.4683 20.2629 21.0146 20.6387 20.6387C21.0146 20.2629 21.4683 20.075 22 20.075C22.5317 20.075 22.9854 20.2629 23.3613 20.6387C23.7371 21.0146 23.925 21.4683 23.925 22C23.925 22.5317 23.7371 22.9854 23.3613 23.3613C22.9854 23.7371 22.5317 23.925 22 23.925ZM20.79 31.35H23.21L23.595 28.27C24.2 28.1233 24.7729 27.8942 25.3138 27.5825C25.8546 27.2708 26.345 26.895 26.785 26.455L29.7 27.72L30.8 25.74L28.215 23.8425C28.2883 23.5308 28.3479 23.2237 28.3938 22.9212C28.4396 22.6187 28.4625 22.3117 28.4625 22C28.4625 21.6883 28.4442 21.3813 28.4075 21.0788C28.3708 20.7763 28.3067 20.4692 28.215 20.1575L30.8 18.26L29.7 16.28L26.785 17.545C26.3633 17.0683 25.8867 16.6696 25.355 16.3488C24.8233 16.0279 24.2367 15.8217 23.595 15.73L23.21 12.65H20.79L20.405 15.73C19.7817 15.8583 19.1996 16.0783 18.6587 16.39C18.1179 16.7017 17.6367 17.0867 17.215 17.545L14.3 16.28L13.2 18.26L15.785 20.1575C15.7117 20.4692 15.6521 20.7763 15.6063 21.0788C15.5604 21.3813 15.5375 21.6883 15.5375 22C15.5375 22.3117 15.5604 22.6187 15.6063 22.9212C15.6521 23.2237 15.7117 23.5308 15.785 23.8425L13.2 25.74L14.3 27.72L17.215 26.455C17.655 26.895 18.1454 27.2708 18.6863 27.5825C19.2271 27.8942 19.8 28.1233 20.405 28.27L20.79 31.35Z"
fill="#4D4949" />
</svg>
</header>
<main>
<h3>
Build Dynamic Video Applications at Scale
</h3>
<ul>
<li>Select your frames</li>
<li>Download the presentation video</li>
</ul>
<div id="gallery"></div>
<div class="loading">Loading...</div>
<div id="renderResult"></div>
</main>
<footer>
<button class="primary" id="create">Render</button>
<button class="secondary" id="cancel">Cancel</button>
</footer>
<script>
const ACCESS_TOKEN = "figd_qHfBkeqP2rXClHNyo33vSe5w0MoXwbF4ufyflH-w";
const FILE_ID = "8el5EkPAzbi72joapxJ2RE";
let NODE_ID = [];
const FORMAT = 'jpg';
console.clear()
const template = {
"timeline": {
"soundtrack": {
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/freepd/advertising.mp3",
"effect": "fadeInFadeOut"
},
"background": "#000000",
"tracks": [
]
},
"output": {
"format": "mp4",
"resolution": "hd"
}
}
document.getElementById('create').onclick = () => {
parent.postMessage({ pluginMessage: { type: 'create-shapes' } }, '*')
}
document.getElementById('cancel').onclick = () => {
parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*')
}
onmessage = (event) => {
console.log("got this from the plugin code",
event.data.pluginMessage)
event.data.pluginMessage.forEach(e => {
NODE_ID.push(e.id)
});
convertFrameToImages()
}
function convertFrameToImages() {
var myHeaders = new Headers();
myHeaders.append("x-figma-token", "figd_wmoTB-0v30xUAUzMoa9Dx4ykctJqA1rWPIpFk-kj");
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
fetch(`https://api.figma.com/v1/images/${FILE_ID}?ids=${NODE_ID}&format=${FORMAT}`,
requestOptions)
.then(response => response.json())
.then(result => {
console.log(result)
let counter = 0;
document.querySelector('#gallery').innerHTML = 'Selected Frames:'
for (const [key, value] of Object.entries(result.images)) {
// console.log(`${key}: ${value}`);
if (value !== null) {
document.querySelector('#gallery').innerHTML += `
<img src='${value}' style='width:40px'/>
`
template.timeline.tracks.push(
{
"clips": [
{
"asset": {
"type": "image",
"src": value
},
"start": (parseInt(counter) * 4),
"length": 5,
"effect": "slideUp",
"transition": {
"out": "fade"
}
}
]
}
)
counter++
} else {
console.warn('Get null')
}
}
(counter > 0) ? render() : console.error('No enough images to render')
})
.catch(error => console.log('error', error));
}
let checker;
function render() {
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify(template);
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
console.log('Template => ', template)
fetch("http://localhost/figmashotstack/v1/render", requestOptions)
.then(response => response.json())
.then(result => {
console.log(result)
checker = window.setInterval(() => {
document.querySelector('.loading').classList.add('show')
checkRenderStatus(result.renderId)
}, 3000)
})
.catch(error => console.log('error', error));
}
function checkRenderStatus(renderId) {
var requestOptions = {
method: 'GET',
redirect: 'follow'
};
fetch("http://localhost/figmashotstack/v1/renderStatus/" + renderId, requestOptions)
.then(response => response.json())
.then(result => {
console.log(result)
if (result.success && result.response.status === 'done') {
document.querySelector('.loading').classList.remove('show')
console.info(result.response.url)
document.querySelector('#renderResult').innerHTML = `
<a href='${result.response.url}' target='_blank'>Download</a>
`
clearInterval(checker);
}
})
.catch(error => console.log('error', error));
}
</script>