diff options
author | lonkaars <loek@pipeframe.xyz> | 2021-05-24 15:23:04 +0200 |
---|---|---|
committer | lonkaars <loek@pipeframe.xyz> | 2021-05-24 15:23:04 +0200 |
commit | 7469afab31ebfdd2d447c351d615b7c1d8e42c2e (patch) | |
tree | 3555df0abe4c1e207dc48b3657bf903c220e446e | |
parent | 79a7317bf18db757d9b9ec38021635c1b4cf31dc (diff) |
tool selection and play/skip animation
-rw-r--r-- | components/play-skip.shapeshifter | 83 | ||||
-rw-r--r-- | components/play-skip.tsx | 253 | ||||
-rw-r--r-- | components/play-skip_60fps.css | 30 | ||||
-rw-r--r-- | package.json | 1 | ||||
-rw-r--r-- | pages/_app.tsx | 1 | ||||
-rw-r--r-- | pages/editor.tsx | 52 | ||||
-rw-r--r-- | pages/present.tsx | 14 | ||||
-rw-r--r-- | styles/editor.css | 21 | ||||
-rw-r--r-- | styles/keyframes.css | 7 | ||||
-rw-r--r-- | yarn.lock | 176 |
10 files changed, 525 insertions, 113 deletions
diff --git a/components/play-skip.shapeshifter b/components/play-skip.shapeshifter new file mode 100644 index 0000000..2bd84a1 --- /dev/null +++ b/components/play-skip.shapeshifter @@ -0,0 +1,83 @@ +{ + "version": 1, + "layers": { + "vectorLayer": { + "id": "76", + "name": "vector", + "type": "vector", + "width": 24, + "height": 24, + "children": [ + { + "id": "24", + "name": "bottom", + "type": "path", + "pathData": "M 16.8 11.4 C 17.131 11.842 17.042 12.469 16.6 12.8 L 12.6 15.8 C 12.158 16.131 11.531 16.042 11.2 15.6 C 10.869 15.158 10.958 14.531 11.4 14.2 L 15.4 11.2 C 15.842 10.869 16.469 10.958 16.8 11.4 Z", + "fillColor": "#ffffff", + "strokeWidth": 1, + "fillType": "evenOdd" + }, + { + "id": "46", + "name": "top", + "type": "path", + "pathData": "M 11.2 8.4 C 11.531 7.958 12.158 7.869 12.6 8.2 L 16.6 11.2 C 17.042 11.531 17.131 12.158 16.8 12.6 C 16.469 13.042 15.842 13.131 15.4 12.8 L 11.4 9.8 C 10.958 9.469 10.869 8.842 11.2 8.4 Z", + "fillColor": "#ffffff", + "strokeWidth": 1, + "fillType": "evenOdd" + }, + { + "id": "74", + "name": "triangle", + "type": "path", + "pathData": "M 9.187 17.886 L 17.573 12.761 C 17.838 12.599 18 12.311 18 12 C 18 11.689 17.838 11.401 17.573 11.239 L 9.187 6.114 C 9.065 6.04 8.924 6 8.78 6 C 8.349 6 8 6.349 8 6.78 L 8 17.22 C 8 17.651 8.349 18 8.78 18 C 8.924 18 9.065 17.96 9.187 17.886 Z", + "fillColor": "#ffffff", + "strokeWidth": 1 + } + ] + }, + "hiddenLayerIds": [] + }, + "timeline": { + "animation": { + "id": "2", + "name": "anim", + "duration": 300, + "blocks": [ + { + "id": "164", + "layerId": "24", + "propertyName": "pathData", + "startTime": 0, + "endTime": 300, + "interpolator": "FAST_OUT_SLOW_IN", + "type": "path", + "fromValue": "M 16.8 11.4 C 17.131 11.842 17.042 12.469 16.6 12.8 L 12.6 15.8 C 12.158 16.131 11.531 16.042 11.2 15.6 C 10.869 15.158 10.958 14.531 11.4 14.2 L 15.4 11.2 C 15.842 10.869 16.469 10.958 16.8 11.4 Z", + "toValue": "M 17 11 C 17.552 11 18 11.448 18 12 L 18 17 C 18 17.552 17.552 18 17 18 C 16.448 18 16 17.552 16 17 L 16 12 C 16 11.448 16.448 11 17 11 Z" + }, + { + "id": "3557", + "layerId": "46", + "propertyName": "pathData", + "startTime": 0, + "endTime": 300, + "interpolator": "FAST_OUT_SLOW_IN", + "type": "path", + "fromValue": "M 11.2 8.4 C 11.531 7.958 12.158 7.869 12.6 8.2 L 16.6 11.2 C 17.042 11.531 17.131 12.158 16.8 12.6 C 16.469 13.042 15.842 13.131 15.4 12.8 L 11.4 9.8 C 10.958 9.469 10.869 8.842 11.2 8.4 Z", + "toValue": "M 17 6 C 17.552 6 18 6.448 18 7 L 18 12 C 18 12.552 17.552 13 17 13 C 16.448 13 16 12.552 16 12 L 16 7 C 16 6.448 16.448 6 17 6 Z" + }, + { + "id": "6889", + "layerId": "74", + "propertyName": "pathData", + "startTime": 0, + "endTime": 300, + "interpolator": "FAST_OUT_SLOW_IN", + "type": "path", + "fromValue": "M 9.187 17.886 L 17.573 12.761 C 17.838 12.599 18 12.311 18 12 C 18 11.689 17.838 11.401 17.573 11.239 L 9.187 6.114 C 9.065 6.04 8.924 6 8.78 6 C 8.349 6 8 6.349 8 6.78 L 8 17.22 C 8 17.651 8.349 18 8.78 18 C 8.924 18 9.065 17.96 9.187 17.886 Z", + "toValue": "M 7.191 16.877 L 13.579 12.77 C 13.841 12.602 14 12.312 14 12 C 14 11.688 13.841 11.398 13.579 11.23 L 7.191 7.123 C 7.066 7.043 6.921 7 6.773 7 C 6.346 7 6 7.346 6 7.773 L 6 16.227 C 6 16.654 6.346 17 6.773 17 C 6.921 17 7.066 16.957 7.191 16.877 Z" + } + ] + } + } +}
\ No newline at end of file diff --git a/components/play-skip.tsx b/components/play-skip.tsx new file mode 100644 index 0000000..8493710 --- /dev/null +++ b/components/play-skip.tsx @@ -0,0 +1,253 @@ +export default function PlaySkipIconAni() { + return <div className='shapeshifter play-pause ani'> + <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 456 24' width='456' height='24'> + <g> + <path + d='M16.8 11.4c.331.442.242 1.069-.2 1.4l-4 3c-.442.331-1.069.242-1.4-.2-.331-.442-.242-1.069.2-1.4l4-3c.442-.331 1.069-.242 1.4.2z' + fill-rule='evenodd' + /> + <path + d='M11.2 8.4c.331-.442.958-.531 1.4-.2l4 3c.442.331.531.958.2 1.4-.331.442-.958.531-1.4.2l-4-3c-.442-.331-.531-.958-.2-1.4z' + fill-rule='evenodd' + /> + <path + d='M9.187 17.886l8.386-5.125c.265-.162.427-.45.427-.761s-.162-.599-.427-.761L9.187 6.114C9.065 6.04 8.924 6 8.78 6c-.431 0-.78.349-.78.78v10.44c0 .431.349.78.78.78.144 0 .285-.04.407-.114z' + /> + </g> + <g> + <path + d='M40.801 11.397c.333.439.248 1.065-.191 1.397l-3.971 3.015c-.439.332-1.065.247-1.397-.192-.333-.439-.248-1.064.191-1.397l3.971-3.014c.439-.333 1.065-.248 1.397.191z' + fill-rule='evenodd' + /> + <path + d='M35.242 8.383c.332-.439.958-.524 1.397-.192l3.971 3.015c.439.332.524.958.191 1.397-.332.439-.958.524-1.397.191L35.433 9.78c-.439-.333-.524-.958-.191-1.397z' + fill-rule='evenodd' + /> + <path + d='M33.173 17.879l8.371-5.118c.265-.162.427-.45.427-.761s-.162-.599-.427-.761l-8.371-5.118c-.122-.074-.263-.114-.407-.114-.431 0-.78.349-.78.78v10.426c0 .431.349.78.78.78.144 0 .285-.04.407-.114z' + /> + </g> + <g> + <path + d='M64.807 11.387c.338.427.266 1.049-.161 1.387l-3.869 3.065c-.427.339-1.049.267-1.387-.16-.338-.428-.267-1.049.161-1.387l3.869-3.066c.427-.338 1.048-.267 1.387.161z' + fill-rule='evenodd' + /> + <path + d='M59.39 8.321c.338-.427.96-.499 1.387-.16l3.869 3.065c.427.338.499.96.161 1.387-.339.428-.96.499-1.387.161l-3.869-3.066c-.428-.338-.499-.959-.161-1.387z' + fill-rule='evenodd' + /> + <path + d='M57.122 17.853l8.32-5.092c.265-.162.427-.45.427-.761s-.162-.599-.427-.761l-8.32-5.092c-.123-.074-.264-.114-.408-.114-.431 0-.78.349-.78.78v10.374c0 .431.349.78.78.78.144 0 .285-.04.408-.114z' + /> + </g> + <g> + <path + d='M88.817 11.366c.35.404.307 1.016-.098 1.366l-3.659 3.17c-.405.35-1.017.307-1.366-.098-.35-.404-.307-1.016.097-1.366l3.66-3.17c.404-.35 1.016-.306 1.366.098z' + fill-rule='evenodd' + /> + <path + d='M83.694 8.196c.349-.405.961-.448 1.366-.098l3.659 3.17c.405.35.448.962.098 1.366-.35.404-.962.448-1.366.098l-3.66-3.17c-.404-.35-.447-.962-.097-1.366z' + fill-rule='evenodd' + /> + <path + d='M81.017 17.8l8.216-5.038c.265-.163.427-.451.427-.762s-.162-.599-.427-.762L81.017 6.2c-.122-.075-.263-.115-.408-.115-.43 0-.779.349-.779.78v10.27c0 .431.349.78.779.78.145 0 .286-.04.408-.115z' + /> + </g> + <g> + <path + d='M112.835 11.33c.37.365.375.96.01 1.33l-3.299 3.35c-.365.37-.96.375-1.33.01-.37-.364-.375-.96-.01-1.33l3.299-3.35c.365-.37.96-.375 1.33-.01z' + fill-rule='evenodd' + /> + <path + d='M108.216 7.98c.37-.365.965-.36 1.33.01l3.299 3.35c.365.37.36.965-.01 1.33-.37.365-.965.36-1.33-.01l-3.299-3.35c-.365-.37-.36-.966.01-1.33z' + fill-rule='evenodd' + /> + <path + d='M104.837 17.709l8.036-4.946c.265-.163.426-.452.426-.763s-.161-.6-.426-.763l-8.036-4.946c-.122-.075-.264-.116-.409-.116-.43 0-.778.349-.778.779v10.092c0 .43.348.779.778.779.145 0 .287-.041.409-.116z' + /> + </g> + <g> + <path + d='M136.861 11.277c.399.306.475.878.169 1.277l-2.771 3.615c-.307.398-.879.474-1.278.168-.398-.306-.474-.878-.168-1.277l2.771-3.614c.307-.399.879-.475 1.277-.169z' + fill-rule='evenodd' + /> + <path + d='M132.981 7.663c.399-.306.971-.23 1.278.168l2.771 3.615c.306.399.23.971-.169 1.277-.398.306-.97.23-1.277-.169l-2.771-3.614c-.306-.399-.23-.971.168-1.277z' + fill-rule='evenodd' + /> + <path + d='M128.574 17.576l7.772-4.812c.264-.164.425-.453.425-.764s-.161-.6-.425-.764l-7.772-4.812c-.123-.076-.265-.117-.41-.117-.43 0-.778.348-.778.778v9.83c0 .43.348.778.778.778.145 0 .287-.041.41-.117z' + /> + </g> + <g> + <path + d='M160.891 11.217c.433.24.589.785.349 1.217l-2.171 3.915c-.24.432-.785.588-1.217.348-.432-.239-.589-.785-.349-1.217l2.171-3.914c.24-.432.785-.589 1.217-.349z' + fill-rule='evenodd' + /> + <path + d='M157.852 7.303c.432-.24.977-.084 1.217.348l2.171 3.915c.24.432.084.977-.349 1.217-.432.24-.977.083-1.217-.349l-2.171-3.914c-.24-.432-.083-.978.349-1.217z' + fill-rule='evenodd' + /> + <path + d='M152.274 17.425l7.473-4.66c.263-.165.424-.454.424-.765s-.161-.6-.424-.765l-7.473-4.66c-.123-.076-.266-.118-.412-.118-.429 0-.777.348-.777.777v9.532c0 .429.348.777.777.777.146 0 .289-.042.412-.118z' + /> + </g> + <g> + <path + d='M184.918 11.164c.462.181.69.702.509 1.164l-1.639 4.18c-.181.462-.702.69-1.164.509-.461-.181-.689-.702-.508-1.164l1.638-4.181c.181-.461.703-.689 1.164-.508z' + fill-rule='evenodd' + /> + <path + d='M182.624 6.983c.462-.181.983.047 1.164.509l1.639 4.18c.181.462-.047.983-.509 1.164-.461.181-.983-.047-1.164-.508l-1.638-4.181c-.181-.462.047-.983.508-1.164z' + fill-rule='evenodd' + /> + <path + d='M176.009 17.29l7.206-4.524c.263-.165.423-.454.423-.766s-.16-.601-.423-.766l-7.206-4.524c-.124-.078-.268-.12-.414-.12-.429 0-.776.348-.776.776v9.268c0 .428.347.776.776.776.146 0 .29-.042.414-.12z' + /> + </g> + <g> + <path + d='M208.939 11.122c.485.135.769.637.634 1.122l-1.219 4.39c-.134.485-.637.769-1.122.635-.484-.135-.769-.638-.634-1.122l1.219-4.391c.135-.484.637-.769 1.122-.634z' + fill-rule='evenodd' + /> + <path + d='M207.232 6.731c.485-.134.988.15 1.122.635l1.219 4.39c.135.485-.149.987-.634 1.122-.485.135-.987-.15-1.122-.634l-1.219-4.391c-.135-.484.15-.987.634-1.122z' + fill-rule='evenodd' + /> + <path + d='M199.799 17.185l6.997-4.418c.263-.166.423-.455.423-.767s-.16-.601-.423-.767l-6.997-4.418c-.124-.078-.268-.12-.414-.12-.429 0-.775.347-.775.775v9.06c0 .428.346.775.775.775.146 0 .29-.042.414-.12z' + /> + </g> + <g> + <path + d='M232.955 11.09c.503.099.83.587.731 1.09l-.898 4.551c-.099.502-.587.83-1.09.73-.502-.099-.83-.587-.73-1.089l.897-4.552c.1-.502.588-.829 1.09-.73z' + fill-rule='evenodd' + /> + <path + d='M231.698 6.539c.503-.1.991.228 1.09.73l.898 4.551c.099.503-.228.991-.731 1.09-.502.099-.99-.228-1.09-.73l-.897-4.552c-.1-.502.228-.99.73-1.089z' + fill-rule='evenodd' + /> + <path + d='M223.639 17.103l6.836-4.335c.263-.167.423-.456.423-.768s-.16-.601-.423-.768l-6.836-4.335c-.124-.079-.268-.121-.416-.121-.427 0-.774.346-.774.774v8.9c0 .428.347.774.774.774.148 0 .292-.042.416-.121z' + /> + </g> + <g> + <path + d='M256.967 11.065c.516.072.877.549.805 1.065l-.651 4.675c-.072.516-.55.876-1.066.804-.516-.072-.876-.549-.804-1.065l.651-4.674c.072-.516.549-.877 1.065-.805z' + fill-rule='evenodd' + /> + <path + d='M256.055 6.391c.516-.072.994.288 1.066.804l.651 4.675c.072.516-.289.993-.805 1.065-.516.072-.993-.289-1.065-.805l-.651-4.674c-.072-.516.288-.993.804-1.065z' + fill-rule='evenodd' + /> + <path + d='M247.516 17.041l6.713-4.272c.263-.167.422-.457.422-.769s-.159-.602-.422-.769l-6.713-4.272c-.124-.079-.269-.122-.416-.122-.428 0-.774.347-.774.774v8.778c0 .427.346.774.774.774.147 0 .292-.043.416-.122z' + /> + </g> + <g> + <path + d='M280.977 11.046c.526.051.912.52.861 1.046l-.462 4.769c-.051.527-.52.913-1.046.862-.527-.051-.913-.52-.861-1.046l.462-4.769c.051-.527.519-.913 1.046-.862z' + fill-rule='evenodd' + /> + <path + d='M280.33 6.277c.526-.051.995.335 1.046.862l.462 4.769c.051.526-.335.995-.861 1.046-.527.051-.995-.335-1.046-.862l-.462-4.769c-.052-.526.334-.995.861-1.046z' + fill-rule='evenodd' + /> + <path + d='M271.422 16.994l6.618-4.225c.263-.167.422-.457.422-.769s-.159-.602-.422-.769l-6.618-4.225c-.125-.079-.27-.122-.417-.122-.428 0-.774.347-.774.774v8.684c0 .427.346.774.774.774.147 0 .292-.043.417-.122z' + /> + </g> + <g> + <path + d='M304.984 11.032c.535.035.94.497.905 1.031l-.317 4.842c-.035.534-.497.94-1.032.905-.534-.035-.939-.497-.904-1.032l.316-4.841c.035-.535.498-.94 1.032-.905z' + fill-rule='evenodd' + /> + <path + d='M304.54 6.19c.535-.035.997.371 1.032.905l.317 4.842c.035.534-.37.996-.905 1.031-.534.035-.997-.37-1.032-.905l-.316-4.841c-.035-.535.37-.997.904-1.032z' + fill-rule='evenodd' + /> + <path + d='M295.349 16.957l6.546-4.188c.263-.167.422-.457.422-.769s-.159-.602-.422-.769l-6.546-4.188c-.125-.079-.269-.122-.417-.122-.427 0-.774.346-.774.773v8.612c0 .427.347.773.774.773.148 0 .292-.043.417-.122z' + /> + </g> + <g> + <path + d='M328.99 11.021c.54.023.961.48.938 1.02l-.207 4.897c-.023.541-.48.961-1.021.938-.54-.023-.96-.48-.938-1.021l.207-4.896c.023-.541.48-.961 1.021-.938z' + fill-rule='evenodd' + /> + <path + d='M328.7 6.124c.541-.023.998.397 1.021.938l.207 4.897c.023.54-.398.997-.938 1.02-.541.023-.998-.397-1.021-.938l-.207-4.896c-.022-.541.398-.998.938-1.021z' + fill-rule='evenodd' + /> + <path + d='M319.294 16.929l6.491-4.159c.262-.168.422-.458.422-.77s-.16-.602-.422-.77l-6.491-4.159c-.125-.08-.27-.123-.417-.123-.428 0-.774.346-.774.774v8.556c0 .428.346.774.774.774.147 0 .292-.043.417-.123z' + /> + </g> + <g> + <path + d='M352.994 11.012c.545.014.976.468.962 1.013l-.125 4.938c-.013.545-.467.976-1.012.962-.545-.014-.976-.467-.963-1.012l.125-4.938c.014-.545.468-.976 1.013-.963z' + fill-rule='evenodd' + /> + <path + d='M352.819 6.075c.545-.014.999.417 1.012.962l.125 4.938c.014.545-.417.999-.962 1.013-.545.013-.999-.418-1.013-.963l-.125-4.938c-.013-.545.418-.998.963-1.012z' + fill-rule='evenodd' + /> + <path + d='M343.253 16.908l6.451-4.138c.262-.168.421-.458.421-.77s-.159-.602-.421-.77l-6.451-4.138c-.125-.08-.269-.123-.417-.123-.427 0-.774.346-.774.773v8.516c0 .427.347.773.774.773.148 0 .292-.043.417-.123z' + /> + </g> + <g> + <path + d='M376.997 11.007c.548.007.987.458.98 1.006l-.067 4.967c-.007.548-.458.987-1.007.98-.548-.007-.987-.458-.98-1.007l.067-4.966c.007-.549.458-.988 1.007-.98z' + fill-rule='evenodd' + /> + <path + d='M376.903 6.04c.549-.007 1 .432 1.007.98l.067 4.967c.007.548-.432.999-.98 1.006-.549.008-1-.431-1.007-.98l-.067-4.966c-.007-.549.432-1 .98-1.007z' + fill-rule='evenodd' + /> + <path + d='M367.224 16.894l6.421-4.124c.263-.168.422-.458.422-.77s-.159-.602-.422-.77l-6.421-4.124c-.125-.08-.27-.123-.418-.123-.427 0-.773.346-.773.773v8.488c0 .427.346.773.773.773.148 0 .293-.043.418-.123z' + /> + </g> + <g> + <path + d='M400.999 11.003c.55.003.994.452.991 1.003l-.028 4.986c-.003.55-.452.994-1.003.991-.55-.003-.994-.452-.991-1.003l.028-4.986c.003-.55.452-.994 1.003-.991z' + fill-rule='evenodd' + /> + <path + d='M400.959 6.017c.551-.003 1 .441 1.003.991l.028 4.986c.003.551-.441 1-.991 1.003-.551.003-1-.441-1.003-.991l-.028-4.986c-.003-.551.441-1 .991-1.003z' + fill-rule='evenodd' + /> + <path + d='M391.205 16.884l6.402-4.114c.262-.168.421-.458.421-.77s-.159-.602-.421-.77l-6.402-4.114c-.125-.08-.27-.123-.418-.123-.427 0-.773.346-.773.773v8.468c0 .427.346.773.773.773.148 0 .293-.043.418-.123z' + /> + </g> + <g> + <path + d='M425 11.001c.551 0 .998.449.998 1l-.007 4.997c-.001.552-.449.999-1.001.998-.551-.001-.998-.449-.998-1.001l.007-4.996c.001-.552.449-.999 1.001-.998z' + fill-rule='evenodd' + /> + <path + d='M424.99 6.004c.552-.001 1 .446 1.001.998l.007 4.997c0 .551-.447 1-.998 1-.552.001-1-.446-1.001-.998l-.007-4.996c0-.552.447-1 .998-1.001z' + fill-rule='evenodd' + /> + <path + d='M415.194 16.879l6.392-4.109c.262-.168.421-.458.421-.77s-.159-.602-.421-.77l-6.392-4.109c-.125-.08-.27-.123-.418-.123-.427 0-.773.346-.773.773v8.458c0 .427.346.773.773.773.148 0 .293-.043.418-.123z' + /> + </g> + <g> + <path + d='M449 11c.552 0 1 .448 1 1v5c0 .552-.448 1-1 1s-1-.448-1-1v-5c0-.552.448-1 1-1z' + fill-rule='evenodd' + /> + <path + d='M449 6c.552 0 1 .448 1 1v5c0 .552-.448 1-1 1s-1-.448-1-1V7c0-.552.448-1 1-1z' + fill-rule='evenodd' + /> + <path + d='M439.191 16.877l6.388-4.107c.262-.168.421-.458.421-.77s-.159-.602-.421-.77l-6.388-4.107c-.125-.08-.27-.123-.418-.123-.427 0-.773.346-.773.773v8.454c0 .427.346.773.773.773.148 0 .293-.043.418-.123z' + /> + </g> + </svg> + </div>; +} diff --git a/components/play-skip_60fps.css b/components/play-skip_60fps.css new file mode 100644 index 0000000..aae3a65 --- /dev/null +++ b/components/play-skip_60fps.css @@ -0,0 +1,30 @@ +@keyframes skip { + 0% { left: 0px; } + 100% { left: -432px; } +} + +@keyframes play { + 0% { left: -432px; } + 100% { left: 0px; } +} + +.shapeshifter { + width: 24px; + height: 24px; + overflow: hidden; + position: relative; + line-height: 0; +} + +.shapeshifter svg { + position: absolute; + fill: currentColor; + left: 0; + + animation-name: var(--ani-state); + animation-fill-mode: both; + animation-duration: 200ms; + animation-timing-function: steps(18); + animation-play-state: running; +} + diff --git a/package.json b/package.json index e54d8a8..a8438b3 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "dependencies": { "@material-ui/core": "^4.11.4", "@material-ui/icons": "^4.11.2", + "@material-ui/lab": "^4.0.0-alpha.58", "@mdi/js": "^5.9.55", "@mdi/react": "^1.5.0", "ajv": "^8.3.0", diff --git a/pages/_app.tsx b/pages/_app.tsx index 7bb0076..96182ab 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,5 +1,6 @@ import Head from 'next/head'; +import '../components/play-skip_60fps.css'; import '../styles/colors.css'; import '../styles/editor.css'; import '../styles/globals.css'; diff --git a/pages/editor.tsx b/pages/editor.tsx index 3313e31..2deb6f5 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -7,21 +7,22 @@ import { TimedVideoPlayer } from './present'; import AppBar from '@material-ui/core/AppBar'; import Button from '@material-ui/core/Button'; -import ButtonGroup from '@material-ui/core/ButtonGroup'; import Fab from '@material-ui/core/Fab'; import Slider from '@material-ui/core/Slider'; import Toolbar from '@material-ui/core/Toolbar'; import ZoomInRoundedIcon from '@material-ui/icons/ZoomInRounded'; import ZoomOutRoundedIcon from '@material-ui/icons/ZoomOutRounded'; +import ToggleButton from '@material-ui/lab/ToggleButton'; +import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; import Icon from '@mdi/react'; import FullscreenRoundedIcon from '@material-ui/icons/FullscreenRounded'; import NavigateBeforeRoundedIcon from '@material-ui/icons/NavigateBeforeRounded'; import NavigateNextRoundedIcon from '@material-ui/icons/NavigateNextRounded'; -import PauseRoundedIcon from '@material-ui/icons/PauseRounded'; import SkipPreviousRoundedIcon from '@material-ui/icons/SkipPreviousRounded'; import { mdiCursorDefault } from '@mdi/js'; import { PressureIcon, SlideKeyframe } from '../components/icons'; +import PlaySkipIconAni from '../components/play-skip'; var player = new TimedVideoPlayer(); var useWorkingTimeline = create(set => ({ @@ -187,9 +188,9 @@ function TimelineEditor(props: { player: TimedVideoPlayer; }) { useEffect(() => { props.player.addEventListener('TimedVideoPlayerSlide', (event: CustomEvent) => { - document.querySelectorAll('.keyframes .keyframeWrapper').forEach(el => { + document.querySelectorAll('.keyframes .frame').forEach(el => { el.classList.remove('current'); - if (el.classList.contains(`keyframe-index-${event.detail}`)) { + if (event.detail && el.id == 'slide-' + (event.detail as slide).id) { el.classList.add('current'); } }); @@ -337,6 +338,10 @@ export default function Index() { var frame = useFrame((st: any) => st.currentFrame); + var [tool, setTool] = useState('cursor'); + + var [playing, setPlaying] = useState(false); + var mouseX = 0; // var mouseY = 0; @@ -400,6 +405,9 @@ export default function Index() { var reader = new FileReader(); reader.addEventListener('load', ev => { player.loadVideo(ev.target.result as string); + + player.player.addEventListener('play', () => setPlaying(true)); + player.player.addEventListener('pause', () => setPlaying(false)); }); reader.readAsDataURL(file); }} @@ -462,8 +470,9 @@ export default function Index() { <Fab className='playPause' size='medium' - children={<PauseRoundedIcon />} onClick={() => player.next()} + children={<PlaySkipIconAni />} + style={{ '--ani-state': playing ? 'skip' : 'play' } as CSSProperties} /> <Fab size='small' children={<NavigateBeforeRoundedIcon />} onClick={() => player.previous()} /> <Fab size='small' children={<NavigateNextRoundedIcon />} /> @@ -478,22 +487,27 @@ export default function Index() { <span className='framerate numbers posabs l0 t0'>@{player.framerate}fps</span> <h2 className='timecode numbers posabs r0 t0'>{player.frameToTimestampString(frame, false)}</h2> </div> - <ButtonGroup color='primary' aria-label='outlined primary button group'> - <Button children={<Icon path={mdiCursorDefault} size={1} />} /> - <Button children={<SlideKeyframe type='default' />} /> - <Button children={<SlideKeyframe type='delay' />} /> - <Button children={<SlideKeyframe type='speedChange' />} /> - <Button> + <ToggleButtonGroup + color='primary' + aria-label='outlined primary button group' + value={tool} + exclusive + onChange={(_event: any, newTool: string | null) => { + if (newTool === null) return; + setTool(newTool); + }} + > + <ToggleButton value='cursor' children={<Icon path={mdiCursorDefault} size={1} />} /> + <ToggleButton value='default' children={<SlideKeyframe type='default' />} /> + <ToggleButton value='delay' children={<SlideKeyframe type='delay' />} /> + <ToggleButton value='speedChange' children={<SlideKeyframe type='speedChange' />} /> + <ToggleButton value='loop'> <div className='loopStartEnd'> - <span className='posabs start'> - <SlideKeyframe type='loop' /> - </span> - <span className='posabs end'> - <SlideKeyframe type='loop' loopEnd /> - </span> + <span className='posabs start' children={<SlideKeyframe type='loop' />} /> + <span className='posabs end' children={<SlideKeyframe type='loop' loopEnd />} /> </div> - </Button> - </ButtonGroup> + </ToggleButton> + </ToggleButtonGroup> <div className='zoom'> <ZoomOutRoundedIcon /> <div className='spacing'> diff --git a/pages/present.tsx b/pages/present.tsx index 9769577..2ad8f72 100644 --- a/pages/present.tsx +++ b/pages/present.tsx @@ -89,7 +89,7 @@ export class TimedVideoPlayer { case 'delay': { this.player.playbackRate = 0; this.slide++; - var event = new CustomEvent('TimedVideoPlayerSlide', { detail: this.slide }); + var event = new CustomEvent('TimedVideoPlayerSlide', { detail: this.timeline.slides[this.slide] }); this.dispatchEvent(event); setTimeout(() => { this.player.playbackRate = this.getPlaybackSpeed(this.slide - 1); @@ -98,7 +98,7 @@ export class TimedVideoPlayer { } case 'speedChange': { this.slide++; - var event = new CustomEvent('TimedVideoPlayerSlide', { detail: this.slide }); + var event = new CustomEvent('TimedVideoPlayerSlide', { detail: this.timeline.slides[this.slide] }); this.dispatchEvent(event); this.player.playbackRate = this.framerate / (slide as speedChangeSlide).newFramerate; break; @@ -189,10 +189,10 @@ export class TimedVideoPlayer { if (!this.registeredEventListeners) return; this.slide++; - var event = new CustomEvent('TimedVideoPlayerSlide', { detail: this.slide }); - this.dispatchEvent(event); var slide = this.timeline.slides[this.slide]; + var event = new CustomEvent('TimedVideoPlayerSlide', { detail: slide }); + this.dispatchEvent(event); if (!this.player.paused && this.frame < slide?.frame) { this.skip(); @@ -206,12 +206,12 @@ export class TimedVideoPlayer { this.slide = Math.max(this.slide - 1, -1); - var event = new CustomEvent('TimedVideoPlayerSlide', { detail: this.slide }); - this.dispatchEvent(event); - var slide = this.timeline.slides[this.slide]; if (!slide) return; + var event = new CustomEvent('TimedVideoPlayerSlide', { detail: slide }); + this.dispatchEvent(event); + this.jumpToSlide(slide); } } diff --git a/styles/editor.css b/styles/editor.css index 9f1f8e5..1a1a91f 100644 --- a/styles/editor.css +++ b/styles/editor.css @@ -50,7 +50,7 @@ color: var(--gruble); } -.appGrid .tools .MuiButtonGroup-root, +.appGrid .tools .MuiToggleButtonGroup-root, .appGrid .tools .zoom { margin-top: 8px; } @@ -68,7 +68,7 @@ color: var(--gruble); } -.appGrid .tools .MuiButtonGroup-root .MuiButton-root { +.appGrid .tools .MuiToggleButtonGroup-root .MuiToggleButton-root { border-width: 2px; padding: 8px; color: var(--c800); @@ -76,15 +76,22 @@ margin-right: -1px; } -.appGrid .tools .MuiButtonGroup-root .MuiButton-root:first-child { +.appGrid .tools .MuiToggleButtonGroup-root .MuiToggleButton-root.Mui-selected { + color: var(--gruble); + background-color: rgba(93, 233, 174, 0.12); + border-top-color: #334A5A; + border-bottom-color: #334A5A; +} + +.appGrid .tools .MuiToggleButtonGroup-root .MuiToggleButton-root:first-child { border-radius: 6px 0 0 6px; } -.appGrid .tools .MuiButtonGroup-root .MuiButton-root:last-child { +.appGrid .tools .MuiToggleButtonGroup-root .MuiToggleButton-root:last-child { border-radius: 0 6px 6px 0; } -.appGrid .tools .MuiButtonGroup-root .MuiButton-root .loopStartEnd { +.appGrid .tools .MuiToggleButtonGroup-root .MuiToggleButton-root .loopStartEnd { display: inline-block; white-space: nowrap; line-height: 0; @@ -93,8 +100,8 @@ width: 36px; } -.appGrid .tools .MuiButtonGroup-root .MuiButton-root .loopStartEnd .start { left: -3px; } -.appGrid .tools .MuiButtonGroup-root .MuiButton-root .loopStartEnd .end { right: -3px; } +.appGrid .tools .MuiToggleButtonGroup-root .MuiToggleButton-root .loopStartEnd .start { left: -3px; } +.appGrid .tools .MuiToggleButtonGroup-root .MuiToggleButton-root .loopStartEnd .end { right: -3px; } .appGrid .timeline { grid-column: 2; diff --git a/styles/keyframes.css b/styles/keyframes.css index c02698f..49c8e4e 100644 --- a/styles/keyframes.css +++ b/styles/keyframes.css @@ -7,9 +7,10 @@ height: 24px; } -.appGrid .timeline .keyframes .frame .keyframeWrapper.current { color: var(--piss); } -.appGrid .timeline .keyframes .frame .keyframeWrapper.current .loop .connector { background-color: var(--piss); } -.appGrid .timeline .keyframes .frame .keyframeWrapper , +.appGrid .timeline .keyframes .frame.current .keyframeWrapper { color: var(--piss); } +.appGrid .timeline .keyframes .frame.current .keyframeWrapper .loop .connector { background-color: var(--piss); } + +.appGrid .timeline .keyframes .frame .keyframeWrapper, .appGrid .timeline .keyframes .frame .keyframeWrapper .loop .connector { transition-property: color, background-color; transition-duration: .2s; @@ -51,10 +51,10 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== -"@hapi/accept@5.0.1": - version "5.0.1" - resolved "https://registry.yarnpkg.com/@hapi/accept/-/accept-5.0.1.tgz#068553e867f0f63225a506ed74e899441af53e10" - integrity sha512-fMr4d7zLzsAXo28PRRQPXR1o2Wmu+6z+VY1UzDp0iFo13Twj8WePakwXBiqn3E1aAlTpSNzCXdnnQXFhst8h8Q== +"@hapi/accept@5.0.2": + version "5.0.2" + resolved "https://registry.yarnpkg.com/@hapi/accept/-/accept-5.0.2.tgz#ab7043b037e68b722f93f376afb05e85c0699523" + integrity sha512-CmzBx/bXUR8451fnZRuZAJRlzgm0Jgu5dltTX/bszmR2lheb9BpyN47Q1RbaGTsvFzn0PXAEs+lXDKfshccYZw== dependencies: "@hapi/boom" "9.x.x" "@hapi/hoek" "9.x.x" @@ -96,6 +96,17 @@ dependencies: "@babel/runtime" "^7.4.4" +"@material-ui/lab@^4.0.0-alpha.58": + version "4.0.0-alpha.58" + resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.58.tgz#c7ebb66f49863c5acbb20817163737caa299fafc" + integrity sha512-GKHlJqLxUeHH3L3dGQ48ZavYrqGOTXkFkiEiuYMAnAvXAZP4rhMIqeHOPXSUQan4Bd8QnafDcpovOSLnadDmKw== + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/utils" "^4.11.2" + clsx "^1.0.4" + prop-types "^15.7.2" + react-is "^16.8.0 || ^17.0.0" + "@material-ui/styles@^4.11.4": version "4.11.4" resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d" @@ -152,20 +163,20 @@ resolved "https://registry.yarnpkg.com/@mdi/react/-/react-1.5.0.tgz#461d2064ba12d509723bffc95e2f7169a6ac884a" integrity sha512-NztRgUxSYD+ImaKN94Tg66VVVqXj4SmlDGzZoz48H9riJ+Awha56sfXH2fegw819NWo7KI3oeS1Es0lNQqwr0w== -"@next/env@10.2.0": - version "10.2.0" - resolved "https://registry.yarnpkg.com/@next/env/-/env-10.2.0.tgz#154dbce2efa3ad067ebd20b7d0aa9aed775e7c97" - integrity sha512-tsWBsn1Rb6hXRaHc/pWMCpZ4Ipkf3OCbZ54ef5ukgIyEvzzGdGFXQshPP2AF7yb+8yMpunWs7vOMZW3e8oPF6A== +"@next/env@10.2.2": + version "10.2.2" + resolved "https://registry.yarnpkg.com/@next/env/-/env-10.2.2.tgz#cb61f6c29f349815108184c2f1926ada65458e28" + integrity sha512-m0xOpl4F9z7R7Yt2OtJoo6ZUsFPdx+kuvZeoctH7T6lO66DmZL3W6MQDxso/ArkH8VOlDPZgeQVVBPf+I7wflA== -"@next/polyfill-module@10.2.0": - version "10.2.0" - resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-10.2.0.tgz#61f41110c4b465cc26d113e2054e205df61c3594" - integrity sha512-Nl3GexIUXsmuggkUqrRFyE/2k7UI44JaVzSywtXEyHzxpZm2a5bdMaWuC89pgLiFDDOqmbqyLAbtwm5lNxa7Eg== +"@next/polyfill-module@10.2.2": + version "10.2.2" + resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-10.2.2.tgz#48d108dd562ed021dd23510c0ffe96badf5f9c04" + integrity sha512-0t5Hw1Dr18TWP65qAnakRa8+jza6SAFOz0b2v67s5AVquAwXXlclR4SfUy3ahrRtjCqlbLEE/oFIzCGbyMYfVA== -"@next/react-dev-overlay@10.2.0": - version "10.2.0" - resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-10.2.0.tgz#4220121abac7e3404cbaf467784aeecca8be46cf" - integrity sha512-PRIAoWog41hLN4iJ8dChKp4ysOX0Q8yiNQ/cwzyqEd3EjugkDV5OiKl3mumGKaApJaIra1MX6j1wgQRuLhuWMA== +"@next/react-dev-overlay@10.2.2": + version "10.2.2" + resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-10.2.2.tgz#88fb5013d3df70bd37b854234c41d884e108a149" + integrity sha512-uPslFPWvvZ8AdadGdK2/834UnJy6F+7071/ere6QpN88Ngzqx9lDIhjslEeFLRtpyBst4s1YUdbm69btVPdE5w== dependencies: "@babel/code-frame" "7.12.11" anser "1.4.9" @@ -179,10 +190,10 @@ stacktrace-parser "0.1.10" strip-ansi "6.0.0" -"@next/react-refresh-utils@10.2.0": - version "10.2.0" - resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-10.2.0.tgz#55953b697769c6647f371bc6bcd865a24e1a22e9" - integrity sha512-3I31K9B4hEQRl7yQ44Umyz+szHtuMJrNdwsgJGhoEnUCXSBRHp5wv5Zv8eDa2NewSbe53b2C0oOpivrzmdBakw== +"@next/react-refresh-utils@10.2.2": + version "10.2.2" + resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-10.2.2.tgz#69dd150e3656aebe63fc828916105f1472810488" + integrity sha512-OL7r0iz+SiE9SMWcxZocUtEAHv0/TlBWxIE3KjjO1vWSU1r0gMrE2l2RxHfMLIPsl6CjAkcPxoaXlosFsJ2S5w== "@opentelemetry/api@0.14.0": version "0.14.0" @@ -282,9 +293,9 @@ integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA== "@types/node@*": - version "15.0.2" - resolved "https://registry.yarnpkg.com/@types/node/-/node-15.0.2.tgz#51e9c0920d1b45936ea04341aa3e2e58d339fb67" - integrity sha512-p68+a+KoxpoB47015IeYZYRrdqMUcpbK8re/zpFB8Ld46LHC1lPEbp3EXgkEhAYEcPvjJF6ZO+869SQ0aH1dcA== + version "15.6.0" + resolved "https://registry.yarnpkg.com/@types/node/-/node-15.6.0.tgz#f0ddca5a61e52627c9dcb771a6039d44694597bc" + integrity sha512-gCYSfQpy+LYhOFTKAeE8BkyGqaxmlFxe+n4DKM6DR0wzw/HISUE/hAmkC/KT8Sw5PCJblqg062b3z9gucv3k0A== "@types/prop-types@*": version "15.7.3" @@ -299,9 +310,9 @@ "@types/react" "*" "@types/react@*": - version "17.0.5" - resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.5.tgz#3d887570c4489011f75a3fc8f965bf87d09a1bea" - integrity sha512-bj4biDB9ZJmGAYTWSKJly6bMr4BLUiBrx9ujiJEoP9XIDY9CTaPGxE5QWN/1WjpPLzYF7/jRNnV2nNxNe970sw== + version "17.0.6" + resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.6.tgz#0ec564566302c562bf497d73219797a5e0297013" + integrity sha512-u/TtPoF/hrvb63LdukET6ncaplYsvCvmkceasx8oG84/ZCsoLxz9Z/raPBP4lTAiWW1Jb889Y9svHmv8R26dWw== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" @@ -313,9 +324,9 @@ integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA== ajv@^8.3.0: - version "8.3.0" - resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.3.0.tgz#25ee7348e32cdc4a1dbb38256bf6bdc451dd577c" - integrity sha512-RYE7B5An83d7eWnDR8kbdaIFqmKCNsP16ay1hDbJEU+sa0e3H9SebskCt0Uufem6cfAVu7Col6ubcn/W+Sm8/Q== + version "8.5.0" + resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.5.0.tgz#695528274bcb5afc865446aa275484049a18ae4b" + integrity sha512-Y2l399Tt1AguU3BPRP9Fn4eN+Or+StUGWCUpbnFyXSo8NZ9S4uj+AG2pjs5apK+ZMOwYOz1+a+VKvKH7CudXgQ== dependencies: fast-deep-equal "^3.1.1" json-schema-traverse "^1.0.0" @@ -354,10 +365,16 @@ anymatch@~3.1.1: normalize-path "^3.0.0" picomatch "^2.0.4" -array-filter@^1.0.0: +array.prototype.filter@^1.0.0: version "1.0.0" - resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83" - integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM= + resolved "https://registry.yarnpkg.com/array.prototype.filter/-/array.prototype.filter-1.0.0.tgz#24d63e38983cdc6bf023a3c574b2f2a3f384c301" + integrity sha512-TfO1gz+tLm+Bswq0FBOXPqAchtCr2Rn48T8dLJoRFl8NoEosjZmzptmuo1X8aZBzZcqsR1W8U761tjACJtngTQ== + dependencies: + call-bind "^1.0.2" + define-properties "^1.1.3" + es-abstract "^1.18.0" + es-array-method-boxes-properly "^1.0.0" + is-string "^1.0.5" asn1.js@^5.2.0: version "5.4.1" @@ -393,11 +410,11 @@ ast-types@0.13.2: integrity sha512-uWMHxJxtfj/1oZClOxDEV1sQ1HCDkA4MG8Gr69KKeBjEVH0R84WlejZ0y2DcwyBlpAEMltmVYkVgqfLFb2oyiA== available-typed-arrays@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5" - integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ== + version "1.0.3" + resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.3.tgz#fb7d02445bfedefad79fad1fe47931163a227198" + integrity sha512-CuPhFULixV/d89POo1UG4GqGbR7dmrefY2ZdmsYakeR4gOSJXoF7tfeaiqMHGOMrlTiJoeEs87fpLsBYmE2BMw== dependencies: - array-filter "^1.0.0" + array.prototype.filter "^1.0.0" babel-plugin-syntax-jsx@6.18.0: version "6.18.0" @@ -515,16 +532,16 @@ browserify-zlib@0.2.0, browserify-zlib@^0.2.0: dependencies: pako "~1.0.5" -browserslist@4.16.1: - version "4.16.1" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.1.tgz#bf757a2da376b3447b800a16f0f1c96358138766" - integrity sha512-UXhDrwqsNcpTYJBTZsbGATDxZbiVDsx6UjpmRUmtnP10pr8wAYr5LgFoEFw9ixriQH2mv/NX2SfGzE/o8GndLA== +browserslist@4.16.6: + version "4.16.6" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2" + integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ== dependencies: - caniuse-lite "^1.0.30001173" - colorette "^1.2.1" - electron-to-chromium "^1.3.634" + caniuse-lite "^1.0.30001219" + colorette "^1.2.2" + electron-to-chromium "^1.3.723" escalade "^3.1.1" - node-releases "^1.1.69" + node-releases "^1.1.71" buffer-xor@^1.0.3: version "1.0.3" @@ -566,10 +583,10 @@ call-bind@^1.0.0, call-bind@^1.0.2: function-bind "^1.1.1" get-intrinsic "^1.0.2" -caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001179, caniuse-lite@^1.0.30001202: - version "1.0.30001223" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001223.tgz#39b49ff0bfb3ee3587000d2f66c47addc6e14443" - integrity sha512-k/RYs6zc/fjbxTjaWZemeSmOjO0JJV+KguOBA3NwPup8uzxM1cMhR2BD9XmO86GuqaqTCO8CgkgH9Rz//vdDiA== +caniuse-lite@^1.0.30001202, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001228: + version "1.0.30001228" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz#bfdc5942cd3326fa51ee0b42fbef4da9d492a7fa" + integrity sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A== chalk@2.4.2, chalk@^2.0.0: version "2.4.2" @@ -645,7 +662,7 @@ color-name@~1.1.4: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== -colorette@^1.2.1, colorette@^1.2.2: +colorette@^1.2.2: version "1.2.2" resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94" integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w== @@ -831,10 +848,10 @@ domain-browser@^1.1.1: resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda" integrity sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA== -electron-to-chromium@^1.3.634: - version "1.3.727" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.727.tgz#857e310ca00f0b75da4e1db6ff0e073cc4a91ddf" - integrity sha512-Mfz4FIB4FSvEwBpDfdipRIrwd6uo8gUDoRDF4QEYb4h4tSuI3ov594OrjU6on042UlFHouIJpClDODGkPcBSbg== +electron-to-chromium@^1.3.723: + version "1.3.736" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.736.tgz#f632d900a1f788dab22fec9c62ec5c9c8f0c4052" + integrity sha512-DY8dA7gR51MSo66DqitEQoUMQ0Z+A2DSXFi7tK304bdTVqczCAfUuyQw6Wdg8hIoo5zIxkU1L24RQtUce1Ioig== elliptic@^6.5.3: version "6.5.4" @@ -861,7 +878,7 @@ encoding@0.1.13: dependencies: iconv-lite "^0.6.2" -es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2: +es-abstract@^1.18.0, es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2: version "1.18.0" resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0.tgz#ab80b359eecb7ede4c298000390bc5ac3ec7b5a4" integrity sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw== @@ -883,6 +900,11 @@ es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2: string.prototype.trimstart "^1.0.4" unbox-primitive "^1.0.0" +es-array-method-boxes-properly@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e" + integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA== + es-to-primitive@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a" @@ -1123,9 +1145,9 @@ iconv-lite@0.4.24: safer-buffer ">= 2.1.2 < 3" iconv-lite@^0.6.2: - version "0.6.2" - resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.2.tgz#ce13d1875b0c3a674bd6a04b7f76b01b1b6ded01" - integrity sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ== + version "0.6.3" + resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501" + integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw== dependencies: safer-buffer ">= 2.1.2 < 3.0.0" @@ -1485,9 +1507,9 @@ ms@2.0.0: integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g= nanoid@^3.1.22: - version "3.1.22" - resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.22.tgz#b35f8fb7d151990a8aebd5aa5015c03cf726f844" - integrity sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ== + version "3.1.23" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81" + integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw== native-url@0.3.4: version "0.3.4" @@ -1497,23 +1519,23 @@ native-url@0.3.4: querystring "^0.2.0" next@^10.2.0: - version "10.2.0" - resolved "https://registry.yarnpkg.com/next/-/next-10.2.0.tgz#6654cc925d8abcb15474fa062fc6b3ee527dd6dc" - integrity sha512-PKDKCSF7s82xudu3kQhOEaokxggpbLEWouEUtzP6OqV0YqKYHF+Ff+BFLycEem8ixtTM2M6ElN0VRJcskJfxPQ== + version "10.2.2" + resolved "https://registry.yarnpkg.com/next/-/next-10.2.2.tgz#aadcc526e420282b4a735b0595041195d748a91d" + integrity sha512-HPGSLrflWPvf3zEZSIk/uj0CZ+YYrpZwZS0PFAgXbEwb894iRuAPzglagqlzcCh7lg12RBEaKNIxhrVa5xgjtQ== dependencies: "@babel/runtime" "7.12.5" - "@hapi/accept" "5.0.1" - "@next/env" "10.2.0" - "@next/polyfill-module" "10.2.0" - "@next/react-dev-overlay" "10.2.0" - "@next/react-refresh-utils" "10.2.0" + "@hapi/accept" "5.0.2" + "@next/env" "10.2.2" + "@next/polyfill-module" "10.2.2" + "@next/react-dev-overlay" "10.2.2" + "@next/react-refresh-utils" "10.2.2" "@opentelemetry/api" "0.14.0" assert "2.0.0" ast-types "0.13.2" browserify-zlib "0.2.0" - browserslist "4.16.1" + browserslist "4.16.6" buffer "5.6.0" - caniuse-lite "^1.0.30001179" + caniuse-lite "^1.0.30001228" chalk "2.4.2" chokidar "3.5.1" constants-browserify "1.0.0" @@ -1593,10 +1615,10 @@ node-libs-browser@^2.2.1: util "^0.11.0" vm-browserify "^1.0.1" -node-releases@^1.1.69: - version "1.1.71" - resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.71.tgz#cb1334b179896b1c89ecfdd4b725fb7bbdfc7dbb" - integrity sha512-zR6HoT6LrLCRBwukmrVbHv0EpEQjksO6GmFcZQQuCAy139BEsoVKPYnf3jongYW83fAa1torLGYwxxky/p28sg== +node-releases@^1.1.71: + version "1.1.72" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.72.tgz#14802ab6b1039a79a0c7d662b610a5bbd76eacbe" + integrity sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw== normalize-path@^3.0.0, normalize-path@~3.0.0: version "3.0.0" @@ -1722,9 +1744,9 @@ pbkdf2@^3.0.3: sha.js "^2.4.8" picomatch@^2.0.4, picomatch@^2.2.1: - version "2.2.3" - resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.3.tgz#465547f359ccc206d3c48e46a1bcb89bf7ee619d" - integrity sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg== + version "2.3.0" + resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972" + integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw== pkg-dir@^4.1.0: version "4.2.0" |