@saooti/octopus-sdk 35.1.6 → 35.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (152) hide show
  1. package/package.json +3 -3
  2. package/src/App.vue +17 -8
  3. package/src/api/classicCrud.ts +6 -7
  4. package/src/components/display/categories/CategoryChooser.vue +4 -2
  5. package/src/components/display/categories/CategoryFilter.vue +22 -25
  6. package/src/components/display/categories/CategoryList.vue +18 -17
  7. package/src/components/display/comments/AddCommentModal.vue +5 -2
  8. package/src/components/display/comments/CommentInput.vue +14 -9
  9. package/src/components/display/comments/CommentItem.vue +7 -3
  10. package/src/components/display/comments/CommentList.vue +1 -1
  11. package/src/components/display/comments/CommentPlayer.vue +7 -4
  12. package/src/components/display/comments/CommentSection.vue +7 -4
  13. package/src/components/display/emission/EmissionInlineList.vue +1 -1
  14. package/src/components/display/emission/EmissionItem.vue +3 -3
  15. package/src/components/display/emission/EmissionList.vue +5 -2
  16. package/src/components/display/emission/EmissionPlayerItem.vue +24 -18
  17. package/src/components/display/filter/AdvancedSearch.vue +2 -2
  18. package/src/components/display/filter/CategorySearchFilter.vue +11 -11
  19. package/src/components/display/filter/ProductorSearch.vue +12 -11
  20. package/src/components/display/filter/RubriqueFilter.vue +13 -15
  21. package/src/components/display/list/ListPaginate.vue +1 -1
  22. package/src/components/display/live/LiveItem.vue +11 -9
  23. package/src/components/display/live/LiveList.vue +7 -7
  24. package/src/components/display/organisation/OrganisationChooser.vue +5 -3
  25. package/src/components/display/participant/ParticipantItem.vue +3 -3
  26. package/src/components/display/participant/ParticipantList.vue +4 -1
  27. package/src/components/display/playlist/PlaylistItem.vue +6 -3
  28. package/src/components/display/playlist/PlaylistList.vue +5 -3
  29. package/src/components/display/playlist/PodcastList.vue +1 -1
  30. package/src/components/display/playlist/PodcastPlaylistInlineList.vue +1 -1
  31. package/src/components/display/podcasts/AnimatorsItem.vue +5 -2
  32. package/src/components/display/podcasts/ParticipantDescription.vue +5 -2
  33. package/src/components/display/podcasts/PodcastImage.vue +15 -19
  34. package/src/components/display/podcasts/PodcastInlineList.vue +1 -1
  35. package/src/components/display/podcasts/PodcastInlineListClassic.vue +6 -6
  36. package/src/components/display/podcasts/PodcastInlineListTemplate.vue +15 -11
  37. package/src/components/display/podcasts/PodcastItem.vue +1 -1
  38. package/src/components/display/podcasts/PodcastItemInfo.vue +3 -3
  39. package/src/components/display/podcasts/PodcastList.vue +8 -3
  40. package/src/components/display/podcasts/PodcastModuleBox.vue +3 -3
  41. package/src/components/display/podcasts/PodcastPlayBar.vue +12 -11
  42. package/src/components/display/podcasts/PodcastSwiperList.vue +6 -6
  43. package/src/components/display/rubriques/RubriqueList.vue +13 -15
  44. package/src/components/display/sharing/QrCode.vue +10 -6
  45. package/src/components/display/sharing/ShareButtons.vue +1 -1
  46. package/src/components/display/sharing/ShareButtonsIntern.vue +1 -1
  47. package/src/components/display/sharing/ShareDistribution.vue +1 -1
  48. package/src/components/display/sharing/SharePlayer.vue +6 -3
  49. package/src/components/display/sharing/SharePlayerTypes.vue +1 -1
  50. package/src/components/misc/Footer.vue +19 -12
  51. package/src/components/misc/HomeDropdown.vue +6 -3
  52. package/src/components/misc/LeftMenu.vue +18 -19
  53. package/src/components/misc/TopBar.vue +21 -24
  54. package/src/components/misc/modal/ClipboardModal.vue +1 -1
  55. package/src/components/misc/modal/NewsletterModal.vue +8 -5
  56. package/src/components/misc/player/Player.vue +16 -14
  57. package/src/components/misc/player/PlayerCompact.vue +4 -4
  58. package/src/components/misc/player/PlayerProgressBar.vue +8 -8
  59. package/src/components/misc/player/PlayerTimeline.vue +1 -1
  60. package/src/components/mixins/handle403.ts +6 -1
  61. package/src/components/mixins/imageProxy.ts +1 -1
  62. package/src/components/mixins/init.ts +7 -4
  63. package/src/components/mixins/orgaComputed.ts +4 -4
  64. package/src/components/mixins/organisationFilter.ts +8 -5
  65. package/src/components/mixins/player/playerComment.ts +24 -30
  66. package/src/components/mixins/player/playerDisplay.ts +38 -67
  67. package/src/components/mixins/player/playerLive.ts +16 -15
  68. package/src/components/mixins/player/playerLogic.ts +54 -64
  69. package/src/components/mixins/player/playerTranscript.ts +16 -10
  70. package/src/components/pages/Category.vue +7 -9
  71. package/src/components/pages/Emission.vue +3 -3
  72. package/src/components/pages/Emissions.vue +9 -6
  73. package/src/components/pages/Error403Page.vue +5 -2
  74. package/src/components/pages/Home.vue +13 -8
  75. package/src/components/pages/Lives.vue +11 -9
  76. package/src/components/pages/PageNotFound.vue +10 -5
  77. package/src/components/pages/Participant.vue +2 -2
  78. package/src/components/pages/Participants.vue +2 -2
  79. package/src/components/pages/Playlist.vue +2 -2
  80. package/src/components/pages/Playlists.vue +2 -2
  81. package/src/components/pages/Podcast.vue +7 -4
  82. package/src/components/pages/Podcasts.vue +9 -7
  83. package/src/components/pages/Search.vue +1 -1
  84. package/src/main.ts +6 -4
  85. package/src/stores/ApiStore.ts +65 -0
  86. package/src/stores/AuthStore.ts +43 -0
  87. package/src/stores/FilterStore.ts +63 -0
  88. package/src/stores/GeneralStore.ts +57 -0
  89. package/src/stores/PlayerStore.ts +134 -0
  90. package/src/{store → stores}/class/general/playlist.ts +1 -1
  91. package/tsconfig.json +0 -1
  92. package/src/store/ApiStore.ts +0 -33
  93. package/src/store/AppStore.ts +0 -76
  94. package/src/store/PlayerStore.ts +0 -87
  95. package/src/store/classStore/typeApiStore.ts +0 -43
  96. package/src/store/classStore/typeAppStore.ts +0 -81
  97. package/src/store/classStore/typeAuthStore.ts +0 -44
  98. package/src/store/classStore/typePlayerStore.ts +0 -15
  99. package/src/vuex-shim.d.ts +0 -8
  100. /package/src/{store/paramStore.ts → stores/ParamSdkStore.ts} +0 -0
  101. /package/src/{store → stores}/class/adserver/adserverConfig.ts +0 -0
  102. /package/src/{store → stores}/class/adserver/adserverOtherEmission.ts +0 -0
  103. /package/src/{store → stores}/class/adserver/adserverTiming.ts +0 -0
  104. /package/src/{store → stores}/class/cartouchier/cartouche.ts +0 -0
  105. /package/src/{store → stores}/class/cartouchier/cartouchier.ts +0 -0
  106. /package/src/{store → stores}/class/conference/conference.ts +0 -0
  107. /package/src/{store → stores}/class/conference/conferenceMessage.ts +0 -0
  108. /package/src/{store → stores}/class/conference/conferenceParticipant.ts +0 -0
  109. /package/src/{store → stores}/class/conference/pad.ts +0 -0
  110. /package/src/{store → stores}/class/conference/studioCall.ts +0 -0
  111. /package/src/{store → stores}/class/contract/contract.ts +0 -0
  112. /package/src/{store → stores}/class/contract/contractOrganisation.ts +0 -0
  113. /package/src/{store → stores}/class/ftp/ftpEmission.ts +0 -0
  114. /package/src/{store → stores}/class/ftp/ftpParam.ts +0 -0
  115. /package/src/{store → stores}/class/ftp/testFtpEmission.ts +0 -0
  116. /package/src/{store → stores}/class/general/audioView.ts +0 -0
  117. /package/src/{store → stores}/class/general/category.ts +0 -0
  118. /package/src/{store → stores}/class/general/classicSelectType.ts +0 -0
  119. /package/src/{store → stores}/class/general/comment.ts +0 -0
  120. /package/src/{store → stores}/class/general/customPlayer.ts +0 -0
  121. /package/src/{store → stores}/class/general/emission.ts +0 -0
  122. /package/src/{store → stores}/class/general/fetchParam.ts +0 -0
  123. /package/src/{store → stores}/class/general/initState.ts +0 -0
  124. /package/src/{store → stores}/class/general/interfacePageable.ts +0 -0
  125. /package/src/{store → stores}/class/general/ituneCategory.ts +0 -0
  126. /package/src/{store → stores}/class/general/listReturn.ts +0 -0
  127. /package/src/{store → stores}/class/general/media.ts +0 -0
  128. /package/src/{store → stores}/class/general/organisation.ts +0 -0
  129. /package/src/{store → stores}/class/general/pageable.ts +0 -0
  130. /package/src/{store → stores}/class/general/participant.ts +0 -0
  131. /package/src/{store → stores}/class/general/player.ts +0 -0
  132. /package/src/{store → stores}/class/general/podcast.ts +0 -0
  133. /package/src/{store → stores}/class/general/sortPageable.ts +0 -0
  134. /package/src/{store → stores}/class/general/soundcastCategory.ts +0 -0
  135. /package/src/{store → stores}/class/ouestFrance/ofTag.ts +0 -0
  136. /package/src/{store → stores}/class/ouestFrance/ofTagInfo.ts +0 -0
  137. /package/src/{store → stores}/class/ouestFrance/ofTagPage.ts +0 -0
  138. /package/src/{store → stores}/class/ouestFrance/ofTagSeo.ts +0 -0
  139. /package/src/{store → stores}/class/ouestFrance/ofTagVente.ts +0 -0
  140. /package/src/{store → stores}/class/ouestFrance/ofTagWithParents.ts +0 -0
  141. /package/src/{store → stores}/class/rss/aggregator.ts +0 -0
  142. /package/src/{store → stores}/class/rss/rssEmission.ts +0 -0
  143. /package/src/{store → stores}/class/rss/rssInfo.ts +0 -0
  144. /package/src/{store → stores}/class/rubrique/rubriquage.ts +0 -0
  145. /package/src/{store → stores}/class/rubrique/rubriquageFilter.ts +0 -0
  146. /package/src/{store → stores}/class/rubrique/rubrique.ts +0 -0
  147. /package/src/{store → stores}/class/stat/statArrayIncome.ts +0 -0
  148. /package/src/{store → stores}/class/stat/statArrayObject.ts +0 -0
  149. /package/src/{store → stores}/class/stat/statGraph.ts +0 -0
  150. /package/src/{store → stores}/class/user/person.ts +0 -0
  151. /package/src/{store → stores}/class/user/profile.ts +0 -0
  152. /package/src/{store → stores}/class/user/userKeycloak.ts +0 -0
@@ -1,13 +1,16 @@
1
1
 
2
2
  import { handle403 } from '../mixins/handle403';
3
- import { Rubriquage } from "@/store/class/rubrique/rubriquage";
3
+ import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
4
4
  import octopusApi from '@saooti/octopus-api';
5
- import { defineComponent } from 'vue'
5
+ import { useFilterStore } from '@/stores/FilterStore';
6
+ import { mapActions } from 'pinia';
7
+ import { defineComponent } from 'vue';
6
8
  import { AxiosError } from 'axios';
7
- import { Organisation } from '@/store/class/general/organisation';
9
+ import { Organisation } from '@/stores/class/general/organisation';
8
10
  export default defineComponent({
9
11
  mixins: [handle403],
10
12
  methods: {
13
+ ...mapActions(useFilterStore, ['filterUpdateOrga']),
11
14
  async selectOrganisation(organisationId: string): Promise<void> {
12
15
  try {
13
16
  const response = await octopusApi.fetchData<Organisation>(0,`organisation/${organisationId}`);
@@ -16,7 +19,7 @@ export default defineComponent({
16
19
  homePageOrder: true
17
20
  }, true);
18
21
  const isLive = await octopusApi.fetchData<boolean>(0, 'organisation/liveEnabled/'+organisationId);
19
- this.$store.commit('filterOrga', {
22
+ this.filterUpdateOrga({
20
23
  orgaId: organisationId,
21
24
  imgUrl: response.imageUrl,
22
25
  name: response.name,
@@ -35,7 +38,7 @@ export default defineComponent({
35
38
  if (this.$route.query.productor) {
36
39
  this.$router.push({ query: {...this.$route.query, ...{productor: undefined} } });
37
40
  }
38
- this.$store.commit('filterOrga', { orgaId: undefined });
41
+ this.filterUpdateOrga({ orgaId: undefined });
39
42
  }
40
43
  },
41
44
  });
@@ -1,12 +1,12 @@
1
-
2
- import { mapState } from 'vuex';
3
- import { state } from '../../../store/paramStore';
1
+ import { state } from '../../../stores/ParamSdkStore';
4
2
  import octopusApi from '@saooti/octopus-api';
5
- import { CommentPodcast } from '@/store/class/general/comment';
6
- import { StoreState } from '@/store/classStore/typeAppStore';
3
+ import { CommentPodcast } from '@/stores/class/general/comment';
7
4
  import { defineComponent } from 'vue';
8
- import { FetchParam } from '@/store/class/general/fetchParam';
9
- import { InterfacePageable } from '@/store/class/general/interfacePageable';
5
+ import { usePlayerStore } from '@/stores/PlayerStore';
6
+ import { useGeneralStore } from '@/stores/GeneralStore';
7
+ import { mapState } from 'pinia';
8
+ import { FetchParam } from '@/stores/class/general/fetchParam';
9
+ import { InterfacePageable } from '@/stores/class/general/interfacePageable';
10
10
  export const playerComment = defineComponent({
11
11
  data() {
12
12
  return {
@@ -14,11 +14,11 @@ export const playerComment = defineComponent({
14
14
  };
15
15
  },
16
16
  computed: {
17
- ...mapState({
18
- commentsLoaded(state: StoreState){ return state.comments.loadedComments},
19
- live(state: StoreState) { return state.player.live},
20
- podcast(state: StoreState) { return state.player.podcast}
21
- }),
17
+ ...mapState(useGeneralStore, ['generalComments']),
18
+ ...mapState(usePlayerStore, ['playerPodcast', 'playerLive']),
19
+ commentsLoaded(){
20
+ return this.generalComments.loadedComments;
21
+ },
22
22
  organisationId(): string|undefined {
23
23
  return state.generalParameters.organisationId;
24
24
  },
@@ -31,25 +31,19 @@ export const playerComment = defineComponent({
31
31
  },
32
32
  methods: {
33
33
  editRight(organisation: string): boolean {
34
- if (
35
- (state.generalParameters.isCommments &&
36
- this.organisationId === organisation) ||
37
- state.generalParameters.isAdmin
38
- )
39
- return true;
40
- return false;
34
+ return (true===state.generalParameters.isCommments && this.organisationId === organisation) || true===state.generalParameters.isAdmin;
41
35
  },
42
36
  initCommentCurrentPodcast(podcastId?: number): Array<number>{
43
37
  if (
44
38
  podcastId &&
45
- this.$store.state.comments.actualPodcastId === podcastId
39
+ this.generalComments.actualPodcastId === podcastId
46
40
  ) {
47
41
  this.comments = this.commentsLoaded;
48
42
  if (
49
43
  this.commentsLoaded &&
50
- this.commentsLoaded.length < this.$store.state.comments.totalCount
44
+ this.commentsLoaded.length < this.generalComments.totalCount
51
45
  ) {
52
- return [this.commentsLoaded.length, this.$store.state.comments.totalCount];
46
+ return [this.commentsLoaded.length, this.generalComments.totalCount];
53
47
  }
54
48
  }
55
49
  return [0, 0];
@@ -75,17 +69,17 @@ export const playerComment = defineComponent({
75
69
  },
76
70
  async initComments(refresh = false): Promise<void> {
77
71
  let podcastId, organisation;
78
- if (this.podcast) {
79
- podcastId = this.podcast.podcastId;
80
- organisation = this.podcast.organisation.id;
81
- } else if (this.live) {
82
- podcastId = this.live.livePodcastId;
83
- organisation = this.live.organisation.id;
72
+ if (this.playerPodcast) {
73
+ podcastId = this.playerPodcast.podcastId;
74
+ organisation = this.playerPodcast.organisation.id;
75
+ } else if (this.playerLive) {
76
+ podcastId = this.playerLive.livePodcastId;
77
+ organisation = this.playerLive.organisation.id;
84
78
  }
85
79
  if (
86
80
  refresh &&
87
81
  podcastId &&
88
- this.$store.state.comments.actualPodcastId !== podcastId
82
+ this.generalComments.actualPodcastId !== podcastId
89
83
  ) {
90
84
  return;
91
85
  }
@@ -94,7 +88,7 @@ export const playerComment = defineComponent({
94
88
  let count = param[1];
95
89
  if (
96
90
  (!podcastId ||
97
- this.$store.state.comments.actualPodcastId === podcastId) &&
91
+ this.generalComments.actualPodcastId === podcastId) &&
98
92
  0 === first
99
93
  ){
100
94
  return;
@@ -1,9 +1,10 @@
1
- import { Podcast } from '@/store/class/general/podcast';
2
- import DurationHelper from '../../../helper/duration';
3
- import { state } from '../../../store/paramStore';
1
+ import { state } from '../../../stores/ParamSdkStore';
4
2
  import { defineComponent } from 'vue';
5
3
  import { RouteLocationRaw } from 'vue-router';
6
- import { MetadataRadio, Radio } from '@/store/class/general/player';
4
+ import { MetadataRadio } from '@/stores/class/general/player';
5
+ import { usePlayerStore } from '@/stores/PlayerStore';
6
+ import { useFilterStore } from '@/stores/FilterStore';
7
+ import { mapState, mapActions } from 'pinia';
7
8
  import octopusApi from '@saooti/octopus-api';
8
9
  export const playerDisplay = defineComponent({
9
10
  props: {
@@ -15,41 +16,30 @@ export const playerDisplay = defineComponent({
15
16
  };
16
17
  },
17
18
  computed:{
18
- playedTime(): string{
19
- if (this.$store.state.player.elapsed && this.$store.state.player.elapsed > 0 && this.$store.state.player.total && this.$store.state.player.total > 0) {
20
- return DurationHelper.formatDuration(
21
- Math.round(this.$store.state.player.elapsed * this.$store.state.player.total)
22
- );
23
- }
24
- return '--:--';
25
- },
26
- totalTime(): string {
27
- if (this.$store.state.player.elapsed && this.$store.state.player.elapsed > 0 && this.$store.state.player.total && this.$store.state.player.total > 0)
28
- return DurationHelper.formatDuration(Math.round(this.$store.state.player.total));
29
- return '--:--';
30
- },
31
- isPlaying(): boolean {
32
- return 'PLAYING' === this.$store.state.player.status;
33
- },
34
- isPaused(): boolean {
35
- return 'PAUSED' === this.$store.state.player.status;
36
- },
37
- podcast(): undefined|Podcast{
38
- return this.$store.state.player.podcast;
39
- },
19
+ ...mapState(usePlayerStore, [
20
+ 'playerPodcast',
21
+ 'playerRadio',
22
+ 'playerLive',
23
+ 'playerMedia',
24
+ 'playedTime',
25
+ 'totalTime',
26
+ 'isPlaying',
27
+ 'isPaused',
28
+ 'podcastImage',
29
+ 'emissionName',
30
+ 'transcriptText',
31
+ 'radioUrl'
32
+ ]),
33
+ ...mapState(useFilterStore, ['filterOrgaId']),
40
34
  isImage(): boolean {
41
35
  return (state.player.image as boolean);
42
36
  },
43
- podcastImage(): string{
44
- if (this.$store.state.player.podcast) return this.$store.state.player.podcast.imageUrl;
45
- return '';
46
- },
47
37
  podcastShareUrl(): RouteLocationRaw|string {
48
- if (this.podcast) {
38
+ if (this.playerPodcast) {
49
39
  return {
50
40
  name: 'podcast',
51
- params: { podcastId: this.podcast.podcastId.toString() },
52
- query: { productor: this.$store.state.filter.organisationId },
41
+ params: { podcastId: this.playerPodcast.podcastId.toString() },
42
+ query: { productor: this.filterOrgaId },
53
43
  };
54
44
  }
55
45
  return '';
@@ -58,40 +48,30 @@ export const playerDisplay = defineComponent({
58
48
  return (state.player.emissionName as boolean);
59
49
  },
60
50
  podcastTitle(): string {
61
- if(this.$store.state.player.radio){
62
- return this.$store.state.player.radio.metadata.title + " " + this.$store.state.player.radio.metadata.artist;
51
+ if(this.playerRadio){
52
+ return this.playerRadio.metadata.title + " " + this.playerRadio.metadata.artist;
63
53
  }
64
- if (this.$store.state.player.podcast) {
54
+ if (this.playerPodcast) {
65
55
  if (this.isEmissionName)
66
- return this.emissionName + ' - ' + this.$store.state.player.podcast.title;
67
- return this.$store.state.player.podcast.title;
56
+ return this.emissionName + ' - ' + this.playerPodcast.title;
57
+ return this.playerPodcast.title;
68
58
  }
69
- if (this.$store.state.player.media) return this.$store.state.player.media.title;
70
- if (this.$store.state.player.live) {
59
+ if (this.playerMedia) return this.playerMedia.title;
60
+ if (this.playerLive) {
71
61
  if (!this.hlsReady)
72
- return this.$store.state.player.live.title + ' (' + this.$t('Start in a while') + ')';
73
- return this.$store.state.player.live.title;
62
+ return this.playerLive.title + ' (' + this.$t('Start in a while') + ')';
63
+ return this.playerLive.title;
74
64
  }
75
65
  return '';
76
66
  },
77
- emissionName(): string {
78
- if (this.$store.state.player.podcast) return this.$store.state.player.podcast.emission.name;
79
- return '';
80
- },
81
- transcriptText():string{
82
- return this.$store.state.player.transcript?.actualText ?? "";
83
- },
84
- radio(): Radio{
85
- return this.$store.state.player.radio?.url;
86
- }
87
67
  },
88
68
  watch:{
89
- radio: {
69
+ playerRadio: {
90
70
  deep: true,
91
71
  immediate:true,
92
72
  handler(){
93
73
  clearInterval((this.radioInterval as unknown as number));
94
- if(this.radio){
74
+ if(this.playerRadio){
95
75
  this.fetchRadioMetadata();
96
76
  this.radioInterval = setInterval(() => {
97
77
  this.fetchRadioMetadata();
@@ -108,9 +88,10 @@ export const playerDisplay = defineComponent({
108
88
  clearInterval((this.radioInterval as unknown as number));
109
89
  },
110
90
  methods: {
91
+ ...mapActions(usePlayerStore, ['playerMetadata', 'playerChangeStatus']),
111
92
  async fetchRadioMetadata(): Promise<void>{
112
- const metadata = await octopusApi.fetchData<MetadataRadio>(14, 'player/playing/'+this.$store.state.player.radio.canalId);
113
- this.$store.commit('player/radioMetadata', metadata.currently);
93
+ const metadata = await octopusApi.fetchData<MetadataRadio>(14, 'player/playing/'+this.playerRadio?.canalId);
94
+ this.playerMetadata(metadata.currently);
114
95
  },
115
96
  addKeyboardControl(event: KeyboardEvent): void{
116
97
  if(!event || null ===event){return;}
@@ -132,17 +113,7 @@ export const playerDisplay = defineComponent({
132
113
  switchPausePlay(): void {
133
114
  const audioPlayer: HTMLAudioElement|null = document.querySelector('#audio-player');
134
115
  if(!audioPlayer){return;}
135
- if (audioPlayer.paused) {
136
- this.onPlay();
137
- } else {
138
- this.onPause();
139
- }
140
- },
141
- onPlay(): void {
142
- this.$store.commit('player/pause', false);
143
- },
144
- onPause(): void {
145
- this.$store.commit('player/pause', true);
116
+ this.playerChangeStatus(!audioPlayer.paused);
146
117
  },
147
118
  }
148
119
  });
@@ -1,11 +1,12 @@
1
- import { mapState } from 'vuex';
2
- import { state } from '../../../store/paramStore';
1
+ import { state } from '../../../stores/ParamSdkStore';
3
2
  import octopusApi from '@saooti/octopus-api';
3
+ import { usePlayerStore } from '@/stores/PlayerStore';
4
+ import { useAuthStore } from '@/stores/AuthStore';
5
+ import { mapState, mapActions } from 'pinia';
4
6
  /* eslint-disable */
5
7
  let Hls:any = null;
6
8
  /* eslint-enable */
7
9
  import { defineComponent } from 'vue';
8
- import { Player } from '@/store/class/general/player';
9
10
  export const playerLive = defineComponent({
10
11
  data() {
11
12
  return {
@@ -19,21 +20,21 @@ export const playerLive = defineComponent({
19
20
  };
20
21
  },
21
22
  computed: {
22
- ...mapState('player',{
23
- live(state: Player) { return state.live}
24
- }),
23
+ ...mapState(usePlayerStore, ['playerLive', 'playerRadio']),
24
+ ...mapState(useAuthStore, ['authOrgaId'])
25
25
  },
26
26
  methods: {
27
+ ...mapActions(usePlayerStore, ['playerChangeStatus']),
27
28
  onPlay(): void {
28
- this.$store.commit('player/pause', false);
29
+ this.playerChangeStatus(false);
29
30
  },
30
31
  playRadio(){
31
- if (!this.radio) return;
32
- this.playHls(this.radio.url);
32
+ if (!this.playerRadio) return;
33
+ this.playHls(this.playerRadio.url);
33
34
  },
34
35
  playLive() {
35
- if (!this.live) return;
36
- const hlsStreamUrl = `${state.podcastPage.hlsUri}stream/dev.${this.live.conferenceId}/index.m3u8`;
36
+ if (!this.playerLive) return;
37
+ const hlsStreamUrl = `${state.podcastPage.hlsUri}stream/dev.${this.playerLive.conferenceId}/index.m3u8`;
37
38
  this.playHls(hlsStreamUrl);
38
39
  },
39
40
  async playHls(hlsStreamUrl: string): Promise<void>{
@@ -60,14 +61,14 @@ export const playerLive = defineComponent({
60
61
  }
61
62
  },
62
63
  async initLiveDownloadId(){
63
- if(!this.live){ return;}
64
+ if(!this.playerLive){ return;}
64
65
  let downloadId = null;
65
66
  try {
66
- downloadId = await octopusApi.putDataPublic<string | null>(0, 'podcast/prepare/live/'+this.live.livePodcastId, undefined);
67
- await octopusApi.fetchDataPublicWithParams<string | null>(0,'podcast/download/live/' + this.live.livePodcastId+".m3u8",{
67
+ downloadId = await octopusApi.putDataPublic<string | null>(0, 'podcast/prepare/live/'+this.playerLive.livePodcastId, undefined);
68
+ await octopusApi.fetchDataPublicWithParams<string | null>(0,'podcast/download/live/' + this.playerLive.livePodcastId+".m3u8",{
68
69
  'downloadId': null!==downloadId ? downloadId : undefined,
69
70
  'origin':'octopus',
70
- 'distributorId':this.$store.state.auth?.organisationId
71
+ 'distributorId':this.authOrgaId
71
72
  });
72
73
  this.setDownloadId(downloadId);
73
74
  } catch (error) {
@@ -1,12 +1,13 @@
1
- import { mapState } from 'vuex';
2
1
  import octopusApi from '@saooti/octopus-api';
3
- import { CommentPodcast } from '@/store/class/general/comment';
2
+ import { CommentPodcast } from '@/stores/class/general/comment';
4
3
  import cookies from '../cookies';
5
4
  import { playerLive } from './playerLive';
6
5
  import { playerComment } from './playerComment';
7
6
  import { playerTranscript } from './playerTranscript';
8
7
  import { defineComponent } from 'vue';
9
- import { Player } from '@/store/class/general/player';
8
+ import { useAuthStore } from '@/stores/AuthStore';
9
+ import { usePlayerStore } from '@/stores/PlayerStore';
10
+ import { mapState, mapActions } from 'pinia';
10
11
  export const playerLogic = defineComponent({
11
12
  mixins:[cookies,playerLive,playerComment, playerTranscript],
12
13
  data() {
@@ -28,19 +29,16 @@ export const playerLogic = defineComponent({
28
29
  };
29
30
  },
30
31
  computed: {
31
- ...mapState('player',{
32
- podcast (state: Player){ return state.podcast},
33
- media: (state: Player) => state.media,
34
- live: (state: Player) => state.live,
35
- radio: (state: Player) => state.radio,
36
- volume: (state: Player) => state.volume,
37
- status : (state: Player) => state.status,
38
- percentProgress: (state: Player) => {
39
- if(!state.elapsed){return 0;}
40
- return state.elapsed * 100;
41
- },
42
- playerSeekTime: (state: Player) => state.seekTime,
43
- }),
32
+ ...mapState(useAuthStore, ['authOrgaId', 'authParam']),
33
+ ...mapState(usePlayerStore, [
34
+ 'playerPodcast',
35
+ 'playerMedia',
36
+ 'playerLive',
37
+ 'playerRadio',
38
+ 'playerVolume',
39
+ 'playerStatus',
40
+ 'playerSeekTime']),
41
+
44
42
  audioUrl(): string {
45
43
  return this.getAudioUrl();
46
44
  },
@@ -49,22 +47,22 @@ export const playerLogic = defineComponent({
49
47
  watch: {
50
48
  async audioUrl(): Promise<void>{
51
49
  this.playerError = false;
52
- if(this.media || !this.podcast || !this.podcast.availability.visibility ||this.listenError){
50
+ if(this.playerMedia || !this.playerPodcast || !this.playerPodcast.availability.visibility ||this.listenError){
53
51
  this.audioUrlToPlay = this.audioUrl;
54
52
  }
55
- if(!this.podcast || !this.podcast.availability.visibility ||this.listenError){return;}
53
+ if(!this.playerPodcast || !this.playerPodcast.availability.visibility ||this.listenError){return;}
56
54
  const response = await octopusApi.fetchDataPublic<{location:string, downloadId: number}>(0,"podcast/download/register/"+ this.getAudioUrlParameters());
57
55
  this.setDownloadId(response.downloadId.toString());
58
56
  this.audioUrlToPlay = response.location;
59
57
  },
60
- podcast: {
58
+ playerPodcast: {
61
59
  deep: true,
62
60
  handler(){
63
61
  this.reInitPlayer();
64
62
  this.getTranscription();
65
63
  }
66
64
  },
67
- live: {
65
+ playerLive: {
68
66
  deep: true,
69
67
  handler(){
70
68
  this.$nextTick(async () => {
@@ -74,7 +72,7 @@ export const playerLogic = defineComponent({
74
72
  });
75
73
  }
76
74
  },
77
- radio(){
75
+ playerRadio(){
78
76
  this.$nextTick(async () => {
79
77
  this.hlsReady = false;
80
78
  this.reInitPlayer();
@@ -82,7 +80,7 @@ export const playerLogic = defineComponent({
82
80
  });
83
81
  },
84
82
  async listenTime(newVal): Promise<void> {
85
- if (this.radio && (!this.podcast && !this.live)||(!this.downloadId)||(newVal - this.lastSend < 10)) {
83
+ if (this.playerRadio && (!this.playerPodcast && !this.playerLive)||(!this.downloadId)||(newVal - this.lastSend < 10)) {
86
84
  return;
87
85
  }
88
86
  this.lastSend = newVal;
@@ -90,35 +88,35 @@ export const playerLogic = defineComponent({
90
88
  },
91
89
  playerSeekTime(){
92
90
  if(!this.playerSeekTime){return;}
93
- if (this.$store.state.player.podcast || this.$store.state.player.live) {
91
+ if (this.playerPodcast || this.playerLive) {
94
92
  this.notListenTime = this.playerSeekTime - this.listenTime;
95
93
  }
96
94
  const audioPlayer: HTMLAudioElement | null = document.querySelector('#audio-player');
97
95
  if (!audioPlayer) return;
98
96
  audioPlayer.currentTime = this.playerSeekTime;
99
97
  },
100
- status() {
98
+ playerStatus() {
101
99
  const audioPlayer: HTMLAudioElement | null = document.querySelector('#audio-player');
102
100
  if (!audioPlayer) return;
103
- if (this.live && !this.hlsReady) {
101
+ if (this.playerLive && !this.hlsReady) {
104
102
  audioPlayer.pause();
105
103
  this.percentLiveProgress = 0;
106
104
  this.durationLivePosition = 0;
107
105
  return;
108
106
  }
109
- if ('PAUSED' === this.status && this.radio) {
107
+ if ('PAUSED' === this.playerStatus && this.playerRadio) {
110
108
  this.hlsReady = false;
111
109
  this.reInitPlayer();
112
110
  this.endingLive();
113
- }else if('PAUSED' === this.status){
111
+ }else if('PAUSED' === this.playerStatus){
114
112
  audioPlayer.pause();
115
- }else if ('PLAYING' === this.status && this.radio){
116
- if(this.radio.isInit){
113
+ }else if ('PLAYING' === this.playerStatus && this.playerRadio){
114
+ if(this.playerRadio.isInit){
117
115
  this.playRadio();
118
116
  }else{
119
- this.radio.isInit = true;
117
+ this.playerRadio.isInit = true;
120
118
  }
121
- }else if('PLAYING' === this.status){
119
+ }else if('PLAYING' === this.playerStatus){
122
120
  audioPlayer.play();
123
121
  }
124
122
  },
@@ -129,6 +127,7 @@ export const playerLogic = defineComponent({
129
127
  },
130
128
 
131
129
  methods: {
130
+ ...mapActions(usePlayerStore, ['playerPlay', 'playerUpdateElapsed']),
132
131
  getDomain(): string{
133
132
  let domain = "";
134
133
  const domainArray: RegExpExecArray | null = /\.(.+)/.exec(window.location.host);
@@ -138,41 +137,38 @@ export const playerLogic = defineComponent({
138
137
  return domain;
139
138
  },
140
139
  getAudioUrlParameters(): string{
141
- if (!this.podcast) return '';
140
+ if (!this.playerPodcast) return '';
142
141
  const parameters = [];
143
142
  parameters.push('origin=octopus');
144
143
  parameters.push('listenerId='+this.getListenerId());
145
- if (
146
- this.$store.state.auth &&
147
- this.$store.state.auth.organisationId
148
- ) {
144
+ if (this.authOrgaId) {
149
145
  parameters.push(
150
- 'distributorId=' + this.$store.state.auth.organisationId
146
+ 'distributorId=' + this.authOrgaId
151
147
  );
152
148
  }
153
- if("SECURED" === this.podcast.organisation.privacy && this.$store.state.auth && this.$store.state.auth.oAuthParam.accessToken){
154
- parameters.push('access_token='+this.$store.state.auth?.oAuthParam.accessToken);
149
+ if("SECURED" === this.playerPodcast.organisation.privacy && this.authParam.accessToken){
150
+ parameters.push('access_token='+this.authParam.accessToken);
155
151
  }
156
- return this.podcast.podcastId + '.mp3?' + parameters.join('&');
152
+ return this.playerPodcast.podcastId + '.mp3?' + parameters.join('&');
157
153
  },
158
154
  getAudioUrl(): string{
159
- if (this.media) return this.media.audioUrl? this.media.audioUrl:"";
160
- if (!this.podcast) return '';
161
- if (!this.podcast.availability.visibility || "PROCESSING"===this.podcast.processingStatus)
162
- return this.podcast.audioStorageUrl;
163
- if (this.listenError) return this.podcast.audioStorageUrl;
155
+ if (this.playerMedia) return this.playerMedia.audioUrl? this.playerMedia.audioUrl:"";
156
+ if (!this.playerPodcast) return '';
157
+ if (!this.playerPodcast.availability.visibility || "PROCESSING"===this.playerPodcast.processingStatus)
158
+ return this.playerPodcast.audioStorageUrl;
159
+ if (this.listenError) return this.playerPodcast.audioStorageUrl;
164
160
  return this.getAudioUrlParameters();
165
161
  },
166
162
  reInitPlayer():void{
167
163
  this.setDownloadId(null);
168
164
  this.listenError = false;
169
165
  this.initComments();
170
- if (this.live || this.radio) {
166
+ if (this.playerLive || this.playerRadio) {
171
167
  this.endingLive();
172
168
  }
173
169
  },
174
170
  stopPlayer(): void {
175
- this.$store.commit('player/playPodcast');
171
+ this.playerPlay();
176
172
  },
177
173
  getListenerId(): string{
178
174
  let listenerId = this.getCookie("octopus_listenerId");
@@ -183,9 +179,9 @@ export const playerLogic = defineComponent({
183
179
  return listenerId;
184
180
  },
185
181
  onError(): void {
186
- if (this.podcast && ""!==this.audioUrlToPlay && !this.listenError) {
182
+ if (this.playerPodcast && ""!==this.audioUrlToPlay && !this.listenError) {
187
183
  this.listenError = true;
188
- } else if ((this.podcast && ""!==this.audioUrlToPlay ) || this.media) {
184
+ } else if ((this.playerPodcast && ""!==this.audioUrlToPlay ) || this.playerMedia) {
189
185
  this.playerError = true;
190
186
  }
191
187
  },
@@ -205,37 +201,31 @@ export const playerLogic = defineComponent({
205
201
  onTimeUpdatePodcast(streamDuration:number, currentTime:number){
206
202
  this.displayAlertBar = false;
207
203
  this.percentLiveProgress = 100;
208
- this.$store.commit('player/totalTime', streamDuration);
209
- this.$store.commit('player/elapsed', currentTime / streamDuration);
204
+ this.playerUpdateElapsed(currentTime / streamDuration, streamDuration);
210
205
  this.onTimeUpdateTranscript(currentTime);
211
206
  },
212
207
  onTimeUpdateLive(streamDuration: number, currentTime:number){
213
- if(!this.live){return;}
214
- const scheduledDuration = this.live.duration / 1000;
208
+ if(!this.playerLive){return;}
209
+ const scheduledDuration = this.playerLive.duration / 1000;
215
210
  if (scheduledDuration > streamDuration) {
216
211
  this.displayAlertBar = false;
217
212
  this.percentLiveProgress = (streamDuration / scheduledDuration) * 100;
218
- this.$store.commit('player/totalTime', scheduledDuration);
219
- this.$store.commit(
220
- 'player/elapsed',
221
- currentTime / scheduledDuration
222
- );
213
+ this.playerUpdateElapsed(currentTime / scheduledDuration, scheduledDuration);
223
214
  } else {
224
215
  this.percentLiveProgress = 100;
225
216
  this.displayAlertBar = true;
226
217
  this.durationLivePosition = (scheduledDuration / streamDuration) * 100;
227
- this.$store.commit('player/totalTime', streamDuration);
228
- this.$store.commit('player/elapsed', currentTime / streamDuration);
218
+ this.playerUpdateElapsed(currentTime / streamDuration, streamDuration);
229
219
  }
230
220
  },
231
221
  onTimeUpdate(event: Event): void {
232
222
  const mediaTarget = (event.currentTarget as HTMLMediaElement);
233
- if (this.podcast || this.live) {
223
+ if (this.playerPodcast || this.playerLive) {
234
224
  if (!this.downloadId) {
235
225
  return;
236
226
  }
237
227
  if (
238
- this.live &&
228
+ this.playerLive &&
239
229
  0 === this.listenTime &&
240
230
  0 !== mediaTarget.currentTime
241
231
  ) {
@@ -249,7 +239,7 @@ export const playerLogic = defineComponent({
249
239
  let streamDuration = this.streamDurationForSafari(mediaTarget);
250
240
  if (!streamDuration) return;
251
241
  if (!mediaTarget.currentTime) return;
252
- if (!this.live) {
242
+ if (!this.playerLive) {
253
243
  this.onTimeUpdatePodcast(streamDuration,mediaTarget.currentTime);
254
244
  return;
255
245
  }
@@ -262,7 +252,7 @@ export const playerLogic = defineComponent({
262
252
  },
263
253
  onFinished(): void {
264
254
  this.setDownloadId(null);
265
- if (this.live) {
255
+ if (this.playerLive) {
266
256
  this.endingLive();
267
257
  }
268
258
  this.forceHide = true;