@saooti/octopus-sdk 39.0.45 → 39.0.47
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.
- package/index.ts +1 -1
- package/package.json +1 -1
- package/src/components/display/emission/EmissionPresentationItem.vue +67 -0
- package/src/components/display/emission/EmissionPresentationList.vue +144 -0
- package/src/components/form/ClassicMultiselect.vue +12 -3
- package/src/components/misc/player/PlayerCompact.vue +3 -0
- package/src/components/misc/player/elements/PlayerPlayButton.vue +3 -1
- package/src/components/misc/player/elements/PlayerSpeedButton.vue +46 -0
- package/src/locale/de.ts +1 -0
- package/src/locale/en.ts +1 -0
- package/src/locale/es.ts +1 -0
- package/src/locale/fr.ts +1 -0
- package/src/locale/it.ts +1 -0
- package/src/locale/sl.ts +1 -0
package/index.ts
CHANGED
|
@@ -49,7 +49,7 @@ export const getCommentList = () => import("./src/components/display/comments/Co
|
|
|
49
49
|
export const getCommentInput = () => import("./src/components/display/comments/CommentInput.vue");
|
|
50
50
|
export const getPodcastPlaylistInlineList = () => import("./src/components/display/playlist/PodcastPlaylistInlineList.vue");
|
|
51
51
|
export const getLiveList = () => import("./src/components/display/live/LiveList.vue");
|
|
52
|
-
|
|
52
|
+
export const getEmissionPresentationList = () => import("./src/components/display/emission/EmissionPresentationList.vue");
|
|
53
53
|
|
|
54
54
|
//Radio
|
|
55
55
|
export const getRadioCurrently = () => import("./src/components/display/live/RadioCurrently.vue");
|
package/package.json
CHANGED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="emission-item-container emission-presentation-container mt-3" :class="isVertical?'emission-vertical-item':''">
|
|
3
|
+
<router-link
|
|
4
|
+
:to="{
|
|
5
|
+
name: 'emission',
|
|
6
|
+
params: { emissionId: emission.emissionId },
|
|
7
|
+
query: { productor: filterOrgaId },
|
|
8
|
+
}"
|
|
9
|
+
:title="$t('Emission')"
|
|
10
|
+
class="d-flex-column flex-grow-1 text-dark"
|
|
11
|
+
:class="isVertical? 'flex-column':''"
|
|
12
|
+
>
|
|
13
|
+
<img
|
|
14
|
+
v-lazy="proxyImageUrl(emission.imageUrl, isVertical?'400':'250')"
|
|
15
|
+
:width="isVertical?'400':'250'"
|
|
16
|
+
:height="isVertical?'400':'250'"
|
|
17
|
+
:class="isVertical?'img-box-bigger':''"
|
|
18
|
+
class="img-box"
|
|
19
|
+
:title="$t('Emission name image', { name: emission.name })"
|
|
20
|
+
:alt="$t('Emission name image', { name: emission.name })"
|
|
21
|
+
/>
|
|
22
|
+
<div class="emission-item-text">
|
|
23
|
+
<div class="d-flex align-items-center emission-name">
|
|
24
|
+
{{ emission.name }}
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
</router-link>
|
|
28
|
+
</div>
|
|
29
|
+
</template>
|
|
30
|
+
|
|
31
|
+
<script lang="ts">
|
|
32
|
+
import { orgaComputed } from "../../mixins/orgaComputed";
|
|
33
|
+
import { Emission } from "@/stores/class/general/emission";
|
|
34
|
+
import imageProxy from "../../mixins/imageProxy";
|
|
35
|
+
import displayMethods from "../../mixins/displayMethods";
|
|
36
|
+
import { defineComponent } from "vue";
|
|
37
|
+
export default defineComponent({
|
|
38
|
+
name: "EmissionItem",
|
|
39
|
+
|
|
40
|
+
mixins: [displayMethods, orgaComputed, imageProxy],
|
|
41
|
+
|
|
42
|
+
props: {
|
|
43
|
+
emission: { default: () => ({}), type: Object as () => Emission },
|
|
44
|
+
isVertical: { default: false, type: Boolean },
|
|
45
|
+
},
|
|
46
|
+
|
|
47
|
+
});
|
|
48
|
+
</script>
|
|
49
|
+
<style lang="scss">
|
|
50
|
+
.octopus-app {
|
|
51
|
+
.emission-presentation-container{
|
|
52
|
+
@media (max-width: 960px) {
|
|
53
|
+
width: 250px !important;
|
|
54
|
+
margin-right: 0.5rem;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
.emission-item-container.emission-vertical-item{
|
|
58
|
+
flex-grow: 0;
|
|
59
|
+
width: 400px;
|
|
60
|
+
flex-shrink: 0;
|
|
61
|
+
}
|
|
62
|
+
.img-box-bigger{
|
|
63
|
+
width: 400px;
|
|
64
|
+
height: 400px;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
</style>
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="d-flex flex-column p-3">
|
|
3
|
+
<h2 class="mb-3">{{ title }}</h2>
|
|
4
|
+
<ClassicLoading
|
|
5
|
+
:loading-text="loading ? $t('Loading emissions ...') : undefined"
|
|
6
|
+
:error-text="error ? $t(`Error`) : undefined"
|
|
7
|
+
/>
|
|
8
|
+
<template v-if="!loading && !error">
|
|
9
|
+
<div class="d-flex flex-nowrap align-items-stretch overflow-phone-auto">
|
|
10
|
+
<EmissionItemPresentation
|
|
11
|
+
v-if="allEmissions[0]"
|
|
12
|
+
:class="!isPhone? 'me-3':''"
|
|
13
|
+
:emission="allEmissions[0]"
|
|
14
|
+
:isVertical="!isPhone"
|
|
15
|
+
/>
|
|
16
|
+
<div v-if="allEmissions.length > 1" class="emission-column emission-column-margin d-flex-row flex-nowrap">
|
|
17
|
+
<EmissionItemPresentation v-if="allEmissions[1]" :emission="allEmissions[1]" />
|
|
18
|
+
<EmissionItemPresentation v-if="allEmissions[2]" :emission="allEmissions[2]"/>
|
|
19
|
+
</div>
|
|
20
|
+
<div v-if="allEmissions.length > 3" class="emission-column d-flex-row flex-nowrap show-emission-column">
|
|
21
|
+
<EmissionItemPresentation v-if="allEmissions[3]" :emission="allEmissions[3]" />
|
|
22
|
+
<EmissionItemPresentation v-if="allEmissions[4]" :emission="allEmissions[4]"/>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
<router-link
|
|
26
|
+
v-if="buttonText && href"
|
|
27
|
+
:to="href"
|
|
28
|
+
class="btn btn-primary align-self-center width-fit-content m-4"
|
|
29
|
+
>
|
|
30
|
+
{{ buttonText }}
|
|
31
|
+
</router-link>
|
|
32
|
+
</template>
|
|
33
|
+
</div>
|
|
34
|
+
</template>
|
|
35
|
+
|
|
36
|
+
<script lang="ts">
|
|
37
|
+
import SwiperList from "../list/SwiperList.vue";
|
|
38
|
+
import octopusApi from "@saooti/octopus-api";
|
|
39
|
+
import EmissionPlayerItem from "./EmissionPlayerItem.vue";
|
|
40
|
+
import { handle403 } from "../../mixins/handle403";
|
|
41
|
+
import ClassicLoading from "../../form/ClassicLoading.vue";
|
|
42
|
+
import { Emission } from "@/stores/class/general/emission";
|
|
43
|
+
import { defineAsyncComponent, defineComponent } from "vue";
|
|
44
|
+
import { AxiosError } from "axios";
|
|
45
|
+
import imageProxy from "../../mixins/imageProxy";
|
|
46
|
+
import resizePhone from "../../mixins/resizePhone";
|
|
47
|
+
const EmissionItemPresentation = defineAsyncComponent(() => import("./EmissionPresentationItem.vue"));
|
|
48
|
+
export default defineComponent({
|
|
49
|
+
name: "EmissionPresentationList",
|
|
50
|
+
components: {
|
|
51
|
+
EmissionPlayerItem,
|
|
52
|
+
ClassicLoading,
|
|
53
|
+
SwiperList,
|
|
54
|
+
EmissionItemPresentation
|
|
55
|
+
},
|
|
56
|
+
|
|
57
|
+
mixins: [handle403, imageProxy, resizePhone],
|
|
58
|
+
|
|
59
|
+
props: {
|
|
60
|
+
organisationId: { default: undefined, type: String },
|
|
61
|
+
title: { default: "", type: String },
|
|
62
|
+
href: { default: undefined, type: String },
|
|
63
|
+
buttonText: { default: undefined, type: String },
|
|
64
|
+
},
|
|
65
|
+
data() {
|
|
66
|
+
return {
|
|
67
|
+
loading: true as boolean,
|
|
68
|
+
error: false as boolean,
|
|
69
|
+
allEmissions: [] as Array<Emission>,
|
|
70
|
+
isPhone: false as boolean,
|
|
71
|
+
windowWidth: 0 as number,
|
|
72
|
+
};
|
|
73
|
+
},
|
|
74
|
+
|
|
75
|
+
mounted() {
|
|
76
|
+
this.fetchNext();
|
|
77
|
+
},
|
|
78
|
+
methods: {
|
|
79
|
+
async fetchNext(): Promise<void> {
|
|
80
|
+
this.loading = true;
|
|
81
|
+
try {
|
|
82
|
+
const data = await octopusApi.fetchDataWithParams<{
|
|
83
|
+
count: number;
|
|
84
|
+
result: Array<Emission>;
|
|
85
|
+
sort: string;
|
|
86
|
+
}>(
|
|
87
|
+
0,
|
|
88
|
+
"emission/search",
|
|
89
|
+
{
|
|
90
|
+
first: 0,
|
|
91
|
+
size: 5,
|
|
92
|
+
organisationId: this.organisationId,
|
|
93
|
+
sort: "LAST_PODCAST_DESC",
|
|
94
|
+
},
|
|
95
|
+
true,
|
|
96
|
+
);
|
|
97
|
+
this.allEmissions = this.allEmissions.concat(
|
|
98
|
+
data.result.filter((em: Emission | null) => null !== em),
|
|
99
|
+
);
|
|
100
|
+
this.loading = false;
|
|
101
|
+
} catch (error) {
|
|
102
|
+
this.handle403(error as AxiosError);
|
|
103
|
+
this.error = true;
|
|
104
|
+
}
|
|
105
|
+
this.loading= false;
|
|
106
|
+
},
|
|
107
|
+
},
|
|
108
|
+
});
|
|
109
|
+
</script>
|
|
110
|
+
<style lang="scss">
|
|
111
|
+
.octopus-app {
|
|
112
|
+
.overflow-phone-auto{
|
|
113
|
+
@media (max-width: 960px) {
|
|
114
|
+
overflow-y: auto;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
.emission-column{
|
|
118
|
+
flex-shrink: 0;
|
|
119
|
+
width: calc((100% - 420px) / 2);
|
|
120
|
+
@media (max-width: 1550px) {
|
|
121
|
+
width: calc((100% - 420px)) ;
|
|
122
|
+
}
|
|
123
|
+
@media (max-width: 960px) {
|
|
124
|
+
width: auto;
|
|
125
|
+
flex-direction: row !important;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
.emission-column-margin{
|
|
129
|
+
margin-right: 1rem;
|
|
130
|
+
@media (max-width: 960px) {
|
|
131
|
+
margin-right: 0;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
.show-emission-column{
|
|
135
|
+
display: flex;
|
|
136
|
+
@media (max-width: 1550px) {
|
|
137
|
+
display: none !important;
|
|
138
|
+
}
|
|
139
|
+
@media (max-width: 960px) {
|
|
140
|
+
display: flex !important;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
</style>
|
|
@@ -20,10 +20,12 @@
|
|
|
20
20
|
:disabled="isDisabled"
|
|
21
21
|
:loading="isLoading"
|
|
22
22
|
:placeholder="placeholder"
|
|
23
|
+
:clearSearchOnBlur="()=>{return true}"
|
|
23
24
|
:filter="fakeSearch"
|
|
24
25
|
:selectable="() => !maxOptionsSelected"
|
|
25
26
|
@open="onSearch"
|
|
26
27
|
@search="onSearch"
|
|
28
|
+
@close="onClose"
|
|
27
29
|
@option:selected="onOptionSelected"
|
|
28
30
|
@option:deselected="onOptionDeselect"
|
|
29
31
|
>
|
|
@@ -90,7 +92,7 @@ export default {
|
|
|
90
92
|
allowEmpty: { default: true, type: Boolean },
|
|
91
93
|
},
|
|
92
94
|
|
|
93
|
-
emits: ["onSearch", "selected"],
|
|
95
|
+
emits: ["onSearch", "selected", "onClose"],
|
|
94
96
|
|
|
95
97
|
data() {
|
|
96
98
|
return {
|
|
@@ -99,6 +101,7 @@ export default {
|
|
|
99
101
|
remainingElements: 0 as number,
|
|
100
102
|
isLoading: false as boolean,
|
|
101
103
|
nbOptionsSelected: 0 as number,
|
|
104
|
+
searchInput: "" as string
|
|
102
105
|
};
|
|
103
106
|
},
|
|
104
107
|
computed: {
|
|
@@ -135,13 +138,19 @@ export default {
|
|
|
135
138
|
fakeSearch(): Array<unknown> {
|
|
136
139
|
return this.options;
|
|
137
140
|
},
|
|
138
|
-
onSearch(search
|
|
141
|
+
onSearch(search?: string): void {
|
|
139
142
|
if (search && search.length < this.minSearchLength) {
|
|
140
143
|
return;
|
|
144
|
+
}else if(search){
|
|
145
|
+
this.searchInput = search;
|
|
141
146
|
}
|
|
142
147
|
this.isLoading = true;
|
|
143
148
|
this.$emit("onSearch", search);
|
|
144
149
|
},
|
|
150
|
+
onClose(){
|
|
151
|
+
this.$emit("onClose", this.searchInput);
|
|
152
|
+
this.searchInput = "";
|
|
153
|
+
},
|
|
145
154
|
afterSearch(optionsFetched: Array<unknown>, count: number): void {
|
|
146
155
|
this.options = optionsFetched;
|
|
147
156
|
this.remainingElements = Math.max(0, count - this.maxElement);
|
|
@@ -156,7 +165,7 @@ export default {
|
|
|
156
165
|
}
|
|
157
166
|
if (
|
|
158
167
|
!this.allowEmpty &&
|
|
159
|
-
|
|
168
|
+
0 === (this.optionSelected as Array<unknown>).length
|
|
160
169
|
) {
|
|
161
170
|
(this.optionSelected as Array<unknown>).push(event);
|
|
162
171
|
return;
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
/>
|
|
29
29
|
</div>
|
|
30
30
|
<!-- <AdsSkipButton/> -->
|
|
31
|
+
<PlayerSpeedButton/>
|
|
31
32
|
<button
|
|
32
33
|
:title="'' != transcriptText ? $t('View transcript') : $t('Enlarge')"
|
|
33
34
|
class="btn play-button-box btn-transparent text-light saooti-up me-0"
|
|
@@ -55,6 +56,7 @@ import PlayerChaptering from "./chaptering/PlayerChaptering.vue";
|
|
|
55
56
|
/* import AdsSkipButton from "./ads/AdsSkipButton.vue"; */
|
|
56
57
|
import PlayerImage from "./elements/PlayerImage.vue";
|
|
57
58
|
import PlayerPlayButton from "./elements/PlayerPlayButton.vue";
|
|
59
|
+
import PlayerSpeedButton from "./elements/PlayerSpeedButton.vue";
|
|
58
60
|
import { defineAsyncComponent, defineComponent } from "vue";
|
|
59
61
|
const PlayerProgressBar = defineAsyncComponent(
|
|
60
62
|
() => import("./progressbar/PlayerProgressBar.vue"),
|
|
@@ -69,6 +71,7 @@ export default defineComponent({
|
|
|
69
71
|
PlayerImage,
|
|
70
72
|
PlayerPlayButton,
|
|
71
73
|
PlayerTitle,
|
|
74
|
+
PlayerSpeedButton
|
|
72
75
|
/* AdsSkipButton */
|
|
73
76
|
},
|
|
74
77
|
mixins: [playerDisplayTime, imageProxy],
|
|
@@ -124,10 +124,12 @@ export default defineComponent({
|
|
|
124
124
|
justify-content: center;
|
|
125
125
|
margin: 0 0.5rem;
|
|
126
126
|
border-radius: 50% !important;
|
|
127
|
-
font-size: 1rem !important;
|
|
128
127
|
flex-shrink: 0;
|
|
129
128
|
cursor: pointer;
|
|
130
129
|
}
|
|
130
|
+
.play-button-box:not(.small-font){
|
|
131
|
+
font-size: 1rem !important;
|
|
132
|
+
}
|
|
131
133
|
.play-big-button-box {
|
|
132
134
|
height: 5rem;
|
|
133
135
|
width: 5rem;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<button
|
|
3
|
+
:title="$t('Change speed')"
|
|
4
|
+
class="btn play-button-box small-font btn-transparent text-light me-0"
|
|
5
|
+
@click="changeSpeed"
|
|
6
|
+
>
|
|
7
|
+
{{
|
|
8
|
+
"×"+speedArray[speedIndex]
|
|
9
|
+
}}</button>
|
|
10
|
+
</template>
|
|
11
|
+
<script lang="ts">
|
|
12
|
+
|
|
13
|
+
import { defineComponent } from "vue";
|
|
14
|
+
export default defineComponent({
|
|
15
|
+
name: "PlayerSpeedButton",
|
|
16
|
+
|
|
17
|
+
data() {
|
|
18
|
+
return {
|
|
19
|
+
audioPlayer: null as HTMLAudioElement | null,
|
|
20
|
+
speedIndex: 2 as number,
|
|
21
|
+
speedArray: [0.5,0.75, 1, 1.25, 1.5,1.75],
|
|
22
|
+
};
|
|
23
|
+
},
|
|
24
|
+
mounted(){
|
|
25
|
+
this.audioPlayer =document.querySelector("#audio-player");
|
|
26
|
+
},
|
|
27
|
+
methods: {
|
|
28
|
+
changeSpeed() {
|
|
29
|
+
this.speedIndex += 1;
|
|
30
|
+
if (this.speedIndex > this.speedArray.length - 1) {
|
|
31
|
+
this.speedIndex = 0;
|
|
32
|
+
}
|
|
33
|
+
if(this.audioPlayer){
|
|
34
|
+
this.audioPlayer.playbackRate = this.speedArray[this.speedIndex];
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
});
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
<style lang="scss">
|
|
42
|
+
@import "@scss/_variables.scss";
|
|
43
|
+
.octopus-app {
|
|
44
|
+
|
|
45
|
+
}
|
|
46
|
+
</style>
|
package/src/locale/de.ts
CHANGED
package/src/locale/en.ts
CHANGED
package/src/locale/es.ts
CHANGED
package/src/locale/fr.ts
CHANGED
package/src/locale/it.ts
CHANGED