Skip to content

D
Desktop Client
Commit 88725d89 authored by SpinShare's avatar SpinShare
Browse files
Options

added userdetail and manual install and fixed download queue

parent 69b916f5
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 593 additions and 253 deletions
package-lock.json
View file @ 88725d89
This diff is collapsed.
package.json
View file @ 88725d89
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
}, },
"main": "background.js", "main": "background.js",
"dependencies": { "dependencies": {
"adm-zip": "^0.4.14",
"axios": "^0.19.2", "axios": "^0.19.2",
"core-js": "^3.6.4", "core-js": "^3.6.4",
"electron-download-manager": "^2.1.2", "electron-download-manager": "^2.1.2",
......
src/App.vue
View file @ 88725d89
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</transition> </transition>
<transition name="slideDownloadOverlay"> <transition name="slideDownloadOverlay">
<DownloadOverlay v-if="showDownloadOverlay" v-bind:downloadQueue="downloadQueue"></DownloadOverlay> <DownloadOverlay v-if="showDownloadOverlay" v-bind:downloadQueue="downloadQueue" v-bind:finishedQueue="finishedQueue" v-bind:failedQueue="failedQueue"></DownloadOverlay>
</transition> </transition>
</div> </div>
</template> </template>
...@@ -24,7 +24,6 @@ ...@@ -24,7 +24,6 @@
import fs from 'fs'; import fs from 'fs';
import glob from 'glob'; import glob from 'glob';
import path from 'path'; import path from 'path';
import ncp from 'ncp';
import UserSettings from '@/modules/module.usersettings.js'; import UserSettings from '@/modules/module.usersettings.js';
import SSAPI from '@/modules/module.api.js'; import SSAPI from '@/modules/module.api.js';
...@@ -46,6 +45,8 @@ ...@@ -46,6 +45,8 @@
data: function() { data: function() {
return { return {
downloadQueue: [], downloadQueue: [],
finishedQueue: [],
failedQueue: [],
downloadQueueProcessing: false, downloadQueueProcessing: false,
showUpdateOverlay: false, showUpdateOverlay: false,
showDownloadOverlay: false, showDownloadOverlay: false,
...@@ -53,6 +54,10 @@ ...@@ -53,6 +54,10 @@
} }
}, },
mounted: function() { mounted: function() {
document.addEventListener('auxclick', function(e) {
e.preventDefault();
});
this.$root.$on('download', (url) => { this.$root.$on('download', (url) => {
this.addToQueue(url); this.addToQueue(url);
}); });
...@@ -88,28 +93,62 @@ ...@@ -88,28 +93,62 @@
let srxdControl = new SRXD(); let srxdControl = new SRXD();
let userSettings = new UserSettings(); let userSettings = new UserSettings();
srxdControl.extractBackup(downloadItem.downloadPath, path.basename(downloadItem.downloadPath)).then((extractResult) => { let queueItem = this.$data.downloadQueue.findIndex(function(i) {
if(extractResult) { return i.id === downloadItem.id;
this.installBackup(extractResult, userSettings.get('gameDirectory')).then((result) => { });
console.info("████ #" + queueItem + " - '" + this.$data.downloadQueue[queueItem].title + "' ████");
if(downloadItem.status == 1) {
// Failed, add to failed Array
this.$data.failedQueue.push(queueItem);
this.$data.downloadQueue.splice(queueItem, 1);
} else {
// Finished, unpacking
srxdControl.extractBackup(downloadItem.downloadPath, path.basename(downloadItem.downloadPath)).then((extractResult) => {
if(extractResult !== false) {
srxdControl.installBackup(extractResult, userSettings.get('gameDirectory')).then((result) => {
console.log("[COPY] Backup installed!");
this.$data.downloadQueueProcessing = false;
console.log("[QUEUE] Remaining Items: " + this.$data.downloadQueue.length);
this.$data.finishedQueue.push(queueItem);
this.$data.downloadQueue.splice(queueItem, 1);
if(this.$data.downloadQueue.length > 0) {
this.processQueue();
}
}).catch(error => {
console.error(error);
});
} else {
console.error("[COPY] Backup could not be installed!");
this.$data.downloadQueueProcessing = false; this.$data.downloadQueueProcessing = false;
console.log("Queue Remaining: " + this.$data.downloadQueue.length); console.log("[QUEUE] Remaining Items: " + this.$data.downloadQueue.length);
this.$data.downloadQueue.splice(this.$data.downloadQueue.findIndex(function(i) { this.$data.failedQueue.push(queueItem);
return i.id === downloadItem.id; this.$data.downloadQueue.splice(queueItem, 1);
}), 1);
if(this.$data.downloadQueue.length > 0) { if(this.$data.downloadQueue.length > 0) {
this.processQueue(); this.processQueue();
} }
}).catch(error => { }
console.error(error); }).catch(error => {
}); console.error(error);
} else {
console.error("Backup could not be loaded!"); this.$data.downloadQueueProcessing = false;
} console.log("[QUEUE] Remaining Items: " + this.$data.downloadQueue.length);
}).catch(error => {
console.error(error); this.$data.failedQueue.push(queueItem);
}); this.$data.downloadQueue.splice(queueItem, 1);
if(this.$data.downloadQueue.length > 0) {
this.processQueue();
}
});
}
}); });
}, },
methods: { methods: {
...@@ -133,19 +172,6 @@ ...@@ -133,19 +172,6 @@
closeOverlays: function() { closeOverlays: function() {
this.$data.showUpdateOverlay = false; this.$data.showUpdateOverlay = false;
this.$data.showDownloadOverlay = false; this.$data.showDownloadOverlay = false;
},
installBackup: async function(backupLocation, gameDirLocation) {
await ncp(backupLocation, gameDirLocation, function(error) {
if(error) {
console.error(error);
console.error("Couldn't copy backup!");
return true;
}
console.log("Copied Backup!");
});
return true;
} }
} }
} }
......
src/background.js
View file @ 88725d89
...@@ -2,6 +2,10 @@ const { app, protocol, BrowserWindow, ipcMain } = require('electron'); ...@@ -2,6 +2,10 @@ const { app, protocol, BrowserWindow, ipcMain } = require('electron');
const DownloadManager = require("electron-download-manager"); const DownloadManager = require("electron-download-manager");
const { createProtocol } = require('vue-cli-plugin-electron-builder/lib'); const { createProtocol } = require('vue-cli-plugin-electron-builder/lib');
const isDevelopment = process.env.NODE_ENV !== 'production'; const isDevelopment = process.env.NODE_ENV !== 'production';
const fs = require('fs');
const http = require('http');
const path = require('path');
const uniqid = require('uniqid');
let win; let win;
let deeplinkingUrl; let deeplinkingUrl;
...@@ -73,19 +77,43 @@ if (isDevelopment) { ...@@ -73,19 +77,43 @@ if (isDevelopment) {
} }
ipcMain.on("download", (event, ipcData) => { ipcMain.on("download", (event, ipcData) => {
console.log("Download: " + ipcData.queueItem.title); console.log("Starting download of > " + ipcData.queueItem.title);
DownloadManager.download({url: ipcData.queueItem.downloadPath}, (error, dlInfo) => { download(ipcData.queueItem.downloadPath, uniqid(), (error, dlInfo) => {
if (error) { if (error) {
console.log(error); console.log(error);
let downloadItem = {
id: ipcData.queueItem.id,
status: 1,
downloadPath: null
}
win.webContents.send("download-complete", downloadItem);
return; return;
} }
let downloadItem = { let downloadItem = {
id: ipcData.queueItem.id, id: ipcData.queueItem.id,
downloadPath: dlInfo.filePath status: 2,
downloadPath: dlInfo
} }
win.webContents.send("download-complete", downloadItem); win.webContents.send("download-complete", downloadItem);
}); });
}); });
\ No newline at end of file
function download(url, fileName, cb) {
let dest = path.join(app.getPath('temp'), fileName + ".zip");
let file = fs.createWriteStream(dest);
let request = http.get(url, function(response) {
response.pipe(file);
file.on('finish', function() {
file.close(cb(null, dest)); // async call of the callback
});
}).on('error', function(err) { // Handle errors
fs.unlink(dest); // Delete the file async. (But we don't check the result)
if (cb) cb(err.message, dest);
});
};
\ No newline at end of file
src/components/Song/SongInstallItem.vue
View file @ 88725d89
...@@ -11,9 +11,6 @@ ...@@ -11,9 +11,6 @@
</template> </template>
<script> <script>
import { remote } from 'electron';
const { clipboard } = remote;
export default { export default {
name: 'SongInstallItem', name: 'SongInstallItem',
data: function() { data: function() {
...@@ -23,7 +20,8 @@ ...@@ -23,7 +20,8 @@
mounted: function() { mounted: function() {
}, },
methods: { methods: {
install: function(e) { install: function() {
this.$parent.$parent.$emit('install');
} }
} }
} }
......
src/components/Song/SongItem.vue
View file @ 88725d89
<template> <template>
<div class="song-item" v-on:contextmenu="showContextMenu($event)"> <div class="song-item" v-on:auxclick="shortDownload($event)" v-on:contextmenu="showContextMenu($event)">
<router-link :to="{ name: 'SongDetail', params: { id: id } }"> <router-link :to="{ name: 'SongDetail', params: { id: id } }">
<div class="song-cover" :style="'background-image: url(' + cover + '), url(' + require('@/assets/img/defaultAlbumArt.jpg') + ');'"> <div class="song-cover" :style="'background-image: url(' + cover + '), url(' + require('@/assets/img/defaultAlbumArt.jpg') + ');'">
<div class="song-charter-info"> <div class="song-charter-info">
<div class="song-charter"><i class="mdi mdi-account-circle"></i><span>{{ charter }}</span></div> <div class="song-charter"><i class="mdi mdi-account-circle"></i><span>{{ charter }}</span></div>
</div>
</div> </div>
<div class="song-metadata"> </div>
<div class="song-title">{{ title }}</div> <div class="song-metadata">
<div class="song-artist">{{ artist }}</div> <div class="song-title">{{ title }}</div>
<div class="song-difficulties"> <div class="song-artist">{{ artist }}</div>
<img src="@/assets/img/difficultyEasy.svg" :class="hasEasyDifficulty ? 'active' : ''" /> <div class="song-difficulties">
<img src="@/assets/img/difficultyNormal.svg" :class="hasNormalDifficulty ? 'active' : ''" /> <img src="@/assets/img/difficultyEasy.svg" :class="hasEasyDifficulty ? 'active' : ''" />
<img src="@/assets/img/difficultyHard.svg" :class="hasHardDifficulty ? 'active' : ''" /> <img src="@/assets/img/difficultyNormal.svg" :class="hasNormalDifficulty ? 'active' : ''" />
<img src="@/assets/img/difficultyExtreme.svg" :class="hasExtremeDifficulty ? 'active' : ''" /> <img src="@/assets/img/difficultyHard.svg" :class="hasHardDifficulty ? 'active' : ''" />
<img src="@/assets/img/difficultyXD.svg" :class="hasXDDifficulty ? 'active' : ''" /> <img src="@/assets/img/difficultyExtreme.svg" :class="hasExtremeDifficulty ? 'active' : ''" />
</div> <img src="@/assets/img/difficultyXD.svg" :class="hasXDDifficulty ? 'active' : ''" />
</div> </div>
</div>
</router-link> </router-link>
</div> </div>
</template> </template>
...@@ -61,7 +61,16 @@ ...@@ -61,7 +61,16 @@
{ icon: "download", title: "Download", method: () => { this.download(); } } { icon: "download", title: "Download", method: () => { this.download(); } }
]}); ]});
}, },
download: function() { shortDownload: function(e) {
e.preventDefault();
if(e.which == 2) {
this.download(e);
}
},
download: function(e) {
e.preventDefault();
this.$root.$emit('download', {id: this.$props.id, cover: this.$props.cover, title: this.$props.title, artist: this.$props.artist, downloadPath: this.$props.zip}); this.$root.$emit('download', {id: this.$props.id, cover: this.$props.cover, title: this.$props.title, artist: this.$props.artist, downloadPath: this.$props.zip});
} }
} }
......
src/components/Song/SongRow.vue
View file @ 88725d89
...@@ -9,6 +9,8 @@ ...@@ -9,6 +9,8 @@
<div class="song-list"> <div class="song-list">
<slot name="song-list"></slot> <slot name="song-list"></slot>
</div> </div>
<div class="noresults">
</div>
</div> </div>
</template> </template>
......
src/components/Startup/Stream.vue 0 → 100644
View file @ 88725d89
<template>
<div class="stream" v-if="isLive">
<div class="header">
<div class="viewers"><i class="mdi mdi-eye-outline"></i> {{ viewers }}</div>
<div class="title">{{ title }}</div>
</div>
<div class="video-container">
<iframe src="https://player.twitch.tv/?channel=spinshare&enableExtensions=true&muted=true&player=popout&volume=1"></iframe>
</div>
</div>
</template>
<script>
import { remote } from 'electron';
const { shell } = remote;
export default {
name: 'Stream',
props: [
'title',
'viewers',
'isLive'
]
}
</script>
<style scoped lang="less">
.stream {
margin-top: 50px;
& .header {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 15px;
margin-bottom: 15px;
& .viewers {
background: #ff294d;
color: #fff;
padding: 5px;
font-size: 12px;
font-weight: bold;
border-radius: 20px;
}
& .title {
letter-spacing: 0.25em;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
align-self: center;
}
}
& .video-container {
position: relative;
width: 100%;
padding-top: 50%;
& iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
border: 0px;
}
}
}
</style>
src/components/User/UserItem.vue
View file @ 88725d89
<template> <template>
<div class="user-item"> <router-link :to="{ name: 'UserDetail', params: { id: id } }" class="user-item">
<div class="user-avatar" :style="'background-image: url(' + avatar + '), url(' + require('@/assets/img/defaultAvatar.jpg') + ');'"></div> <div class="user-avatar" :style="'background-image: url(' + avatar + '), url(' + require('@/assets/img/defaultAvatar.jpg') + ');'"></div>
<div class="user-metadata"> <div class="user-metadata">
<div class="user-username">{{ username }}</div> <div class="user-username">{{ username }}</div>
</div> </div>
</div> </router-link>
</template> </template>
<script> <script>
...@@ -51,6 +51,8 @@ ...@@ -51,6 +51,8 @@
display: grid; display: grid;
padding: 10px; padding: 10px;
grid-gap: 15px; grid-gap: 15px;
color: #fff;
text-decoration: none;
grid-template-columns: 32px 1fr; grid-template-columns: 32px 1fr;
& .user-avatar { & .user-avatar {
......
src/modules/module.api.js
View file @ 88725d89
...@@ -26,6 +26,22 @@ class SSAPI { ...@@ -26,6 +26,22 @@ class SSAPI {
}); });
} }
async getStreamStatus() {
let apiPath = this.apiBase + "streamStatus";
let supportedVersion = this.supportedVersion;
return axios.get(apiPath)
.then(function(response) {
if(response.data.version !== supportedVersion) {
throw new Error("Client is outdated!");
}
return response.data.data;
}).catch(function(error) {
throw new Error(error);
});
}
async getLatestVersion() { async getLatestVersion() {
let apiPath = this.apiBase + "latestVersion/" + process.platform; let apiPath = this.apiBase + "latestVersion/" + process.platform;
let supportedVersion = this.supportedVersion; let supportedVersion = this.supportedVersion;
......
src/modules/module.srxd.js
View file @ 88725d89
...@@ -3,6 +3,8 @@ const fs = require('fs'); ...@@ -3,6 +3,8 @@ const fs = require('fs');
const path = require('path'); const path = require('path');
const rimraf = require('rimraf'); const rimraf = require('rimraf');
const unzipper = require('unzipper'); const unzipper = require('unzipper');
const ncp = require('ncp');
const admzip = require('adm-zip');
const uniqid = require('uniqid'); const uniqid = require('uniqid');
const { app } = require('electron').remote; const { app } = require('electron').remote;
const UserSettings = require('./module.usersettings'); const UserSettings = require('./module.usersettings');
...@@ -20,51 +22,42 @@ class SRXD { ...@@ -20,51 +22,42 @@ class SRXD {
// Extract a local backup folder // Extract a local backup folder
async extractBackup(filePath, fileName) { async extractBackup(filePath, fileName) {
if(this.backupLocation != "") { if(this.backupLocation != "") {
console.log("Unload previous Backup."); console.log("{EXTRACT] Unloading previous Backup.");
this.unloadBackup(); this.unloadBackup();
} }
console.log("Extracting Backup."); console.log("[EXTRACT] Starting Extraction.");
this.backupLocation = path.join(app.getPath('temp'), "extract-" + uniqid()); this.backupLocation = path.join(app.getPath('temp'), "extract-" + uniqid());
console.info(this.backupLocation); console.info("[EXTRACT] Backup Location: " + this.backupLocation);
// Unzip to temp/CustomSpeens/Song // Unzip to temp/CustomSpeens/Song
await fs.createReadStream(filePath).pipe(unzipper.Extract({ path: this.backupLocation })).promise(); try {
console.log("[EXTRACT] Unzipping.");
// Find SRTB & OGG files console.log("[EXTRACT] " + filePath);
let srtbFilesInBackupLocation = this.getFilesFromPath(this.backupLocation, ".srtb"); console.log("[EXTRACT] " + this.backupLocation);
let zip = admzip(filePath);
if(srtbFilesInBackupLocation.length < 1) { await zip.extractAllTo(this.backupLocation, true);
console.error("No SRTB file found in backup."); } catch(e) {
console.log("[EXTRACT] Couldn't unzip backup");
console.error(e);
return false; return false;
} }
// Load SRTB file
this.srtbLocation = path.join(this.backupLocation, srtbFilesInBackupLocation[0]);
let srtbFile = JSON.parse( fs.readFileSync(this.srtbLocation) );
let songTrackInfo = "";
srtbFile.largeStringValuesContainer.values.forEach(function(value) { return this.backupLocation;
if(value.key == "SO_TrackInfo_TrackInfo") { }
songTrackInfo = value.val;
async installBackup(backupLocation, gameDirLocation) {
await ncp(backupLocation, gameDirLocation, function(error) {
if(error) {
console.error(error);
console.error("[COPY] Couldn't copy backup!");
return false;
} }
console.info("[COPY] Done!");
return true;
}); });
this.songTrackInfo = songTrackInfo;
// Load OGG file
let OggFilePath = fs.existsSync(path.join(this.backupLocation, "AudioClips"), ".ogg")
if (fs.existsSync(OggFilePath)) {
let oggFilesInBackupLocation = this.getFilesFromPath(OggFilePath);
this.songLocation = path.join(this.backupLocation, oggFilesInBackupLocation[0]);
// TODO: Backup Validation
return this.backupLocation;
}
else{
return this.backupLocation;
}
} }
async unloadBackup() { async unloadBackup() {
...@@ -123,7 +116,11 @@ class SRXD { ...@@ -123,7 +116,11 @@ class SRXD {
if(fileExtension.length > 0) { if(fileExtension.length > 0) {
let finalPath = path.join(this.userSettings.get('gameDirectory'), "AlbumArt", fileExtension[0]); let finalPath = path.join(this.userSettings.get('gameDirectory'), "AlbumArt", fileExtension[0]);
let base64Data = "data:image/jpg;base64," + fs.readFileSync(finalPath, { encoding: 'base64' }); try {
let base64Data = "data:image/jpg;base64," + fs.readFileSync(finalPath, { encoding: 'base64' });
} catch(e) {
return "";
}
return base64Data; return base64Data;
} else { } else {
......
src/router/index.js
View file @ 88725d89
...@@ -10,6 +10,7 @@ import ViewStartupPopularSongs from '../views/StartupPopularSongs.vue'; ...@@ -10,6 +10,7 @@ import ViewStartupPopularSongs from '../views/StartupPopularSongs.vue';
import ViewSearch from '../views/Search.vue'; import ViewSearch from '../views/Search.vue';
import ViewLibrary from '../views/Library.vue'; import ViewLibrary from '../views/Library.vue';
import ViewSongDetail from '../views/SongDetail.vue'; import ViewSongDetail from '../views/SongDetail.vue';
import ViewUserDetail from '../views/UserDetail.vue';
import ViewSettings from '../views/Settings.vue'; import ViewSettings from '../views/Settings.vue';
Vue.use(VueRouter); Vue.use(VueRouter);
...@@ -53,6 +54,10 @@ const routes = [{ ...@@ -53,6 +54,10 @@ const routes = [{
path: '/song/:id', path: '/song/:id',
name: 'SongDetail', name: 'SongDetail',
component: ViewSongDetail component: ViewSongDetail
},, {
path: '/user/:id',
name: 'UserDetail',
component: ViewUserDetail
}, { }, {
path: '/settings', path: '/settings',
name: 'Settings', name: 'Settings',
......
src/views/Library.vue
View file @ 88725d89
...@@ -20,6 +20,9 @@ ...@@ -20,6 +20,9 @@
</template> </template>
<script> <script>
import { remote } from 'electron';
const { dialog } = remote;
import fs from 'fs'; import fs from 'fs';
import glob from 'glob'; import glob from 'glob';
import path from 'path'; import path from 'path';
...@@ -66,6 +69,9 @@ ...@@ -66,6 +69,9 @@
this.$data.showDeleteOverlay = false; this.$data.showDeleteOverlay = false;
this.$data.deleteFiles = ""; this.$data.deleteFiles = "";
}); });
this.$on('install', () => {
this.install();
});
}, },
methods: { methods: {
refreshLibrary: function() { refreshLibrary: function() {
...@@ -149,6 +155,35 @@ ...@@ -149,6 +155,35 @@
}); });
return connectedFiles; return connectedFiles;
},
install: function(e) {
dialog.showOpenDialog({ title: "Open Backup", properties: ['openFile', 'multiSelections'], filters: [{"name": "Backup Archive", "extensions": ["zip"]}] }).then(result => {
if(!result.canceled) {
result.filePaths.forEach((rawFilePath) => {
let filePath = glob.sync(rawFilePath);
if(filePath.length > 0) {
let srxdControl = new SRXD();
let userSettings = new UserSettings();
srxdControl.extractBackup(filePath[0], path.basename(filePath[0])).then((extractResult) => {
if(extractResult !== false) {
srxdControl.installBackup(extractResult, userSettings.get('gameDirectory')).then((result) => {
console.log("[COPY] Backup installed!");
setTimeout(() => {
this.refreshLibrary();
}, 250);
}).catch(error => {
console.error(error);
});
} else {
console.error("[COPY] Backup could not be installed!");
}
}).catch(error => {
console.error(error);
});
}
});
}
});
} }
} }
} }
......
src/views/StartupFrontpage.vue
View file @ 88725d89
<template> <template>
<div class="staff-promos"> <div class="frontpage">
<StaffPromoPlaceholder <div class="staff-promos">
v-if="isPromoLoading" <StaffPromoPlaceholder
v-for="n in 2" v-if="isPromoLoading"
v-bind:key="n" /> v-for="n in 2"
<StaffPromo v-bind:key="n" />
v-if="!isPromoLoading" <StaffPromo
v-for="staffPromo in staffPromos" v-if="!isPromoLoading"
v-bind:key="staffPromo.id" v-for="staffPromo in staffPromos"
v-bind="staffPromo" /> v-bind:key="staffPromo.id"
v-bind="staffPromo" />
</div>
<Stream v-bind="streamStatus" />
</div> </div>
</template> </template>
...@@ -16,13 +20,15 @@ ...@@ -16,13 +20,15 @@
import SSAPI from '@/modules/module.api.js'; import SSAPI from '@/modules/module.api.js';
import StaffPromo from '@/components/Startup/StaffPromo.vue'; import StaffPromo from '@/components/Startup/StaffPromo.vue';
import StaffPromoPlaceholder from '@/components/Startup/StaffPromoPlaceholder.vue'; import StaffPromoPlaceholder from '@/components/Startup/StaffPromoPlaceholder.vue';
import Stream from '@/components/Startup/Stream.vue';
export default { export default {
name: 'StartupFrontpage', name: 'StartupFrontpage',
data: function() { data: function() {
return { return {
isPromoLoading: true, isPromoLoading: true,
staffPromos: [] staffPromos: [],
streamStatus: []
} }
}, },
mounted: function() { mounted: function() {
...@@ -32,10 +38,15 @@ ...@@ -32,10 +38,15 @@
this.$data.isPromoLoading = false; this.$data.isPromoLoading = false;
this.$data.staffPromos = data; this.$data.staffPromos = data;
}); });
ssapi.getStreamStatus().then((data) => {
this.$data.streamStatus = data;
});
}, },
components: { components: {
StaffPromo, StaffPromo,
StaffPromoPlaceholder StaffPromoPlaceholder,
Stream
}, },
methods: { methods: {
} }
......
src/views/UserDetail.vue 0 → 100644
View file @ 88725d89
<template>
<section class="section-user-detail">
<div class="user-detail-background" :style="'background-image: url(' + avatar + '), url(' + require('@/assets/img/defaultAvatar.jpg') + ');'" v-if="apiFinished">
<div class="user-detail-dim">
<div class="user-detail">
<div class="user-avatar" :style="'background-image: url(' + avatar + '), url(' + require('@/assets/img/defaultAvatar.jpg') + ');'"></div>
<div class="user-meta-data">
<div class="user-name">{{ username }}</div>
<div class="user-badge user-badge-verified">
<i class="mdi mdi-check-decagram"></i>
</div>
<div class="user-badge user-badge-patreon">
<i class="mdi mdi-patreon"></i>
</div>
</div>
</div>
</div>
</div>
<div class="user-detail-actions" v-if="apiFinished">
<button class="button-report button" v-on:click="OpenReport">{{ $t('userdetail.actions.reportButton') }}</button>
</div>
<SongRow
class="song-row-user"
:title="$t('userdetail.uploaded.header')"
v-if="apiFinished && songs.length > 0">
<template v-slot:song-list>
<SongItem
v-for="song in songs"
v-bind:key="song.id"
v-bind="song" />
</template>
</SongRow>
<Loading v-if="!apiFinished" />
</section>
</template>
<script>
import { remote } from 'electron';
const { clipboard, shell } = remote;
import SSAPI from '@/modules/module.api.js';
import SongRow from '@/components/Song/SongRow.vue';
import SongItem from '@/components/Song/SongItem.vue';
import Loading from '@/components/Loading.vue';
export default {
name: 'UserDetail',
components: {
SongRow,
SongItem,
Loading
},
data: function() {
return {
apiFinished: false,
id: 0,
username: "",
isVerified: false,
isPatreon: false,
avatar: "",
songs: []
}
},
mounted: function() {
let ssapi = new SSAPI(process.env.NODE_ENV === 'development');
ssapi.getUserDetail(this.$route.params.id).then((data) => {
this.$data.id = data.data.id;
this.$data.username = data.data.username;
this.$data.isVerified = data.data.isVerified;
this.$data.isPatreon = data.data.isPatreon;
this.$data.avatar = data.data.avatar;
this.$data.songs = data.data.songs;
this.$data.apiFinished = true;
});
},
methods: {
OpenReport: function() {
shell.openExternal("https://spinsha.re/report/user/" + this.$data.id);
}
}
}
</script>
<style scoped lang="less">
.section-user-detail {
& .user-detail-background {
background-size: cover;
background-position: center;
& .user-detail-dim {
backdrop-filter: blur(10px);
background: linear-gradient(180deg, rgba(0,0,0,0.4), #212629);
& .user-detail {
padding: 50px;
display: grid;
grid-template-columns: 200px 1fr;
grid-gap: 25px;
& .user-avatar {
width: 200px;
height: 200px;
align-self: center;
background: #eee;
border-radius: 50%;
background-size: cover;
background-position: center;
}
& .user-meta-data {
display: flex;
height: 48px;
align-items: center;
& .user-name {
font-weight: bold;
font-size: 48px;
}
& .user-badge {
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
margin-left: 20px;
}
}
}
}
}
& .user-detail-actions {
padding: 50px;
padding-top: 0px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 25px;
& .button {
padding: 15px 0px;
font-size: 16px;
transition: 0.2s ease-in-out all, 0.1s ease-in-out transform;
&.button-primary {
background: #fff;
color: #222;
&:hover {
background: #fff;
color: #222;
}
}
&:hover {
background: rgba(255,255,255,0.2);
color: #fff;
opacity: 0.6;
transform: translateY(-4px);
}
&:active {
transform: translateY(-2px);
}
}
}
& .song-row-user {
display: grid;
padding: 50px;
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment