Skip to content

fix(current_playlist_dialog): this PR adds a current playlist dialog to UI #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
caleyg wants to merge 2 commits into from
Closed

fix(current_playlist_dialog): this PR adds a current playlist dialog to UI #43

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
185a1b2
fix(current_playlist_dialog): this PR adds a current playlist dialog to
caleyg Apr 14, 2023
6e00984
fix(current_playlist_dialog): adding index to dialog for uniqueness
caleyg Apr 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 68 additions & 9 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,18 @@ class App extends Component {
super(props);
this.state = {
discoveries: [],
groups: [], // Currently duscovered patterns and their controllers
groups: [], // Currently discovered patterns and their controllers
runningPatternName: null,
playlist: [], // Browser-persisted single playlist singleton
playlistIndex: 0,
playlistDefaultInterval: 15,
cloneSource: null,
cloneDest: {},
cloneInProgress: false,
showDevControls: false
showDevControls: false,
showCurrentPlaylist: false,
}
// The playlist is the only thing currently persisted and it is per-broswer
// The playlist is the only thing currently persisted, and it is per-browser
this.state.playlist = JSON.parse(localStorage.getItem(PLAYLIST_KEY)) || []

if (this.state.playlist.length) {
Expand All @@ -33,6 +34,7 @@ class App extends Component {
this._playlistInterval = null

this.cloneDialogRef = React.createRef();
this.playlistDialogRef = React.createRef();
}

async poll() {
Expand Down Expand Up @@ -207,7 +209,20 @@ class App extends Component {
this.cloneDialogRef.current && this.cloneDialogRef.current.scrollIntoView(true);
}, 100)
}

openPlaylistDialog = async (event) => {
event.preventDefault();
this.setState({
showCurrentPlaylist: true
});
setTimeout(() => {
this.playlistDialogRef.current && this.playlistDialogRef.current.scrollIntoView(true);
}, 100)
if( this.state.showCurrentPlaylist === true ) {
this.setState({
showCurrentPlaylist: false
});
}
}
closeCloneDialog = async (event) => {
event.preventDefault();
this.setState({
Expand Down Expand Up @@ -260,7 +275,6 @@ class App extends Component {
}
}


render() {
let cloneDialog = null;
if (this.state.cloneSource) {
Expand Down Expand Up @@ -309,6 +323,44 @@ class App extends Component {
</div>
)
}
let playlistDialog = null
if (this.state.showCurrentPlaylist) {
playlistDialog = (
<div className="row" ref={this.playlistDialogRef}>
<div className="col-lg-8">
<div className="card" >
<div className="card-body">
<h5 className="card-title">Current Playlist</h5>
<div className="row no-gutters align-items-center">
<div className="col-md-7 p-0">
<p>Pattern</p>
</div>
<div className="col-md-1 align-items-center row py-0 pr-0 text-left">
<p>Duration(seconds)</p>
</div>
</div>
{(this.state.playlist).map( (pattern, index) =>
<div className="row no-gutters list-group-item py-0 pr-0" key={index}>
<div className="row align-items-center">
<div className="col-md-6 p-0">
<div className="p-2 m-auto">
{pattern.name}
</div>
</div>
<div className="col-md-1 py-0 pr-0 row no-gutters text-left">
<div className="p-2 m-auto">
{pattern.duration}
</div>
</div>
</div>
</div>
)}
</div>
</div>
</div>
</div>
)
}

return (
<div className="container">
Expand Down Expand Up @@ -350,8 +402,15 @@ class App extends Component {
<hr/>

{cloneDialog}

<h3>Patterns</h3>
{playlistDialog}
<h3>
Patterns
<button
className="btn btn-secondary float-right text-left"
onClick={(e) => this.openPlaylistDialog(e)}>
View Current Playlist
</button>
</h3>
<div className="list-group">
{this.state.groups.map((pattern) => {
const getStatus = () => {
Expand All @@ -363,7 +422,7 @@ class App extends Component {
return 'available'
}
}
const getDuraton = () => {
const getDuration = () => {
const playlistIndex = _(this.state.playlist).findIndex(['name', pattern.name])
if (playlistIndex === -1) return ''
return this.state.playlist[playlistIndex].duration
Expand All @@ -378,7 +437,7 @@ class App extends Component {
handleAddClick={this._handleAddClick}
status={getStatus()}
showDurations={(this.state.playlist.length > 1)}
duration={getDuraton()}
duration={getDuration()}
/>
)
})}
Expand Down