Acceptance Criteria:

1. The inline player should contain the following:

* **Progress bar and song duration.**
- [x] The user can seek the progress bar.

* **Song’s image**.
- [x] It should be clickable and redirects the user to the song details page.

* **Song name**.

- [x] It should be clickable and redirects the user to the song details page.
- [x] If the song name is too long it will be displayed in two lines.

* **Singer/ list of singers' names**.
- [x] Each singer's name should be clickable and redirects the user to the singer details page. (Will be covered in another story TTAB-20726).

- [x] Singers' names should be separated by a comma (Ex: Singer1 name, Singer2 name).

- [x] **Play / Pause.**
- [x] **Next / Previous.**

- [x] **List of songs (The behavior of the list will be covered in another story TTAB-5201).**

- [x] **Like icon.**

- [x] To mark the song as liked (The behavior of the like icon will be covered in another story TTAB-19460).

- [x] **Not interested icon.**
To mark the song as not interested (The behavior of the not interested icon will be covered in another story TTAB-12584).

- [x] **Sound management.**
- [x] **Repeat one / Repeat all icon.**

- [x] **Shuffle icon**
- [x] **3-dots menu with:**
1. Share.
2. Add to playlist.
1. Add to My TenTime / Remove from My TenTime.

- [x] The 3-dots menu item will have a blue color on hover and click.

- [ ] The Item “Add to My TenTime“ will be replaced with “Remove from My TenTime“ as soon as the user adds the song to My TenTime and vice-a-versa.

- [x] **Video Clip icon.**
- [x] Close the music player and launch the video player with the Video clip (available for the songs with Video Clip - for others hidden).

- [x] The icon will have a blue color and a tooltip text “video clip“ on the hover.

- [x] **Close.**
* To close the inline player.

******************************

**The player must provide the following features:**

- [x] The User should be able to play previous content - the User should be able to switch to the previous audio if it’s available (for playlists, rails, tracks, and albums)

- [x] If there's no previous content in the list (the user is listening to the first song in the list), the previous icon will be disabled.

- [x] One-click on the previous icon will make the song play from the beginning.

- [x] Two clicks(double clicks) on the previous icon will make it go back to the previous song.

- [x] The User should be able to play the next content - the User should be able to switch to the next audio if it is available (for playlists, rails, tracks, and albums).

- [x] If there's no next content in the list (the user is listening to the last song in the list), the next icon will be disabled.

- [x] If the user clicks on the next icon, the system plays the next song.

- [x] Once the system finishes playing the song, the next song in the list will play automatically (if available).

- [x] If this is the last song in the list, the inline player should be paused.

- [x] The paid content will be skipped

**Ex: The system finishes playing the current song If the next song is paid, The system will skip it and play the next free song in the list.**
*******
- [x] The User should be able to change the sound volume.
- [x] The User should be able to mute the sound by clicking on the sound icon.

****************************************

- [x] The User should be able to shuffle the music from the playlist or album he is listening to:

- [x] The shuffle icon behavior should be applied on the inline player only not inside the video clip).

- [x] The default value of the icon is off with white color.

- [x] When the user clicks on it, it will have a blue color.

- [x] If the user clicks again it will be returned white.
- [x] When closing the player and playing other music the shuffle icon should be turned off.
*********
- [x] The User should be able to repeat the song or repeat the list of songs.

- [x] The repeat icon behavior should be applied on the inline player only not inside the video clip).

- [x] The default value of the icon is off with white color.

- [x] When closing the player and playing other music the icon should be turned off.

- [x] The first click will repeat the current song after finishing playing it.

- [x] The icon here will be blue with 1 number inside it.
- [x] The second click will repeat the list.

- [x] After finishing playing the last song in the list, the system plays the first song in the list.

- [x] The icon here will be blue without a number.
- [x] The third click will disable the repeat(returned off with white color).
*************
- [x] The user should be able to play the video clip.
- [x] The icon will be turned blue on hove with “video clip“ tooltip.

- [x] If the user was listening to a song and then clicks on the video clip icon.The system will open the video player and the song will continue playing with the video clip in the video player.

- [x] If the user exits the video player, the song will continue playing in the inline player.

- [x] If the song(video clip) finishes playing in the video player the next song(video clip) will be played on the video player until the last song in the list then the video player closed.

- [x] If there's a song without a video clip in the list it will be skipped in the video player playing.

**Ex: The system finishes playing the current song(video clip) If the next song doesn’t have a video clip, The system will skip it and play the next song(video clip) in the list.**

- [x]  The User should be able to play music in the background.

- [x] The User should be able to close the player.
- [x] The User should be able to open the list of songs contained in the current playlist, rail, track, and singers song list from which the user started the song. (The behavior of the list will be covered in another story TTAB-5201).

- [x] The icon will have a blue color on hover and click.
- [x] The User should be able to add/remove the song to the playlist:

- [x] Create a new one or choose the already exist (the already implemented design and behavior).

- [x] The User should be able to add/remove the song to My TenTime.
***************
**Shuffle and repeat icons cancel each other:**
- [x] If the user first clicks on the shuffle icon and then clicks on the repeat icon, the shuffle will be canceled and vice versa.

- [x] The last action will be applied.
- [x] If the user first clicks on the shuffle icon and then clicks on the repeat icon, the repeat will be applied.

- [x] If the user first clicks on the repeat icon and then clicks on the shuffle icon, the shuffle will be applied.

- [x] If the User has started to play music and moved to another page with video playing (player or trailer), the music will be paused and starts playing again automatically after the video is finished.

- [x] The player will close if the user refreshes the page.

- [x] The in-line music player will be shown on all the pages.

Design:
English:

https://www.figma.com/file/Tx51k8pL8uSczF0L25V465/%F0%9F%96%A5%EF%B8%8F-WEB?node-id=229%3A67490

Arabic:

https://www.figma.com/file/Tx51k8pL8uSczF0L25V465/%F0%9F%96%A5%EF%B8%8F-WEB?node-id=11490%3A55301