81 | {status === PENDING && donationPending}
82 | {status === CONFIRMED && donationConfirmed}
83 | {status === NOT_FOUND && donationNotFound}
84 |
85 | );
86 | }
87 | }
88 |
89 | export default CheckForDonation;
90 |
--------------------------------------------------------------------------------
/src/js/DownloadPage/ContactButton.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const ContactButton = ({
4 | customText = 'If you have any questions, please check our FAQ or contact us through the link:',
5 | endText = null,
6 | }) => {
7 | const link = (
8 |
21 | {customText}
22 | {link}
23 | {endText && ` ${endText}`}
24 |
25 | );
26 | }
27 |
28 | return link;
29 | };
30 |
31 | export default ContactButton;
32 |
--------------------------------------------------------------------------------
/src/js/DownloadPage/DownloadPage.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import swal from 'sweetalert2';
3 |
4 | import {
5 | NOT_QUEUED,
6 | QUEUED,
7 | BUMPED,
8 | RENDERING,
9 | RENDERED,
10 | } from './constants';
11 |
12 | import NotQueuedPageNew from './newFlow/NotQueuedPageNew';
13 | import VideoRequestSentNew from './newFlow/VideoRequestSentNew';
14 | import RequestDownloadPageNew from './newFlow/RequestDownloadPageNew';
15 | import VideoQueuedPageNew from './newFlow/VideoQueuedPageNew';
16 | import RenderingPage from './RenderingPage';
17 | import RenderedPage from './RenderedPage';
18 | import AddEmailForm from './AddEmailForm';
19 | import { requestIntroDownload } from '../api/actions';
20 | import { trackOpenedDownloadModal } from '../api/tracking';
21 |
22 | import { registerPaymentEventsHandler, unregisterPaymentEventsHandler } from './paymentEventsHandler';
23 | import UrlHandler from '../extras/UrlHandler';
24 |
25 | const INITIAL_PAGE = 0;
26 | const REQUEST_PAGE = 1;
27 | const FINAL_PAGE = 2;
28 | const ADD_EMAIL_PAGE = 3;
29 |
30 | class DownloadPage extends Component {
31 | constructor(props) {
32 | super(props);
33 | const { status, openingKey, subpage } = props;
34 |
35 | const isRendered = status.status === RENDERED;
36 |
37 | const subpageState = isRendered ? {} : this.parseSubpage(subpage);
38 |
39 | this.state = {
40 | status,
41 | openingKey,
42 | ...subpageState,
43 | };
44 | }
45 |
46 | componentDidMount() {
47 | window.addEventListener('hashchange', this.urlChangeHandler);
48 | registerPaymentEventsHandler(this.paymentSuccessCallback);
49 | trackOpenedDownloadModal();
50 | }
51 |
52 | componentWillUnmount() {
53 | window.removeEventListener('hashchange', this.urlChangeHandler);
54 | unregisterPaymentEventsHandler();
55 | }
56 |
57 | parseSubpage = (subpage) => {
58 | let page = INITIAL_PAGE;
59 | let donate = false;
60 |
61 | if (subpage === 'pay') {
62 | donate = true;
63 | page = REQUEST_PAGE;
64 | }
65 |
66 | if (subpage === 'request') {
67 | donate = false;
68 | page = REQUEST_PAGE;
69 | }
70 |
71 | if (subpage === 'add_email') {
72 | page = ADD_EMAIL_PAGE;
73 | }
74 |
75 | if (subpage === 'paid') {
76 | donate = true;
77 | page = FINAL_PAGE;
78 | }
79 |
80 | return {
81 | page,
82 | donate,
83 | };
84 | }
85 |
86 | paymentSuccessCallback = async (payment) => {
87 | const { email } = payment;
88 |
89 | const requestStatus = await requestIntroDownload(this.state.openingKey, email);
90 | this.setState({
91 | page: FINAL_PAGE,
92 | donate: true,
93 | requestStatus,
94 | requestEmail: email,
95 | paymentData: payment,
96 | });
97 |
98 | UrlHandler.goToDownloadPage(this.state.openingKey, 'paid');
99 | }
100 |
101 | urlChangeHandler = () => {
102 | const { key, subpage } = UrlHandler.getParams();
103 |
104 | if (key !== this.state.openingKey) {
105 | window.location.reload();
106 | return;
107 | }
108 |
109 | if (!subpage) {
110 | return;
111 | }
112 |
113 | const subpageState = this.parseSubpage(subpage);
114 | this.setState(subpageState);
115 | }
116 |
117 | yesDonateHandle = () => {
118 | const { page, openingKey } = this.state;
119 |
120 | if (page === INITIAL_PAGE) {
121 | swal({
122 | title: 'pay',
123 | html: 'Fill the payment form above to make your payment first.
',
124 | });
125 | return;
126 | }
127 |
128 | this.setState({ page: INITIAL_PAGE });
129 | UrlHandler.goToDownloadPage(openingKey);
130 | };
131 |
132 | noDonateHandle = () => {
133 | const { openingKey } = this.state;
134 | UrlHandler.goToDownloadPage(openingKey, 'request');
135 | };
136 |
137 | finishRequestHandle = (requestStatus, requestEmail) => {
138 | const { donate, openingKey } = this.state;
139 | UrlHandler.goToDownloadPage(openingKey, donate ? 'paid' : '');
140 | this.setState({
141 | page: FINAL_PAGE,
142 | requestStatus,
143 | requestEmail,
144 | });
145 | }
146 |
147 | addEmailNextPage = (requestStatus, requestEmail) => {
148 | this.setState({
149 | status: requestStatus,
150 | requestStatus,
151 | requestEmail,
152 | });
153 | }
154 |
155 | renderInitialPage() {
156 | const { status, openingKey, requestEmail } = this.state;
157 | const statusType = status.status;
158 |
159 | switch (statusType) {
160 | default:
161 | case NOT_QUEUED:
162 | return (
163 | setImageToCrop(null)}
39 | onChange={async (adjustedImage) => {
40 | const response = await axios.get('https://chatwoot-bot.vercel.app/api/get-presigned-url');
41 | const { uploadURL } = response.data;
42 | adjustedImage.name = 'image.png'
43 | await axios.put(uploadURL, adjustedImage, {
44 | headers: {
45 | 'Content-Type': 'image/png',
46 | 'x-amz-acl': 'public-read',
47 | },
48 | });
49 | const imageURL = uploadURL.replace(/\?.*/g, '')
50 |
51 | onChange(imageURL);
52 | }}
53 | />
54 |
55 | );
56 | };
57 |
58 | ImageUploadButton.propTypes = {};
59 |
60 | export default ImageUploadButton;
61 |
--------------------------------------------------------------------------------
/src/js/DownloadPage/Loader.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Loader = ({
4 | text,
5 | style,
6 | size = 5,
7 | }) => (
8 |
19 | );
20 |
21 | export default Loader;
22 |
--------------------------------------------------------------------------------
/src/js/DownloadPage/PaymentModule.js:
--------------------------------------------------------------------------------
1 | import React, {
2 | Fragment, useCallback, useState, useRef, useEffect, useMemo,
3 | } from 'react';
4 | import PropTypes from 'prop-types';
5 | import { Box, CircularProgress } from '@material-ui/core';
6 | import { useElementSize } from 'usehooks-ts';
7 | import { trackAddToCart } from '../api/tracking';
8 | import { paymentPageUrl } from '../config';
9 | import Loader from './Loader';
10 | import VideoOptions from './newFlow/VideoOptions';
11 | import ImageUploadButton from './ImageUploadButton';
12 |
13 | const PaymentModule = ({ openingKey }) => {
14 | const iframeRef = useRef(null);
15 | const [isCustomImage, setIsCustomImage] = useState(false);
16 | const [utmParamsString, setUtmParamsString] = useState('');
17 | const [isLoadingCustomImagePreview, setIsLoadingCustomImagePreview] = useState(true);
18 | const [imagePreviewRef, imagePreviewSize] = useElementSize();
19 |
20 | const transformScale = useMemo(() => (
21 | imagePreviewSize?.width / 1920
22 | ), [imagePreviewSize?.width]);
23 |
24 | const [customImage, setCustomImage] = useState('https://kassellabs.us-east-1.linodeobjects.com/static-assets/star-wars/DeathStar-Background.png');
25 |
26 | const updatePaymentAmount = useCallback((amount) => {
27 | iframeRef.current.contentWindow.postMessage({ action: 'setAmount', payload: amount }, '*');
28 |
29 | trackAddToCart(amount);
30 |
31 | setIsCustomImage(amount >= 40);
32 | }, [iframeRef.current]);
33 |
34 | useEffect(() => {
35 | if (!customImage || !isCustomImage) {
36 | iframeRef.current.contentWindow.postMessage({ action: 'setCode', payload: openingKey }, '*');
37 | return;
38 | }
39 |
40 | const code = JSON.stringify({ code: openingKey, image: customImage });
41 | iframeRef.current.contentWindow.postMessage({ action: 'setCode', payload: code }, '*');
42 | }, [openingKey, customImage, isCustomImage]);
43 |
44 | useEffect(() => {
45 | if (!isCustomImage) {
46 | return () => {};
47 | }
48 |
49 | const onMessage = (event) => {
50 | const isAnimationType = event.data?.type === 'animation';
51 | const isFinishedAction = event.data?.action === 'finished';
52 |
53 | if (isAnimationType && isFinishedAction) {
54 | setIsLoadingCustomImagePreview(false);
55 | }
56 | };
57 | window.addEventListener('message', onMessage);
58 | setIsLoadingCustomImagePreview(true);
59 |
60 | return () => {
61 | window.removeEventListener('message', onMessage);
62 | };
63 | }, [customImage, isCustomImage]);
64 |
65 | useEffect(() => {
66 | const savedParamsString = localStorage.getItem('saved-utm-params');
67 | if (!savedParamsString) {
68 | return;
69 | }
70 |
71 | try {
72 | const savedUtmParams = JSON.parse(savedParamsString);
73 | const params = new URLSearchParams(savedUtmParams);
74 | const paramsString = params.toString();
75 | if (paramsString) {
76 | setUtmParamsString(`&${paramsString}`);
77 | }
78 | } catch (error) {
79 | // Supress any errors here
80 | }
81 | }, []);
82 |
83 | return (
84 | <>
85 |
92 |
93 | Upload your custom image at the button below:
94 |
95 |
{
97 | setCustomImage(newCustomImage);
98 | }}
99 | />
100 |
101 | Preview your custom image:
102 |
103 |
107 |
122 | {isLoadingCustomImagePreview && (
123 |
133 |
135 | )}
136 |
137 | Fill the form below to pay:
141 |
142 |
143 |
145 |
153 |
11 |
12 |
13 | Your video is ready to download! Click on the button below to download it!
14 |
15 |
16 |
17 |
22 |
16 |
17 |
18 | {text}
19 | This page will be updated when the video is ready.
20 |
21 |
22 |
23 | If you want, you can add more emails to receive the video in the form below.
24 |
25 |
30 |
33 |
6 |
7 | { text }
8 |
9 |
29 |
5 | By using this website you are agreeing to our
6 |
11 | Terms of Service
12 | .
13 |
14 | );
15 |
16 | export default TermsOfServiceAcceptance;
17 |
--------------------------------------------------------------------------------
/src/js/DownloadPage/constants.js:
--------------------------------------------------------------------------------
1 | export const QUEUED = 'queued';
2 | export const BUMPED = 'bumped';
3 | export const NOT_QUEUED = 'not_queued';
4 | export const RENDERING = 'rendering';
5 | export const RENDERED = 'rendered';
6 |
--------------------------------------------------------------------------------
/src/js/DownloadPage/newFlow/DonateOrNotDonateNew.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const DonateOrNotDonate = ({
5 | question = 'Did you complete the payment or prefer to wait in queue?',
6 | yesText = "Yes, confirm payment!",
7 | noText = "No, I'll wait in the queue!",
8 | yesDonateHandle,
9 | noDonateHandle,
10 | hideNoDonateOption = false
11 | }) => (
12 |
13 |
{question}
14 |
15 | {yesText}
16 | {!hideNoDonateOption
17 | && (
18 |
19 | {noText}
20 |
21 | )
22 | }
23 |
24 |
6 |
7 | {children}
8 |
9 |
?
10 |
8 |
9 | You can now request a download a video of your creation.
10 |
11 |
12 | The video will rendered in our servers and take some time to be delivered.
13 | After the video is ready, it will be sent to your email address.
14 |
15 |
16 | Your email address will be used only to send the video, but
17 | you can choose to receive news from Kassel Labs about new releases.
18 |
19 | {/*
20 | Before sending the download request make sure there are no typos in your text
21 | to grant that your video will be with the correct text.
22 |
*/}
23 |
24 |
28 |
29 |
30 |
31 | Type your email below to receive your video download link:
32 |
33 |
34 |
39 |
30 |
31 |
32 | Your video request
33 | {' '}
34 | {isQueued ? qeuedText : notQueuedText}
35 | {' '}
36 | queued at position
37 | {' '}
38 | {position}
39 | .
40 | It may take up to
41 | {' '}
42 | {timeToRender}
43 | {' '}
44 | to have your video rendered.
45 | Free videos will be rendered in the HD quality (1280x720).
46 |
47 |
49 |
50 |
51 | Fill your email below and when your video is ready
52 | you will receive a message with the link to download it.
53 |
54 |
55 | Your email address will be used only to send the video, but
56 | you can choose to receive news from Kassel Labs about new releases.
57 |
58 |
59 |
60 |
61 |
65 |
Choose your video option:
25 |
26 |
selectOption('hd')}
31 | >
32 | HD video
33 | 1280 x 720
34 | MP4 File
35 |
36 | Pay at least
37 | {' '}
38 | $10
39 |
40 |
41 |
selectOption('fhd')}
46 | >
47 | Full HD video
48 | 1920 x 1080
49 | MP4 File
50 |
51 | Pay at least
52 | {' '}
53 | $15
54 |
55 |
56 |
selectOption('custom')}
61 | >
62 |
63 | A more customizable video with the Death Star image replacement.
64 | Contact us via email to submit your image.
65 | This take usually less than one business day to be delivered.
66 |
67 |
69 | Full HD
70 |
73 |
74 | Pay at least
75 | {' '}
76 | $40
77 |
78 |
79 |
21 | The link to download the video will be sent to the email:
22 |
23 | {requestEmail}
24 |
25 |
26 | );
27 | };
28 |
29 | return (
30 |
31 |
32 | Your video is in the queue to be rendered.
33 | We provide the video for free, but we have costs with
34 | the servers where the video are rendered.
35 | All the videos are provided without Watermark.
36 |
37 |
38 | There are
39 | {' '}
40 |
41 | {queuePosition}
42 | {' '}
43 | videos
44 |
45 | {' '}
46 | in front of this request to be rendered and
47 | may take up to
48 | {timeToRender}
49 | {' '}
50 | to send the video.
51 | {requestEmail && (
52 |
53 | {' '}
54 | The link to download the video will be sent to the email:
55 |
56 | {requestEmail}
57 |
58 |
59 | )}
60 |
61 |
62 | Can't wait for it? Pay to support our service and your video will
63 | be ready in a few hours (1 hour usually).
64 |
66 |
67 |
68 | Do you want to see a sample video?
69 | {' '}
70 |
71 | Take a look at this one on YouTube.
72 |
73 |
74 |
75 |
79 |
80 |
81 |
45 | The link to download the video will be sent to the email:
46 |
47 | {requestEmail}
48 |
49 |
50 | );
51 | }
52 |
53 | renderDidNotDonate() {
54 | const { requestStatus } = this.props;
55 | const { queuePosition } = requestStatus;
56 | const timeToRender = calculateTimeToRender(queuePosition);
57 |
58 | return (
59 |
60 | {queuePosition}
65 | ,
66 | and may take up to
67 | {' '}
68 | {timeToRender}
69 | {' '}
70 | to send your video.
71 | {this.renderEmail()}
72 | The link to download will also be available on this page when it's ready.
73 | You can add more emails to receive the video if you want in the button below.
74 |
75 | );
76 | }
77 |
78 | renderDonate() {
79 | const { paymentData } = this.props;
80 | if (!paymentData) {
81 | return null;
82 | }
83 |
84 | const { method, receiptURL } = paymentData;
85 |
86 | const isPaypal = method === 'paypal';
87 | const hasReceiptURL = !!receiptURL;
88 |
89 | return (
90 |
91 |
92 | Thank you so much for supporting us!
93 | Your video should be rendered soon!
94 |
95 |
{this.renderEmail()}
96 |
97 | {isPaypal
98 | && (
99 |
100 | Check your PayPal account for the receipt. You will also receive the video
101 | on your PayPal email.
102 |
103 | )}
104 |
105 | {hasReceiptURL
106 | && (
107 | <>
108 |
109 | Check your payment receipt on the link below.
110 | It was also sent to your email address.
111 |
112 |
117 |
118 | )}
119 |
120 |
121 |
126 |
127 |
128 | You can add more emails to receive the video if you want.
129 | The link to download will also be available on this page when it's ready.
130 |
131 |
139 | {donate ? this.renderDonate() : this.renderDidNotDonate() }
140 |
141 |
142 | OK
143 | Add another Email
144 |
145 |
148 |
27 |
28 |
29 | { title }
30 |
31 |
33 |
34 |
35 |
36 | { children }
37 |
38 |
39 | { actions }
40 |
41 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/src/js/ImageAdjustmentModal/ImageAdjustmentModal.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | Box,
4 | Button,
5 | Slider,
6 | CircularProgress,
7 | Typography,
8 | Tooltip,
9 | } from '@material-ui/core';
10 | import CropIcon from '@material-ui/icons/Crop';
11 | import VerticalAlignCenterIcon from '@material-ui/icons/VerticalAlignCenter';
12 | import FullscreenIcon from '@material-ui/icons/Fullscreen';
13 | import FullscreenExitIcon from '@material-ui/icons/FullscreenExit';
14 | import Cropper from 'react-easy-crop';
15 |
16 | import Dialog from './Dialog';
17 | import getCroppedImages from '../util/getCroppedImages';
18 | import getResizedImages from '../util/getResizedImages';
19 |
20 | const DEFAULT_CROP = {
21 | x: 0,
22 | y: 0,
23 | };
24 |
25 | const IMAGE_SIZE = {
26 | width: 1920,
27 | height: 1080,
28 | };
29 |
30 | const CropDialog = ({
31 | image, onChange, open, onClose,
32 | }) => {
33 | const [mediaSize, setMediaSize] = React.useState(null);
34 | const [cropArea, setCropArea] = React.useState(null);
35 | const [crop, setCrop] = React.useState(DEFAULT_CROP);
36 | const [zoom, setZoom] = React.useState(0.25);
37 | const [rotation, setRotation] = React.useState(0);
38 | const [loading, setLoading] = React.useState(false);
39 | const [cropSize, setCropSize] = React.useState({ width: 0, height: 0 });
40 |
41 | return (
42 | Position Image}
47 | actions={(
48 | <>
49 |
54 | Close
55 |
56 |
79 | Loading
80 |
81 |
83 |
84 | )
85 | : 'Confirm'
86 | }
87 |
88 |
89 | )}
90 | >
91 |
98 | setCropArea(newCropArea)}
109 | onCropSizeChange={(newCropSize) => {
110 | setCropSize(newCropSize);
111 | }}
112 | onMediaLoaded={(loadedMediaSize) => {
113 | setMediaSize(loadedMediaSize);
114 | }}
115 | />
116 |
139 |
140 |
141 | {
145 | setCrop({ ...crop, x: 0 });
146 | }}
147 | >
148 |
150 |
151 |
152 |
153 | {
157 | setCrop({ ...crop, y: 0 });
158 | }}
159 | >
160 |
162 |
163 |
164 | {
168 | // Adjust the size
169 | const widthResize = cropSize.width / mediaSize.width;
170 | const heightResize = cropSize.height / mediaSize.height;
171 | const newZoom = Math.min(widthResize, heightResize);
172 | setZoom(newZoom);
173 | setRotation(0);
174 |
175 | // Adjust the alignment
176 | setCrop({ x: 0, y: 0 });
177 | }}
178 | >
179 |
181 |
182 |
183 | {
187 | // Adjust the size
188 | const widthResize = cropSize.width / mediaSize.width;
189 | const heightResize = cropSize.height / mediaSize.height;
190 | const newZoom = Math.max(widthResize, heightResize);
191 | setZoom(newZoom);
192 | setRotation(0);
193 |
194 | // Adjust the alignment
195 | setCrop({ x: 0, y: 0 });
196 | }}
197 | >
198 |
200 |
201 |
202 | )}
203 |
204 |
205 |
206 | Zoom
207 | setZoom(newZoom)}
210 | valueLabelDisplay="auto"
211 | valueLabelFormat={(value) => value.toFixed(2)}
212 | min={0.05}
213 | step={0.01}
214 | max={3}
215 | />
216 |
217 |
218 | Rotation
219 | setRotation(newRotation)}
222 | valueLabelDisplay="auto"
223 | valueLabelFormat={(value) => value.toFixed(1)}
224 | min={-180}
225 | step={0.1}
226 | max={180}
227 | />
228 |
229 |
230 |
231 | );
232 | };
233 |
234 | export default CropDialog;
235 |
--------------------------------------------------------------------------------
/src/js/StarWarsAnimation.js:
--------------------------------------------------------------------------------
1 | import { checkSWFontCompatibility } from './extras/auxiliar';
2 | import { appendKeyframesRule } from './extras/utils';
3 | import escapeHtml from './extras/escapeHtml';
4 | import ApplicationState from './ApplicationState';
5 | import UrlHandler from './extras/UrlHandler';
6 | import isFirefoxDesktop from './extras/isFirefoxDesktop';
7 |
8 | class StarWarsAnimation {
9 | constructor() {
10 | this.animationContainer = document.querySelector('#animationContainer');
11 | this.animation = null;
12 |
13 | const animation = this.animationContainer.querySelector('.starwarsAnimation');
14 | this.animationCloned = animation.cloneNode(true);
15 |
16 | this.reset();
17 | }
18 |
19 | reset() {
20 | const animation = this.animationContainer.querySelector('.starwarsAnimation');
21 | if (animation) {
22 | this.animationContainer.removeChild(animation);
23 | }
24 |
25 | const cloned = this.animationCloned.cloneNode(true);
26 | this.animation = cloned;
27 | }
28 |
29 | prepareBodyText(text) {
30 | const escapedText = escapeHtml(text);
31 |
32 | const paragraphs = escapedText
33 | .trim()
34 | .split('\n')
35 | .join('');
36 |
37 | const breakLineBetweenPs = paragraphs
38 | .split('
')
39 | .join('${breakLineBetweenPs}
`;
42 |
43 | return finalHtml;
44 | }
45 |
46 | load(opening) {
47 | // animation shortcut
48 | const { animation } = this;
49 |
50 | // INTRO TEXT
51 | const introHtml = escapeHtml(opening.intro)
52 | .replace(/\n/g, 'There was an error on your connection. Check if you are using a VPN, or a company network, or an ad block that may block the connection with our website.
47 | {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
48 | {/*
55 | ), dom);
56 | };
57 |
58 | export const unmountDownloadPage = () => {
59 | ReactDOM.unmountComponentAtNode(dom);
60 | };
61 |
--------------------------------------------------------------------------------
/src/js/old/createdIntros.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | function createdIntros(){
3 | var source = '{{#if intros.length}}' +
4 | ''+
5 | '{{#each intros}}'+
6 | '
'+
7 | '
'+
8 | ''+
9 | ' '+
11 | '
'+
12 | '
{{this.title}} '+
13 | '
'+
14 | '{{/each}}'+
15 | '
remove intro ',
26 | text: ''+
27 | 'This will not remove the intro from the database. Are you sure you want to remove the intro from this browser?
',
29 | showCancelButton: true,
30 | confirmButtonText: "Yes",
31 | cancelButtonText: "No",
32 | animation: "slide-from-top"
33 | },function(confirm){
34 | if(confirm){
35 | var intros = JSON.parse(localStorage.StarWarsIntros);
36 | intros.splice(index,1);
37 | localStorage.StarWarsIntros = JSON.stringify(intros);
38 | that.load();
39 | }
40 | });
41 | }
42 |
43 | this.load = function(){
44 | var intros = localStorage.StarWarsIntros ? JSON.parse(localStorage.StarWarsIntros) : [];
45 |
46 | var html = $(this.template({intros:intros}));
47 | var that = this;
48 | html.find('.removeButton').click(function(e){
49 | that.remove(e.target.dataset.id);
50 | });
51 | this.element.html(html);
52 | };
53 |
54 | var getTitle = function(intro){
55 | var see = ['title','episode','logo','text'];
56 | for(var i=0;i {
5 | const image = new Image()
6 | image.crossOrigin = true
7 | image.addEventListener('load', () => resolve(image))
8 | image.addEventListener('error', (error) => reject(error))
9 | image.src = getCORSURL(url)
10 | })
11 | }
12 |
--------------------------------------------------------------------------------
/src/js/util/getCORSURL.js:
--------------------------------------------------------------------------------
1 | export default function getCORSURL (url) {
2 | const shouldUseCors = url.match(/(https|http):\/\//)
3 | const corsUrl = shouldUseCors ? `https://cors.kassellabs.io/${url}` : url
4 | return corsUrl
5 | }
6 |
--------------------------------------------------------------------------------
/src/js/util/getCroppedImages.js:
--------------------------------------------------------------------------------
1 | import getCORSImage from './getCORSImage'
2 | import getCORSURL from './getCORSURL'
3 |
4 | function getRadianAngle (degreeValue) {
5 | return (degreeValue * Math.PI) / 180
6 | }
7 |
8 | /**
9 | * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop
10 | * @param {File} image - Image File url or array of images
11 | * @param {Object} cropArea - cropArea Object provided by react-easy-crop
12 | * @param {number} rotation - optional rotation parameter
13 | */
14 | export default async function getCroppedImages (imageSrc, cropArea, rotation = 0) {
15 | let image
16 | try {
17 | image = await getCORSImage(imageSrc)
18 | } catch (error) {
19 | console.error(error)
20 | return null
21 | }
22 |
23 | const canvas = document.createElement('canvas')
24 | const context = canvas.getContext('2d')
25 |
26 | const maxSize = Math.max(image.width, image.height)
27 | const safeArea = 2 * ((maxSize / 2) * Math.sqrt(2))
28 |
29 | // set each dimensions to double largest dimension to allow for a safe area for the
30 | // image to rotate in without being clipped by canvas context
31 | canvas.width = safeArea
32 | canvas.height = safeArea
33 |
34 | // translate canvas context to a central location on image to allow rotating around the center.
35 | context.translate(safeArea / 2, safeArea / 2)
36 | context.rotate(getRadianAngle(rotation))
37 | context.translate(-safeArea / 2, -safeArea / 2)
38 |
39 | // draw rotated image and store data.
40 | context.drawImage(
41 | image,
42 | safeArea / 2 - image.width * 0.5,
43 | safeArea / 2 - image.height * 0.5
44 | )
45 | const data = context.getImageData(0, 0, safeArea, safeArea)
46 |
47 | // set canvas width to final desired crop size - this will clear existing context
48 | canvas.width = cropArea.width
49 | canvas.height = cropArea.height
50 |
51 | // paste generated rotate image with correct offsets for x,y crop values.
52 | context.putImageData(
53 | data,
54 | 0 - safeArea / 2 + image.width * 0.5 - cropArea.x,
55 | 0 - safeArea / 2 + image.height * 0.5 - cropArea.y
56 | )
57 |
58 | return canvas.toDataURL('image/png')
59 | }
60 |
--------------------------------------------------------------------------------
/src/js/util/getResizedImages.js:
--------------------------------------------------------------------------------
1 | import getCORSImage from './getCORSImage'
2 |
3 | export default async function getResizedImages (imageSrc, { maxWidth, maxHeight, backgroundColor }) {
4 | let image
5 | try {
6 | image = await getCORSImage(imageSrc)
7 | } catch (error) {
8 | console.error(error)
9 | return null
10 | }
11 |
12 | const canvas = document.createElement('canvas')
13 | let { width, height } = image
14 |
15 | // First, try to fit the image by width
16 | if (width !== maxWidth) {
17 | height *= maxWidth / width
18 | width = maxWidth
19 | }
20 |
21 | // If it does not work, try fitting it by height
22 | const isImageFitInsideModel = height <= maxHeight && width <= maxWidth
23 | if (!isImageFitInsideModel) {
24 | width *= maxHeight / height
25 | height = maxHeight
26 | }
27 |
28 | canvas.width = width
29 | canvas.height = height
30 | console.log({width, height})
31 | const context = canvas.getContext('2d')
32 |
33 | // Optionally apply a background color the the resized image
34 | if (backgroundColor) {
35 | context.fillStyle = backgroundColor
36 | context.fillRect(0, 0, canvas.width, canvas.height)
37 | }
38 |
39 | context.drawImage(
40 | image,
41 | 0,
42 | 0,
43 | width,
44 | height
45 | )
46 |
47 | return new Promise((resolve) => {
48 | canvas.toBlob(resolve, 'image/png')
49 | })
50 | }
51 |
--------------------------------------------------------------------------------
/src/js/util/getURLFromFile.js:
--------------------------------------------------------------------------------
1 | export default function getURLFromFile (file) {
2 | return new Promise((resolve) => {
3 | const reader = new FileReader()
4 | reader.onloadend = function () {
5 | resolve(reader.result)
6 | }
7 | reader.readAsDataURL(file)
8 | })
9 | }
--------------------------------------------------------------------------------
/src/renderer/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | SWIC Renderer
5 |
23 |
26 |
27 |
28 |
29 |
30 |
31 |
34 |
35 |
39 |
40 |
41 |
42 |
43 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
63 |
4 |
5 | 
25 | 
25 | 
31 | 
43 |