Make durations stay while seeking

powercord-org · Dec 2, 2018 · af363c9 · af363c9
1 parent 3b476de
commit af363c9
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 77 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,5 +3,6 @@ node_modules
 
 src/Aethcord/plugins/stylemanager/styles/*
 !src/Aethcord/plugins/stylemanager/styles/ac-*.css
+!src/Aethcord/plugins/stylemanager/styles/ac-*.scss
 
-config.json
+config.json
diff --git a/src/Aethcord/plugins/spotify/Modal/Modal.jsx b/src/Aethcord/plugins/spotify/Modal/Modal.jsx
@@ -24,6 +24,7 @@ module.exports = class Modal extends React.Component {
       repeatState: '',
       shuffleState: '',
       seekBar: {
+        seeking: false,
         showDurations: false,
         progress: 0,
         progressAt: Date.now()
@@ -46,7 +47,8 @@ module.exports = class Modal extends React.Component {
         seekBar: {
           progressAt: Date.now(),
           progress: playerState.progress_ms,
-          showDurations: this.state.seekBar.showDurations
+          showDurations: this.state.seekBar.showDurations,
+          seeking: this.state.seekBar.seeking
         },
         repeatState: playerState.repeat_state,
         shuffleState: playerState.shuffle_state,
@@ -85,7 +87,7 @@ module.exports = class Modal extends React.Component {
     const artists = concat(currentItem.artists);
 
     let className = 'container-2Thooq aethcord-spotify';
-    if (this.state.seekBar.showDurations) {
+    if (this.state.seekBar.showDurations || this.state.seekBar.seeking) {
       className += ' expend';
     }
 
@@ -128,6 +130,12 @@ module.exports = class Modal extends React.Component {
             {...this.state.seekBar}
             isPlaying={this.state.isPlaying}
             duration={this.state.currentItem.duration}
+            onSeeking={(seeking) => this.setState({
+              seekBar: {
+                ...this.state.seekBar,
+                seeking: seeking
+              }
+            })}
             onDurationToggle={(show) => this.setState({
               seekBar: {
                 ...this.state.seekBar,

diff --git a/src/Aethcord/plugins/spotify/Modal/SeekBar.jsx b/src/Aethcord/plugins/spotify/Modal/SeekBar.jsx
@@ -44,6 +44,7 @@ module.exports = class SeekBar extends React.Component {
   }
 
   startSeek (e) {
+    this.props.onSeeking(true);
     this.setState({
       seeking: true,
       wasPlaying: this.props.isPlaying
@@ -70,6 +71,7 @@ module.exports = class SeekBar extends React.Component {
     document.removeEventListener('mousemove', this.seek);
     document.removeEventListener('mouseup', this.endSeek);
 
+    this.props.onSeeking(false);
     this.setState({ seeking: false });
     await SpotifyPlayer.seek(this.state.progress);
     if (this.state.wasPlaying) {
@@ -89,7 +91,7 @@ module.exports = class SeekBar extends React.Component {
       <div
         className='aethcord-spotify-seek'
         onMouseEnter={() => this.props.onDurationToggle(true)}
-        onMouseLeave={() => setTimeout(() => this.props.onDurationToggle(false), 250)}
+        onMouseLeave={() => this.props.onDurationToggle(false)}
       >
         <div className='aethcord-spotify-seek-durations'>
           <span className='aethcord-spotify-seek-duration'>

diff --git a/src/Aethcord/plugins/stylemanager/styles/ac-spotifyModal.css b/src/Aethcord/plugins/stylemanager/styles/ac-spotifyModal.css
diff --git a/src/Aethcord/plugins/stylemanager/styles/ac-spotifyModal.scss b/src/Aethcord/plugins/stylemanager/styles/ac-spotifyModal.scss
@@ -0,0 +1,75 @@
+.aethcord-spotify {
+  position: relative;
+  transition: .3s;
+  transition-delay: .25s;
+
+  .discriminator {
+    max-width: 84px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &-seek {
+    bottom: -6px;
+    display: flex;
+    flex-direction: column;
+    left: 0;
+    position: absolute;
+    right: 0;
+    z-index: 2;
+
+    &-durations {
+      display: flex;
+      font-size: 12px;
+      height: 15px;
+      justify-content: space-between;
+      opacity: 0;
+      padding-left: 5px;
+      padding-right: 5px;
+      transition: opacity .3s;
+      transition-delay: .25s;
+    }
+
+    &-bar {
+      cursor: pointer;
+      height: 2px;
+
+      &-progress {
+        background-color: #1ed860;
+        display: block;
+        height: 2px;
+      }
+
+      &-cursor {
+        background-color: #fff;
+        border-radius: 50%;
+        bottom: 2px;
+        height: 8px;
+        opacity: 0;
+        position: absolute;
+        transform: translateX(-50%);
+        transition: opacity .3s;
+        transition-delay: .25s;
+        width: 8px;
+        z-index: 6;
+      }
+    }
+
+    &-spacer {
+      height: 5px;
+      width: 100%;
+    }
+  }
+
+  &.expend {
+    padding-bottom: 12px;
+    transition-delay: 0s;
+
+    .aethcord-spotify-seek-durations,
+    .aethcord-spotify-seek-bar-cursor {
+      opacity: 1;
+      transition-delay: 0s;
+    }
+  }
+}