@saooti/octopus-sdk 39.0.46 → 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/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>
|
|
@@ -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