Skip to content

Commit d0dc96b

Browse files
dowdinessdowdiness
committed
update audioplayer style
1 parent 3240bfb commit d0dc96b

File tree

7 files changed

+404
-69
lines changed

7 files changed

+404
-69
lines changed

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,8 @@
9494
"gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.21",
9595
"prettier": "2.2.1",
9696
"tailwindcss": "^2.0.3",
97-
"typescript": "^4.0.5"
97+
"typescript": "^4.0.5",
98+
"typescript-plugin-css-modules": "^3.2.0"
9899
},
99100
"homepage": "https://github.com/dowdiness/yowai-zine#readme",
100101
"keywords": [

‎src/components/AudioPlayer/Audio.tsx

+53-19
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import React, { useState, useEffect } from 'react'
22
import AudioControls from 'src/components/AudioPlayer/AudioControls'
33
import AudioInfo from 'src/components/AudioPlayer/AudioInfo'
44
import AudioVolume from 'src/components/AudioPlayer/AudioVolume'
@@ -22,6 +22,7 @@ import { FaRegPlayCircle, FaRegPauseCircle } from 'react-icons/fa'
2222
import { RiPlayList2Line } from "react-icons/ri"
2323

2424
import { displayTime } from './utils'
25+
import * as AudioStyle from "./audio.module.css"
2526

2627
const audioPlaylerVariants = {
2728
hidden: {
@@ -45,22 +46,53 @@ const AudioPlayer: React.FC = () => {
4546
const [isAudioMiniPlayerOpen] = useAtom(isAudioMiniPlayerOpenAtom)
4647
const [isAudioModalOpen, setIsAudioModalOpen] = useAtom(isAudioModalOpenAtom)
4748

49+
const [isPc, setIsPc] = useState(false)
50+
4851
let currentPercentage = "0%"
4952
currentPercentage = duration
50-
? `${(trackProgress / duration) * 100}%`
51-
: "0%"
53+
? `${(trackProgress / duration) * 97 + 2}%`
54+
: "2%"
55+
56+
const changeIsPc = (e: MediaQueryListEvent) => {
57+
if (e.matches) {
58+
setIsPc(true)
59+
} else {
60+
setIsPc(false)
61+
}
62+
}
5263

53-
const trackStyling = `
54-
-webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(${currentPercentage}, #fff), color-stop(${currentPercentage}, #414141))
55-
`
64+
useEffect(() => {
65+
const mql = matchMedia("(min-width: 768px)")
66+
if (mql.matches) {
67+
setIsPc(true)
68+
} else {
69+
setIsPc(false)
70+
}
71+
72+
// Safari 14 以前ではEventTargetを元にしていた為にメソッドの名前が違う
73+
if (typeof mql.addEventListener === 'undefined') {
74+
// Safari 14 以前への対応
75+
// @ts-ignore
76+
mql.addListener(changeIsPc)
77+
return() => {
78+
// @ts-ignore
79+
mql.removeListener(changeIsPc)
80+
}
81+
} else {
82+
mql.addEventListener("change", changeIsPc)
83+
return() => {
84+
mql.removeEventListener("change" , changeIsPc)
85+
}
86+
}
87+
}, [])
5688

5789
return (
5890
<AnimatePresence>
5991
{isAudioMiniPlayerOpen ? isAudioModalOpen
6092
? <AudioModal />
6193
: <motion.div
6294
className="fixed bottom-0 left-0 z-30 flex w-screen h-16 border border-t border-black md:h-24 bg-neumorphism md:flex"
63-
onClick={() => setIsAudioModalOpen(true)}
95+
onClick={() => isPc ? null : setIsAudioModalOpen(true)}
6496
initial="hidden"
6597
animate="show"
6698
exit="hidden"
@@ -105,18 +137,20 @@ const AudioPlayer: React.FC = () => {
105137
<AudioControls />
106138
<div className="flex items-center w-full mt-2 space-x-2">
107139
<span className="text-sm">{displayTime(trackProgress)}</span>
108-
<input
109-
type="range"
110-
value={trackProgress}
111-
step="1"
112-
min="0"
113-
max={duration}
114-
className="w-full"
115-
onChange={(e) => setCurrentTime(parseInt(e.target.value, 10))}
116-
onMouseUp={() => setIsPlaying(true)}
117-
onKeyUp={() => setIsPlaying(true)}
118-
style={{ background: trackStyling }}
119-
/>
140+
<div className="relative w-full">
141+
<input
142+
type="range"
143+
value={trackProgress}
144+
step="1"
145+
min="0"
146+
max={duration}
147+
className={AudioStyle.slider}
148+
onChange={(e) => setCurrentTime(parseInt(e.target.value, 10))}
149+
onMouseUp={() => setIsPlaying(true)}
150+
onKeyUp={() => setIsPlaying(true)}
151+
/>
152+
<div id="value" style={{ width: currentPercentage }} className={AudioStyle.value} />
153+
</div>
120154
<span className="text-sm">{displayTime(duration)}</span>
121155
</div>
122156
</div>

‎src/components/AudioPlayer/AudioModal.tsx

+21-12
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { GatsbyImage } from "gatsby-plugin-image"
2323
import AudioControls from 'src/components/AudioPlayer/AudioControls'
2424

2525
import { displayTime } from './utils'
26+
import * as AudioStyle from "./audio.module.css"
2627

2728
const AudioModal = () => {
2829
const [tracks] = useAtom(tracksAtom)
@@ -35,6 +36,11 @@ const AudioModal = () => {
3536

3637
const [windowSize] = useAtom(windowSizeAtom)
3738

39+
let currentPercentage = "0%"
40+
currentPercentage = duration
41+
? `${(trackProgress / duration) * 97 + 2}%`
42+
: "2%"
43+
3844
const variants = {
3945
hidden: {
4046
opacity: 0,
@@ -60,6 +66,7 @@ const AudioModal = () => {
6066
<IoChevronDown
6167
size={36}
6268
onClick={() => setIsAudioModalOpen(false)}
69+
className="cursor-pointer"
6370
/>
6471
<h2 className="text-lg font-medium">{tracks[0].album}</h2>
6572
<div className="w-9 h-9" />
@@ -77,18 +84,20 @@ const AudioModal = () => {
7784
</div>
7885
</section>
7986
<section>
80-
<input
81-
type="range"
82-
value={trackProgress}
83-
step="1"
84-
min="0"
85-
max={duration}
86-
className="w-full"
87-
onChange={(e) => setCurrentTime(parseInt(e.target.value, 10))}
88-
onMouseUp={() => setIsPlaying(true)}
89-
onKeyUp={() => setIsPlaying(true)}
90-
// style={{ background: trackStyling }}
91-
/>
87+
<div className="relative w-full">
88+
<input
89+
type="range"
90+
value={trackProgress}
91+
step="1"
92+
min="0"
93+
max={duration}
94+
className={AudioStyle.slider}
95+
onChange={(e) => setCurrentTime(parseInt(e.target.value, 10))}
96+
onMouseUp={() => setIsPlaying(true)}
97+
onKeyUp={() => setIsPlaying(true)}
98+
/>
99+
<div id="value" style={{ width: currentPercentage }} className={AudioStyle.value} />
100+
</div>
92101
<div className="flex items-center justify-between w-full -mt-2">
93102
<span className="text-sm">{displayTime(trackProgress)}</span>
94103
<span className="text-sm">{displayTime(duration)}</span>

‎src/components/AudioPlayer/AudioVolume.tsx

+13-14
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,12 @@ import React from "react"
22
import { IoVolumeMute, IoVolumeOff, IoVolumeLow, IoVolumeMedium, IoVolumeHigh } from "react-icons/io5"
33
import { useAtom } from "jotai"
44
import { volumeAtom, isMuteAtom } from 'src/atoms/track'
5+
import * as AudioStyle from "./audio.module.css"
56

67
const AudioVolume = () => {
78
const [volume, setVolume] = useAtom(volumeAtom)
89
const [isMute, setIsMute] = useAtom(isMuteAtom)
910

10-
const volumeStyling = `
11-
-webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(${volume}, #fff), color-stop(${volume}, #414141))
12-
`
13-
1411
return (
1512
<div className="flex items-center justify-end">
1613
{isMute ? (
@@ -39,16 +36,18 @@ const AudioVolume = () => {
3936
: <IoVolumeHigh size={24} />}
4037
</button>
4138
)}
42-
<input
43-
type="range"
44-
value={volume}
45-
step="0.01"
46-
min="0"
47-
max="1"
48-
className="w-3/5 ml-2"
49-
onChange={(e) => setVolume(parseFloat(e.target.value))}
50-
style={{ background: volumeStyling }}
51-
/>
39+
<div className="relative w-3/5 ml-2">
40+
<input
41+
type="range"
42+
value={volume}
43+
step="0.01"
44+
min="0"
45+
max="1"
46+
className={AudioStyle.slider}
47+
onChange={(e) => setVolume(parseFloat(e.target.value))}
48+
/>
49+
<div id="value" style={{ width: `${volume * 100.0}%` }} className={AudioStyle.value} />
50+
</div>
5251
</div>
5352
)
5453
}

‎src/components/AudioPlayer/audio.module.css

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.slider {
2+
-webkit-appearance: none;
3+
cursor: pointer;
4+
width: 100%;
5+
height: 10px;
6+
border: none;
7+
outline: none;
8+
border-radius: 5px;
9+
background: #ECF0F3;
10+
box-shadow: inset -2px -2px 8px rgba(255, 255, 255, 1),
11+
inset -2px -2px 12px rgba(255, 255, 255, 0.5),
12+
inset 2px 2px 4px rgba(255, 255, 255, 0.1),
13+
inset 2px 2px 8px rgba(0, 0, 0, .3);
14+
}
15+
16+
.slider::-webkit-slider-thumb {
17+
-webkit-appearance: none;
18+
@apply bg-yowai;
19+
cursor: ew-resize;
20+
width: 20px;
21+
height: 20px;
22+
border-radius: 50%;
23+
border: none;
24+
box-shadow: -2px -2px 8px rgba(255, 255, 255, 1),
25+
-2px -2px 12px rgba(255, 255, 255, 0.5),
26+
inset 2px 2px 4px rgba(255, 255, 255, 0.1),
27+
2px 2px 8px rgba(0, 0, 0, .3);
28+
}
29+
30+
.slider::-moz-range-thumb {
31+
-webkit-appearance: none;
32+
@apply bg-yowai;
33+
width: 20px;
34+
height: 20px;
35+
border-radius: 50%;
36+
border: none;
37+
box-shadow: -2px -2px 8px rgba(255, 255, 255, 1),
38+
-2px -2px 12px rgba(255, 255, 255, 0.5),
39+
inset 2px 2px 4px rgba(255, 255, 255, 0.1),
40+
2px 2px 8px rgba(0, 0, 0, .3);
41+
}
42+
43+
.slider::-moz-focus-outer {
44+
border: 0;
45+
}
46+
47+
.value {
48+
position: absolute;
49+
pointer-events: none;
50+
top: 8px;
51+
left: 0px;
52+
height: 10px;
53+
@apply bg-yowai;
54+
border-radius: 5px 0 0 5px;
55+
box-sizing: content-box;
56+
}

‎tsconfig.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
"noEmit": true,
1818
"allowSyntheticDefaultImports": true,
1919
"moduleResolution": "node",
20-
"typeRoots": ["@types", "./node_modules/@types"]
20+
"typeRoots": ["@types", "./node_modules/@types"],
21+
"plugins": [{ "name": "typescript-plugin-css-modules" }]
2122
},
2223
"include": ["src/**/*.ts", "src/**/*.tsx", "@types", "src/components/Element/ErrorBoundary.js"]
2324
}

0 commit comments

Comments
 (0)