Video player: added volume selector animation
This commit is contained in:
Eduard Kuzmenko
parent
e0e8687e9c
commit
cffa3b7221
|
|
@ -65,8 +65,7 @@
|
|||
<glyph unicode="" glyph-name="eats" d="M348.832 962.806c13.342 19.423 39.904 24.352 59.327 11.010 33.446-22.975 65.138-54.661 95.307-94.881 9.357-12.475 17.47-24.268 24.308-35.483 7.542 12.426 17.444 25.949 29.639 40.582 40.837 49.004 97.726 77.455 170.669 85.352-8.832-48.625-25.923-89.734-51.272-123.327l6.436 0.856c60.564 6.345 112.536-4.854 154.549-38.978l16.384-14.111c220.707-196.277 126.127-654.254-158.018-748.969l-4.259-1.178c-43.991-9.751-73.079-7.852-109.154 3.681l-25.15 8.694c-17.645 5.903-28.787 7.947-45.597 7.947-16.795 0-27.935-2.046-45.572-7.953l-25.186-8.717c-36.082-11.546-65.192-13.438-109.182-3.643l-4.219 1.17c-289.524 96.508-379.735 565.602-138.175 758.645 77.415 51.61 141.326 55.739 229.838 31.19l13.32-3.816c-24.135 31.66-48.532 55.808-72.982 72.604-19.423 13.342-24.352 39.904-11.010 59.327zM239.987 734.683c-184.684-147.747-111.593-531.199 112.777-608.175 26.131-5.621 40.407-4.914 61.688 1.837l8.345 2.814 18.109 6.328c25.088 8.293 44.156 11.847 71.093 11.847 26.94 0 46.002-3.548 71.090-11.831l26.426-9.121c18.636-5.906 31.906-7.191 52.451-3.67l9.287 1.804 9.742 3.575c212.168 82.926 284.334 447.443 116.911 599.538l-13.711 11.806c-23.708 18.694-53.002 24.706-92.061 20.614-19.268-2.019-38.538-6-66.596-13.353l-51.84-13.807-14.982-3.716c-17.745-4.186-27.429-5.456-39.45-5.757l-11.772-0.049c-17.461 0.26-28.883 2.268-56.363 10.474l-44.697 13.83c-72.092 21.465-113.983 19.808-166.449-14.986z" />
|
||||
<glyph unicode="" glyph-name="edit" d="M828.339 896l67.661-67.66c33.323-33.325 33.323-87.355 0-120.68l-567.163-567.163c-8.002-8-18.854-12.497-30.17-12.497h-128c-11.316 0-22.168 4.497-30.17 12.497s-12.497 18.854-12.497 30.17v128c0 11.315 4.495 22.17 12.497 30.17l469.334 469.334c0.013 0.015 0.030 0.029 0.043 0.044l97.788 97.786c33.323 33.325 87.356 33.325 120.678 0zM768 700.34l67.661 67.66-67.661 67.66-67.661-67.66 67.661-67.66zM640 707.66l-426.667-426.666v-67.661h67.66l426.667 426.667-67.661 67.66z" />
|
||||
<glyph unicode="" glyph-name="email" d="M810.667 853.333c68.168 0 123.89-53.287 127.783-120.479l0.217-7.521v-426.667c0-68.168-53.287-123.89-120.479-127.783l-7.521-0.217h-597.333c-68.168 0-123.89 53.287-127.783 120.479l-0.217 7.521v426.667c0 68.168 53.287 123.89 120.479 127.783l7.521 0.217h597.333zM853.333 688.299l-270.332-180.243c-40.466-26.977-92.463-28.564-134.286-4.761l-7.717 4.761-270.332 180.201v-389.589c0-21.881 16.471-39.915 37.691-42.38l4.976-0.287h597.333c21.881 0 39.915 16.471 42.38 37.691l0.287 4.976v389.632zM810.667 768h-597.333c-2.517 0-4.984-0.218-7.381-0.636l282.381-188.307c12.739-8.493 28.907-9.437 42.408-2.831l4.926 2.831 282.381 188.307-3.646 0.475-3.736 0.161z" />
|
||||
<glyph unicode="" glyph-name="endcall_filled" d="M100.399 583.121l4.586 4.582c112.306 99.284 257.033 154.083 406.93 154.083 149.901 0 294.626-54.799 406.933-154.083 9.929-9.007 17.92-19.947 23.479-32.145 5.564-12.198 8.576-25.408 8.862-38.81 0.794-14.178-1.374-28.369-6.362-41.664-4.983-13.299-12.681-25.412-22.601-35.575l-41.997-41.997c-17.749-17.975-41.515-28.762-66.735-30.272-25.212-1.515-50.103 6.345-69.875 22.067l-67.098 54.549c-12.126 9.596-21.922 21.807-28.646 35.725-6.733 13.922-10.223 29.184-10.21 44.646l-7.727 137.091c-77.837 17.166-158.485 17.080-236.29-0.242l-7.24-137.574c-0.133-15.296-3.693-30.37-10.417-44.109-6.728-13.743-16.445-25.805-28.443-35.294l-68.303-54.306c-19.784-15.629-44.636-23.407-69.798-21.845-25.162 1.557-48.865 12.339-66.569 30.293l-41.272 41.267c-9.993 10.172-17.753 22.315-22.782 35.657s-7.216 27.588-6.422 41.822c0.625 24.794 10.63 48.427 27.998 66.133zM324.38 640.082c-64.131-23.521-123.311-58.8-174.503-104.026-3.129-2.906-5.639-6.413-7.38-10.308-1.742-3.9-2.679-8.111-2.756-12.378-0.179-4.736 0.631-9.455 2.376-13.862 1.745-4.403 4.388-8.397 7.761-11.725l41.997-41.993c5.887-5.973 13.766-9.574 22.135-10.103 8.369-0.538 16.642 2.031 23.241 7.202l67.581 55.031c4.024 3.166 7.285 7.194 9.542 11.789 2.256 4.599 3.449 9.638 3.491 14.758l6.517 115.615zM873.954 487.782c3.435 3.383 6.114 7.454 7.859 11.947 1.749 4.497 2.526 9.31 2.278 14.123-0.141 4.186-1.109 8.303-2.846 12.117-1.741 3.806-4.22 7.236-7.292 10.086-51.191 45.227-110.37 80.505-174.502 104.026l6.033-114.646c-0.060-5.385 1.161-10.705 3.55-15.526 2.389-4.83 5.888-9.015 10.21-12.233l67.093-54.545c6.588-5.274 14.899-7.923 23.322-7.428 8.422 0.486 16.367 4.079 22.298 10.086l41.997 41.993zM136.533 443.733v102.4l204.8 102.4-17.067-190.17-187.733-14.63zM361.067 677.482l-21.091-235.011-220.509-17.186v131.396l241.6 120.801zM153.6 535.586v-73.404l154.958 12.075 13.042 145.329-168-84zM887.467 443.733v102.4l-204.8 102.4 17.067-190.17 187.733-14.63zM662.933 677.482l241.6-120.801v-131.396l-220.51 17.186-21.090 235.011zM702.4 619.587l13.043-145.329 154.957-12.075v73.404l-168 84z" />
|
||||
<glyph unicode="" glyph-name="endcall" d="M56.608 599.509c259.577 229.21 650.596 229.502 910.47-0.002 51.861-45.814 50.441-124.888 3.81-171.518l-46.49-46.49c-42.773-42.773-110.349-46.485-157.611-9.259l-0.119 0.098-75.507 59.921c-28.122 22.327-44.523 55.881-44.894 91.571l-7.774 148.989c-83.43 17.839-169.894 17.827-253.305-0.015l-7.771-148.436c-0.371-35.686-16.757-69.218-44.86-91.541l-76.201-60.587c-47.037-37.043-114.742-33.749-157.204 9.399l-46.353 46.349c-46.624 46.622-48.063 125.709 3.808 171.52zM113.094 535.548c55.936 49.391 118.849 86.644 185.309 111.75zM298.403 647.297l-6.313-120.573v-1.118c0-10.061-4.514-19.533-12.62-25.971l-75.974-60.403c-13.627-10.684-32.295-9.195-43.57 2.308l-46.787 46.788c0 0 0 0 0 0-14.105 14.106-12.662 36.070-0.045 47.219zM725.274 647.318l6.323-121.136v-1.114c0-10.061 4.51-19.533 12.608-25.967 0.004 0-0.004 0.004 0 0l75.388-59.823c0.013-0.013 0.030-0.026 0.047-0.038 13.466-10.573 32.388-9.434 44.42 2.598l46.49 46.49c14.101 14.106 12.668 36.066 0.038 47.223-55.957 49.417-118.869 86.67-185.314 111.766z" />
|
||||
<glyph unicode="" glyph-name="endcall_filled" d="M100.399 583.121l4.586 4.582c112.306 99.284 257.033 154.083 406.93 154.083 149.901 0 294.626-54.799 406.933-154.083 9.929-9.007 17.92-19.947 23.479-32.145 5.564-12.198 8.576-25.408 8.862-38.81 0.794-14.178-1.374-28.369-6.362-41.664-4.983-13.299-12.681-25.412-22.601-35.575l-41.997-41.997c-17.749-17.975-41.515-28.762-66.735-30.272-25.212-1.515-50.103 6.345-69.875 22.067l-67.098 54.549c-12.126 9.596-21.922 21.807-28.646 35.725-6.733 13.922-10.223 29.184-10.21 44.646l-7.727 137.091c-77.837 17.166-158.485 17.080-236.29-0.242l-7.24-137.574c-0.133-15.296-3.693-30.37-10.417-44.109-6.728-13.743-16.445-25.805-28.443-35.294l-68.303-54.306c-19.784-15.629-44.636-23.407-69.798-21.845-25.162 1.557-48.865 12.339-66.569 30.293l-41.272 41.267c-9.993 10.172-17.753 22.315-22.782 35.657s-7.216 27.588-6.422 41.822c0.625 24.794 10.63 48.427 27.998 66.133z" />
|
||||
<glyph unicode="" glyph-name="enter" d="M810.667 896c0 23.564-19.102 42.667-42.667 42.667s-42.667-19.103-42.667-42.667v-418.133c0-24.602-0.034-40.482-1.020-52.574-0.947-11.588-2.556-15.885-3.631-17.997-4.092-8.030-10.615-14.554-18.645-18.645-2.112-1.075-6.409-2.684-17.997-3.631-12.092-0.986-27.972-1.020-52.574-1.020h-357.794l140.497 140.497c16.661 16.661 16.661 43.678 0 60.339-16.663 16.663-43.677 16.663-60.34 0l-213.333-213.333c-16.662-16.661-16.662-43.678 0-60.339l213.333-213.333c16.663-16.661 43.677-16.661 60.34 0 16.661 16.661 16.661 43.678 0 60.339l-140.497 140.497h359.441c22.49 0 41.894 0 57.873 1.306 16.87 1.378 33.647 4.42 49.792 12.646 24.085 12.271 43.665 31.851 55.936 55.936 8.226 16.145 11.268 32.922 12.646 49.792 1.306 15.979 1.306 35.383 1.306 57.873v419.78z" />
|
||||
<glyph unicode="" glyph-name="eye1" d="M512.159 789.333c249.485 0 426.508-211.597 426.508-277.333s-176.070-277.333-426.508-277.333c-248.531 0-426.826 211.597-426.826 277.333s179.565 277.333 426.826 277.333zM512 682.667c-94.257 0-170.667-76.41-170.667-170.667s76.41-170.667 170.667-170.667c94.257 0 170.667 76.41 170.667 170.667s-76.41 170.667-170.667 170.667zM512 576c35.346 0 64-28.654 64-64s-28.654-64-64-64c-35.346 0-64 28.654-64 64s28.654 64 64 64z" />
|
||||
<glyph unicode="" glyph-name="eye2" d="M138.557 838.763c14.323 16.37 38.393 19.16 55.959 7.288l4.247-3.274 682.667-597.333c17.734-15.517 19.531-42.472 4.014-60.206-14.323-16.37-38.393-19.16-55.959-7.288l-4.247 3.274-113.642 99.426c-58.284-27.606-125.631-45.983-199.436-45.983-248.531 0-426.826 211.597-426.826 277.333 0 36.906 56.598 119.786 149.999 185.387l-92.761 81.17c-17.734 15.517-19.531 42.472-4.014 60.206zM341.333 512c0-94.257 76.41-170.667 170.667-170.667 35.709 0 68.857 10.967 96.258 29.716l-88.514 77.414c-2.539-0.306-5.123-0.464-7.744-0.464-35.101 0-63.602 28.257-63.996 63.265l-88.501 77.445c-11.623-23.062-18.169-49.121-18.169-76.71zM512.159 789.333c249.485 0 426.508-211.597 426.508-277.333 0-27.128-29.986-79.097-82.81-130.785l-174.596 152.787c-10.435 81.068-77.75 144.323-160.633 148.45l-9.311 0.214-106.655 93.298c34.013 8.496 69.975 13.369 107.496 13.369z" />
|
||||
|
|
@ -179,6 +178,10 @@
|
|||
<glyph unicode="" glyph-name="videocamera_filled" d="M18.605 760.148c-18.602-36.507-18.602-84.299-18.602-179.881v-136.533c0-95.585 0-143.371 18.602-179.883 16.362-32.114 42.471-58.22 74.584-74.581 36.507-18.603 84.299-18.603 179.881-18.603h136.533c95.582 0 143.374 0 179.879 18.603 32.114 16.361 58.226 42.468 74.587 74.581 18.603 36.511 18.603 84.298 18.603 179.883v136.533c0 95.582 0 143.374-18.603 179.881-16.361 32.113-42.473 58.222-74.587 74.584-36.506 18.602-84.297 18.602-179.879 18.602h-136.533c-95.582 0-143.374 0-179.881-18.602-32.113-16.362-58.222-42.471-74.584-74.584zM752.742 596.089c-8.522-10.224-13.187-23.111-13.187-36.419v-115.937l147.081-176.498c27.25-32.7 80.475-13.431 80.475 29.133v431.261c0 42.567-53.225 61.836-80.475 29.136l-133.894-160.676z" />
|
||||
<glyph unicode="" glyph-name="videocamera" d="M290.134 874.667h232.161c34.347 0 62.694 0.001 85.781-1.886 23.983-1.959 46.029-6.164 66.739-16.716 32.111-16.362 58.219-42.471 74.581-74.584 10.551-20.708 14.758-42.754 16.717-66.737 1.22-14.914 1.651-32.020 1.805-51.519l83.46 80.125c48.9 46.945 129.954 12.115 129.954-55.434v-351.831c0-67.669-81.169-102.268-129.984-55.403l-83.43 80.094c-0.154-19.499-0.585-36.608-1.805-51.52-1.958-23.983-6.165-46.029-16.717-66.739-16.363-32.111-42.47-58.219-74.581-74.581-20.71-10.551-42.756-14.758-66.739-16.717-23.087-1.886-51.435-1.886-85.781-1.886h-233.925c-34.345 0-62.691 0-85.781 1.886-23.983 1.958-46.029 6.165-66.737 16.717-32.113 16.363-58.222 42.47-74.584 74.581-10.551 20.71-14.756 42.756-16.716 66.739-1.887 23.091-1.886 51.435-1.885 85.781v233.926c-0.001 34.345-0.001 62.691 1.885 85.781 1.96 23.983 6.165 46.029 16.716 66.737 16.362 32.113 42.471 58.222 74.584 74.584 20.708 10.551 42.754 14.757 66.737 16.716 23.091 1.887 51.437 1.886 85.782 1.886h1.763zM768 526.912c0-0.026 0-0.055 0-0.081v-29.662c0-0.026 0-0.055 0-0.081 0.021-11.588 4.757-22.669 13.12-30.694l114.88-110.289v311.791l-114.893-110.297c-8.354-8.021-13.086-19.089-13.107-30.686zM682.667 526.933v100.267c0 36.547-0.034 61.392-1.6 80.596-1.532 18.706-4.301 28.272-7.701 34.945-8.179 16.056-21.235 29.111-37.291 37.292-6.673 3.4-16.239 6.17-34.944 7.699-19.204 1.569-44.049 1.602-80.597 1.602h-230.399c-36.547 0-61.392-0.033-80.596-1.602-18.706-1.528-28.272-4.299-34.945-7.699-16.057-8.181-29.111-21.236-37.292-37.292-3.4-6.673-6.17-16.239-7.698-34.945-1.569-19.204-1.602-44.048-1.602-80.596v-230.4c0-36.548 0.033-61.393 1.602-80.597 1.528-18.705 4.298-28.271 7.698-34.944 8.181-16.055 21.236-29.111 37.292-37.291 6.673-3.401 16.239-6.17 34.944-7.697 19.204-1.57 44.049-1.604 80.596-1.604h230.399c36.548 0 61.393 0.034 80.597 1.604 18.705 1.527 28.271 4.297 34.944 7.697 16.055 8.179 29.111 21.235 37.291 37.291 3.401 6.673 6.17 16.239 7.701 34.944 1.566 19.204 1.6 44.049 1.6 80.597v100.271c0 0.030 0 0.064 0 0.098v29.662c0 0.034 0 0.068 0 0.102z" />
|
||||
<glyph unicode="" glyph-name="videochat" d="M332.8 938.667h-1.763c-34.345 0-62.691 0.001-85.782-1.885-23.983-1.96-46.029-6.165-66.736-16.716-32.113-16.363-58.222-42.471-74.584-74.584-10.551-20.707-14.756-42.754-16.716-66.736-1.886-23.091-1.886-51.437-1.885-85.782v-607.63c0-17.259 10.395-32.815 26.339-39.42s34.295-2.953 46.498 9.25l130.677 130.675c16.195 16.196 19.569 19.183 22.873 21.205 3.817 2.342 7.98 4.066 12.333 5.111 3.768 0.905 8.265 1.178 31.168 1.178h337.742c34.347 0 62.69 0 85.781 1.886 23.983 1.958 46.029 6.165 66.739 16.717 32.111 16.363 58.219 42.47 74.581 74.581 10.551 20.71 14.758 42.756 16.717 66.739 1.886 23.091 1.886 51.435 1.886 85.781v233.925c0 34.345 0 62.691-1.886 85.782-1.958 23.983-6.165 46.029-16.717 66.736-16.363 32.113-42.47 58.222-74.581 74.584-20.71 10.551-42.756 14.756-66.739 16.716-23.091 1.886-51.435 1.886-85.781 1.885v0h-360.162zM217.26 844.032c6.673 3.4 16.239 6.17 34.945 7.699 19.204 1.569 44.048 1.602 80.596 1.602h358.4c36.548 0 61.393-0.033 80.597-1.602 18.705-1.528 28.271-4.299 34.944-7.699 16.055-8.181 29.111-21.236 37.291-37.292 3.401-6.673 6.17-16.239 7.697-34.945 1.57-19.204 1.604-44.048 1.604-80.596v-230.4c0-36.548-0.034-61.393-1.604-80.597-1.527-18.705-4.297-28.271-7.697-34.944-8.179-16.055-21.235-29.111-37.291-37.291-6.673-3.401-16.239-6.17-34.944-7.697-19.204-1.57-44.049-1.604-80.597-1.604l-339.534 0.004c-17.361 0.013-32.667 0.030-47.535-3.541-13.061-3.136-25.546-8.307-36.999-15.326-13.036-7.987-23.849-18.82-36.114-31.108l-2.512-2.517-57.841-57.839v502.861c0 36.547 0.033 61.392 1.602 80.596 1.528 18.706 4.299 28.272 7.699 34.945 8.181 16.056 21.236 29.111 37.292 37.292zM554.667 746.667c0 23.564-19.102 42.667-42.667 42.667s-42.667-19.103-42.667-42.667v-341.333c0-23.565 19.102-42.667 42.667-42.667s42.667 19.102 42.667 42.667v341.333zM682.667 661.333c23.565 0 42.667-19.103 42.667-42.667v-85.333c0-23.565-19.102-42.667-42.667-42.667s-42.667 19.102-42.667 42.667v85.333c0 23.564 19.102 42.667 42.667 42.667zM384 661.333c0 23.564-19.102 42.667-42.667 42.667s-42.667-19.103-42.667-42.667v-170.667c0-23.565 19.103-42.667 42.667-42.667s42.667 19.102 42.667 42.667v170.667z" />
|
||||
<glyph unicode="" glyph-name="zoomin" d="M426.667 896c164.949 0 298.667-133.718 298.667-298.667 0-67.259-22.232-129.325-59.749-179.25l0.566-0.364 4.020-3.549 213.333-213.333c16.662-16.662 16.662-43.677 0-60.34-15.381-15.381-39.583-16.564-56.32-3.549l-4.020 3.549-213.333 213.333c-1.459 1.459-2.791 2.998-3.995 4.602-49.844-37.534-111.91-59.766-179.169-59.766-164.949 0-298.667 133.718-298.667 298.667s133.718 298.667 298.667 298.667zM426.667 810.667c-117.821 0-213.333-95.513-213.333-213.333s95.513-213.333 213.333-213.333c117.821 0 213.333 95.513 213.333 213.333s-95.513 213.333-213.333 213.333zM426.667 725.333c21.881 0 39.915-16.471 42.38-37.691l0.287-4.976v-42.667h42.667c23.564 0 42.667-19.103 42.667-42.667 0-21.881-16.471-39.915-37.691-42.38l-4.976-0.287h-42.667v-42.667c0-23.564-19.103-42.667-42.667-42.667-21.881 0-39.915 16.471-42.38 37.691l-0.287 4.976v42.667h-42.667c-23.564 0-42.667 19.103-42.667 42.667 0 21.881 16.471 39.915 37.691 42.38l4.976 0.287h42.667v42.667c0 23.564 19.103 42.667 42.667 42.667z" />
|
||||
<glyph unicode="" glyph-name="zoomout" d="M426.667 896c164.949 0 298.667-133.718 298.667-298.667 0-67.259-22.232-129.325-59.749-179.25l0.566-0.364 4.020-3.549 213.333-213.333c16.662-16.662 16.662-43.677 0-60.34-15.381-15.381-39.583-16.564-56.32-3.549l-4.020 3.549-213.333 213.333c-1.459 1.459-2.791 2.998-3.995 4.602-49.844-37.534-111.91-59.766-179.169-59.766-164.949 0-298.667 133.718-298.667 298.667s133.718 298.667 298.667 298.667zM426.667 810.667c-117.821 0-213.333-95.513-213.333-213.333s95.513-213.333 213.333-213.333c117.821 0 213.333 95.513 213.333 213.333s-95.513 213.333-213.333 213.333zM512 640c23.564 0 42.667-19.103 42.667-42.667 0-21.881-16.471-39.915-37.691-42.38l-4.976-0.287h-170.667c-23.564 0-42.667 19.103-42.667 42.667 0 21.881 16.471 39.915 37.691 42.38l4.976 0.287h170.667z" />
|
||||
<glyph unicode="" glyph-name="volume_down" d="M789.333 512c0 75.52-43.52 140.373-106.667 171.947v-343.467c63.147 31.147 106.667 96 106.667 171.52zM213.333 597.333v-170.667c0-23.467 19.2-42.667 42.667-42.667h128l140.373-140.373c26.88-26.88 72.96-7.68 72.96 30.293v476.587c0 37.973-46.080 57.173-72.96 30.293l-140.373-140.8h-128c-23.467 0-42.667-19.2-42.667-42.667z" />
|
||||
<glyph unicode="" glyph-name="volume_mute" d="M298.667 597.333v-170.667c0-23.467 19.2-42.667 42.667-42.667h128l140.373-140.373c26.88-26.88 72.96-7.68 72.96 30.293v476.587c0 37.973-46.080 57.173-72.96 30.293l-140.373-140.8h-128c-23.467 0-42.667-19.2-42.667-42.667z" />
|
||||
<glyph unicode="" glyph-name="volume_off" d="M154.88 869.12c-16.64-16.64-16.64-43.52 0-60.16l156.16-156.16-12.373-12.8h-128c-23.467 0-42.667-19.2-42.667-42.667v-170.667c0-23.467 19.2-42.667 42.667-42.667h128l140.373-140.373c26.88-26.88 72.96-7.68 72.96 30.293v177.92l178.347-178.347c-20.907-15.787-43.52-29.013-68.267-38.827-15.36-6.4-24.747-22.613-24.747-39.253 0-30.72 31.147-50.347 59.307-38.827 34.133 14.080 66.133 32.853 94.72 55.893l57.173-57.173c16.64-16.64 43.52-16.64 60.16 0s16.64 43.52 0 60.16l-653.227 653.653c-16.64 16.64-43.52 16.64-60.587 0zM810.667 512c0-34.987-6.4-68.693-17.493-99.84l65.28-65.28c23.893 49.92 37.547 105.813 37.547 165.12 0 163.413-102.4 303.36-246.613 358.4-25.173 9.813-52.053-9.813-52.053-36.693v-8.107c0-16.213 10.667-30.293 26.027-36.267 109.653-44.373 187.307-151.893 187.307-277.333zM439.040 780.373l-7.253-7.253 80.213-80.213v57.6c0 37.973-46.080 56.747-72.96 29.867zM704 512c0 75.52-43.52 140.373-106.667 171.947v-76.373l105.813-105.813c0.427 3.413 0.853 6.827 0.853 10.24z" />
|
||||
<glyph unicode="" glyph-name="volume_up" d="M128 597.333v-170.667c0-23.467 19.2-42.667 42.667-42.667h128l140.373-140.373c26.88-26.88 72.96-7.68 72.96 30.293v476.587c0 37.973-46.080 57.173-72.96 30.293l-140.373-140.8h-128c-23.467 0-42.667-19.2-42.667-42.667zM704 512c0 75.52-43.52 140.373-106.667 171.947v-343.467c63.147 31.147 106.667 96 106.667 171.52zM597.333 834.133v-8.533c0-16.213 10.667-30.293 25.6-36.267 110.080-43.947 187.733-151.893 187.733-277.333s-77.653-233.387-187.733-277.333c-15.36-5.973-25.6-20.053-25.6-36.267v-8.533c0-26.88 26.88-45.653 51.627-36.267 144.64 55.040 247.040 194.56 247.040 358.4s-102.4 303.36-247.040 358.4c-24.747 9.813-51.627-9.387-51.627-36.267z" />
|
||||
<glyph unicode="" glyph-name="zoomin" d="M426.667 896c164.949 0 298.667-133.718 298.667-298.667 0-67.259-22.232-129.325-59.749-179.25l0.566-0.364 4.020-3.549 213.333-213.333c16.662-16.662 16.662-43.677 0-60.34-15.381-15.381-39.583-16.564-56.32-3.549l-4.020 3.549-213.333 213.333c-1.459 1.459-2.791 2.998-3.995 4.602-49.844-37.534-111.91-59.766-179.169-59.766-164.949 0-298.667 133.718-298.667 298.667s133.718 298.667 298.667 298.667zM426.667 810.667c-117.821 0-213.333-95.513-213.333-213.333s95.513-213.333 213.333-213.333c117.821 0 213.333 95.513 213.333 213.333s-95.513 213.333-213.333 213.333zM426.667 725.333c21.881 0 39.915-16.471 42.38-37.691l0.287-4.976v-42.667h42.667c23.564 0 42.667-19.103 42.667-42.667 0-21.881-16.471-39.915-37.691-42.38l-4.976-0.287h-42.667v-42.667c0-23.564-19.103-42.667-42.667-42.667-21.881 0-39.915 16.471-42.38 37.691l-0.287 4.976v42.667h-42.667c-23.564 0-42.667 19.103-42.667 42.667 0 21.881 16.471 39.915 37.691 42.38l4.976 0.287h42.667v42.667c0 23.564 19.103 42.667 42.667 42.667z" />
|
||||
<glyph unicode="" glyph-name="zoomout" d="M426.667 896c164.949 0 298.667-133.718 298.667-298.667 0-67.259-22.232-129.325-59.749-179.25l0.566-0.364 4.020-3.549 213.333-213.333c16.662-16.662 16.662-43.677 0-60.34-15.381-15.381-39.583-16.564-56.32-3.549l-4.020 3.549-213.333 213.333c-1.459 1.459-2.791 2.998-3.995 4.602-49.844-37.534-111.91-59.766-179.169-59.766-164.949 0-298.667 133.718-298.667 298.667s133.718 298.667 298.667 298.667zM426.667 810.667c-117.821 0-213.333-95.513-213.333-213.333s95.513-213.333 213.333-213.333c117.821 0 213.333 95.513 213.333 213.333s-95.513 213.333-213.333 213.333zM512 640c23.564 0 42.667-19.103 42.667-42.667 0-21.881-16.471-39.915-37.691-42.38l-4.976-0.287h-170.667c-23.564 0-42.667 19.103-42.667 42.667 0 21.881 16.471 39.915 37.691 42.38l4.976 0.287h170.667z" />
|
||||
</font></defs></svg>
|
||||
|
Before Width: | Height: | Size: 193 KiB After Width: | Height: | Size: 193 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -191,8 +191,9 @@ export class MediaProgressLine extends RangeSelector {
|
|||
}
|
||||
|
||||
export class VolumeSelector extends RangeSelector {
|
||||
private static ICONS = ['volume_off', 'volume_mute', 'volume_down', 'volume_up'];
|
||||
public btn: HTMLElement;
|
||||
protected volumeSvg: HTMLElement;
|
||||
protected icon: HTMLSpanElement;
|
||||
|
||||
constructor(protected listenerSetter: ListenerSetter, protected vertical = false) {
|
||||
super({
|
||||
|
|
@ -218,18 +219,15 @@ export class VolumeSelector extends RangeSelector {
|
|||
} */
|
||||
});
|
||||
|
||||
this.btn = document.createElement('div');
|
||||
this.btn.classList.add('player-volume');
|
||||
const className = 'player-volume';
|
||||
const btn = this.btn = document.createElement('div');
|
||||
btn.classList.add('btn-icon', className);
|
||||
const icon = this.icon = document.createElement('span');
|
||||
icon.classList.add(className + '__icon');
|
||||
|
||||
this.btn.innerHTML = `
|
||||
<svg class="player-volume__icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true"></svg>
|
||||
`;
|
||||
this.btn.classList.add('btn-icon');
|
||||
this.volumeSvg = this.btn.firstElementChild as HTMLElement;
|
||||
btn.append(icon, this.container);
|
||||
|
||||
this.btn.append(this.container);
|
||||
|
||||
attachClickEvent(this.volumeSvg, this.onMuteClick, {listenerSetter: this.listenerSetter});
|
||||
attachClickEvent(icon, this.onMuteClick, {listenerSetter: this.listenerSetter});
|
||||
this.listenerSetter.add(rootScope)('media_playback_params', this.setVolume);
|
||||
|
||||
this.setVolume();
|
||||
|
|
@ -244,19 +242,19 @@ export class VolumeSelector extends RangeSelector {
|
|||
// const volume = video.volume;
|
||||
const {volume, muted} = appMediaPlaybackController;
|
||||
let d: string;
|
||||
let iconIndex: number;
|
||||
if(!volume || muted) {
|
||||
d = `M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z`;
|
||||
iconIndex = 0;
|
||||
} else if(volume > .5) {
|
||||
d = `M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z`;
|
||||
iconIndex = 3;
|
||||
} else if(volume > 0 && volume < .25) {
|
||||
d = `M7 9v6h4l5 5V4l-5 5H7z`;
|
||||
iconIndex = 1;
|
||||
} else {
|
||||
d = `M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z`;
|
||||
iconIndex = 2;
|
||||
}
|
||||
|
||||
try {
|
||||
this.volumeSvg.innerHTML = `<path d="${d}"></path>`;
|
||||
} catch(err) {}
|
||||
VolumeSelector.ICONS.forEach(icon => this.icon.classList.remove('tgico-' + icon));
|
||||
this.icon.classList.add('tgico-' + VolumeSelector.ICONS[iconIndex]);
|
||||
|
||||
if(!this.mousedown) {
|
||||
this.setProgress(muted ? 0 : volume);
|
||||
|
|
|
|||
|
|
@ -711,16 +711,10 @@
|
|||
}
|
||||
|
||||
.player-volume__icon {
|
||||
fill: var(--secondary-text-color);
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.active .player-volume__icon {
|
||||
fill: var(--primary-color);
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
&-container {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -216,29 +216,55 @@
|
|||
}
|
||||
|
||||
.player-volume {
|
||||
margin: 0 .125rem 0 .625rem;
|
||||
--icon-size: 2.25rem;
|
||||
--icon-margin-right: .5rem;
|
||||
--selector-size: 50px;
|
||||
--selector-thumb-size: .75rem;
|
||||
--hide-width: var(--icon-size);
|
||||
--show-width: calc(var(--icon-size) + var(--icon-margin-right) + var(--selector-size) + var(--selector-thumb-size) * .75);
|
||||
// margin: 0 .125rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: var(--hide-width);
|
||||
overflow: hidden;
|
||||
|
||||
@include animation-level(2) {
|
||||
transition: width var(--layer-transition);
|
||||
}
|
||||
|
||||
html.is-touch & {
|
||||
// margin-left: .125rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
html:not(.is-touch) & {
|
||||
& + .time {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include hover() {
|
||||
width: var(--show-width);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
fill: #fff;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
margin-right: .5rem;
|
||||
color: #fff;
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
margin-right: var(--icon-margin-right);
|
||||
cursor: pointer;
|
||||
padding: .375rem;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
--color: #fff;
|
||||
--thumb-size: var(--selector-thumb-size);
|
||||
--height: 4px;
|
||||
margin: 0;
|
||||
width: 50px;
|
||||
--thumb-size: 15px;
|
||||
width: var(--selector-size);
|
||||
min-width: var(--selector-size);
|
||||
|
||||
// https://stackoverflow.com/a/4816050
|
||||
html.is-ios & {
|
||||
|
|
|
|||
|
|
@ -118,23 +118,20 @@
|
|||
&-name {
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
font-size: var(--font-size-16);
|
||||
line-height: var(--line-height-16);
|
||||
}
|
||||
|
||||
&-size {
|
||||
white-space: nowrap;
|
||||
color: var(--secondary-text-color);
|
||||
font-size: .875rem;
|
||||
font-size: var(--font-size-14);
|
||||
line-height: var(--line-height-14);
|
||||
//padding-right: 32px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-name,
|
||||
&-size {
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
.preloader-container {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@
|
|||
@font-face {
|
||||
font-family: "#{$tgico-font-family}";
|
||||
src:
|
||||
url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?xxkozq') format('truetype'),
|
||||
url('#{$tgico-font-path}/#{$tgico-font-family}.woff?xxkozq') format('woff'),
|
||||
url('#{$tgico-font-path}/#{$tgico-font-family}.svg?xxkozq#tgico') format('svg');
|
||||
url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?oxpaus') format('truetype'),
|
||||
url('#{$tgico-font-path}/#{$tgico-font-family}.woff?oxpaus') format('woff'),
|
||||
url('#{$tgico-font-path}/#{$tgico-font-family}.svg?oxpaus#tgico') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
|
|
@ -332,11 +332,6 @@
|
|||
content: $tgico-endcall_filled;
|
||||
}
|
||||
}
|
||||
.tgico-endcall {
|
||||
&:before {
|
||||
content: $tgico-endcall;
|
||||
}
|
||||
}
|
||||
.tgico-enter {
|
||||
&:before {
|
||||
content: $tgico-enter;
|
||||
|
|
@ -897,6 +892,26 @@
|
|||
content: $tgico-videochat;
|
||||
}
|
||||
}
|
||||
.tgico-volume_down {
|
||||
&:before {
|
||||
content: $tgico-volume_down;
|
||||
}
|
||||
}
|
||||
.tgico-volume_mute {
|
||||
&:before {
|
||||
content: $tgico-volume_mute;
|
||||
}
|
||||
}
|
||||
.tgico-volume_off {
|
||||
&:before {
|
||||
content: $tgico-volume_off;
|
||||
}
|
||||
}
|
||||
.tgico-volume_up {
|
||||
&:before {
|
||||
content: $tgico-volume_up;
|
||||
}
|
||||
}
|
||||
.tgico-zoomin {
|
||||
&:before {
|
||||
content: $tgico-zoomin;
|
||||
|
|
|
|||
|
|
@ -78,7 +78,6 @@ $tgico-eats: "\e937";
|
|||
$tgico-edit: "\e938";
|
||||
$tgico-email: "\e939";
|
||||
$tgico-endcall_filled: "\e93a";
|
||||
$tgico-endcall: "\e93b";
|
||||
$tgico-enter: "\e93c";
|
||||
$tgico-eye1: "\e93d";
|
||||
$tgico-eye2: "\e93e";
|
||||
|
|
@ -191,5 +190,9 @@ $tgico-username: "\e9a8";
|
|||
$tgico-videocamera_filled: "\e9a9";
|
||||
$tgico-videocamera: "\e9aa";
|
||||
$tgico-videochat: "\e9ab";
|
||||
$tgico-zoomin: "\e9ac";
|
||||
$tgico-zoomout: "\e9ad";
|
||||
$tgico-volume_down: "\e9ac";
|
||||
$tgico-volume_mute: "\e9ad";
|
||||
$tgico-volume_off: "\e9ae";
|
||||
$tgico-volume_up: "\e9af";
|
||||
$tgico-zoomin: "\e9b0";
|
||||
$tgico-zoomout: "\e9b1";
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user