fixes

src/shared/lib/router.js

@@ -6,6 +6,7 @@ export class Router {
     this.layout = [];
     this.routes = [];
     this.currentView = null;
+    this.isRendering = false;
 
     this.onPopState = this.onPopState.bind(this);
     this.onNavigate = this.onNavigate.bind(this);
@@ -71,6 +72,10 @@ export class Router {
    * Popstate event handler for browser back/forward navigation
    */
   async onPopState() {
+    if (this.isRendering) {
+      return;
+    }
+    eventBus.emit("popstate", window.location.pathname);
     await this.goToImpl();
   }
 
@@ -90,6 +95,9 @@ export class Router {
    * @returns {Promise<void>} promise that resolves when navigation is complete
    */
   async goTo(path) {
+    if (this.isRendering) {
+      return;
+    }
     window.history.pushState({}, "", path);
     await this.goToImpl();
   }
@@ -100,6 +108,8 @@ export class Router {
    * @returns {Promise<void>} promise that resolves when the rendering is complete
    */
   async goToImpl() {
+    this.isRendering = true;
+
     const currentPath = window.location.pathname;
     const targetRoute = this.findRoute(currentPath);
 
@@ -116,6 +126,7 @@ export class Router {
       this.currentView = new ErrorPage('Ошибка', 'Такой страницы не существует.');
       await this.currentView.render();
     }
+    this.isRendering = false;
   }
 
   /**

src/shared/player/model/store.js

@@ -165,8 +165,7 @@ class PlayerStore {
 				state.status === PLAYER_PLAYING_STATE &&
 				this.isPlaying
 			) {
-				this.currentTrack.pause();
-				this.isPlaying = false;
+				eventBus.emit('playPauseTrack');
 			}
 		}
 	};

src/widgets/footerPlayer/ui/footerPlayer.hbs

@@ -17,7 +17,7 @@
           <img src="{{ backwardIcon }}" alt="prev_track" class="{{ styles.footer_player__icon }}">
         </div>
         <div class="buttons_player__play_track player_button">
-          <img src="{{#if isPlaying }}{{ pauseCircleBlackIcon }}{{else}}{{ playCircleBlackIcon }}{{/if}}" alt="play_pause" class="{{ styles.footer_player__icon }}">
+          <img src="{{ playCircleBlackIcon }}" alt="play_pause" class="{{ styles.footer_player__icon }}">
         </div>
         <div class="buttons_player__next_track player_button">
           <img src="{{ forwardIcon }}" alt="next_track" class="{{ styles.footer_player__icon }}">

src/widgets/footerPlayer/ui/footerPlayer.js

@@ -46,7 +46,6 @@ export class FooterPlayerView {
     footerPlayerElement.innerHTML = template({
       styles, 
       playCircleBlackIcon,
-      pauseCircleBlackIcon,
       backwardIcon,
       forwardIcon,
       heartBlackIcon,
@@ -96,8 +95,6 @@ export class FooterPlayerView {
     eventBus.on("showPlayer", this.showPlayer);
     eventBus.on("playPauseTrack", this.changePlayPauseBtnImg);
     eventBus.on("playById", this.changePlayPauseBtnImg);
-    eventBus.on("prevTrack", this.changePlayPauseBtnImg);
-    eventBus.on("nextTrack", this.changePlayPauseBtnImg);
   }
 
   offEvents() {
@@ -106,8 +103,6 @@ export class FooterPlayerView {
     eventBus.off("showPlayer", this.showPlayer);
     eventBus.on("playPauseTrack", this.changePlayPauseBtnImg);
     eventBus.on("playById", this.changePlayPauseBtnImg);
-    eventBus.on("prevTrack", this.changePlayPauseBtnImg);
-    eventBus.on("nextTrack", this.changePlayPauseBtnImg);
   }
 
   addEvents() {

src/widgets/header/ui/Header.js

@@ -11,8 +11,7 @@ export class Header {
 
   constructor() {
     this.parent = document.querySelector('#header');
-    // this.eventBus = eventBus;
-    // this.userStore = userStore;
+    this.handleNavigation = this.handleNavigation.bind(this);
   }
 
   render() {
@@ -48,8 +47,6 @@ export class Header {
     links.forEach((link) => {
       link.addEventListener('click', handleLink);
     });
-
-    eventBus.on('navigate', this.handleNavigation.bind(this));
   }
 
   handleSignOutBtn(event) {
@@ -77,13 +74,17 @@ export class Header {
     eventBus.on('signUpSuccess', this.onSignUpSuccess);
     eventBus.on('signOutSuccess', this.onSignOutSuccess);
     eventBus.on('unauthorized', this.onSignOutSuccess);
+    eventBus.on('navigate', this.handleNavigation);
+    eventBus.on('popstate', this.handleNavigation);
   }
 
   offEvents() {
     eventBus.off('signInSuccess', this.onSignInSuccess);
     eventBus.off('signUpSuccess', this.onSignUpSuccess);
     eventBus.off('signOutSuccess', this.onSignOutSuccess);
     eventBus.off('unauthorized', this.onSignOutSuccess);
+    eventBus.off('navigate', this.handleNavigation);
+    eventBus.off('popstate', this.handleNavigation);
   }
 
   onSignInSuccess = (user) => {
@@ -102,11 +103,11 @@ export class Header {
     this.offEvents();
   }
 
-  handleNavigation(href) {
+  handleNavigation (href) {
     this.switchActiveNavlink(href);
   }
 
-  switchActiveNavlink(href) {
+  switchActiveNavlink (href) {
     let navlinks = document.querySelectorAll('.navlink_switch');
     navlinks.forEach((navlink) => {
       if (navlink.getAttribute('href') == href) {

src/widgets/listenBlock/ui/listenBlock.js

@@ -1,7 +1,9 @@
 import { eventBus } from '../../../shared/lib/eventbus.js';
+import { player } from "../../../shared/player/model/store.js";
 import template from './listenBlock.hbs';
 import * as styles from './listenBlock.scss';
 import playCircleIcon from '../../../../public/images/icons/play-circle.svg';
+import pauseCircleIcon from '../../../../public/images/icons/pause-circle.svg';
 
 export class ListenBlockView {
 	/**
@@ -24,11 +26,17 @@ export class ListenBlockView {
 	async render() {
 		const listenBlockElement = document.createElement('div');
 		listenBlockElement.classList.add('listen');
-		listenBlockElement.innerHTML = template({ styles, playCircleIcon });
+		listenBlockElement.innerHTML = template({ styles, playCircleIcon, pauseCircleIcon });
 		this.parent.appendChild(listenBlockElement);
 
-		this.playPauseBtn = document.querySelector(`.${styles['listen__btn_img']}`);
+		this.getElements();
+
 		this.addEvents();
+		this.onEvents();
+	}
+
+	  async getElements() {
+		this.playPauseBtn = document.querySelector(`.${styles['listen__btn_img']}`);
 	}
 
 	addEvents() {
@@ -39,11 +47,30 @@ export class ListenBlockView {
 		this.playPauseBtn.removeEventListener('click', this.handlePlayPauseBtn);
 	}
 
+	onEvents() {
+		eventBus.on("playPauseTrack", this.changePlayPauseBtnImg);
+		eventBus.on("playById", this.changePlayPauseBtnImg);
+	}
+
+	offEvents() {
+		eventBus.off("playPauseTrack", this.changePlayPauseBtnImg);
+		eventBus.off("playById", this.changePlayPauseBtnImg);
+	}
+
+	changePlayPauseBtnImg = () => {
+		if (player.isPlaying) {
+			this.playPauseBtn.src = pauseCircleIcon;
+		} else {
+			this.playPauseBtn.src = playCircleIcon;
+		}
+	}
+
 	handlePlayPauseBtn() {
 		eventBus.emit('playPauseTrack');
 	}
 
 	destructor() {
 		this.deleteEvents();
+		this.offEvents();
 	}
 }

src/widgets/listenBlock/ui/listenBlock.scss

@@ -5,6 +5,12 @@
   &__btn_img {
     display: block;
     margin: 0 auto;
+    transition-duration: 0.2s;
+    transition-timing-function: ease;
+
+    &:hover {
+      transform: scale(1.1);
+    }
   }
 
   &__title {

src/widgets/trackList/ui/trackList.js

@@ -68,12 +68,11 @@ export class TrackListView {
     this.parent.appendChild(trackListElement);
 
     const tracksBlock = document.getElementById("tracks");
-    let promises = [];
-    Array.from(tracks).forEach(async (track, index) => {
+    for (const [index, track] of Array.from(tracks).entries()) {
       const trackView = new TrackView(tracksBlock, index);
-      promises.push(trackView.render(track, this.myPlaylistId));
-    });
-    Promise.all(promises).then(() => eventBus.emit("tracks:rendered"));
+      await trackView.render(track, this.myPlaylistId);
+    }
+    eventBus.emit("tracks:rendered");
 
     this.bindEvents();
     this.setTitle(titleText);