PlaylistItem.jsx 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. import React, { Component } from "react";
  2. import PropTypes from "prop-types";
  3. import { connect } from "react-redux";
  4. import { openOverlay2 } from "actions/stationOverlay";
  5. import io from "io";
  6. @connect(state => ({
  7. station: {
  8. stationId: state.station.info.get("stationId"),
  9. mode: state.station.info.get("mode"),
  10. },
  11. }))
  12. export default class PlaylistItem extends Component {
  13. constructor(props) {
  14. super(props);
  15. }
  16. isOwner = () => {
  17. if (this.props.loggedIn) {
  18. if (this.props.user.userId === this.props.stationOwner) return true;
  19. }
  20. return false;
  21. };
  22. playPlaylist = (playlistId) => {
  23. this.messages.clearErrorSuccess();
  24. io.getSocket((socket) => {
  25. socket.emit("stations.selectPrivatePlaylist", this.props.station.stationId, playlistId, (res) => {
  26. if (res.status === "success") {
  27. this.message.addSuccess("Successfully selected private playlist.");
  28. } else {
  29. this.messages.addError(res.message);
  30. }
  31. });
  32. });
  33. };
  34. getPlaylistAction = (playlistId) => {
  35. if (this.props.station.mode === "normal") {
  36. if (this.isOwner()) {
  37. const play = <span onClick={ () => { this.playPlaylist(playlistId) } }>PLAY!</span>;
  38. //const stop = <span onClick={ () => { this.stopPlaylist(playlistId) } }>STOP!</span>;
  39. const stop = null; // There's currently no backend functionality to stop a playlist from playing
  40. if (this.props.privatePlaylist === playlistId) return stop;
  41. else return play;
  42. }
  43. }
  44. return null;
  45. };
  46. render() {
  47. const { playlist } = this.props;
  48. return (
  49. <li>
  50. { playlist.get("displayName") } - <span onClick={ () => { this.props.dispatch(openOverlay2("editPlaylist", { playlistId: playlist.get("playlistId") })) } }>Edit</span>
  51. { this.getPlaylistAction(playlist.get("playlistId")) }
  52. </li>
  53. );
  54. }
  55. }