Skip to content

Commit

Permalink
Frontend: Auto next instead of next-end for short videos
Browse files Browse the repository at this point in the history
  • Loading branch information
@AgustinSRG
AgustinSRG committed Sep 21, 2023
1 parent f363b49 commit 2cdb7ac
Show file tree
Hide file tree
Showing 6 changed files with 227 additions and 15 deletions.
55 changes: 50 additions & 5 deletions frontend/src/components/player/AudioPlayer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
playsinline
webkit-playsinline
x-webkit-airplay="allow"
:loop="loop && !sliceLoop"
:loop="(loop || isShort) && !sliceLoop"
crossorigin="use-credentials"
:muted="muted"
:volume.prop="volume"
Expand Down Expand Up @@ -300,6 +300,8 @@
@update:nextEnd="onUpdateNextEnd"
@enter="enterControls"
@leave="leaveControls"
:isShort="isShort"
@update-auto-next="setupAutoNextTimer"
></AudioPlayerConfig>

<PlayerTopBar
Expand Down Expand Up @@ -328,6 +330,7 @@
@stats="openStats"
v-model:sliceLoop="sliceLoop"
:hasSlices="timeSlices && timeSlices.length > 0"
:isShort="isShort"
@open-tags="openTags"
@open-ext-desc="openExtendedDescription"
></PlayerContextMenu>
Expand Down Expand Up @@ -360,6 +363,7 @@ import { AppStatus } from "@/control/app-status";
import { KeyboardManager } from "@/control/keyboard";
import { AuthController } from "@/control/auth";
import { AppPreferences } from "@/control/app-preferences";
import { AUTO_LOOP_MIN_DURATION } from "@/utils/constants";
export default defineComponent({
components: {
Expand Down Expand Up @@ -447,6 +451,8 @@ export default defineComponent({
loop: false,
nextEnd: false,
isShort: false,
sliceLoop: false,
volume: 1,
Expand Down Expand Up @@ -653,7 +659,7 @@ export default defineComponent({
if (this.canSaveTime) {
PlayerPreferences.SetInitialTime(this.mid, 0);
}
if (!this.loop) {
if (!this.loop && !this.isShort) {
this.pause();
this.ended = true;
if (this.nextEnd) {
Expand Down Expand Up @@ -1072,7 +1078,7 @@ export default defineComponent({
break;
case "l":
case "L":
if (event.altKey || shifting) {
if (event.altKey || shifting || this.isShort) {
caught = false;
} else {
this.loop = !this.loop;
Expand Down Expand Up @@ -1114,6 +1120,7 @@ export default defineComponent({
if (!this.metadata) {
return;
}
this.isShort = this.metadata.duration <= AUTO_LOOP_MIN_DURATION;
this.canSaveTime = !this.metadata.force_start_beginning;
this.hasExtendedDescription = !!this.metadata.ext_desc_url;
this.timeSlices = normalizeTimeSlices(
Expand Down Expand Up @@ -1167,6 +1174,7 @@ export default defineComponent({
this.audioPending = false;
this.audioPendingTask = 0;
this.getAudioElement().load();
this.setupAutoNextTimer();
} else {
this.audioURL = "";
this.onClearURL();
Expand Down Expand Up @@ -1427,7 +1435,7 @@ export default defineComponent({
if (this.loopForced) {
this.loop = this.loopForcedValue;
} else {
this.loop = AppStatus.CurrentAlbum < 0 || !this.nextEnd;
this.loop = (!this.next && !this.pageNext) || !this.nextEnd;
}
},
Expand All @@ -1436,6 +1444,33 @@ export default defineComponent({
this.pause();
}
},
setupAutoNextTimer: function () {
if (this._handles.autoNextTimer) {
clearTimeout(this._handles.autoNextTimer);
this._handles.autoNextTimer = null;
}
const timerS = PlayerPreferences.ImageAutoNext;
if (isNaN(timerS) || !isFinite(timerS) || timerS <= 0) {
return;
}
if (!this.next && !this.pageNext) {
return;
}
const ms = timerS * 1000;
this._handles.autoNextTimer = setTimeout(() => {
this._handles.autoNextTimer = null;
if (this.displayConfig || this.expandedTitle) {
this.setupAutoNextTimer();
} else {
this.goNext();
}
}, ms);
},
},
mounted: function () {
this._handles = Object.create(null);
Expand Down Expand Up @@ -1479,6 +1514,11 @@ export default defineComponent({
this.onClearURL();
clearInterval(this._handles.timer);
if (this._handles.autoNextTimer) {
clearTimeout(this._handles.autoNextTimer);
this._handles.autoNextTimer = null;
}
this.clearAudioRenderer();
this.closeAudioContext();
Expand Down Expand Up @@ -1515,8 +1555,13 @@ export default defineComponent({
this.loading = true;
}
},
inAlbum: function () {
next: function () {
this.setDefaultLoop();
this.setupAutoNextTimer();
},
pageNext: function () {
this.setDefaultLoop();
this.setupAutoNextTimer();
},
},
});
Expand Down
58 changes: 56 additions & 2 deletions frontend/src/components/player/AudioPlayerConfig.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
@keydown="keyDownHandle"
>
<table v-if="page === ''">
<tr>
<tr v-if="!isShort">
<td>
<i class="fas fa-repeat icon-config"></i>
<b>{{ $t("Loop") }}</b>
Expand All @@ -23,7 +23,7 @@
<ToggleSwitch v-model:val="loopState"></ToggleSwitch>
</td>
</tr>
<tr>
<tr v-if="!isShort">
<td>
<i class="fas fa-forward icon-config"></i>
<b>{{ $t("Auto next") }}</b>
Expand All @@ -32,6 +32,16 @@
<ToggleSwitch v-model:val="nextEndState"></ToggleSwitch>
</td>
</tr>
<tr v-if="isShort" class="tr-button" tabindex="0" @click="goToAutoNext" @keydown="clickOnEnter">
<td>
<i class="fas fa-forward icon-config"></i>
<b>{{ $t("Auto next") }}</b>
</td>
<td class="td-right">
{{ renderAutoNext(autoNext) }}
<i class="fas fa-chevron-right arrow-config"></i>
</td>
</tr>
<tr class="tr-button" tabindex="0" @click="goToSpeeds" @keydown="clickOnEnter">
<td>
<i class="fas fa-gauge icon-config"></i>
Expand Down Expand Up @@ -217,6 +227,23 @@
<td class="td-right"></td>
</tr>
</table>

<table v-if="page === 'auto-next'">
<tr class="tr-button" tabindex="0" @keydown="clickOnEnter" @click="goBack">
<td>
<i class="fas fa-chevron-left icon-config"></i>
<b>{{ $t("Auto next") }}</b>
</td>
<td class="td-right"></td>
</tr>
<tr v-for="b in autoNextOptions" :key="b" class="tr-button" tabindex="0" @keydown="clickOnEnter" @click="changeAutoNext(b)">
<td>
<i class="fas fa-check icon-config" :class="{ 'check-uncheck': b !== autoNext }"></i>
{{ renderAutoNext(b) }}
</td>
<td class="td-right"></td>
</tr>
</table>
</div>
</template>

Expand Down Expand Up @@ -254,6 +281,7 @@ export default defineComponent({
subBackground: String,
subHTML: Boolean,
rTick: Number,
isShort: Boolean,
},
setup(props) {
return {
Expand All @@ -277,6 +305,9 @@ export default defineComponent({
subtitlesSizes: ["s", "m", "l", "xl", "xxl"],
subtitlesBackgrounds: ["100", "75", "50", "25", "0"],
autoNext: PlayerPreferences.ImageAutoNext,
autoNextOptions: [0, 3, 5, 10, 15, 20, 25, 30],
};
},
methods: {
Expand Down Expand Up @@ -332,6 +363,17 @@ export default defineComponent({
this.focus();
},
goToAutoNext: function () {
this.page = "auto-next";
this.focus();
},
changeAutoNext: function (b) {
this.autoNext = b;
PlayerPreferences.SetImageAutoNext(b);
this.$emit("update-auto-next");
},
renderSpeed: function (speed: number) {
if (speed > 1) {
return Math.floor(speed * 100) + "%";
Expand Down Expand Up @@ -398,6 +440,18 @@ export default defineComponent({
}
},
renderAutoNext: function (s: number) {
if (!isNaN(s) && isFinite(s) && s > 0) {
if (s === 1) {
return s + " " + this.$t("second");
} else {
return s + " " + this.$t("seconds");
}
} else {
return this.$t("Disabled");
}
},
updateSubtitleBackground: function (s: string) {
this.subBackgroundState = s;
PlayerPreferences.SetSubtitlesBackground(s);
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/components/player/PlayerContextMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
@dblclick="stopPropagationEvent"
>
<table class="player-context-menu-table">
<tr v-if="type === 'video' || type === 'audio'" class="tr-button" tabindex="0" @click="toggleLoop" @keydown="clickOnEnter">
<tr v-if="(type === 'video' || type === 'audio') && !isShort" class="tr-button" tabindex="0" @click="toggleLoop" @keydown="clickOnEnter">
<td>
<i class="fas fa-repeat icon-config"></i>
<span class="context-entry-title">{{ $t("Loop") }}</span>
Expand Down Expand Up @@ -159,6 +159,8 @@ export default defineComponent({
sliceLoop: Boolean,
hasSlices: Boolean,
isShort: Boolean,
notesEdit: Boolean,
canWrite: Boolean,
Expand Down
Loading

0 comments on commit 2cdb7ac

Please sign in to comment.