Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[$250] Implement audio player for audio file attachments in Chat #618

Open
SleepySquash opened this issue Sep 28, 2023 · 4 comments · May be fixed by #872
Open

[$250] Implement audio player for audio file attachments in Chat #618

SleepySquash opened this issue Sep 28, 2023 · 4 comments · May be fixed by #872
Labels
enhancement Improvement of existing features or bugfix feature New feature or request help wanted This issue is looking for freelancer to work on it k::UI/UX UI (user interface) and UX (user experience) changes 💰 paid
Milestone

Comments

@SleepySquash
Copy link
Contributor

SleepySquash commented Sep 28, 2023

Background

Messenger Gapopa. Chat page. Sent or received audio file.

Problem to solve

To do: display audio files as a player with audio playback option, cover with integration test.

Requirements:

  • audio files should be displayed as audio players;
  • the duration of the file should be shown;
  • audio can be played and paused;
  • only 1 audio file should play at a time;
  • it should be possible to rewind the audio to any position in the player with a cursor or finger;
  • the next audio file should NOT be played at the end of playback;
  • the interface should be intuitive, user-friendly and visually pleasing;
  • cross-platform: it should work on web, in desktop applications and on mobile phones.

Please note some stylistic differences in the solution on computer and on phone.

Possible solutions

PlayableAsset widget should be extended and redesigned for the needs described above. The remote file (FileAttachment) and the local file (LocalAttachment) should be able to be identified as audio to be displayed as a player in the attachment list.

Use the AudioUtils class to play the audio. It would make sense to have some field or method in this class that would ensure in some way that only one audio is played back.

For coverage with tests, it is suggested to write an AudioUtils mock, which will confirm that a call to the audio has been made through the appropriate steps.

@SleepySquash SleepySquash added enhancement Improvement of existing features or bugfix feature New feature or request k::UI/UX UI (user interface) and UX (user experience) changes labels Sep 28, 2023
@SleepySquash SleepySquash added this to the 0.1.0-alpha.10 milestone Sep 28, 2023
@SleepySquash SleepySquash self-assigned this Sep 28, 2023
@SleepySquash SleepySquash moved this to Waiting for UI/UX design in Roadmap Sep 28, 2023
@SleepySquash SleepySquash changed the title Allow playing audio FileAttachments [$120] Implement audio player for audio file attachments in Chat Sep 28, 2023
@SleepySquash SleepySquash added help wanted This issue is looking for freelancer to work on it 💰 paid labels Sep 28, 2023
@SleepySquash SleepySquash changed the title [$120] Implement audio player for audio file attachments in Chat [$150] Implement audio player for audio file attachments in Chat Sep 28, 2023
@SleepySquash SleepySquash removed this from Roadmap Sep 29, 2023
@SleepySquash SleepySquash moved this to Todo in Freelance Sep 29, 2023
@SleepySquash SleepySquash removed their assignment Sep 29, 2023
aparfenov2 pushed a commit to aparfenov2/messenger that referenced this issue Nov 30, 2023
@SleepySquash SleepySquash self-assigned this Dec 1, 2023
@SleepySquash SleepySquash moved this from Todo to In Progress in Freelance Dec 1, 2023
aparfenov2 pushed a commit to aparfenov2/messenger that referenced this issue Dec 2, 2023
@SleepySquash SleepySquash moved this from In Progress to Todo in Freelance Dec 18, 2023
@SleepySquash SleepySquash removed their assignment Dec 18, 2023
@oogxdd
Copy link

oogxdd commented Feb 29, 2024

Прошу пока не закрывать PR. Решил подойти к задаче в более широком ключе чтобы имплементить глобальный плеер потом. Вот план действий:

  1. /domain/models/audio_file.dart

    • AudioFile class:
      • id (String)
      • name (String)
      • source (AudioSource)
  2. /lib/store/audio_store.dart

    • AudioStore (extends GetxController) - high-level controller который предоставляет все необходимые методы для взаимодействия с плеером и унаследует low-level методы из AudioUtils:
      • State:
        • currentAudio (AudioFile)
        • playlistQueue (List)
        • playbackState (PlaybackState)
          • playing (bool)
          • processingState (ProcessingState: 'idle' | 'loading' | 'buffering' | 'ready' | 'completed')
          • bufferedPosition (Duration)
          • queueIndex - currently playing song index in the playlist
          • repeatMode
          • shuffleMode
          • ... and so on
        • currentSongPosition (Duration)
        • currentSongDuration (Duration)
      • Methods:
        • play(AudioFile audioFile): void - унаследовано из AudioUtils
        • pause(): void - унаследовано из AudioUtils
        • seek(Duration position): void - унаследовано из AudioUtils
        • setCurrentAudio(AudioFile audioFile): void
        • skipToNext(): void
        • skipToPrevious(): void
        • addQueueItem(AudioFile audioFile): void
        • removeQueueItemAt(AudioFile audioFile) void
  3. /lib/ui/widget/audio_bar.dart

    • AudioBar widget (subscribes to AudioStore):
      • Properties:
        • songTitle (AudioFile.title) - унаследовано из AudioStore
      • Methods:
        • play(AudioFile audioFile): void - унаследовано из AudioStore
        • pause(): void - унаследовано из AudioStore
  4. /ui/home/chat/widget/audio_attachment.dart

    • AudioAttachment widget:
      • Properties:
        • SendingStatus - унаследовано из LocalAttachment
        • DownloadStatus (bool) - унаследовано из Attachment
      • Methods:
        • play(AudioFile audioFile): void - унаследовано из AudioStore
        • pause(): void - унаследовано из AudioStore
        • seek(Duration position): void - унаследовано из AudioStore
      • UI:
        • Seekbar slider
        • Play/pause button
  5. /util/audio_utils.dart

    • AudioPlayer (uses Just-Audio package):
      • Properties:
        • player (ja.AudioPlayer)
        • queue (ja.ConcatenatingAudioSource)
        • currentPosition (Duration)
        • totalDuration (Duration)
      • Methods:
        • play(AudioSource audioSource): void
        • pause(): void
        • seek(Duration position): void

Далее добавить еще AudioPlaylistScreen (который будет показываться если кликаешь на AudioBar, где можно будет смотреть PlaylistQueue, делать rewind, переключать треки).

Также думаю о том чтобы использовать just-audio для аудио на всех платформах. Нам все равно придется учитывать кейсы когда юзер слушает аудио, потом открывает видео - чтобы аудио останавливалось на время когда юзер смотрит видео, а потом возобновлялось. И делать это для каждой платформы. Пока что не знаю, начну с того что сделаю все остальные компоненты и адаптирую AudioUtils для ja.AudioPlayer, а там предпримем решение

Это approximate draft. К завтрашнему дню планирую завершить часть просто с проигрыванием одного аудио только на странице чата. Потом, надеюсь, получится продолжить.

@SleepySquash
Copy link
Contributor Author

@oogxdd, по структуре: в сторе лежит реализация домена, предметной области приложения. Я не уверен, что это репозиторий, вовсе. Скорее воркер, как тот же кэш. В модели AudioFile тоже пока не уверен, существуют же FileAttachmentы, хотя это сущности чата. Иначе их нужно будет маппить друг в друга. Может и ок, надо смотреть.

just_audio - это костыль для мобильных платформ, чтобы там через audio_session менялся динамик (media_kit кладёт одно место на попытку переключить внутренний/внешний/sco динамики). Ничто в теории не мешает написать абстракцию такую, чтобы уже её реализация была либо just_audio, либо media_kit - это была бы хорошая практика. Я бы предложил не отказываться от media_kit для аудио, т.к. он использует MPV, это довольно небольшой и лёгкий плеер.

Указанный Вами дедлайн - это сегодня. С учётом Вашего комментария, полагаю, дедлайн будет просрочен. Прошу сориентировать, пожалуйста, по срокам. И напоминаю про правила: https://gapopa.com/work/freelance. В #872 не было коммитов более 72-х часов.

@oogxdd
Copy link

oogxdd commented Mar 1, 2024

Первый коммит запушил. Так пока все супер messy, прошу перенести дедлайн на понедельник. Постараюсь причесать все за выходные @SleepySquash

@SleepySquash
Copy link
Contributor Author

@oogxdd, принял, хорошо.

@SleepySquash SleepySquash moved this from In Progress to Todo in Freelance Mar 8, 2024
@SleepySquash SleepySquash removed their assignment Mar 8, 2024
@SleepySquash SleepySquash modified the milestones: 0.1.0, 0.2.0, 0.1.3 Jun 27, 2024
@SleepySquash SleepySquash modified the milestones: 0.1.4, 0.2.0 Jul 10, 2024
@SleepySquash SleepySquash modified the milestones: 0.2.0, 0.3.0 Sep 3, 2024
@SleepySquash SleepySquash modified the milestones: 0.2.1, 0.3.0 Sep 12, 2024
@SleepySquash SleepySquash modified the milestones: 0.2.2, 0.3.0 Oct 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Improvement of existing features or bugfix feature New feature or request help wanted This issue is looking for freelancer to work on it k::UI/UX UI (user interface) and UX (user experience) changes 💰 paid
Projects
Status: Todo
2 participants