If multiple videos exist in one URL, a playlist will be auto generated

Removed tomp3 and tomp4 routes, replaced with /downloadFile

Simplified category->playlist conversion

Simplified playlist creation

Simplified file deletion

Playlist duration calculation is now done on the backend (categories uses this now too)

removeIDFromArchive moved from subscriptions->utils

Added plumbing to support type agnostic playlists
This commit is contained in:
Isaac Abadi
2021-05-30 00:39:00 -06:00
parent e2c31319cf
commit 4ea239170e
15 changed files with 381 additions and 600 deletions

View File

@@ -53,14 +53,12 @@ export class CustomPlaylistsComponent implements OnInit {
goToPlaylist(info_obj) {
const playlist = info_obj.file;
const playlistID = playlist.id;
const type = playlist.type;
if (playlist) {
if (this.postsService.config['Extra']['download_only_mode']) {
this.downloadPlaylist(playlist.id, playlist.name);
} else {
localStorage.setItem('player_navigator', this.router.url);
const fileNames = playlist.fileNames;
this.router.navigate(['/player', {playlist_id: playlistID, auto: playlist.auto}]);
}
} else {

View File

@@ -221,7 +221,7 @@ export class RecentVideosComponent implements OnInit {
if (!this.postsService.config.Extra.file_manager_enabled) {
// tell server to delete the file once downloaded
this.postsService.deleteFile(name, type).subscribe(delRes => {
this.postsService.deleteFile(file.uid).subscribe(delRes => {
// reload mp4s
this.getAllFiles();
});

View File

@@ -51,9 +51,8 @@ export class CreatePlaylistComponent implements OnInit {
createPlaylist() {
const thumbnailURL = this.getThumbnailURL();
const duration = this.calculateDuration();
this.create_in_progress = true;
this.postsService.createPlaylist(this.name, this.filesSelect.value, this.type, thumbnailURL, duration).subscribe(res => {
this.postsService.createPlaylist(this.name, this.filesSelect.value, this.type, thumbnailURL).subscribe(res => {
this.create_in_progress = false;
if (res['success']) {
this.dialogRef.close(true);
@@ -78,36 +77,4 @@ export class CreatePlaylistComponent implements OnInit {
}
return null;
}
getDuration(file_id) {
let properFilesToSelectFrom = this.filesToSelectFrom;
if (!this.filesToSelectFrom) {
properFilesToSelectFrom = this.type === 'audio' ? this.audiosToSelectFrom : this.videosToSelectFrom;
}
for (let i = 0; i < properFilesToSelectFrom.length; i++) {
const file = properFilesToSelectFrom[i];
if (file.id === file_id) {
return file.duration;
}
}
return null;
}
calculateDuration() {
let sum = 0;
for (let i = 0; i < this.filesSelect.value.length; i++) {
const duration_val = this.getDuration(this.filesSelect.value[i]);
sum += typeof duration_val === 'string' ? this.durationStringToNumber(duration_val) : duration_val;
}
return sum;
}
durationStringToNumber(dur_str) {
let num_sum = 0;
const dur_str_parts = dur_str.split(':');
for (let i = dur_str_parts.length-1; i >= 0; i--) {
num_sum += parseInt(dur_str_parts[i])*(60**(dur_str_parts.length-1-i));
}
return num_sum;
}
}

View File

@@ -1,7 +1,6 @@
<h4 mat-dialog-title>
<ng-container *ngIf="is_playlist" i18n="Share playlist dialog title">Share playlist</ng-container>
<ng-container *ngIf="!is_playlist && type === 'video'" i18n="Share video dialog title">Share video</ng-container>
<ng-container *ngIf="!is_playlist && type === 'audio'" i18n="Share audio dialog title">Share audio</ng-container>
<ng-container *ngIf="!is_playlist" i18n="Share video dialog title">Share file</ng-container>
</h4>
<mat-dialog-content>

View File

@@ -11,7 +11,6 @@ import { PostsService } from 'app/posts.services';
})
export class ShareMediaDialogComponent implements OnInit {
type = null;
uid = null;
uuid = null;
share_url = null;
@@ -26,7 +25,6 @@ export class ShareMediaDialogComponent implements OnInit {
ngOnInit(): void {
if (this.data) {
this.type = this.data.type;
this.uid = this.data.uid;
this.uuid = this.data.uuid;
this.sharing_enabled = this.data.sharing_enabled;
@@ -65,7 +63,7 @@ export class ShareMediaDialogComponent implements OnInit {
sharingChanged(event) {
if (event.checked) {
this.postsService.enableSharing(this.uid, this.type, this.is_playlist).subscribe(res => {
this.postsService.enableSharing(this.uid, this.is_playlist).subscribe(res => {
if (res['success']) {
this.openSnackBar('Sharing enabled.');
this.sharing_enabled = true;
@@ -76,7 +74,7 @@ export class ShareMediaDialogComponent implements OnInit {
this.openSnackBar('Failed to enable sharing - server error.');
});
} else {
this.postsService.disableSharing(this.uid, this.type, this.is_playlist).subscribe(res => {
this.postsService.disableSharing(this.uid, this.is_playlist).subscribe(res => {
if (res['success']) {
this.openSnackBar('Sharing disabled.');
this.sharing_enabled = false;

View File

@@ -342,12 +342,8 @@ export class MainComponent implements OnInit {
}
}
public goToFile(name, isAudio, uid) {
if (isAudio) {
this.downloadHelperMp3(name, uid, false, false, null, true);
} else {
this.downloadHelperMp4(name, uid, false, false, null, true);
}
public goToFile(container, isAudio, uid) {
this.downloadHelper(container, isAudio ? 'audio' : 'video', false, false, null, true);
}
public goToPlaylist(playlistID, type) {
@@ -379,56 +375,26 @@ export class MainComponent implements OnInit {
// download helpers
downloadHelperMp3(name, uid, is_playlist = false, forceView = false, new_download = null, navigate_mode = false) {
downloadHelper(container, type, is_playlist = false, force_view = false, new_download = null, navigate_mode = false) {
this.downloadingfile = false;
if (this.multiDownloadMode && !this.downloadOnlyMode && !navigate_mode) {
// do nothing
this.reloadRecentVideos();
} else {
// if download only mode, just download the file. no redirect
if (forceView === false && this.downloadOnlyMode && !this.iOS) {
if (force_view === false && this.downloadOnlyMode && !this.iOS) {
if (is_playlist) {
const zipName = name[0].split(' ')[0] + name[1].split(' ')[0];
this.downloadPlaylist(name, 'audio', zipName);
this.downloadPlaylist(container['uid']);
} else {
this.downloadAudioFile(decodeURI(name));
this.downloadFileFromServer(container, type);
}
this.reloadRecentVideos();
} else {
localStorage.setItem('player_navigator', this.router.url.split(';')[0]);
if (is_playlist) {
this.router.navigate(['/player', {fileNames: name.join('|nvr|'), type: 'audio'}]);
this.router.navigate(['/player', {playlist_id: container['id'], type: type}]);
} else {
this.router.navigate(['/player', {type: 'audio', uid: uid}]);
}
}
}
// remove download from current downloads
this.removeDownloadFromCurrentDownloads(new_download);
}
downloadHelperMp4(name, uid, is_playlist = false, forceView = false, new_download = null, navigate_mode = false) {
this.downloadingfile = false;
if (this.multiDownloadMode && !this.downloadOnlyMode && !navigate_mode) {
// do nothing
this.reloadRecentVideos();
} else {
// if download only mode, just download the file. no redirect
if (forceView === false && this.downloadOnlyMode) {
if (is_playlist) {
const zipName = name[0].split(' ')[0] + name[1].split(' ')[0];
this.downloadPlaylist(name, 'video', zipName);
} else {
this.downloadVideoFile(decodeURI(name));
}
this.reloadRecentVideos();
} else {
localStorage.setItem('player_navigator', this.router.url.split(';')[0]);
if (is_playlist) {
this.router.navigate(['/player', {fileNames: name.join('|nvr|'), type: 'video'}]);
} else {
this.router.navigate(['/player', {type: 'video', uid: uid}]);
this.router.navigate(['/player', {type: type, uid: container['uid']}]);
}
}
}
@@ -439,133 +405,85 @@ export class MainComponent implements OnInit {
// download click handler
downloadClicked() {
if (this.ValidURL(this.url)) {
this.urlError = false;
this.path = '';
// get common args
const customArgs = (this.customArgsEnabled ? this.customArgs : null);
const customOutput = (this.customOutputEnabled ? this.customOutput : null);
const youtubeUsername = (this.youtubeAuthEnabled && this.youtubeUsername ? this.youtubeUsername : null);
const youtubePassword = (this.youtubeAuthEnabled && this.youtubePassword ? this.youtubePassword : null);
// set advanced inputs
if (this.allowAdvancedDownload) {
if (customArgs) {
localStorage.setItem('customArgs', customArgs);
}
if (customOutput) {
localStorage.setItem('customOutput', customOutput);
}
if (youtubeUsername) {
localStorage.setItem('youtubeUsername', youtubeUsername);
}
}
if (this.audioOnly) {
// create download object
const new_download: Download = {
uid: uuid(),
type: 'audio',
percent_complete: 0,
url: this.url,
downloading: true,
is_playlist: this.url.includes('playlist'),
error: false
};
this.downloads.push(new_download);
if (!this.current_download && !this.multiDownloadMode) { this.current_download = new_download };
this.downloadingfile = true;
let customQualityConfiguration = null;
if (this.selectedQuality !== '') {
customQualityConfiguration = this.getSelectedAudioFormat();
}
this.postsService.makeMP3(this.url, (this.selectedQuality === '' ? null : this.selectedQuality),
customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword, new_download.uid).subscribe(posts => {
// update download object
new_download.downloading = false;
new_download.percent_complete = 100;
const is_playlist = !!(posts['file_names']);
this.path = is_playlist ? posts['file_names'] : posts['audiopathEncoded'];
this.current_download = null;
if (this.path !== '-1') {
this.downloadHelperMp3(this.path, posts['uid'], is_playlist, false, new_download);
}
}, error => { // can't access server or failed to download for other reasons
this.downloadingfile = false;
this.current_download = null;
new_download['downloading'] = false;
// removes download from list of downloads
const downloads_index = this.downloads.indexOf(new_download);
if (downloads_index !== -1) {
this.downloads.splice(downloads_index)
}
this.openSnackBar('Download failed!', 'OK.');
});
} else {
// create download object
const new_download: Download = {
uid: uuid(),
type: 'video',
percent_complete: 0,
url: this.url,
downloading: true,
is_playlist: this.url.includes('playlist'),
error: false
};
this.downloads.push(new_download);
if (!this.current_download && !this.multiDownloadMode) { this.current_download = new_download };
this.downloadingfile = true;
const customQualityConfiguration = this.getSelectedVideoFormat();
let cropFileSettings = null;
if (this.cropFile) {
cropFileSettings = {
cropFileStart: this.cropFileStart,
cropFileEnd: this.cropFileEnd
}
}
this.postsService.makeMP4(this.url, (this.selectedQuality === '' ? null : this.selectedQuality),
customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword, new_download.uid, cropFileSettings).subscribe(posts => {
// update download object
new_download.downloading = false;
new_download.percent_complete = 100;
const is_playlist = !!(posts['file_names']);
this.path = is_playlist ? posts['file_names'] : posts['videopathEncoded'];
this.current_download = null;
if (this.path !== '-1') {
this.downloadHelperMp4(this.path, posts['uid'], is_playlist, false, new_download);
}
}, error => { // can't access server
this.downloadingfile = false;
this.current_download = null;
new_download['downloading'] = false;
// removes download from list of downloads
const downloads_index = this.downloads.indexOf(new_download);
if (downloads_index !== -1) {
this.downloads.splice(downloads_index)
}
this.openSnackBar('Download failed!', 'OK.');
});
}
if (this.multiDownloadMode) {
this.url = '';
this.downloadingfile = false;
}
} else {
if (!this.ValidURL(this.url)) {
this.urlError = true;
return;
}
this.urlError = false;
// get common args
const customArgs = (this.customArgsEnabled ? this.customArgs : null);
const customOutput = (this.customOutputEnabled ? this.customOutput : null);
const youtubeUsername = (this.youtubeAuthEnabled && this.youtubeUsername ? this.youtubeUsername : null);
const youtubePassword = (this.youtubeAuthEnabled && this.youtubePassword ? this.youtubePassword : null);
// set advanced inputs
if (this.allowAdvancedDownload) {
if (customArgs) {
localStorage.setItem('customArgs', customArgs);
}
if (customOutput) {
localStorage.setItem('customOutput', customOutput);
}
if (youtubeUsername) {
localStorage.setItem('youtubeUsername', youtubeUsername);
}
}
const type = this.audioOnly ? 'audio' : 'video';
// create download object
const new_download: Download = {
uid: uuid(),
type: type,
percent_complete: 0,
url: this.url,
downloading: true,
is_playlist: this.url.includes('playlist'),
error: false
};
this.downloads.push(new_download);
if (!this.current_download && !this.multiDownloadMode) { this.current_download = new_download };
this.downloadingfile = true;
let customQualityConfiguration = type === 'audio' ? this.getSelectedAudioFormat() : this.getSelectedVideoFormat();
let cropFileSettings = null;
if (this.cropFile) {
cropFileSettings = {
cropFileStart: this.cropFileStart,
cropFileEnd: this.cropFileEnd
}
}
this.postsService.downloadFile(this.url, type, (this.selectedQuality === '' ? null : this.selectedQuality),
customQualityConfiguration, customArgs, customOutput, youtubeUsername, youtubePassword, new_download.uid, cropFileSettings).subscribe(res => {
// update download object
new_download.downloading = false;
new_download.percent_complete = 100;
const container = res['container'];
const is_playlist = res['file_uids'].length > 1;
this.current_download = null;
this.downloadHelper(container, type, is_playlist, false, new_download);
}, error => { // can't access server
this.downloadingfile = false;
this.current_download = null;
new_download['downloading'] = false;
// removes download from list of downloads
const downloads_index = this.downloads.indexOf(new_download);
if (downloads_index !== -1) {
this.downloads.splice(downloads_index)
}
this.openSnackBar('Download failed!', 'OK.');
});
if (this.multiDownloadMode) {
this.url = '';
this.downloadingfile = false;
}
}
@@ -626,27 +544,13 @@ export class MainComponent implements OnInit {
}
}
downloadAudioFile(file) {
this.downloading_content['audio'][file.id] = true;
downloadFileFromServer(file, type) {
const ext = type === 'audio' ? 'mp3' : 'mp4'
this.downloading_content[type][file.id] = true;
this.postsService.downloadFileFromServer(file.uid).subscribe(res => {
this.downloading_content['audio'][file.id] = false;
this.downloading_content[type][file.id] = false;
const blob: Blob = res;
saveAs(blob, decodeURIComponent(file.id) + '.mp3');
if (!this.fileManagerEnabled) {
// tell server to delete the file once downloaded
this.postsService.deleteFile(file.uid).subscribe(delRes => {
});
}
});
}
downloadVideoFile(file) {
this.downloading_content['video'][file.id] = true;
this.postsService.downloadFileFromServer(file.uid).subscribe(res => {
this.downloading_content['video'][file.id] = false;
const blob: Blob = res;
saveAs(blob, decodeURIComponent(file.id) + '.mp4');
saveAs(blob, decodeURIComponent(file.id) + `.${ext}`);
if (!this.fileManagerEnabled) {
// tell server to delete the file once downloaded

View File

@@ -1,10 +1,10 @@
<div style="height: 100%" *ngIf="playlist.length > 0 && show_player">
<div style="height: 100%" [ngClass]="(type === 'audio') ? null : 'container-video'">
<div style="height: 100%" [ngClass]="(currentItem.type === 'audio/mp3') ? null : 'container-video'">
<div style="max-width: 100%; margin-left: 0px; height: 100%">
<mat-drawer-container style="height: 100%" class="example-container" autosize>
<div style="height: fit-content" [ngClass]="(type === 'audio') ? 'audio-col' : 'video-col'">
<vg-player style="height: fit-content; max-height: 75vh" (onPlayerReady)="onPlayerReady($event)" [style.background-color]="(type === 'audio') ? 'transparent' : 'black'">
<video [ngClass]="(type === 'audio') ? 'audio-styles' : 'video-styles'" #media class="video-player" [vgMedia]="media" [src]="currentItem.src" id="singleVideo" preload="auto" controls>
<div style="height: fit-content" [ngClass]="(currentItem.type === 'audio/mp3') ? 'audio-col' : 'video-col'">
<vg-player style="height: fit-content; max-height: 75vh" (onPlayerReady)="onPlayerReady($event)" [style.background-color]="(currentItem.type === 'audio/mp3') ? 'transparent' : 'black'">
<video [ngClass]="(currentItem.type === 'audio/mp3') ? 'audio-styles' : 'video-styles'" #media class="video-player" [vgMedia]="media" [src]="currentItem.src" id="singleVideo" preload="auto" controls>
</video>
</vg-player>
</div>

View File

@@ -180,10 +180,6 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
}
getPlaylistFiles() {
if (this.route.snapshot.paramMap.get('auto') === 'true') {
this.show_player = true;
return;
}
this.postsService.getPlaylist(this.playlist_id, this.uuid, true).subscribe(res => {
if (res['playlist']) {
this.db_playlist = res['playlist'];
@@ -200,19 +196,15 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
});
}
parseFileNames() {
let fileType = null;
if (this.type === 'audio') {
fileType = 'audio/mp3';
} else {
fileType = 'video/mp4';
}
parseFileNames() {
this.playlist = [];
for (let i = 0; i < this.uids.length; i++) {
const uid = this.uids[i];
const file_obj = this.playlist_id ? this.db_playlist['file_objs'][i] : this.db_file;
const mime_type = file_obj.isAudio ? 'audio/mp3' : 'video/mp4'
let baseLocation = 'stream/';
let fullLocation = this.baseStreamPath + baseLocation + `?test=test&uid=${file_obj['uid']}`;
@@ -233,7 +225,7 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
const mediaObject: IMedia = {
title: file_obj['title'],
src: fullLocation,
type: fileType,
type: mime_type,
label: file_obj['title']
}
this.playlist.push(mediaObject);
@@ -328,8 +320,8 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
}
downloadFile() {
const ext = (this.type === 'audio') ? '.mp3' : '.mp4';
const filename = this.playlist[0].title;
const ext = (this.playlist[0].type === 'audio/mp3') ? '.mp3' : '.mp4';
this.downloading = true;
this.postsService.downloadFileFromServer(this.uid, this.uuid, this.sub_id).subscribe(res => {
this.downloading = false;
@@ -376,7 +368,6 @@ export class PlayerComponent implements OnInit, AfterViewInit, OnDestroy {
const dialogRef = this.dialog.open(ShareMediaDialogComponent, {
data: {
uid: this.playlist_id ? this.playlist_id : this.uid,
type: this.type,
sharing_enabled: this.playlist_id ? this.db_playlist.sharingEnabled : this.db_file.sharingEnabled,
is_playlist: !!this.playlist_id,
uuid: this.postsService.isLoggedIn ? this.postsService.user.uid : null,

View File

@@ -171,20 +171,8 @@ export class PostsService implements CanActivate {
}
// tslint:disable-next-line: max-line-length
makeMP3(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null, youtubeUsername: string = null, youtubePassword: string = null, ui_uid = null) {
return this.http.post(this.path + 'tomp3', {url: url,
maxBitrate: selectedQuality,
customQualityConfiguration: customQualityConfiguration,
customArgs: customArgs,
customOutput: customOutput,
youtubeUsername: youtubeUsername,
youtubePassword: youtubePassword,
ui_uid: ui_uid}, this.httpOptions);
}
// tslint:disable-next-line: max-line-length
makeMP4(url: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null, youtubeUsername: string = null, youtubePassword: string = null, ui_uid = null, cropFileSettings = null) {
return this.http.post(this.path + 'tomp4', {url: url,
downloadFile(url: string, type: string, selectedQuality: string, customQualityConfiguration: string, customArgs: string = null, customOutput: string = null, youtubeUsername: string = null, youtubePassword: string = null, ui_uid = null, cropFileSettings = null) {
return this.http.post(this.path + 'downloadFile', {url: url,
selectedHeight: selectedQuality,
customQualityConfiguration: customQualityConfiguration,
customArgs: customArgs,
@@ -192,6 +180,7 @@ export class PostsService implements CanActivate {
youtubeUsername: youtubeUsername,
youtubePassword: youtubePassword,
ui_uid: ui_uid,
type: type,
cropFileSettings: cropFileSettings}, this.httpOptions);
}
@@ -248,7 +237,7 @@ export class PostsService implements CanActivate {
}
downloadFileFromServer(uid, uuid = null, sub_id = null) {
return this.http.post(this.path + 'downloadFile', {
return this.http.post(this.path + 'downloadFileFromServer', {
uid: uid,
uuid: uuid,
sub_id: sub_id
@@ -257,7 +246,7 @@ export class PostsService implements CanActivate {
}
downloadPlaylistFromServer(playlist_id, uuid = null) {
return this.http.post(this.path + 'downloadFile', {
return this.http.post(this.path + 'downloadFileFromServer', {
uuid: uuid,
playlist_id: playlist_id
},
@@ -265,7 +254,7 @@ export class PostsService implements CanActivate {
}
downloadSubFromServer(sub_id, uuid = null) {
return this.http.post(this.path + 'downloadFile', {
return this.http.post(this.path + 'downloadFileFromServer', {
uuid: uuid,
sub_id: sub_id
},
@@ -307,24 +296,23 @@ export class PostsService implements CanActivate {
return this.http.post(this.path + 'generateNewAPIKey', {}, this.httpOptions);
}
enableSharing(uid, type, is_playlist) {
return this.http.post(this.path + 'enableSharing', {uid: uid, type: type, is_playlist: is_playlist}, this.httpOptions);
enableSharing(uid, is_playlist) {
return this.http.post(this.path + 'enableSharing', {uid: uid, is_playlist: is_playlist}, this.httpOptions);
}
disableSharing(uid, is_playlist) {
return this.http.post(this.path + 'disableSharing', {uid: uid, is_playlist: is_playlist}, this.httpOptions);
}
incrementViewCount(file_uid, sub_id, uuid) {
return this.http.post(this.path + 'incrementViewCount', {file_uid: file_uid, sub_id: sub_id, uuid: uuid}, this.httpOptions);
}
disableSharing(uid, type, is_playlist) {
return this.http.post(this.path + 'disableSharing', {uid: uid, type: type, is_playlist: is_playlist}, this.httpOptions);
}
createPlaylist(playlistName, uids, type, thumbnailURL, duration = null) {
createPlaylist(playlistName, uids, type, thumbnailURL) {
return this.http.post(this.path + 'createPlaylist', {playlistName: playlistName,
uids: uids,
type: type,
thumbnailURL: thumbnailURL,
duration: duration}, this.httpOptions);
thumbnailURL: thumbnailURL}, this.httpOptions);
}
getPlaylist(playlist_id, uuid = null, include_file_metadata = false) {