Merge branch 'master' of git.flexites.org:Students/ITRadio

client/src/App.vue

@@ -64,10 +64,11 @@ export default {
   },
   watch: {},
   created() {
-    this.$store.dispatch('setCurrentPlay', {
-      ...this.currentPlay,
-      isPlay: false,
-    });
+    // Нахуя это здесь?
+    // this.$store.dispatch('setCurrentPlay', {
+    //   ...this.currentPlay,
+    //   isPlay: false,
+    // });
   },
   mounted() {},
   methods: {},

client/src/assets/css/module/player.scss

@@ -74,6 +74,7 @@
 
       &:after {
         content: '';
+        animation: blink 1s infinite;
         position: absolute;
         border-radius: 50%;
         left: 40px;
@@ -223,3 +224,12 @@
     }
   }
 }
+
+@keyframes blink {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

client/src/assets/css/setting.scss

@@ -4,24 +4,34 @@ $document-width-m: 1024px;
 $document-width-s: 730px;
 $document-width-xs: 640px;
 $document-width-xxs: 480px;
-$color-primary: #5E5BFC;
-$color-white: #FFFFFF;
-$color-white-opacity: #BBB9CA;
+$color-primary: #5e5bfc;
+$color-white: #ffffff;
+$color-white-opacity: #bbb9ca;
 :root {
   --color-black: #232323;
   --color-white: $color-white;
-    --color-white-darker: #E7E7E7;
+  --color-white-darker: #e7e7e7;
   --color-white-opacity: $color-white-opacity;
-    --bg-wrapper-modal: #000000E5;
+  --bg-wrapper-modal: #000000e5;
   --color-primary: $color-primary;
-    --color-black-cc: #000000CC;
-    --color-emmit: #E81717;
-    --bg-opacity: #74767D;
+  --color-black-cc: #000000cc;
+  --color-emmit: #e81717;
+  --bg-opacity: #74767d;
   --base-fz: 18px;
   --base-lh: 1.3;
   --font-family-base: 'Manrope', 'Tahoma', sans-serif;
-    --linear-gradient-highlight: linear-gradient(259.3deg, #5E5BFC 0.44%, #871DF0 97.88%);
-    --linear-gradient: linear-gradient(91.17deg, #C6F1F7 -4.01%, #F983E9 36.14%, #B877FF 77.44%, #C2E9CD 106.11%);
+  --linear-gradient-highlight: linear-gradient(
+    259.3deg,
+    #5e5bfc 0.44%,
+    #871df0 97.88%
+  );
+  --linear-gradient: linear-gradient(
+    91.17deg,
+    #c6f1f7 -4.01%,
+    #f983e9 36.14%,
+    #b877ff 77.44%,
+    #c2e9cd 106.11%
+  );
   --container: $document-width-xl;
   --space-between-block: calc(var(--base-fz) * 2.25);
   --space-between-sections: calc(var(--base-fz) * 7);
@@ -29,7 +39,6 @@ $color-white-opacity: #BBB9CA;
 
   @media (max-width: $document-width-xl) {
     --container: $document-width-l;
-
   }
   @media (max-width: $document-width-l) {
     --container: $document-width-m;
@@ -42,4 +51,3 @@ $color-white-opacity: #BBB9CA;
     --container: $document-width-xs;
   }
 }
-

client/src/components/player.vue

@@ -174,7 +174,9 @@ export default {
     this.connectionPlayer();
   },
   mounted() {
+    // Создание <audio>
     this.$store.dispatch('initPlayer', { volume: this.songVolume });
+
     if (this.user?.id) {
       this.checkSongIsFavorite();
       this.getSongList();
@@ -210,7 +212,7 @@ export default {
       this.connection = new Player();
       this.connection.init();
 
-      this.connection.onHandler(this.handlePlayer);
+      this.connection.onHandler(this.handleConnection);
     },
     checkSongIsFavorite() {
       app
@@ -233,7 +235,7 @@ export default {
           console.error(err);
         });
     },
-    handlePlayer(e) {
+    handleConnection(e) {
       // console.log('getPlaying', e);
       const jsonData = JSON.parse(e.data);
       // console.log('jsonData', jsonData);
@@ -243,20 +245,34 @@ export default {
         // Первый ответ
         jsonData?.connect?.subs?.['station:it-radio']?.publications?.[0]?.data;
       // console.log('getPlaying', data);
+      console.log(data);
 
       if (!data) return;
       if (this.currentPlay.live) {
+        // Ссылка на трансляцию
         const dataUrl = data.np.station.listen_url;
+        // Объект с данными музыки
+        const dataSong = data.np.now_playing.song;
+        console.log(dataSong);
         const playerUrl = this.player.target.src;
         if (dataUrl !== playerUrl) {
           // console.log('data.np.station.listen_url', dataUrl);
           this.$store.dispatch('changePlayer', dataUrl);
           // console.log(this.player);
+          this.actionCurrentPlay(dataSong);
+        }
+        if (dataSong.id !== this.currentPlay.id) {
+          this.actionCurrentPlay(dataSong);
+        }
+      }
+    },
+    actionCurrentPlay(song) {
+      // console.log('actionCurrentPlay', data);
       const currentPlay = {
         ...this.currentPlay,
         // Инфа про текущий трек
-            ...data.np.now_playing.song,
-            azura_id: data.np.now_playing.song.id,
+        ...song,
+        // azura_id: song.id,
         isLoader: false,
         live: true,
         currentIndex: null,
@@ -264,8 +280,6 @@ export default {
       // console.log('params in getPlaying ', params);
       // delete params.unique_id;
       this.$store.dispatch('setCurrentPlay', currentPlay);
-        }
-      }
     },
     updateProgress(e) {
       this.playerInfo = {
@@ -290,8 +304,8 @@ export default {
       }
     },
     handlerPlay() {
-      console.log(this.currentPlay);
-      console.log(this.player);
+      // console.log(this.currentPlay);
+      // console.log(this.player);
       this.$store.dispatch('handlerPlayer', { play: true });
     },
     handlerPause() {
@@ -356,12 +370,12 @@ export default {
     toggleVolume() {
       if (this.songVolume === 0) {
         this.songVolume = this.preToggleVol;
-        console.log(this.songVolume);
+        // console.log(this.songVolume);
         this.$store.dispatch('handlerPlayer', { volume: this.songVolume });
       } else {
         this.preToggleVol = this.songVolume;
         this.songVolume = 0.0;
-        console.log(this.songVolume);
+        // console.log(this.songVolume);
         this.$store.dispatch('handlerPlayer', { volume: this.songVolume });
       }
     },

client/src/store/index.js

@@ -64,7 +64,7 @@ export default createStore({
     initPlayer(state, { volume }) {
       // console.log(params);
       state.player.target = document.createElement('audio');
-      console.log(state.player.target);
+      // console.log(state.player.target);
       state.player.target.src = '';
       state.player.target.preload = 'auto';
       state.player.target.controls = true;
@@ -90,13 +90,13 @@ export default createStore({
       state.player.target.addEventListener('canplaythrough', awaitPlay);
     },
     handlerPlayer(state, params) {
-      console.log('hanlerPlayer', params);
+      // console.log('hanlerPlayer', params);
       if (params.pause) {
         state.currentPlay.isPlay = false;
         state.player.target.pause();
       }
       if (params.play) {
-        console.log(state);
+        // console.log(state);
         if (state.player.target.readyState >= 3) {
           state.currentPlay.isPlay = true;
           state.player.target.play();