From 300606f01ae3cb1122c156fe48da5a2e347dc68c Mon Sep 17 00:00:00 2001 From: Genar Trias Ortiz Date: Tue, 14 Jul 2020 01:13:23 +0200 Subject: [PATCH 1/6] trying to implement milkdrop --- src/components/Player/PlayerControls.tsx | 2 + src/components/Visualizer/index.tsx | 89 ++++++++++++++++++++++++ src/containers/VisualizerContainer.tsx | 19 +++++ src/custom.d.ts | 3 + 4 files changed, 113 insertions(+) create mode 100644 src/components/Visualizer/index.tsx create mode 100644 src/containers/VisualizerContainer.tsx diff --git a/src/components/Player/PlayerControls.tsx b/src/components/Player/PlayerControls.tsx index 3ec9fde9..0905cecd 100644 --- a/src/components/Player/PlayerControls.tsx +++ b/src/components/Player/PlayerControls.tsx @@ -15,6 +15,7 @@ import Cover from './Cover' import KeyHandlers from './KeyHandlers' import ProgressBar from './ProgressBar' import Spectrum from './../Spectrum' +import VisualizerContainer from '../../containers/VisualizerContainer' import WebtorrentPlayer from './CustomPlayers/WebtorrentPlayer' import * as types from '../../constants/ActionTypes' @@ -266,6 +267,7 @@ class PlayerControls extends React.Component { } + ) } diff --git a/src/components/Visualizer/index.tsx b/src/components/Visualizer/index.tsx new file mode 100644 index 00000000..6d4200a7 --- /dev/null +++ b/src/components/Visualizer/index.tsx @@ -0,0 +1,89 @@ +import React from 'react' +import butterchurn from 'butterchurn' +import butterchurnPresets from 'butterchurn-presets' + +const enableVisualizer = ( + canvas: any, + audioNode: any, + width: number, + height: number +) => { + console.log('canvas: ', canvas) + + if (!canvas || !audioNode) { + console.log('No audio or canvas found!') + return + } + // initialize audioContext and get canvas + const audioContext = new AudioContext() + audioNode.crossOrigin = "anonymous" + const source = audioContext.createMediaElementSource(audioNode) + console.log('audioContext: ', audioContext) + + const visualizer = butterchurn.createVisualizer(audioContext, canvas, { + width, + height + }) + + // get audioNode from audio source or microphone + + console.log('connecting audio source', source) + visualizer.connectAudio(source) + + // load a preset + const presets = butterchurnPresets.getPresets() + const randomKey = Object.keys(presets)[Math.floor(Math.random() * Object.keys(presets).length)] + console.log('random key: ', randomKey) + const preset = presets[randomKey] + console.log('selected preset: ', preset) + + visualizer.loadPreset(preset, 0.0) // 2nd argument is the number of seconds to blend presets + + // render a frame + visualizer.render() + + // resize visualizer + visualizer.setRendererSize(width, height) + + return visualizer +} + +type Props = { + player: any, + playerRef: any, + width: number, + height: number +} + +const Visualizer = (props: Props) => { + const audioNode: any = props.playerRef.current + + // Select audioelement by provided selector + if (!audioNode) { + console.log('No audioNode') + return null + } + const internalPlayer = audioNode.getInternalPlayer() + + const canvasRef = React.useCallback(node => { + console.log('audioNode: ', audioNode) + console.log('internalPlayer: ', internalPlayer) + + if (internalPlayer !== null && node !== null) { + const visualizer = enableVisualizer( + node, + internalPlayer, + props.width, + props.height + ) + + visualizer.setRendererSize(600, 800) + } + }, [audioNode, internalPlayer]) + + return ( + + ) +} + +export default Visualizer diff --git a/src/containers/VisualizerContainer.tsx b/src/containers/VisualizerContainer.tsx new file mode 100644 index 00000000..9f6e9b0e --- /dev/null +++ b/src/containers/VisualizerContainer.tsx @@ -0,0 +1,19 @@ +import { connect } from 'react-redux' +import React from 'react' +import { AutoSizer } from 'react-virtualized' + +import Visualizer from '../components/Visualizer' + +export default connect( + (state: any) => { + return { + player: state.player + } + } +)((props: any): any => ( + + {({ height, width }) => ( + + )} + +)) diff --git a/src/custom.d.ts b/src/custom.d.ts index 99668297..e039fada 100644 --- a/src/custom.d.ts +++ b/src/custom.d.ts @@ -2,3 +2,6 @@ declare module '*.scss' { export const content: { [className: string]: string }; export default content; } + +declare module 'butterchurn'; +declare module 'butterchurn-presets'; -- GitLab From 10e90037cd363284bdfd23f5f1254617d2e2c833 Mon Sep 17 00:00:00 2001 From: Genar Trias Ortiz Date: Sun, 21 Feb 2021 01:13:35 +0100 Subject: [PATCH 2/6] trying to make milkdrop works with player --- src/components/Player/PlayerControls.tsx | 2 +- src/components/Visualizer/index.tsx | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Player/PlayerControls.tsx b/src/components/Player/PlayerControls.tsx index 0905cecd..f7aa20c6 100644 --- a/src/components/Player/PlayerControls.tsx +++ b/src/components/Player/PlayerControls.tsx @@ -267,7 +267,7 @@ class PlayerControls extends React.Component { } - + ) } diff --git a/src/components/Visualizer/index.tsx b/src/components/Visualizer/index.tsx index 6d4200a7..7fd3c15c 100644 --- a/src/components/Visualizer/index.tsx +++ b/src/components/Visualizer/index.tsx @@ -14,6 +14,7 @@ const enableVisualizer = ( console.log('No audio or canvas found!') return } + // initialize audioContext and get canvas const audioContext = new AudioContext() audioNode.crossOrigin = "anonymous" @@ -29,6 +30,7 @@ const enableVisualizer = ( console.log('connecting audio source', source) visualizer.connectAudio(source) + source.connect(audioContext.destination) // load a preset const presets = butterchurnPresets.getPresets() @@ -56,13 +58,14 @@ type Props = { } const Visualizer = (props: Props) => { - const audioNode: any = props.playerRef.current + const audioNode: any = props.playerRef // Select audioelement by provided selector if (!audioNode) { console.log('No audioNode') return null } + const internalPlayer = audioNode.getInternalPlayer() const canvasRef = React.useCallback(node => { @@ -82,7 +85,7 @@ const Visualizer = (props: Props) => { }, [audioNode, internalPlayer]) return ( - + ) } -- GitLab From 4a1044f1d462cfd5209f43c56de463b107888fa5 Mon Sep 17 00:00:00 2001 From: Genar Trias Ortiz Date: Mon, 22 Feb 2021 00:10:20 +0100 Subject: [PATCH 3/6] making spectrum works again --- src/components/AudioSpectrum.tsx | 23 ++++++----------------- src/components/Player/PlayerControls.tsx | 6 ++---- src/components/Spectrum.tsx | 12 +++++------- src/components/Visualizer/index.tsx | 4 +++- 4 files changed, 16 insertions(+), 29 deletions(-) diff --git a/src/components/AudioSpectrum.tsx b/src/components/AudioSpectrum.tsx index 8f1fe27c..19fc073e 100644 --- a/src/components/AudioSpectrum.tsx +++ b/src/components/AudioSpectrum.tsx @@ -11,7 +11,7 @@ type Props = { id?: string, width?: number, height?: number, - audioSelector: string, + playerRef: HTMLAudioElement, capColor?: string, capHeight: number, meterWidth: number, @@ -38,7 +38,6 @@ class AudioSpectrum extends React.Component { animationId: any audioContext: any - audioEle: any audioCanvas: any playStatus: string | null canvasId: string @@ -48,13 +47,12 @@ class AudioSpectrum extends React.Component { this.animationId = null this.audioContext = null - this.audioEle = null this.audioCanvas = null this.playStatus = null this.canvasId = this.props.id || this.getRandomId(50) } - getRandomId(len): string { + getRandomId(len: number): string { const str = '1234567890-qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM' const strLen = str.length let res = '' @@ -68,21 +66,20 @@ class AudioSpectrum extends React.Component { componentDidMount() { this.prepareAPIs() this.prepareElements() - const analyser = this.setupAudioNode(this.audioEle) + const analyser = this.setupAudioNode(this.props.playerRef) this.initAudioEvents(analyser) } componentWillUnmount() { - this.audioEle = null this.audioCanvas = null this.audioContext = null } initAudioEvents = (analyser) => { - this.audioEle.onpause = (e) => { + this.props.playerRef.onpause = (e) => { this.playStatus = 'PAUSED' } - this.audioEle.onplay = (e) => { + this.props.playerRef.onplay = (e) => { this.playStatus = 'PLAYING' this.drawSpectrum(analyser) } @@ -150,7 +147,7 @@ class AudioSpectrum extends React.Component { this.animationId = requestAnimationFrame(drawMeter) } - setupAudioNode = (audioEle) => { + setupAudioNode = (audioEle: HTMLMediaElement) => { const analyser = this.audioContext.createAnalyser() analyser.smoothingTimeConstant = 0.8 analyser.fftSize = 2048 @@ -163,15 +160,7 @@ class AudioSpectrum extends React.Component { } prepareElements = () => { - // Select audioelement by provided selector - const selection = document.querySelectorAll(this.props.audioSelector); - - this.audioEle = Array.from(selection)[0] - - console.log('audioEle: : ', this.audioEle) - this.audioCanvas = document.getElementById(this.canvasId) - console.log('audioCanvas: : ', this.audioCanvas) } diff --git a/src/components/Player/PlayerControls.tsx b/src/components/Player/PlayerControls.tsx index f7aa20c6..5436fffc 100644 --- a/src/components/Player/PlayerControls.tsx +++ b/src/components/Player/PlayerControls.tsx @@ -187,6 +187,7 @@ class PlayerControls extends React.Component { file: { forceAudio: currentPlaying.media_type === 'audio', attributes: { + crossOrigin: 'anonymous', className: currentPlaying.media_type === 'video' ? 'video-element': 'video-element' } } @@ -260,10 +261,7 @@ class PlayerControls extends React.Component { - { - this.playerRef.current && - - } + } diff --git a/src/components/Spectrum.tsx b/src/components/Spectrum.tsx index 5aac244d..780422cf 100644 --- a/src/components/Spectrum.tsx +++ b/src/components/Spectrum.tsx @@ -4,7 +4,7 @@ import AudioSpectrum from './AudioSpectrum' type Props = { appSettings: any, - audioSelector: any + playerRef: any } type State = { width: number @@ -31,14 +31,12 @@ class Spectrum extends React.Component { } render () { - if ( - !this.props.appSettings.settings - || !this.props.appSettings.settings.app.spectrum.enabled - ) { + const widthFactor = 8 + + if (!this.props?.playerRef?.getInternalPlayer()) { return null } - const widthFactor = 8 return ( { meterWidth={this.state.width / (this.state.width / widthFactor)} meterCount={this.state.width} width={this.state.width} - audioSelector={this.props.audioSelector} + playerRef={this.props?.playerRef?.getInternalPlayer()} meterColor={[ {stop: 0, color: '#f00'}, {stop: 0.5, color: '#0CD7FD'}, diff --git a/src/components/Visualizer/index.tsx b/src/components/Visualizer/index.tsx index 7fd3c15c..c54386bd 100644 --- a/src/components/Visualizer/index.tsx +++ b/src/components/Visualizer/index.tsx @@ -18,7 +18,9 @@ const enableVisualizer = ( // initialize audioContext and get canvas const audioContext = new AudioContext() audioNode.crossOrigin = "anonymous" + const analyser = audioContext.createAnalyser() const source = audioContext.createMediaElementSource(audioNode) + source.connect(analyser) console.log('audioContext: ', audioContext) const visualizer = butterchurn.createVisualizer(audioContext, canvas, { @@ -29,7 +31,7 @@ const enableVisualizer = ( // get audioNode from audio source or microphone console.log('connecting audio source', source) - visualizer.connectAudio(source) + visualizer.connectAudio(analyser) source.connect(audioContext.destination) // load a preset -- GitLab From cb6155b5812086ebf00cb3d6bfcbd0e36bbb1b8f Mon Sep 17 00:00:00 2001 From: Genar Trias Ortiz Date: Mon, 22 Feb 2021 02:11:12 +0100 Subject: [PATCH 4/6] successfull implemented visuals and spectrum --- src/components/AudioSpectrum.tsx | 114 +++++++++++++++++++---- src/components/Player/ContextualMenu.tsx | 28 ++++++ src/components/Player/PlayerControls.tsx | 13 +-- src/components/Spectrum.tsx | 68 -------------- src/components/Visualizer.tsx | 57 ++++++++++++ src/components/Visualizer/index.tsx | 94 ------------------- src/constants/ActionTypes.ts | 2 + src/containers/VisualizerContainer.tsx | 19 ---- src/locales/en.json | 4 +- src/reducers/app.ts | 13 ++- src/styles/audio-canvas.scss | 2 - 11 files changed, 202 insertions(+), 212 deletions(-) delete mode 100644 src/components/Spectrum.tsx create mode 100644 src/components/Visualizer.tsx delete mode 100644 src/components/Visualizer/index.tsx delete mode 100644 src/containers/VisualizerContainer.tsx diff --git a/src/components/AudioSpectrum.tsx b/src/components/AudioSpectrum.tsx index 19fc073e..4b71f6ce 100644 --- a/src/components/AudioSpectrum.tsx +++ b/src/components/AudioSpectrum.tsx @@ -3,12 +3,16 @@ * https://github.com/hu-ke/react-audio-spectrum */ import * as React from 'react' +import butterchurn from 'butterchurn' +import butterchurnPresets from 'butterchurn-presets' + import logger from '../utils/logger' declare var AudioContext: any; type Props = { - id?: string, + spectrumId?: string, + visualsId?: string, width?: number, height?: number, playerRef: HTMLAudioElement, @@ -18,6 +22,8 @@ type Props = { meterCount: number, meterColor: any, gap: number, + showSpectrum?: boolean, + showVisuals?: boolean } class AudioSpectrum extends React.Component { @@ -38,18 +44,26 @@ class AudioSpectrum extends React.Component { animationId: any audioContext: any - audioCanvas: any + spectrumCanvas: any + visualsCanvas: any playStatus: string | null - canvasId: string + spectrumCanvasId: string + visualsCanvasId: string + visualizer: any + analyser: any constructor(props: Props) { super(props) this.animationId = null this.audioContext = null - this.audioCanvas = null + this.spectrumCanvas = null + this.visualsCanvas = null this.playStatus = null - this.canvasId = this.props.id || this.getRandomId(50) + this.visualizer = null + this.analyser = null + this.spectrumCanvasId = this.props.spectrumId || this.getRandomId(50) + this.visualsCanvasId = this.props.visualsId || this.getRandomId(50) } getRandomId(len: number): string { @@ -66,30 +80,77 @@ class AudioSpectrum extends React.Component { componentDidMount() { this.prepareAPIs() this.prepareElements() - const analyser = this.setupAudioNode(this.props.playerRef) - this.initAudioEvents(analyser) + this.analyser = this.setupAudioNode(this.props.playerRef) + this.initializeVisualizer() + this.initAudioEvents(this.analyser) + } + + initializeVisualizer = () => { + if (this.props.showVisuals) { + this.visualizer = butterchurn.createVisualizer(this.audioContext, this.visualsCanvas, { + width: this.props.width, + height: this.props.height + }) + this.visualizer.connectAudio(this.analyser) + } + } + + componentDidUpdate(prevProps) { + if (prevProps.showSpectrum !== this.props.showSpectrum) { + this.prepareElements() + this.initializeVisualizer() + this.initAudioEvents(this.analyser) + } + if (prevProps.showVisuals !== this.props.showVisuals) { + this.prepareElements() + this.initializeVisualizer() + this.initAudioEvents(this.analyser) + } } componentWillUnmount() { - this.audioCanvas = null + this.spectrumCanvas = null + this.visualsCanvas = null this.audioContext = null + this.visualizer = null } initAudioEvents = (analyser) => { + const { showSpectrum, showVisuals } = this.props this.props.playerRef.onpause = (e) => { this.playStatus = 'PAUSED' } this.props.playerRef.onplay = (e) => { this.playStatus = 'PLAYING' - this.drawSpectrum(analyser) + if (showSpectrum) { + this.drawSpectrum(analyser) + } + if (showVisuals) { + const startRender = () => { + this.visualizer.render() + requestAnimationFrame(() => startRender()) + } + + const presets = butterchurnPresets.getPresets() + const randomKey = Object.keys(presets)[Math.floor(Math.random() * Object.keys(presets).length)] + const preset = presets[randomKey] + + if (this.visualizer) { + console.log('setting size of:', this.props.width, this.props.height) + this.visualizer.setRendererSize(this.props.width, this.props.height) + this.visualizer.loadPreset(preset, 0.0) // 2nd argument is the number of seconds to blend presets + } + + startRender() + } } } drawSpectrum = (analyser) => { - const cwidth = this.audioCanvas.width - const cheight = this.audioCanvas.height - this.props.capHeight + const cwidth = this.spectrumCanvas.width + const cheight = this.spectrumCanvas.height - this.props.capHeight const capYPositionArray: Array = [] // store the vertical position of hte caps for the preivous frame - const ctx = this.audioCanvas.getContext('2d') + const ctx = this.spectrumCanvas.getContext('2d') let gradient = ctx.createLinearGradient(0, 0, 0, 300) if (this.props.meterColor.constructor === Array) { @@ -153,6 +214,7 @@ class AudioSpectrum extends React.Component { analyser.fftSize = 2048 const mediaEleSource = this.audioContext.createMediaElementSource(audioEle) + mediaEleSource.connect(analyser) mediaEleSource.connect(this.audioContext.destination); @@ -160,8 +222,10 @@ class AudioSpectrum extends React.Component { } prepareElements = () => { - this.audioCanvas = document.getElementById(this.canvasId) - console.log('audioCanvas: : ', this.audioCanvas) + this.spectrumCanvas = document.getElementById(this.spectrumCanvasId) + console.log('spectrumCanvas', this.spectrumCanvas) + this.visualsCanvas = document.getElementById(this.visualsCanvasId) + console.log('visualsCanvas', this.visualsCanvas) } prepareAPIs = () => { @@ -173,12 +237,24 @@ class AudioSpectrum extends React.Component { } render() { + const { showSpectrum, showVisuals } = this.props + + console.log('showSpectrum: ', showSpectrum) + return ( - + <> + { showVisuals && ( + + )} + { showSpectrum && ( + + )} + ) } } diff --git a/src/components/Player/ContextualMenu.tsx b/src/components/Player/ContextualMenu.tsx index 93fd2cf9..52980a37 100644 --- a/src/components/Player/ContextualMenu.tsx +++ b/src/components/Player/ContextualMenu.tsx @@ -135,6 +135,34 @@ const ContextualMenu = (props: MenuProps) => { } + + + + + + ) diff --git a/src/components/Player/PlayerControls.tsx b/src/components/Player/PlayerControls.tsx index 5436fffc..4749b725 100644 --- a/src/components/Player/PlayerControls.tsx +++ b/src/components/Player/PlayerControls.tsx @@ -2,7 +2,6 @@ import { Dispatch } from 'redux' import { Link } from 'react-router-dom' import KeyHandler, {KEYPRESS} from 'react-key-handler' import React from 'react' -import * as ReactDOM from 'react-dom' import ReactPlayer from 'react-player' import classNames from 'classnames' import { CSSTransitionGroup } from 'react-transition-group' @@ -14,8 +13,7 @@ import Controls from './Controls' import Cover from './Cover' import KeyHandlers from './KeyHandlers' import ProgressBar from './ProgressBar' -import Spectrum from './../Spectrum' -import VisualizerContainer from '../../containers/VisualizerContainer' +import Visualizer from './../Visualizer' import WebtorrentPlayer from './CustomPlayers/WebtorrentPlayer' import * as types from '../../constants/ActionTypes' @@ -233,14 +231,14 @@ class PlayerControls extends React.Component {
- +
{ currentPlaying.title }
{ currentPlaying.artist && - -
+ +
{ currentPlaying.artist.name }
@@ -261,11 +259,10 @@ class PlayerControls extends React.Component {
- } - + ) } diff --git a/src/components/Spectrum.tsx b/src/components/Spectrum.tsx deleted file mode 100644 index 780422cf..00000000 --- a/src/components/Spectrum.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import * as React from 'react' -import { connect } from 'react-redux' -import AudioSpectrum from './AudioSpectrum' - -type Props = { - appSettings: any, - playerRef: any -} -type State = { - width: number -} - -class Spectrum extends React.Component { - constructor(props: Props) { - super(props); - this.state = { width: 0 }; - this.updateWindowDimensions = this.updateWindowDimensions.bind(this) - } - - componentDidMount() { - this.updateWindowDimensions() - window.addEventListener('resize', this.updateWindowDimensions) - } - - componentWillUnmount() { - window.removeEventListener('resize', this.updateWindowDimensions) - } - - updateWindowDimensions() { - this.setState({ width: window.innerWidth }) - } - - render () { - const widthFactor = 8 - - if (!this.props?.playerRef?.getInternalPlayer()) { - return null - } - - return ( - - ) - } -} - -type ConnectState = { - settings: any -} - -export default connect( - ({ settings }: ConnectState) => ({ - appSettings: settings - }) -)(Spectrum) diff --git a/src/components/Visualizer.tsx b/src/components/Visualizer.tsx new file mode 100644 index 00000000..d96f8e49 --- /dev/null +++ b/src/components/Visualizer.tsx @@ -0,0 +1,57 @@ +import * as React from 'react' +import { connect } from 'react-redux' +import AudioSpectrum from './AudioSpectrum' +import { AutoSizer } from 'react-virtualized' + +type Props = { + appSettings: any, + app: any, + playerRef: any +} +class Visualizer extends React.Component { + render () { + const widthFactor = 8 + + if (!this.props?.playerRef?.getInternalPlayer()) { + return null + } + + return ( + + {({ height, width }) => ( + + )} + + ) + } +} + +type ConnectState = { + settings: any, + app: any +} + +export default connect( + ({ settings, app }: ConnectState) => ({ + appSettings: settings, + app: app + }) +)(Visualizer) diff --git a/src/components/Visualizer/index.tsx b/src/components/Visualizer/index.tsx deleted file mode 100644 index c54386bd..00000000 --- a/src/components/Visualizer/index.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import React from 'react' -import butterchurn from 'butterchurn' -import butterchurnPresets from 'butterchurn-presets' - -const enableVisualizer = ( - canvas: any, - audioNode: any, - width: number, - height: number -) => { - console.log('canvas: ', canvas) - - if (!canvas || !audioNode) { - console.log('No audio or canvas found!') - return - } - - // initialize audioContext and get canvas - const audioContext = new AudioContext() - audioNode.crossOrigin = "anonymous" - const analyser = audioContext.createAnalyser() - const source = audioContext.createMediaElementSource(audioNode) - source.connect(analyser) - console.log('audioContext: ', audioContext) - - const visualizer = butterchurn.createVisualizer(audioContext, canvas, { - width, - height - }) - - // get audioNode from audio source or microphone - - console.log('connecting audio source', source) - visualizer.connectAudio(analyser) - source.connect(audioContext.destination) - - // load a preset - const presets = butterchurnPresets.getPresets() - const randomKey = Object.keys(presets)[Math.floor(Math.random() * Object.keys(presets).length)] - console.log('random key: ', randomKey) - const preset = presets[randomKey] - console.log('selected preset: ', preset) - - visualizer.loadPreset(preset, 0.0) // 2nd argument is the number of seconds to blend presets - - // render a frame - visualizer.render() - - // resize visualizer - visualizer.setRendererSize(width, height) - - return visualizer -} - -type Props = { - player: any, - playerRef: any, - width: number, - height: number -} - -const Visualizer = (props: Props) => { - const audioNode: any = props.playerRef - - // Select audioelement by provided selector - if (!audioNode) { - console.log('No audioNode') - return null - } - - const internalPlayer = audioNode.getInternalPlayer() - - const canvasRef = React.useCallback(node => { - console.log('audioNode: ', audioNode) - console.log('internalPlayer: ', internalPlayer) - - if (internalPlayer !== null && node !== null) { - const visualizer = enableVisualizer( - node, - internalPlayer, - props.width, - props.height - ) - - visualizer.setRendererSize(600, 800) - } - }, [audioNode, internalPlayer]) - - return ( - - ) -} - -export default Visualizer diff --git a/src/constants/ActionTypes.ts b/src/constants/ActionTypes.ts index 6c055649..1dc566c4 100644 --- a/src/constants/ActionTypes.ts +++ b/src/constants/ActionTypes.ts @@ -46,6 +46,8 @@ export const TOGGLE_PLAYING = 'TOGGLE_PLAYING' export const SET_PLAYER_PROGRESS = 'SET_PLAYER_PROGRESS' export const SET_PLAYER_DURATION = 'SET_PLAYER_DURATION' export const SET_PLAYER_PLAYED_SECONDS = 'SET_PLAYER_PLAYED_SECONDS' +export const TOGGLE_SPECTRUM = 'TOGGLE_SPECTRUM' +export const TOGGLE_VISUALS = 'TOGGLE_VISUALS' // Webtorrent export const ADD_WEBTORRENT_MEDIA = 'ADD_WEBTORRENT_MEDIA' diff --git a/src/containers/VisualizerContainer.tsx b/src/containers/VisualizerContainer.tsx deleted file mode 100644 index 9f6e9b0e..00000000 --- a/src/containers/VisualizerContainer.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { connect } from 'react-redux' -import React from 'react' -import { AutoSizer } from 'react-virtualized' - -import Visualizer from '../components/Visualizer' - -export default connect( - (state: any) => { - return { - player: state.player - } - } -)((props: any): any => ( - - {({ height, width }) => ( - - )} - -)) diff --git a/src/locales/en.json b/src/locales/en.json index 4d73cfc6..c351fdad 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -58,7 +58,9 @@ "repeat": "repeat", "fullScreen": "fullscreen", "toggleMiniQueue": "toggle queue", - "startPlaying": "start playing" + "startPlaying": "start playing", + "toggleSpectrum": "Toggle spectrum", + "toggleVisuals": "Toggle visuals" }, "message": { "noCollectionItems": "No collection items found, try adding more by searching or adding them manually: ", diff --git a/src/reducers/app.ts b/src/reducers/app.ts index 69a60171..1af6b77c 100644 --- a/src/reducers/app.ts +++ b/src/reducers/app.ts @@ -7,7 +7,9 @@ type State = { mqlMatch: boolean, loading: boolean, displayMiniQueue: boolean, - version: string + version: string, + showSpectrum: boolean, + showVisuals: boolean } export const defaultState = { @@ -18,6 +20,8 @@ export const defaultState = { loading: true, slimPlayer: false, displayMiniQueue: true, + showSpectrum: false, + showVisuals: false, version: process.env.REACT_APP_VERSION || 'development' } @@ -27,6 +31,13 @@ export default (state: State = defaultState, action: any) => { return {...state, sidebarToggled: action.value ? action.value :!state.sidebarToggled} } + case types.TOGGLE_SPECTRUM: { + return {...state, showSpectrum: !state.showSpectrum} + } + case types.TOGGLE_VISUALS: { + return {...state, showVisuals: !state.showVisuals} + } + case types.SHOW_ADD_MEDIA_MODAL: { return {...state, showAddMediaModal: true} } diff --git a/src/styles/audio-canvas.scss b/src/styles/audio-canvas.scss index 9a741cf8..2db63240 100644 --- a/src/styles/audio-canvas.scss +++ b/src/styles/audio-canvas.scss @@ -1,9 +1,7 @@ #audio-canvas { position: absolute; - z-index: -1; bottom: 0; width: 100%; height: 80px; left: 0; - opacity: 0.5; } -- GitLab From df760efca963e58dc8d65a57d095c6c96524b4a9 Mon Sep 17 00:00:00 2001 From: Genar Trias Ortiz Date: Mon, 22 Feb 2021 02:18:49 +0100 Subject: [PATCH 5/6] remove playercontrols spec --- src/components/Player/PlayerControls.spec.tsx | 58 ------------------- 1 file changed, 58 deletions(-) delete mode 100644 src/components/Player/PlayerControls.spec.tsx diff --git a/src/components/Player/PlayerControls.spec.tsx b/src/components/Player/PlayerControls.spec.tsx deleted file mode 100644 index 34d170c0..00000000 --- a/src/components/Player/PlayerControls.spec.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import * as React from 'react' -import jest from 'jest' - -import { shallow } from 'enzyme' - -import PlayerControls from './PlayerControls' -import configureEnzyme from '../../tests/configureEnzyme' - -configureEnzyme() - -const setup = (definedProps: any): {props: any, enzymeWrapper: any} => { - const props = { - player: { - showPlayer: false - }, - dispatch: () => {}, - queue: { - trackIds: [], - currentPlaying: 'test' - }, - itemCount: 0, - settings: { settings: { app: { ipfs: {} } } }, - collection: { - rows: { - 'test': { - name: 'test' - } - } - }, - match: { - params: {} - }, - ...definedProps - } - - const enzymeWrapper = shallow() - - return { - props, - enzymeWrapper, - } -} - -it('renders without crashing', () => { - const { enzymeWrapper } = setup({itemCount: 1, player: { showPlayer: true }}) - console.log(enzymeWrapper.debug()) - expect(enzymeWrapper.find('.react-player').exists()) - .toBe(false) -}) - -it('renders handle playNext', () => { - const props = { - itemCount: 1 - } - - const { enzymeWrapper } = setup(props) - enzymeWrapper.instance().playNext() -}) -- GitLab From c5a14d6b572ce9130379c00b1a50c9ca4a072e73 Mon Sep 17 00:00:00 2001 From: Genar Trias Ortiz Date: Mon, 22 Feb 2021 02:22:29 +0100 Subject: [PATCH 6/6] fixed z-index for spectrum --- src/styles/audio-canvas.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/audio-canvas.scss b/src/styles/audio-canvas.scss index 2db63240..1889ede4 100644 --- a/src/styles/audio-canvas.scss +++ b/src/styles/audio-canvas.scss @@ -4,4 +4,5 @@ width: 100%; height: 80px; left: 0; + z-index: 100; } -- GitLab