From 7adec7ae059dfe280a3571fcde10e6794b2b251e Mon Sep 17 00:00:00 2001 From: andytudhope Date: Wed, 11 May 2022 20:36:36 +0200 Subject: [PATCH 1/9] Applications message for the seekers --- content/en/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/en/index.mdx b/content/en/index.mdx index 314cec07e..6284dbab2 100644 --- a/content/en/index.mdx +++ b/content/en/index.mdx @@ -27,7 +27,7 @@ Together, we are joyfully subverting the status quo. -Applications closed through March '22. +Applications for KB7 open in June '22. From 0c64847f523607f9a4057bb6f44f4f2baf91a5ba Mon Sep 17 00:00:00 2001 From: andytudhope Date: Fri, 13 May 2022 19:19:23 +0200 Subject: [PATCH 2/9] giving our projects proper margins --- blogPosts/en/blog/Editorial/summer-of-love.mdx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/blogPosts/en/blog/Editorial/summer-of-love.mdx b/blogPosts/en/blog/Editorial/summer-of-love.mdx index ff1339eec..ac89cc467 100644 --- a/blogPosts/en/blog/Editorial/summer-of-love.mdx +++ b/blogPosts/en/blog/Editorial/summer-of-love.mdx @@ -27,12 +27,16 @@ When we do attempt prosaic description, it sounds something like this: That said, there are some practicalities. Across 5 blocks, 1200+ KERNEL Fellows have re-shaped and [re-imagined reality](/learn/module-3/time#wider-fields) with us through simply spending time with each other, appreciating our pluralistic ways of being. Fellows have collectively started or served over 150 web3 projects, raising north of $250M. - + + + + + KERNEL serves and is served by a group of technologists, musicians, permaculture farmers, microbiologists, policy wonks, film directors, (bestselling) authors, artists, coders, artistic coders and everything in between. Each is wonderful and unique. Given such seeds, KERNEL aims to be as [non-instrumentalized](https://reboothq.substack.com/p/instrumentalization?s=r) an environment as possible, allowing for fruitful experience to emerge naturally. From 9ed5fef920321ad81c67429b2d087f4925095306 Mon Sep 17 00:00:00 2001 From: Anthony M Date: Fri, 13 May 2022 18:23:42 -0400 Subject: [PATCH 3/9] Create AudioPlayer component This commit introduces an audio player component that can be dropped into any module. All it needs is a source url to an audio file. --- content/en/learn/module-1/meaning.mdx | 4 +- gatsby-config.js | 8 +++ package.json | 1 + src/gatsby-plugin-theme-ui/components.js | 2 + src/modules/audioPlayer/Audio.js | 12 ++++ src/modules/audioPlayer/PlayControl.js | 23 +++++++ src/modules/audioPlayer/ProgressBar.js | 87 ++++++++++++++++++++++++ src/modules/audioPlayer/index.js | 79 +++++++++++++++++++++ src/modules/audioPlayer/pause.svg | 1 + src/modules/audioPlayer/play.svg | 1 + yarn.lock | 87 +++++++++++++++++++++++- 11 files changed, 301 insertions(+), 4 deletions(-) create mode 100644 src/modules/audioPlayer/Audio.js create mode 100644 src/modules/audioPlayer/PlayControl.js create mode 100644 src/modules/audioPlayer/ProgressBar.js create mode 100644 src/modules/audioPlayer/index.js create mode 100644 src/modules/audioPlayer/pause.svg create mode 100644 src/modules/audioPlayer/play.svg diff --git a/content/en/learn/module-1/meaning.mdx b/content/en/learn/module-1/meaning.mdx index 0d77e707a..612305adb 100644 --- a/content/en/learn/module-1/meaning.mdx +++ b/content/en/learn/module-1/meaning.mdx @@ -20,7 +20,7 @@ _the enunciation of truth."_ ---- + There's an internet-famous movie called Good Copy Bad Copy made in 2007 about intellectual property, piracy, and the fight against copyright law. The central @@ -124,4 +124,4 @@ Exaptation and Psychotechnologies - \ No newline at end of file + diff --git a/gatsby-config.js b/gatsby-config.js index b1973151c..5b76c0127 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -25,6 +25,14 @@ module.exports = { 'gatsby-plugin-theme-ui', 'gatsby-plugin-react-helmet', 'gatsby-plugin-catch-links', + { + resolve: 'gatsby-plugin-react-svg', + options: { + rule: { + include: path.resolve(__dirname, 'src/modules/audioPlayer'), + }, + }, + }, { //NOTE(Rejon): This is what allows us to do aliased imports like "@modules/ect..." resolve: `gatsby-plugin-alias-imports`, diff --git a/package.json b/package.json index 6333ef52f..7e2340255 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "gatsby-plugin-page-creator": "^3.3.0", "gatsby-plugin-preload-link-crossorigin": "^1.0.2", "gatsby-plugin-react-helmet": "^4.14.0", + "gatsby-plugin-react-svg": "^3.1.0", "gatsby-plugin-sharp": "^3.14.3", "gatsby-plugin-sitemap": "^3.3.0", "gatsby-plugin-theme-ui": "^0.11.1", diff --git a/src/gatsby-plugin-theme-ui/components.js b/src/gatsby-plugin-theme-ui/components.js index 835a37a10..02f0c7738 100644 --- a/src/gatsby-plugin-theme-ui/components.js +++ b/src/gatsby-plugin-theme-ui/components.js @@ -23,6 +23,7 @@ import { } from '@modules/ui/' import Card from '@modules/flashcard/card' import Flash from '@modules/flashcard/flash' +import AudioPlayer from '@modules/audioPlayer/' import { Aligner, Indent, Video, Sound } from '@modules/utility/' import { motion } from 'framer-motion' import { Box, Divider, Flex, Image, jsx, Text } from 'theme-ui' @@ -99,6 +100,7 @@ const Custom_Components = { BlogHome, Flash, Card, + AudioPlayer, } const overridesAndComponents = { diff --git a/src/modules/audioPlayer/Audio.js b/src/modules/audioPlayer/Audio.js new file mode 100644 index 000000000..55e9bc1a8 --- /dev/null +++ b/src/modules/audioPlayer/Audio.js @@ -0,0 +1,12 @@ +import React from 'react' + +const Audio = ({ src }) => { + return ( + + ) +} + +export default Audio diff --git a/src/modules/audioPlayer/PlayControl.js b/src/modules/audioPlayer/PlayControl.js new file mode 100644 index 000000000..fb59ed68c --- /dev/null +++ b/src/modules/audioPlayer/PlayControl.js @@ -0,0 +1,23 @@ +import React from 'react' + +import PlayIcon from './play.svg' +import PauseIcon from './pause.svg' + +const PlayControl = ({ isPlaying, handleOnClick }) => { + const Icon = isPlaying ? PauseIcon : PlayIcon + + return ( +
+ +
+ ) +} +const styles = { + container: { + alignItems: 'center', + display: 'flex', + flexGrow: 1, + justifyContent: 'center', + }, +} +export default PlayControl diff --git a/src/modules/audioPlayer/ProgressBar.js b/src/modules/audioPlayer/ProgressBar.js new file mode 100644 index 000000000..0d0651b5a --- /dev/null +++ b/src/modules/audioPlayer/ProgressBar.js @@ -0,0 +1,87 @@ +import React from 'react' +import { format, addSeconds } from 'date-fns' + +const ProgressBar = ({ currentTime, duration, onTimeUpdate }) => { + const percentProgress = (currentTime / duration) * 100 + + const formatDuration = (duration) => { + const durationTime = addSeconds(new Date(0), duration) + return format(durationTime, 'mm:ss') + } + + const getTimeAtPosition = (e) => { + const bar = document.getElementById('progressBar') + const barStart = bar.getBoundingClientRect().left + const barWidth = bar.offsetWidth + const clickPositionInPage = e.pageX + const clickPositionInBar = clickPositionInPage - barStart + const timePerPixel = duration / barWidth + return timePerPixel * clickPositionInBar + } + + const handleBarInteraction = (e) => { + onTimeUpdate(getTimeAtPosition(e)) + + const updateTimeOnMove = (eMove) => { + onTimeUpdate(getTimeAtPosition(eMove)) + } + + document.addEventListener('mousemove', updateTimeOnMove) + document.addEventListener('mouseup', () => { + document.removeEventListener('mousemove', updateTimeOnMove) + }) + } + + const barStyle = { + ...styles.progressBar, + background: `linear-gradient(to right, #FFD500 ${percentProgress}%, white 0)`, + } + + const knobStyle = { + ...styles.progressKnob, + left: `${percentProgress - 2}%`, + } + + return ( +
+ {formatDuration(currentTime)} +
+ +
+ {formatDuration(duration)} +
+ ) +} + +const styles = { + container: { + alignItems: 'center', + display: 'flex', + userSelect: 'none', + width: '100%', + }, + progressBar: { + alignItems: 'center', + border: 'solid', + borderRadius: '5px', + borderWidth: '0.5px', + cursor: 'pointer', + display: 'flex', + flex: 1, + height: '10px', + margin: '0 20px', + }, + progressKnob: { + backgroundColor: '#FFD500', + border: '1.5px solid white', + borderRadius: '50%', + height: '16px', + position: 'relative', + width: '16px', + }, + timeText: { + fontSize: '1.5rem', + }, +} + +export default ProgressBar diff --git a/src/modules/audioPlayer/index.js b/src/modules/audioPlayer/index.js new file mode 100644 index 000000000..23b69a33a --- /dev/null +++ b/src/modules/audioPlayer/index.js @@ -0,0 +1,79 @@ +import React, { useState, useEffect } from 'react' + +import ProgressBar from './ProgressBar' +import Audio from './Audio' +import PlayControl from './PlayControl' + +const AudioPlayer = ({ src }) => { + const [duration, setDuration] = useState(0) + const [currentTime, setCurrentTime] = useState(0) + const [isPlaying, setIsPlaying] = useState(false) + const [clickedTime, setClickedTime] = useState() + + useEffect(() => { + const audio = document.getElementById('audio') + + const setAudioData = () => { + setDuration(audio.duration) + setCurrentTime(audio.currentTime) + } + + const setAudioTime = () => setCurrentTime(audio.currentTime) + + audio.addEventListener('loadeddata', setAudioData) + audio.addEventListener('timeupdate', setAudioTime) + + isPlaying ? audio.play() : audio.pause() + + if (clickedTime && clickedTime !== currentTime) { + audio.currentTime = clickedTime + setClickedTime(null) + } + + return () => { + audio.removeEventListener('loadeddata', setAudioData) + audio.removeEventListener('timeupdate', setAudioTime) + } + }, [isPlaying, clickedTime]) + + const handleOnClickPlayControl = () => { + setIsPlaying(!isPlaying) + } + + return ( +
+
+ ) +} + +const styles = { + container: { + borderRadius: '9999px', + display: 'flex', + flexDirection: 'row', + marginBottom: '3rem', + overflow: 'hidden', + padding: '1rem 3rem 1rem 1rem', + }, + listenCTA: { + fontSize: '1.5rem', + }, + rightContainer: { + flexGrow: 10, + }, +} + +export default AudioPlayer diff --git a/src/modules/audioPlayer/pause.svg b/src/modules/audioPlayer/pause.svg new file mode 100644 index 000000000..4e78038de --- /dev/null +++ b/src/modules/audioPlayer/pause.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/modules/audioPlayer/play.svg b/src/modules/audioPlayer/play.svg new file mode 100644 index 000000000..fd76e30d6 --- /dev/null +++ b/src/modules/audioPlayer/play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 30849f6ed..a619a8162 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4260,6 +4260,11 @@ better-queue@^3.8.10: node-eta "^0.9.0" uuid "^3.0.0" +big.js@^3.1.3: + version "3.2.0" + resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e" + integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q== + big.js@^5.2.2: version "5.2.2" resolved "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz" @@ -5518,6 +5523,16 @@ css.escape@^1.5.1: resolved "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz" integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s= +css@2.2.4: + version "2.2.4" + resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929" + integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw== + dependencies: + inherits "^2.0.3" + source-map "^0.6.1" + source-map-resolve "^0.5.2" + urix "^0.1.0" + cssesc@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz" @@ -6124,6 +6139,11 @@ emoji-regex@^9.0.0, emoji-regex@^9.2.2: resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz" integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg== +emojis-list@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389" + integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k= + emojis-list@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz" @@ -7619,6 +7639,13 @@ gatsby-plugin-react-helmet@^4.14.0: dependencies: "@babel/runtime" "^7.15.4" +gatsby-plugin-react-svg@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/gatsby-plugin-react-svg/-/gatsby-plugin-react-svg-3.1.0.tgz#00269f182793f1f624bbfb9817608f6ee26f7b70" + integrity sha512-OiEeTRQ+tzf7YrOnj87uMD6AGRl7BKxogAp1CUDtfiP+WGWZ99S5PeDLHJW5ExxGH1NVzWlNgtJjNmJhDksPhg== + dependencies: + svg-react-loader "^0.4.6" + gatsby-plugin-sharp@^3.14.3: version "3.14.3" resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-3.14.3.tgz#3db33ddfb2b83365ee2314eaaee6d1ceed046032" @@ -9738,6 +9765,11 @@ json-stable-stringify@^1.0.1: dependencies: jsonify "~0.0.0" +json5@^0.5.0: + version "0.5.1" + resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821" + integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE= + json5@^1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz" @@ -9950,6 +9982,15 @@ loader-runner@^4.2.0: resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz" integrity sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw== +loader-utils@1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd" + integrity sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0= + dependencies: + big.js "^3.1.3" + emojis-list "^2.0.0" + json5 "^0.5.0" + loader-utils@2.0.0, loader-utils@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz" @@ -10141,7 +10182,7 @@ lodash.without@^4.4.0: resolved "https://registry.npmjs.org/lodash.without/-/lodash.without-4.4.0.tgz" integrity sha1-PNRXSgC2e643OpS3SHcmQFB7eqw= -lodash@^4.17.10, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4: +lodash@^4.0.0, lodash@^4.17.10, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4: version "4.17.21" resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -12480,6 +12521,11 @@ quick-lru@^5.1.1: resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932" integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA== +ramda@0.21.0: + version "0.21.0" + resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.21.0.tgz#a001abedb3ff61077d4ff1d577d44de77e8d0a35" + integrity sha1-oAGr7bP/YQd9T/HVd9RN536NCjU= + randombytes@^2.1.0: version "2.1.0" resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz" @@ -13253,6 +13299,11 @@ run-parallel@^1.1.9: dependencies: queue-microtask "^1.2.2" +rx@4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782" + integrity sha1-pfE/957zt0D+MKqAP7CfmIBdR4I= + rxjs@^6.6.0, rxjs@^6.6.3: version "6.6.7" resolved "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz" @@ -13745,7 +13796,7 @@ source-map-js@^0.6.2: resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e" integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug== -source-map-resolve@^0.5.0: +source-map-resolve@^0.5.0, source-map-resolve@^0.5.2: version "0.5.3" resolved "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz" integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw== @@ -14279,6 +14330,18 @@ supports-color@^9.2.1: resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-9.2.1.tgz#599dc9d45acf74c6176e0d880bab1d7d718fe891" integrity sha512-Obv7ycoCTG51N7y175StI9BlAXrmgZrFhZOb0/PyjHBher/NmsdBgbbQ1Inhq+gIhz6+7Gb+jWF2Vqi7Mf1xnQ== +svg-react-loader@^0.4.6: + version "0.4.6" + resolved "https://registry.yarnpkg.com/svg-react-loader/-/svg-react-loader-0.4.6.tgz#b263efb3e3d2fff4c682a729351aba5f185051a1" + integrity sha512-HVEypjWQsQuJdBIPzXGxpmQsQts7QwfQuYgK1rah6BVCMoLNSCh/ESKVNd7/tHq8DkWYHHTyaUMDA1FjqZYrgA== + dependencies: + css "2.2.4" + loader-utils "1.1.0" + ramda "0.21.0" + rx "4.1.0" + traverse "0.6.6" + xml2js "0.4.17" + svgo@1.3.2: version "1.3.2" resolved "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz" @@ -14533,6 +14596,11 @@ tr46@~0.0.3: resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a" integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o= +traverse@0.6.6: + version "0.6.6" + resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137" + integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc= + trim-repeated@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz" @@ -15623,6 +15691,14 @@ xml-parse-from-string@^1.0.0: resolved "https://registry.npmjs.org/xml-parse-from-string/-/xml-parse-from-string-1.0.1.tgz" integrity sha1-qQKekp09vN7RafPG4oI42VpdWig= +xml2js@0.4.17: + version "0.4.17" + resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.17.tgz#17be93eaae3f3b779359c795b419705a8817e868" + integrity sha1-F76T6q4/O3eTWceVtBlwWogX6Gg= + dependencies: + sax ">=0.6.0" + xmlbuilder "^4.1.0" + xml2js@^0.4.5: version "0.4.23" resolved "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz" @@ -15631,6 +15707,13 @@ xml2js@^0.4.5: sax ">=0.6.0" xmlbuilder "~11.0.0" +xmlbuilder@^4.1.0: + version "4.2.1" + resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-4.2.1.tgz#aa58a3041a066f90eaa16c2f5389ff19f3f461a5" + integrity sha1-qlijBBoGb5DqoWwvU4n/GfP0YaU= + dependencies: + lodash "^4.0.0" + xmlbuilder@~11.0.0: version "11.0.1" resolved "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz" From a2bb31af48ff2b4e0ee61a14f2aa489724ad85d5 Mon Sep 17 00:00:00 2001 From: andytudhope Date: Sat, 14 May 2022 17:54:09 +0200 Subject: [PATCH 4/9] Testing new s3 bucket + adding mobile styles for audio player --- content/en/learn/module-0/play-of-pattern.mdx | 2 ++ src/modules/audioPlayer/ProgressBar.js | 13 +++++++------ src/modules/audioPlayer/index.js | 14 ++++++++------ 3 files changed, 17 insertions(+), 12 deletions(-) diff --git a/content/en/learn/module-0/play-of-pattern.mdx b/content/en/learn/module-0/play-of-pattern.mdx index bcec64011..4d7e94413 100644 --- a/content/en/learn/module-0/play-of-pattern.mdx +++ b/content/en/learn/module-0/play-of-pattern.mdx @@ -71,3 +71,5 @@ Playing with pattern, and becoming conscious of the constant interplay of comple and its equally direct corollary: > 💡 How can you respond most honestly, accurately, and lovingly? + + diff --git a/src/modules/audioPlayer/ProgressBar.js b/src/modules/audioPlayer/ProgressBar.js index 0d0651b5a..b3dddde31 100644 --- a/src/modules/audioPlayer/ProgressBar.js +++ b/src/modules/audioPlayer/ProgressBar.js @@ -1,4 +1,5 @@ -import React from 'react' +/** @jsx jsx */ +import { jsx } from 'theme-ui' import { format, addSeconds } from 'date-fns' const ProgressBar = ({ currentTime, duration, onTimeUpdate }) => { @@ -43,12 +44,12 @@ const ProgressBar = ({ currentTime, duration, onTimeUpdate }) => { } return ( -
- {formatDuration(currentTime)} +
+ {formatDuration(currentTime)}
- +
- {formatDuration(duration)} + {formatDuration(duration)}
) } @@ -80,7 +81,7 @@ const styles = { width: '16px', }, timeText: { - fontSize: '1.5rem', + fontSize: ['.8rem', '.8rem', '1.5rem'], }, } diff --git a/src/modules/audioPlayer/index.js b/src/modules/audioPlayer/index.js index 23b69a33a..620a4cb15 100644 --- a/src/modules/audioPlayer/index.js +++ b/src/modules/audioPlayer/index.js @@ -1,4 +1,6 @@ -import React, { useState, useEffect } from 'react' +/** @jsx jsx */ +import { jsx } from 'theme-ui' +import { useState, useEffect } from 'react' import ProgressBar from './ProgressBar' import Audio from './Audio' @@ -41,14 +43,14 @@ const AudioPlayer = ({ src }) => { } return ( -
+