fix:audio name text overflow, cover transformation

CN.md

@@ -14,7 +14,6 @@ npm install react-jinke-music-player --save
 
 ## 预览
 
-![gif](https://github.com/lijinke666/react-jinke-music-player/blob/master/assets/example.gif) <br/>
 
 > 白天主题 <br/>
 

README.md

@@ -14,8 +14,6 @@ npm install react-jinke-music-player --save
 
 ## Screenshots
 
-![gif](https://github.com/lijinke666/react-jinke-music-player/blob/master/assets/example.gif) <br/>
-
 > Light Theme <br/>
 
 ![lightTheme](https://github.com/lijinke666/react-jinke-music-player/blob/master/assets/light-theme.png)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-jinke-music-player",
-  "version": "3.0.0",
-  "description": "A beautiful and responsive react music player component",
+  "version": "3.0.1",
+  "description": "Maybe must a beautiful and responsive react music player component",
   "main": "src/index.js",
   "scripts": {
     "start": "npm run demo",
@@ -24,6 +24,9 @@
     "react-player",
     "react-music-player",
     "react-audio-player",
+    "cd-player",
+    "music-player",
+    "audio-player",
     "component"
   ],
   "dependencies": {

src/index.js

@@ -1062,7 +1062,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
     this.progress = this.dom.querySelector('.progress')
     this.audio = this.dom.querySelector('audio')
     this.bindEvents(this.audio)
-    this.media = window.matchMedia("(max-width: 768px)");
+    this.media = window.matchMedia("(max-width: 768px) and (orientation : portrait)");
     this.media.addListener(this.listenerIsMobile)
   }
 }

src/playerMobile.js

@@ -59,7 +59,7 @@ const PlayerMobile = ({
             <div className="react-jinke-music-player-mobile-swtich text-center group">
                 {themeSwitch}
             </div>
-            <div className="react-jinke-music-player-mobile-cover text-center group">
+            <div className="react-jinke-music-player-mobile-cover text-center">
                 <img src={cover} alt="cover" key="cover" className={classNames("cover",{"img-rotate-pause":pause})} />
             </div>
             <div className="react-jinke-music-player-mobile-progress group">

src/playerMobileStyle.less

@@ -16,6 +16,9 @@
     justify-content: space-between;
     animation: mobile-bg @animate-time forwards;
     transition: background-color @animate-time;
+    >.group{
+        flex:1 1 auto;
+    }
     svg{
         transition: color @animate-time;
     }
@@ -62,6 +65,7 @@
             flex-basis: 80%;
             text-align: center;
              font-size:20px;
+             .ellipsis-1()
         }
         .item{
             display: inline-flex;
@@ -107,10 +111,10 @@
         margin:20px auto;
         animation: fromTo @animate-time forwards;
         overflow: hidden;
-            @media screen and (max-width:320px){
-                width:230px;
-                height:230px;
-            }
+        @media screen and (max-width:320px){
+            width:230px;
+            height:230px;
+        }
         .cover{
             width:100%;
             animation: imgRotate 30s linear infinite;
@@ -140,7 +144,7 @@
           animation: fromDown @animate-time forwards;
     }
     &-toggle{
-        padding: 20px 0;
+        padding: 17px 0;
         .group{
             svg{
                 font-size:40px;
@@ -152,6 +156,19 @@
                 font-size:60px;
             }
         }
+        @media screen and (max-width:320px){
+            padding: 10px 0;
+            >.group{
+                svg{
+                    font-size:32px;
+                }
+            }
+            .play-btn{
+                svg{
+                    font-size:50px;
+                }
+            }
+        }
     }
     &-toggle,&-progress{
         animation: fromTo @animate-time forwards;
@@ -168,9 +185,13 @@
                 svg{
                     color:@base-color;
                     font-size:25px;
+                    @media screen and (max-width:320px){
+                        font-size:20px;
+                    }
                 }
             }
         }
+
     }
      @keyframes mobile-bg{
          from{

src/styles.less

@@ -98,6 +98,13 @@
                     color:#fff !important;
                 }
             }
+            .react-jinke-music-player-mobile-singer{
+                .name{
+                    &::before,&::after{
+                        background-color: @font-color;
+                    }
+                }
+            }
 
         }
     }