@eohjsc/react-native-smart-city 0.2.71 → 0.2.75

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.71",
+  "version": "0.2.75",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/Images/Common/disney.svg

@@ -0,0 +1,20 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="59" height="59" rx="9.5" fill="white"/>
+<g clip-path="url(#clip0_6639_22125)">
+<path d="M28.2516 33.5542C28.2726 33.557 28.2772 33.5578 28.2977 33.5604C28.6399 33.6054 28.9762 33.6652 29.2336 33.7766C29.4722 33.8787 29.612 34.0078 29.7397 34.238C29.9338 34.587 29.9465 35.076 29.771 35.4461C29.64 35.7214 29.3523 35.9523 29.0896 36.0747C28.8168 36.2028 28.5481 36.2638 28.2399 36.2979C27.7008 36.3554 27.1186 36.2472 26.6336 36.02C26.3466 35.8842 25.9961 35.6504 25.8194 35.3492C25.6894 35.1286 25.6935 34.8415 25.8517 34.6318C26.1038 34.2976 26.6437 34.224 27.0504 34.238C27.3604 34.2496 27.9187 34.3424 28.2131 34.4439C28.2947 34.4724 28.5956 34.586 28.6481 34.6381C28.6851 34.6743 28.709 34.7269 28.6924 34.7756C28.6252 34.9749 28.1252 35.0799 27.9809 35.101C27.5944 35.1584 27.3939 35.0167 26.9545 34.8487C26.8455 34.8073 26.7001 34.7614 26.5891 34.7515C26.3896 34.7331 26.1487 34.7872 26.1106 34.9981C26.0917 35.1068 26.2233 35.2085 26.3237 35.2512C26.5593 35.3492 26.7509 35.3845 26.9829 35.3875C27.6681 35.3985 28.4382 35.2892 28.9986 34.9045C29.0754 34.8515 29.1507 34.7738 29.1515 34.676C29.1539 34.4783 28.7963 34.3575 28.7963 34.3575C28.4187 34.205 27.7212 34.1308 27.3618 34.1021C26.9847 34.0705 26.3913 34.0232 26.2488 34.0029C26.1022 33.9826 25.9428 33.9539 25.8158 33.8988C25.6882 33.843 25.5634 33.718 25.5263 33.5797C25.4606 33.3305 25.5444 33.0247 25.6873 32.8256C26.0618 32.3041 26.939 32.106 27.5944 32.0273C28.2287 31.9509 29.2541 31.9517 29.8771 32.2723C29.9733 32.3223 30.0224 32.3687 30.0023 32.4684C29.9618 32.6553 29.8167 32.7759 29.6408 32.8287C29.4563 32.8856 29.0747 32.9077 28.9071 32.9179C28.156 32.9587 27.2483 32.9373 26.5329 33.1263C26.4768 33.1418 26.38 33.1671 26.3485 33.2012C26.2365 33.3189 26.5564 33.3526 26.6249 33.366C26.6453 33.3707 26.6492 33.3714 26.6705 33.3736L28.2516 33.5542ZM23.7832 30.3099C23.7832 30.3099 23.9054 30.1324 24.0078 29.9978C24.1941 29.7525 24.5315 29.4125 24.7855 29.2019C24.8632 29.1376 24.9548 29.0648 24.9548 29.0648C24.9548 29.0648 24.8115 29.0791 24.7303 29.0952C24.5376 29.1315 24.255 29.3135 24.1138 29.4311C23.8808 29.6243 23.6245 29.9384 23.7405 30.2175C23.7573 30.2569 23.7832 30.3099 23.7832 30.3099ZM25.0786 30.6457C25.4467 30.6211 25.7915 30.5184 26.1125 30.346C26.4273 30.1753 26.8904 29.8425 26.8424 29.4514C26.8278 29.3247 26.7422 29.2292 26.6342 29.1845C26.4938 29.1256 26.4205 29.1351 26.2412 29.1867C26.1109 29.2237 26.0522 29.2461 25.9291 29.3143C25.568 29.5175 25.056 29.9525 24.778 30.2996C24.7139 30.3814 24.6489 30.473 24.5981 30.5357C24.566 30.5744 24.5411 30.61 24.5442 30.6194C24.5553 30.6588 24.9348 30.6552 25.0786 30.6457ZM24.1413 31.3125C24.1034 31.3514 24.0632 31.4452 24.0216 31.5131C23.9993 31.5495 23.9581 31.5963 23.9308 31.615C23.835 31.6833 23.7538 31.6864 23.6613 31.6076C23.5316 31.4965 23.4566 31.3246 23.4513 31.1574C23.4485 31.0845 23.4614 31.0037 23.4472 30.9422C23.4236 30.8384 23.3163 30.7314 23.2585 30.6321C23.1906 30.5152 23.1356 30.3113 23.1288 30.1796C23.1055 29.7691 23.3289 29.3909 23.6191 29.0926C23.9114 28.791 24.2937 28.5403 24.7095 28.3697C25.1026 28.2093 25.6786 28.1 26.1103 28.2448C26.2508 28.2914 26.4466 28.4073 26.5449 28.5286C26.5658 28.5538 26.5829 28.581 26.6043 28.5944C26.6235 28.6062 26.6737 28.6109 26.7136 28.618C26.8513 28.6411 27.0495 28.7421 27.1305 28.8093C27.2932 28.9453 27.3823 29.0752 27.4235 29.2638C27.5062 29.6432 27.2806 30.0595 27.0237 30.3129C26.5838 30.7489 26.1493 31.0555 25.5865 31.2689C25.3394 31.3624 24.9544 31.4498 24.6739 31.4254C24.5868 31.4184 24.4974 31.3962 24.4126 31.3907C24.3693 31.3871 24.2111 31.3476 24.1941 31.3364C24.1732 31.3208 24.1461 31.3072 24.1413 31.3125ZM24.644 32.1538C24.6611 32.1566 24.6875 32.164 24.7102 32.1725C24.9075 32.2452 24.9887 32.422 25.0373 32.6163C25.1499 33.0675 25.198 34.0655 25.2167 34.4562C25.2305 34.7494 25.238 35.0379 25.2507 35.3277C25.2615 35.5732 25.2817 35.8995 25.2289 36.1294C25.2097 36.2121 25.1526 36.3083 25.0708 36.3576C24.9771 36.4157 24.7639 36.4201 24.6467 36.3967C24.3579 36.3388 24.264 36.1589 24.2228 35.8821C24.1248 35.2218 24.172 33.9259 24.2298 33.379C24.249 33.1984 24.3192 32.6197 24.4166 32.377C24.4498 32.2952 24.5206 32.1304 24.644 32.1538ZM15.8559 33.2524C15.8559 33.2524 15.426 33.2819 15.1301 33.3137C14.7536 33.353 14.0462 33.4713 13.6379 33.6125C13.5155 33.655 13.2667 33.7559 13.2451 33.8779C13.2223 34.0043 13.3033 34.1032 13.3934 34.2055C13.4455 34.2649 13.7404 34.5397 13.8231 34.6064C14.1697 34.8867 14.8725 35.319 15.3902 35.529C15.568 35.6002 15.8622 35.7023 15.8622 35.7023C15.8622 35.7023 15.8403 34.8908 15.8443 34.0915C15.8465 33.6699 15.8559 33.2524 15.8559 33.2524ZM23.7392 33.5754C23.7638 33.7933 23.706 34.2055 23.6959 34.2599C23.6776 34.3852 23.5801 34.6742 23.5639 34.7095C23.4851 34.8851 23.4075 35.029 23.3252 35.1726C23.1843 35.4184 22.849 35.808 22.65 35.9748C21.91 36.5944 20.7643 36.9471 19.7815 37.0634C19.1146 37.1414 18.3483 37.1299 17.6417 37.0033C17.3985 36.9604 17.0365 36.8796 17.0365 36.8796C17.0365 36.8796 17.0377 37.0198 17.0261 37.1184C17.0205 37.1634 16.9855 37.2817 16.9659 37.3201C16.9146 37.4229 16.8302 37.476 16.7075 37.4988C16.5595 37.5254 16.4025 37.5343 16.2657 37.4776C16.0411 37.3861 15.9604 37.1825 15.9213 36.9477C15.8896 36.76 15.8565 36.4336 15.8565 36.4336C15.8565 36.4336 15.6885 36.3565 15.5483 36.2888C15.118 36.0834 14.7093 35.8345 14.3517 35.5786C14.2526 35.5069 13.827 35.1617 13.7331 35.0759C13.4697 34.8337 13.2327 34.5927 13.0524 34.2835C12.9123 34.0419 12.8719 33.8275 12.9785 33.5715C13.1255 33.2147 13.6536 32.9461 14.015 32.793C14.2803 32.6795 15.1052 32.4186 15.4478 32.3703C15.6096 32.3478 15.8607 32.3043 15.8761 32.2946C15.8824 32.2899 15.8868 32.2859 15.8913 32.2809C15.8992 32.2701 15.9126 31.9169 15.91 31.7877C15.9067 31.6607 16.007 30.8264 16.0393 30.6499C16.0561 30.5545 16.1307 30.1872 16.2069 30.0908C16.2567 30.0257 16.3448 30.0309 16.4166 30.0737C16.8096 30.3104 16.929 31.1314 16.9582 31.5491C16.9757 31.8036 16.9844 32.1864 16.9844 32.1864C16.9844 32.1864 17.4352 32.1735 17.7126 32.1811C17.9821 32.1872 18.2791 32.2284 18.5588 32.2716C18.9169 32.3272 19.615 32.4747 20.0153 32.6713C20.3449 32.8332 20.6535 33.1059 20.7535 33.3946C20.8463 33.6592 20.8324 33.8423 20.691 34.0812C20.5319 34.3508 20.231 34.5513 19.9259 34.568C19.8352 34.5731 19.4935 34.5291 19.3883 34.4502C19.3471 34.4188 19.3492 34.3621 19.379 34.3236C19.3903 34.3101 19.55 34.2278 19.6443 34.1798C19.6915 34.155 19.7306 34.1281 19.7675 34.0956C19.8458 34.0287 19.9163 33.9552 19.9085 33.869C19.8976 33.7571 19.7754 33.6881 19.6589 33.6437C19.1122 33.4333 18.0207 33.2587 17.4933 33.2285C17.2868 33.2167 16.9932 33.2067 16.9932 33.2067L17.0553 36.028C17.0553 36.028 17.2981 36.0728 17.4894 36.1028C17.5992 36.1189 18.0643 36.1595 18.1879 36.1624C19.1291 36.1865 20.1796 36.1049 21.0433 35.7101C21.4225 35.5372 21.7704 35.322 22.0338 35.0306C22.3809 34.6451 22.5627 34.1175 22.5146 33.5665C22.4619 32.9646 22.0246 32.2502 21.6754 31.8152C20.7528 30.6659 19.1714 29.7204 17.7801 29.1662C16.3596 28.6007 14.9557 28.2753 13.4482 28.2209C13.0596 28.2069 12.2123 28.2259 11.7839 28.3407C11.7227 28.3574 11.6611 28.3773 11.6043 28.3897C11.5594 28.4004 11.4887 28.4291 11.4692 28.4443C11.4585 28.4528 11.4478 28.4644 11.4478 28.4644C11.4478 28.4644 11.4743 28.4786 11.4995 28.4889C11.5449 28.5081 11.7358 28.5196 11.8347 28.5371C11.9231 28.5532 12.0152 28.5982 12.0516 28.661C12.0862 28.7206 12.0906 28.7677 12.0492 28.8174C11.9521 28.9318 11.5868 28.9125 11.426 28.8878C11.2588 28.862 11.0507 28.8125 11.0125 28.6715C10.9681 28.5054 11.0496 28.3427 11.1375 28.1922C11.3143 27.8911 11.5674 27.7345 11.9382 27.6365C12.4647 27.4961 13.1296 27.398 13.6268 27.3796C14.7522 27.3384 15.8174 27.529 16.9078 27.8497C17.5319 28.0325 18.3489 28.3392 18.9471 28.6182C19.3763 28.8187 20.0525 29.1873 20.4324 29.4283C20.5522 29.5049 21.2534 30.0039 21.3623 30.0916C21.5895 30.2715 21.8866 30.5301 22.1018 30.737C22.5182 31.1366 23.036 31.7492 23.2875 32.2354C23.3481 32.3519 23.395 32.4664 23.4731 32.6013C23.4999 32.6476 23.6148 32.9241 23.634 33.004C23.6529 33.083 23.6806 33.1992 23.6845 33.2038C23.6901 33.2462 23.7434 33.4838 23.7392 33.5754ZM37.8875 32.9516C37.3604 33.0693 35.9745 33.1346 35.9745 33.1346L35.7998 33.6649C35.7998 33.6649 36.4924 33.6076 36.9962 33.6586C36.9962 33.6586 37.1594 33.6403 37.1786 33.8381C37.1851 34.0227 37.1625 34.2207 37.1625 34.2207C37.1625 34.2207 37.152 34.3406 36.9767 34.371C36.7867 34.4017 35.4839 34.4505 35.4839 34.4505L35.2729 35.1417C35.2729 35.1417 35.1945 35.3015 35.3703 35.2559C35.5335 35.2136 36.8986 34.9654 37.0764 35.0011C37.2669 35.047 37.4778 35.293 37.4169 35.5173C37.3442 35.7952 35.9817 36.637 35.152 36.5782C35.152 36.5782 34.716 36.6054 34.3474 36.0355C34.0042 35.4923 34.4775 34.4638 34.4775 34.4638C34.4775 34.4638 34.2606 33.9837 34.4178 33.821C34.4178 33.821 34.5113 33.7388 34.7841 33.7202L35.118 33.0509C35.118 33.0509 34.7376 33.0763 34.5113 32.8052C34.3006 32.5481 34.2829 32.4299 34.4445 32.3589C34.6173 32.2762 36.2014 31.9962 37.2914 32.0317C37.2914 32.0317 37.6702 31.9956 37.9988 32.6322C37.9989 32.6322 38.158 32.8896 37.8875 32.9516ZM33.7876 35.5248C33.6479 35.843 33.2789 36.1827 32.8205 35.9716C32.3679 35.76 31.6471 34.3309 31.6471 34.3309C31.6471 34.3309 31.3735 33.798 31.3208 33.8118C31.3208 33.8118 31.2617 33.7077 31.2254 34.29C31.1877 34.8699 31.2327 36.0006 30.9939 36.1785C30.7677 36.357 30.4938 36.2859 30.3517 36.0775C30.2226 35.8721 30.1689 35.384 30.2393 34.5268C30.3221 33.668 30.5281 32.7542 30.7913 32.4697C31.054 32.1871 31.265 32.3922 31.3472 32.4667C31.3472 32.4667 31.6987 32.7753 32.2784 33.6815L32.3807 33.8491C32.3807 33.8491 32.9074 34.7053 32.9625 34.7033C32.9625 34.7033 33.0055 34.7426 33.0439 34.7144C33.0992 34.699 33.0769 34.4245 33.0769 34.4245C33.0769 34.4245 32.9676 33.4915 32.487 31.9122C32.487 31.9122 32.4144 31.7153 32.4635 31.5307C32.5123 31.3443 32.7053 31.4318 32.7053 31.4318C32.7053 31.4318 33.4501 31.7946 33.8116 32.9692C34.1707 34.1442 33.9294 35.2041 33.7876 35.5248ZM41.8035 34.8213C41.4645 35.3943 40.5073 36.5941 39.2353 36.3108C38.8153 37.2975 38.4624 38.2957 38.2606 39.7893C38.2606 39.7893 38.2163 40.0795 37.9673 39.9787C37.7205 39.895 37.314 39.4976 37.2318 38.9478C37.1433 38.2255 37.4752 37.0046 38.1536 35.6046C37.9558 35.293 37.8209 34.8479 37.9364 34.214C37.9364 34.214 38.1067 33.0368 39.3272 31.9759C39.3272 31.9759 39.4735 31.8535 39.5583 31.8912C39.6518 31.9291 39.6085 32.3122 39.5343 32.4984C39.4573 32.6836 38.914 33.5948 38.914 33.5948C38.914 33.5948 38.5751 34.2103 38.6704 34.6958C39.3105 33.7426 40.7655 31.8203 41.6674 32.4265C41.9703 32.6365 42.11 33.0932 42.11 33.5853C42.1102 34.0175 42.0025 34.4769 41.8035 34.8213ZM41.5403 33.3115C41.5403 33.3115 41.4901 32.9326 41.1076 33.3501C40.7786 33.7024 40.1852 34.3626 39.7075 35.2592C40.2087 35.2047 40.6922 34.9413 40.8383 34.8071C41.076 34.6029 41.6296 34.0487 41.5403 33.3115ZM48.8107 33.2253H46.4795C46.433 32.4578 46.3374 31.7101 46.187 30.9401C46.1716 30.8604 46.1 30.8026 46.0167 30.8026H45.4792C45.4325 30.8026 45.3882 30.823 45.3579 30.8585C45.3275 30.8946 45.3156 30.9406 45.3245 30.9856C45.4772 31.7307 45.5739 32.464 45.6217 33.226H43.3789C43.2744 33.226 43.1895 33.308 43.1895 33.4088V33.8783C43.1895 33.9794 43.2744 34.0619 43.3789 34.0619H45.6538C45.6552 34.1778 45.6564 34.2816 45.6564 34.3789C45.6564 35.0557 45.6263 35.6131 45.5559 36.2422C45.5503 36.2908 45.5667 36.3392 45.6007 36.3749C45.6337 36.4108 45.6813 36.4313 45.7306 36.4313H46.229C46.3263 36.4313 46.4069 36.3604 46.4167 36.2666C46.4848 35.6333 46.5139 35.0689 46.5139 34.3789C46.5139 34.2819 46.5129 34.1778 46.5114 34.0619H48.8108C48.915 34.0619 49.0001 33.9793 49.0001 33.8783V33.4088C49.0001 33.3075 48.915 33.2253 48.8107 33.2253Z" fill="#101C50"/>
+<path d="M17.6391 26.9333C17.606 26.9809 17.5981 27.0392 17.617 27.094C17.6368 27.1487 17.6799 27.1903 17.7355 27.2092L18.1534 27.3454C18.1787 27.3531 18.2038 27.3571 18.2284 27.3571C18.3059 27.3571 18.3785 27.32 18.4216 27.2576C19.7904 25.3097 21.643 23.6878 23.7794 22.5674C25.9849 21.4104 28.4837 20.7985 31.0065 20.7985C34.0537 20.7985 36.9937 21.6692 39.5091 23.3162C41.9634 24.9228 43.8694 27.1643 45.0213 29.7984C45.0557 29.8773 45.1352 29.9281 45.2233 29.9281H45.7224C45.7798 29.9281 45.8339 29.9001 45.8665 29.8535C45.8991 29.807 45.9053 29.748 45.8836 29.6958C44.6958 26.8636 42.6874 24.4492 40.0745 22.7146C37.3998 20.9388 34.2641 20 31.0065 20C25.6211 20 20.6238 22.592 17.6391 26.9333Z" fill="url(#paint0_linear_6639_22125)"/>
+</g>
+<rect x="0.5" y="0.5" width="59" height="59" rx="9.5" stroke="#E8E8E8"/>
+<defs>
+<linearGradient id="paint0_linear_6639_22125" x1="46.3591" y1="26.4552" x2="18.234" y2="22.5296" gradientUnits="userSpaceOnUse">
+<stop stop-color="#101C50"/>
+<stop offset="0.236" stop-color="#0D267A"/>
+<stop offset="0.4973" stop-color="#085AA4"/>
+<stop offset="0.6549" stop-color="#058BBF"/>
+<stop offset="1" stop-color="#B1FFFF"/>
+</linearGradient>
+<clipPath id="clip0_6639_22125">
+<rect width="38" height="20" fill="white" transform="translate(11 20)"/>
+</clipPath>
+</defs>
+</svg>

package/src/Images/Common/home.svg

@@ -0,0 +1,3 @@
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.7498 7.58667L23.4165 13.5867V24H20.7498V16H12.7498V24H10.0832V13.5867L16.7498 7.58667ZM16.7498 4L3.4165 16H7.4165V26.6667H15.4165V18.6667H18.0832V26.6667H26.0832V16H30.0832L16.7498 4Z" fill="#262626"/>
+</svg>

package/src/Images/Common/input.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 3.00977H3C1.9 3.00977 1 3.90977 1 5.00977V8.99977H3V4.98977H21V19.0198H3V14.9998H1V19.0098C1 20.1098 1.9 20.9898 3 20.9898H21C22.1 20.9898 23 20.1098 23 19.0098V5.00977C23 3.89977 22.1 3.00977 21 3.00977ZM11 15.9998L15 11.9998L11 7.99977V10.9998H1V12.9998H11V15.9998ZM21 3.00977H3C1.9 3.00977 1 3.90977 1 5.00977V8.99977H3V4.98977H21V19.0198H3V14.9998H1V19.0098C1 20.1098 1.9 20.9898 3 20.9898H21C22.1 20.9898 23 20.1098 23 19.0098V5.00977C23 3.89977 22.1 3.00977 21 3.00977ZM11 15.9998L15 11.9998L11 7.99977V10.9998H1V12.9998H11V15.9998Z" fill="#BFBFBF"/>
+</svg>

package/src/Images/Common/keyboard_arrow_down.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.91 8.58984L12.5 13.1698L17.09 8.58984L18.5 9.99984L12.5 15.9998L6.5 9.99984L7.91 8.58984Z" fill="#262626"/>
+</svg>

package/src/Images/Common/keyboard_arrow_up.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.91 15.41L12.5 10.83L17.09 15.41L18.5 14L12.5 8L6.5 14L7.91 15.41Z" fill="#262626"/>
+</svg>

package/src/Images/Common/keyboard_return.svg

@@ -0,0 +1,3 @@
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.5832 9.33333V14.6667H8.02317L12.7965 9.88L10.9165 8L2.9165 16L10.9165 24L12.7965 22.12L8.02317 17.3333H28.2498V9.33333H25.5832Z" fill="#262626"/>
+</svg>

package/src/Images/Common/netflix.svg

@@ -0,0 +1,9 @@
+<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="0.666504" width="60" height="60" rx="10" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_6639_22135" transform="scale(0.0025)"/>
+</pattern>
+<image id="image0_6639_22135" width="400" height="400" xlink:href="data:image/jpeg;base64,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"/>
+</defs>
+</svg>

package/src/Images/Common/pause.svg

@@ -0,0 +1,3 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 38H20.5V10H12.5V38ZM28.5 10V38H36.5V10H28.5Z" fill="#262626"/>
+</svg>

package/src/Images/Common/spotify.svg

@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="59" height="59" rx="9.5" fill="white"/>
+<path d="M29.9993 13.0557C20.6393 13.0557 13.0513 20.6435 13.0513 30.0034C13.0513 39.3638 20.6393 46.951 29.9993 46.951C39.3602 46.951 46.9475 39.3638 46.9475 30.0034C46.9475 20.6441 39.3602 13.0565 29.9991 13.0565L29.9993 13.0557ZM37.7715 37.4992C37.4679 37.9971 36.8163 38.1549 36.3184 37.8493C32.3392 35.4188 27.3299 34.8683 21.4305 36.2161C20.862 36.3457 20.2953 35.9895 20.1658 35.4208C20.0356 34.8521 20.3904 34.2854 20.9603 34.1559C27.4163 32.6803 32.954 33.316 37.4214 36.0461C37.9192 36.3517 38.0771 37.0014 37.7715 37.4992ZM39.8459 32.8839C39.4634 33.5063 38.6498 33.7026 38.0285 33.3201C33.4729 30.5193 26.5286 29.7084 21.1402 31.344C20.4414 31.5551 19.7033 31.1613 19.4912 30.4637C19.2808 29.7648 19.6748 29.0282 20.3724 28.8157C26.5274 26.9481 34.1792 27.8527 39.4108 31.0676C40.0321 31.4501 40.2284 32.2636 39.8459 32.8841V32.8839ZM40.024 28.0786C34.5617 24.8342 25.5497 24.5359 20.3346 26.1187C19.4971 26.3727 18.6115 25.9 18.3577 25.0625C18.1039 24.2247 18.5763 23.3397 19.4143 23.0851C25.401 21.2677 35.353 21.6188 41.6418 25.3521C42.3967 25.7992 42.6436 26.772 42.1964 27.5243C41.7511 28.2775 40.7756 28.5259 40.0248 28.0786H40.024Z" fill="#1ED760"/>
+<rect x="0.5" y="0.5" width="59" height="59" rx="9.5" stroke="#E8E8E8"/>
+</svg>

package/src/Images/Common/volume_up.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 7.49974V12.4997H6.33333L10.5 16.6664V3.33307L6.33333 7.49974H3ZM14.25 9.99974C14.25 8.52474 13.4 7.25807 12.1667 6.64141V13.3497C13.4 12.7414 14.25 11.4747 14.25 9.99974ZM12.1667 2.69141V4.40807C14.575 5.12474 16.3333 7.35807 16.3333 9.99974C16.3333 12.6414 14.575 14.8747 12.1667 15.5914V17.3081C15.5083 16.5497 18 13.5664 18 9.99974C18 6.43307 15.5083 3.44974 12.1667 2.69141Z" fill="#262626"/>
+</svg>

package/src/Images/Common/youtube.svg

@@ -0,0 +1,13 @@
+<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.833496" y="0.5" width="59" height="59" rx="9.5" fill="white"/>
+<g clip-path="url(#clip0_6639_22130)">
+<path d="M45.6744 22.4424C45.3054 21.0965 44.2246 20.0353 42.854 19.6729C40.3499 19 30.3334 19 30.3334 19C30.3334 19 20.317 19 17.8129 19.6471C16.4686 20.0094 15.3615 21.0965 14.9925 22.4424C14.3335 24.9012 14.3335 30 14.3335 30C14.3335 30 14.3335 35.1247 14.9925 37.5576C15.3615 38.9035 16.4422 39.9647 17.8129 40.3271C20.3434 41 30.3334 41 30.3334 41C30.3334 41 40.3499 41 42.854 40.3529C44.2246 39.9906 45.3054 38.9294 45.6744 37.5835C46.3334 35.1247 46.3334 30.0259 46.3334 30.0259C46.3334 30.0259 46.3597 24.9012 45.6744 22.4424Z" fill="#FF0000"/>
+<path d="M35.4735 29.9997L27.144 25.2891V34.7102L35.4735 29.9997Z" fill="white"/>
+</g>
+<rect x="0.833496" y="0.5" width="59" height="59" rx="9.5" stroke="#E8E8E8"/>
+<defs>
+<clipPath id="clip0_6639_22130">
+<rect width="32" height="22" fill="white" transform="translate(14.3335 19)"/>
+</clipPath>
+</defs>
+</svg>

package/src/commons/ActionGroup/SmartTiviActionTemplate/SmartTiviActionTemplate.js

@@ -0,0 +1,214 @@
+import React, { memo, useCallback } from 'react';
+import { View, ScrollView, Alert } from 'react-native';
+
+import styles from './SmartTiviActionTemplateStyles';
+import Text from '../../Text';
+import { Colors } from '../../../configs';
+import { IconOutline } from '@ant-design/icons-react-native';
+import CircleButton from './component/CircleButton';
+import RectangleButton from './component/RectangleButton';
+import ControlPlay from './component/ControlPlay';
+import { TESTID } from '../../../configs/Constants';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+import {
+  SvgInput,
+  VolumeUp,
+  KeyboardReturn,
+  Home,
+  Disney,
+  Spotify,
+  Youtube,
+  Netflix,
+} from './component/Icon';
+
+const SmartTiviActionTemplate = memo(({ actionGroup, doAction }) => {
+  const t = useTranslations();
+  const FakeDataChannel = [
+    {
+      id: 1,
+      icon: 'disney',
+      link: '...',
+    },
+    {
+      id: 2,
+      icon: 'youtube',
+      link: '...',
+    },
+    {
+      id: 3,
+      icon: 'netflix',
+      link: '...',
+    },
+    {
+      id: 4,
+      icon: 'spotify',
+      link: '...',
+    },
+  ];
+  const onPressOnOff = useCallback(() => {
+    return Alert.alert(t('feature_under_development'));
+  }, [t]);
+  const onPressExit = useCallback(() => {
+    return Alert.alert(t('feature_under_development'));
+  }, [t]);
+  const onPressVolumeUp = useCallback(() => {
+    return Alert.alert(t('feature_under_development'));
+  }, [t]);
+  const onPressVolumeDown = useCallback(() => {
+    return Alert.alert(t('feature_under_development'));
+  }, [t]);
+  const onPressChUp = useCallback(() => {
+    return Alert.alert(t('feature_under_development'));
+  }, [t]);
+  const onPressChDown = useCallback(() => {
+    return Alert.alert(t('feature_under_development'));
+  }, [t]);
+  const onPressUp = useCallback(() => {
+    return Alert.alert(t('feature_under_development'));
+  }, [t]);
+  const onPressDown = useCallback(() => {
+    return Alert.alert(t('feature_under_development'));
+  }, [t]);
+  const onPressLeft = useCallback(() => {
+    return Alert.alert(t('feature_under_development'));
+  }, [t]);
+  const onPressRight = useCallback(() => {
+    return Alert.alert(t('feature_under_development'));
+  }, [t]);
+  const onPressOk = useCallback(() => {
+    return Alert.alert(t('feature_under_development'));
+  }, [t]);
+  const onPressPrev = useCallback(() => {
+    return Alert.alert(t('feature_under_development'));
+  }, [t]);
+  const onPressStop = useCallback(() => {
+    return Alert.alert(t('feature_under_development'));
+  }, [t]);
+  const onPressNext = useCallback(() => {
+    return Alert.alert(t('feature_under_development'));
+  }, [t]);
+  const onPressHome = useCallback(() => {
+    return Alert.alert(t('feature_under_development'));
+  }, [t]);
+  const onPressBack = useCallback(() => {
+    return Alert.alert(t('feature_under_development'));
+  }, [t]);
+  const onPressChannel = useCallback(
+    (item) => {
+      return Alert.alert(t('feature_under_development'));
+    },
+    [t]
+  );
+  const iconChannels = useCallback((item) => {
+    switch (item.icon) {
+      case 'disney':
+        return <Disney style={styles.iconChannel} />;
+      case 'youtube':
+        return <Youtube style={styles.iconChannel} />;
+      case 'netflix':
+        return <Netflix style={styles.iconChannel} />;
+      case 'spotify':
+        return <Spotify style={styles.iconChannel} />;
+      default:
+        return <></>;
+    }
+  }, []);
+  return (
+    <>
+      <ScrollView>
+        <View style={styles.wrap}>
+          <View style={styles.rowOnOff}>
+            <CircleButton
+              type="small"
+              icon={
+                <IconOutline
+                  name="poweroff"
+                  size={20}
+                  color={Colors.Gray6}
+                  style={styles.iconButton}
+                />
+              }
+              onPress={onPressOnOff}
+              testID={TESTID.SMART_TIVI_TEMPLATE.ONOFF_BUTTON}
+            />
+            <CircleButton
+              type="small"
+              icon={<SvgInput size={20} style={styles.iconButtonExit} />}
+              onPress={onPressExit}
+              testID={TESTID.SMART_TIVI_TEMPLATE.EXIT_BUTTON}
+            />
+          </View>
+          <View style={styles.controlDevice}>
+            <RectangleButton
+              type="column"
+              icon={<VolumeUp width={20} height={20} />}
+              onPressUp={onPressVolumeUp}
+              onPressDown={onPressVolumeDown}
+              testID={TESTID.SMART_TIVI_TEMPLATE.VOLUME_BUTTON}
+            />
+            <CircleButton
+              type="big"
+              wrapStyle={styles.circleBigButton}
+              onPressUp={onPressUp}
+              onPressDown={onPressDown}
+              onPressLeft={onPressLeft}
+              onPressRight={onPressRight}
+              onPressOk={onPressOk}
+              testID={TESTID.SMART_TIVI_TEMPLATE.BIG_BUTTON}
+            />
+            <RectangleButton
+              type="column"
+              icon={
+                <Text type="H4" color={Colors.Gray9} bold>
+                  CH
+                </Text>
+              }
+              onPressUp={onPressChUp}
+              onPressDown={onPressChDown}
+              testID={TESTID.SMART_TIVI_TEMPLATE.CH_BUTTON}
+            />
+          </View>
+          <View style={styles.controlPlay}>
+            <ControlPlay
+              onPressPrev={onPressPrev}
+              onPressStop={onPressStop}
+              onPressNext={onPressNext}
+              testID={TESTID.SMART_TIVI_TEMPLATE.CONTROL_BUTTON}
+            />
+          </View>
+          <View style={styles.controlHome}>
+            <RectangleButton
+              type="row"
+              onPress={onPressHome}
+              icon={<Home />}
+              testID={TESTID.SMART_TIVI_TEMPLATE.HOME_BUTTON}
+            />
+            <RectangleButton
+              type="row"
+              onPress={onPressBack}
+              icon={<KeyboardReturn />}
+              testID={TESTID.SMART_TIVI_TEMPLATE.BACK_BUTTON}
+            />
+          </View>
+          <View style={styles.channelTV}>
+            {!!FakeDataChannel &&
+              FakeDataChannel.map((item, index) => {
+                return (
+                  <RectangleButton
+                    type="row"
+                    onPress={() => onPressChannel(item)}
+                    icon={iconChannels(item)}
+                    wrapStyle={styles.buttonChannel}
+                    index={index}
+                  />
+                );
+              })}
+          </View>
+        </View>
+      </ScrollView>
+    </>
+  );
+});
+
+export default SmartTiviActionTemplate;

package/src/commons/ActionGroup/SmartTiviActionTemplate/SmartTiviActionTemplateStyles.js

@@ -0,0 +1,69 @@
+import { StyleSheet } from 'react-native';
+import { Device } from '../../../configs';
+const widthMonitor = Device.screenWidth;
+
+const centerRowItem = {
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+const betweenRowItem = {
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+};
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingBottom: 60,
+  },
+  rowOnOff: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  iconButton: {
+    zIndex: 10,
+    paddingLeft: 3,
+    paddingBottom: 7,
+  },
+  iconButtonExit: {
+    zIndex: 10,
+    marginLeft: 3,
+    marginBottom: 7,
+  },
+  controlDevice: {
+    ...betweenRowItem,
+    paddingTop: 32,
+  },
+  circleBigButton: {
+    width: 186,
+    height: 186,
+  },
+  padding6: {
+    padding: 6,
+  },
+  controlPlay: {
+    paddingTop: 34,
+    flex: 1,
+    ...centerRowItem,
+  },
+  controlHome: {
+    flexDirection: 'row',
+    paddingTop: 22,
+    flex: 1,
+    ...centerRowItem,
+  },
+  buttonChannel: {
+    borderWidth: 0,
+    padding: 0,
+    width: widthMonitor / 4 - 333,
+  },
+  channelTV: {
+    paddingTop: 32,
+    ...betweenRowItem,
+  },
+  iconChannel: {
+    width: 20,
+    height: 20,
+  },
+});

package/src/commons/ActionGroup/SmartTiviActionTemplate/__test__/CircleButton.test.js

@@ -0,0 +1,129 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import CircleButton from '../component/CircleButton';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import { TouchableOpacity } from 'react-native';
+
+const wrapComponent = (
+  type,
+  onPress,
+  onPressUp,
+  onPressDown,
+  onPressLeft,
+  onPressRight,
+  onPressOk,
+  icon
+) => (
+  <SCProvider initState={mockSCStore({})}>
+    <CircleButton
+      type={type}
+      icon={icon}
+      onPress={onPress}
+      onPressUp={onPressUp}
+      onPressDown={onPressDown}
+      onPressLeft={onPressLeft}
+      onPressRight={onPressRight}
+      onPressOk={onPressOk}
+    />
+  </SCProvider>
+);
+
+describe('Test CircleButton', () => {
+  let wrapper;
+  let type;
+  test('render CircleButton small', async () => {
+    type = 'small';
+    const mockOnPress = jest.fn();
+    await act(async () => {
+      wrapper = await create(wrapComponent(type, mockOnPress));
+    });
+    const instance = wrapper.root;
+
+    const smallButton = instance.findAllByType(TouchableOpacity);
+    expect(smallButton).toHaveLength(1);
+  });
+  test('render CircleButton icon null', async () => {
+    type = 'small';
+    const icon = <></>;
+    const mockOnPress = jest.fn();
+    await act(async () => {
+      wrapper = await create(wrapComponent(type, icon, mockOnPress));
+    });
+    const instance = wrapper.root;
+
+    const smallButton = instance.findAllByType(TouchableOpacity);
+    expect(smallButton).toHaveLength(1);
+  });
+  test('onPress CircleButton small', async () => {
+    type = 'small';
+    const mockOnPress = jest.fn();
+    await act(async () => {
+      wrapper = await create(wrapComponent(type, mockOnPress));
+    });
+    const instance = wrapper.root;
+
+    const smallButton = instance.findAllByType(TouchableOpacity);
+    expect(smallButton).toHaveLength(1);
+    act(() => {
+      smallButton[0].props.onPress();
+    });
+  });
+  test('render CircleButton big', async () => {
+    type = 'big';
+    const mockOnPress = jest.fn();
+    await act(async () => {
+      wrapper = await create(wrapComponent(type, mockOnPress));
+    });
+    const instance = wrapper.root;
+
+    const touchableOpacity = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacity).toHaveLength(5);
+  });
+  test('render CircleButton return null', async () => {
+    type = null;
+    await act(async () => {
+      wrapper = await create(wrapComponent(type));
+    });
+    const instance = wrapper.root;
+
+    const touchableOpacity = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacity).toHaveLength(0);
+  });
+  test('onPress CircleButton big', async () => {
+    type = 'big';
+    const mockOnPress = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        wrapComponent(
+          type,
+          mockOnPress,
+          mockOnPress,
+          mockOnPress,
+          mockOnPress,
+          mockOnPress,
+          mockOnPress
+        )
+      );
+    });
+    const instance = wrapper.root;
+
+    const touchableOpacity = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacity).toHaveLength(5);
+    act(() => {
+      touchableOpacity[0].props.onPress();
+    });
+    act(() => {
+      touchableOpacity[1].props.onPress();
+    });
+    act(() => {
+      touchableOpacity[2].props.onPress();
+    });
+    act(() => {
+      touchableOpacity[3].props.onPress();
+    });
+    act(() => {
+      touchableOpacity[4].props.onPress();
+    });
+  });
+});