Fixed Audio Player (#1696)

* fixed audio player from not displaying from miniplayer * updated Rightpanel snapshot
NewSpring · Jan 3, 2017 · f4999d3 · f4999d3
1 parent e4f7fe9
commit f4999d3
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 36 deletions.
diff --git a/imports/components/players/audio/__tests__/audio.Scrubber.js b/imports/components/players/audio/__tests__/audio.Scrubber.js
@@ -6,12 +6,14 @@ import { AudioScrubberWithoutData as AudioScrubber } from "../audio.Scrubber";
 
 const defaultProps = {
   isLight: false,
-  seek: jest.fn(),
-  time: "20",
-  progress: "20",
-  playing: {
-    track: {
-      duration: "12:23",
+  audio: {
+    seek: jest.fn(),
+    time: "20",
+    progress: "20",
+    playing: {
+      track: {
+        duration: "12:23",
+      },
     },
   },
 };
@@ -224,23 +226,25 @@ it("touchEnd calls seek with last percent and evntually resets state", () => {
 });
 
 it("scrubStyle uses progress if no override", () => {
-  const wrapper = shallow(generateComponent({
-    progress: 30,
-  }));
-  wrapper.setState({ lastPercent: 20, override: false });
+  const localProps = { ...defaultProps }
+  localProps.audio.progress = "30";
+
+  const wrapper = shallow(generateComponent(localProps));
+  wrapper.setState({ lastPercent: "50", override: false });
   const result = wrapper.instance().scrubStyle();
   expect(result).toEqual({
     width: "30%",
   });
 });
 
 it("scrubStyle uses lastPercent if override", () => {
-  const wrapper = shallow(generateComponent({
-    progress: 30,
-  }));
-  wrapper.setState({ lastPercent: 20, override: true });
+  const localProps = { ...defaultProps }
+  localProps.audio.progress = "30";
+
+  const wrapper = shallow(generateComponent(localProps));
+  wrapper.setState({ lastPercent: "70", override: true });
   const result = wrapper.instance().scrubStyle();
   expect(result).toEqual({
-    width: "20%",
+    width: "70%",
   });
 });
diff --git a/imports/components/players/audio/audio.Scrubber.js b/imports/components/players/audio/audio.Scrubber.js
@@ -12,6 +12,7 @@ class AudioScrubberWithoutData extends Component {
 
   static propTypes = {
     isLight: PropTypes.bool.isRequired,
+    audio: PropTypes.Object,
   }
 
   state = {
@@ -79,7 +80,6 @@ class AudioScrubberWithoutData extends Component {
     else if (percentClicked < 0) {
       percentClicked = 0;
     }
-
     this.props.seek(percentClicked);
   }
 
@@ -103,10 +103,10 @@ class AudioScrubberWithoutData extends Component {
     dark ? "text-dark-tertiary" : "text-light-tertiary"
   )
 
-  getTrackDuration = () => (this.props.playing.track.duration);
+  getTrackDuration = () => (this.props.audio.playing.track.duration);
 
   getCurrentTime = () => {
-    const { time } = this.props;
+    const { time } = this.props.audio;
     return time;
   };
 
@@ -142,9 +142,8 @@ class AudioScrubberWithoutData extends Component {
 
 
   scrubStyle = () => {
-    let { progress } = this.props;
+    let { progress } = this.props.audio;
     const { lastPercent, override } = this.state;
-
     if (override) {
       progress = lastPercent;
     }

diff --git a/imports/pages/give/home/__tests__/__snapshots__/RightPanel.js.snap b/imports/pages/give/home/__tests__/__snapshots__/RightPanel.js.snap
@@ -114,6 +114,10 @@ exports[`RightPanel Layout should render a loading state 1`] = `
           inputClasses="outlined--dotted outlined--light text-light-primary h6 hard-top flush-bottom"
           items={
             Array [
+              Object {
+                "label": 2017,
+                "value": 2017,
+              },
               Object {
                 "label": 2016,
                 "value": 2016,
@@ -150,10 +154,6 @@ exports[`RightPanel Layout should render a loading state 1`] = `
                 "label": 2008,
                 "value": 2008,
               },
-              Object {
-                "label": 2007,
-                "value": 2007,
-              },
             ]
           }
           onChange={[Function]}>
@@ -163,6 +163,10 @@ exports[`RightPanel Layout should render a loading state 1`] = `
               className="outlined--dotted outlined--light text-light-primary h6 hard-top flush-bottom"
               onChange={[Function]}
               onFocus={[Function]}>
+              <option
+                value={2017}>
+                2017
+              </option>
               <option
                 value={2016}>
                 2016
@@ -199,10 +203,6 @@ exports[`RightPanel Layout should render a loading state 1`] = `
                 value={2008}>
                 2008
               </option>
-              <option
-                value={2007}>
-                2007
-              </option>
             </select>
           </div>
         </Select>
@@ -347,6 +347,10 @@ exports[`RightPanel Layout should render with data 1`] = `
           inputClasses="outlined--dotted outlined--light text-light-primary h6 hard-top flush-bottom"
           items={
             Array [
+              Object {
+                "label": 2017,
+                "value": 2017,
+              },
               Object {
                 "label": 2016,
                 "value": 2016,
@@ -383,10 +387,6 @@ exports[`RightPanel Layout should render with data 1`] = `
                 "label": 2008,
                 "value": 2008,
               },
-              Object {
-                "label": 2007,
-                "value": 2007,
-              },
             ]
           }
           onChange={[Function]}>
@@ -396,6 +396,10 @@ exports[`RightPanel Layout should render with data 1`] = `
               className="outlined--dotted outlined--light text-light-primary h6 hard-top flush-bottom"
               onChange={[Function]}
               onFocus={[Function]}>
+              <option
+                value={2017}>
+                2017
+              </option>
               <option
                 value={2016}>
                 2016
@@ -432,10 +436,6 @@ exports[`RightPanel Layout should render with data 1`] = `
                 value={2008}>
                 2008
               </option>
-              <option
-                value={2007}>
-                2007
-              </option>
             </select>
           </div>
         </Select>