Skip to content

Commit

Permalink
🎨 Clean up Stream Miniplayer & Responsive.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Alipoodle
Alipoodle committed Apr 18, 2022
1 parent 1c8bb66 commit e6dba34
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 74 deletions.
133 changes: 76 additions & 57 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1272,72 +1272,68 @@ async function createWindow() {
async function windowMiniplayer() {
if (miniplayer) miniplayer.show()
else {
if (settingsProvider.get('settings-miniplayer-stream-config')) {
miniplayer = new BrowserWindow({
title: __.trans('LABEL_MINIPLAYER'),
icon: iconDefault,
modal: false,
frame: false,
center: false,

width: 500,
height: 100,
resizable: false,
skipTaskbar: false,

alwaysOnTop: settingsProvider.get(
'settings-miniplayer-always-top'
),

backgroundColor: '#232323',
minWidth: 100,
minHeight: 100,
autoHideMenuBar: true,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
},
})
} else {
miniplayer = new BrowserWindow({
title: __.trans('LABEL_MINIPLAYER'),
icon: iconDefault,
modal: false,
frame: false,
center: false,

resizable: settingsProvider.get('settings-miniplayer-resizable'),
skipTaskbar: !settingsProvider.get('settings-miniplayer-show-task'),
width: settingsProvider.get('settings-miniplayer-size'),
height: settingsProvider.get('settings-miniplayer-size'),

alwaysOnTop: settingsProvider.get(
'settings-miniplayer-always-top'
),

backgroundColor: '#232323',
minWidth: 100,
minHeight: 100,
autoHideMenuBar: true,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
},
})
var miniplayerConfig = {
title: __.trans('LABEL_MINIPLAYER'),
icon: iconDefault,
modal: false,
frame: false,
center: false,

resizable: settingsProvider.get(
'settings-miniplayer-resizable'
),
skipTaskbar: !settingsProvider.get(
'settings-miniplayer-show-task'
),
alwaysOnTop: settingsProvider.get(
'settings-miniplayer-always-top'
),

backgroundColor: '#232323',
autoHideMenuBar: true,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
},
}

if (!settingsProvider.get('settings-miniplayer-stream-config')) {
if (settingsProvider.get('settings-miniplayer-stream-config')) {
var streamSize = settingsProvider.get(
'settings-miniplayer-stream-size'
)
if (streamSize) {
miniplayerConfig.width = streamSize.x
miniplayerConfig.height = streamSize.y
} else {
miniplayerConfig.width = 500
miniplayerConfig.height = 100
}

miniplayerConfig.minWidth = 300
miniplayerConfig.minHeight = 100

miniplayer = new BrowserWindow(miniplayerConfig)
await miniplayer.loadFile(
path.join(
app.getAppPath(),
'/src/pages/miniplayer/miniplayer.html'
'/src/pages/miniplayer/streamPlayer.html'
)
)
} else {
miniplayerConfig.width = settingsProvider.get(
'settings-miniplayer-size'
)
miniplayerConfig.height = settingsProvider.get(
'settings-miniplayer-size'
)
miniplayerConfig.minWidth = 100
miniplayerConfig.minHeight = 100

miniplayer = new BrowserWindow(miniplayerConfig)
await miniplayer.loadFile(
path.join(
app.getAppPath(),
'/src/pages/miniplayer/streamPlayer.html'
'/src/pages/miniplayer/miniplayer.html'
)
)
}
Expand All @@ -1363,14 +1359,37 @@ async function createWindow() {
})

miniplayer.on('resize', (e) => {
if (!settingsProvider.get('settings-miniplayer-stream-config')) {
if (
!settingsProvider.get('settings-miniplayer-stream-config')
) {
// Square Miniplayer
try {
let size = Math.min(...miniplayer.getSize())
miniplayer.setSize(size, size)
settingsProvider.set('settings-miniplayer-size', size)
e.preventDefault()
} catch (_) {
writeLog({ type: 'warn', data: 'error miniplayer resize' })
writeLog({
type: 'warn',
data: 'error miniplayer resize',
})
}
} else {
// Resized
try {
let size = miniplayer.getSize()
settingsProvider.set(
'settings-miniplayer-stream-size',
{
x: size[0],
y: size[1],
}
)
} catch (_) {
writeLog({
type: 'warn',
data: 'error miniplayer (stream) resize',
})
}
}
})
Expand Down
30 changes: 20 additions & 10 deletions src/pages/miniplayer/streamPlayer.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
:root {
--text-margin-left: 12px;
}

body:hover .player-info,
body:hover .cmd-btn,
body.showinfo .player-info,
Expand All @@ -6,12 +10,16 @@ body.showinfo .cmd-btn {
}

.player-info {
height: 78vmin;
height: 100vh;
margin-top: 10vh;
}

.cmd-bar {
margin: 4px 4px 0;
height: 10vmin;
height: 100vh;
position: absolute;
top: 0;
width: calc(100% - 8px);
}

.cmd-btn {
Expand Down Expand Up @@ -45,7 +53,7 @@ body.showinfo .cmd-btn {
font-weight: bold;
font-size: 22vmin;
margin-top: -13vmin;
margin-left: 22.5vmax;
margin-left: calc(100vh + var(--text-margin-left));
}

.album {
Expand All @@ -55,7 +63,7 @@ body.showinfo .cmd-btn {
white-space: nowrap;
font-size: 18vmin;
margin-top: -6vmin;
margin-left: 22.5vmax;
margin-left: calc(100vh + var(--text-margin-left));
}

.author {
Expand All @@ -65,21 +73,23 @@ body.showinfo .cmd-btn {
white-space: nowrap;
font-size: 16vmin;
margin-top: -5vmin;
margin-left: 22.5vmax;
margin-left: calc(100vh + var(--text-margin-left));
}

.duration {
text-align: left;
font-size: 14vmin;
margin-top: -4vmin;
margin-left: 22.5vmax;
margin-left: calc(100vh + var(--text-margin-left));
}

.progress-bar {
margin-top: 15vmin;
height: 5vmin;
width: 80vmax;
margin-left: 20vmax;
margin-left: calc(100vh);
position: absolute;
bottom: 0;
}

#progress {
Expand All @@ -103,11 +113,11 @@ body.showinfo .cmd-btn {

#background {
background-repeat: no-repeat;
background-size: 100px 100px;
background-size: 100vh 100vh;
background-position: center;
position: absolute;
width: 100vmin;
height: 100vmin;
width: 100vh;
height: 100vh;
z-index: 0;
}

Expand Down
5 changes: 3 additions & 2 deletions src/pages/miniplayer/streamPlayer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,11 @@
<div class="title center">
<span id="title">Title</span>
</div>

<div class="album center">
<span id="album">Album</span>
</div>

<div class="author center">
<span id="author">Author</span>
</div>
Expand All @@ -64,6 +64,7 @@
<span id="duration">0:00</span>
</div>

<!-- These are unused however are left in here for the Mini-player to be happy without needing to re-write it. -->
<div class="controls">
<div class="pointer ctrl-btn" id="btn-dislike">
<i class="material-icons outlined">thumb_down</i>
Expand Down
20 changes: 15 additions & 5 deletions src/pages/settings/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -674,17 +674,27 @@
</tr>
<tr>
<td>
<span i18n="i18n_LABEL_SETTINGS_TAB_MINIPLAYER_STREAM_CONFIG"></span>
<span
i18n="i18n_LABEL_SETTINGS_TAB_MINIPLAYER_STREAM_CONFIG"
></span>
<sub class="tooltip">
<i class="material-icons tiny grey-text">info</i>
<span class="tooltiptext">Changes the layout of the miniplayer, optimizing screen space for easy use with live streaming. The following settings will be ignored: miniplayer size, resizability, and taskbar visibility.</span>
<i
class="material-icons tiny grey-text"
>info</i
>
<span
class="tooltiptext"
i18n="i18n_LABEL_SETTINGS_TAB_MINIPLAYER_STREAM_CONFIG_TOOLTIP"
></span>
</sub>
</td>
<td class="right">
<div class="switch">
<label>
<input type="checkbox"
id="settings-miniplayer-stream-config" />
<input
type="checkbox"
id="settings-miniplayer-stream-config"
/>
<span class="lever"></span>
</label>
</div>
Expand Down

0 comments on commit e6dba34

Please sign in to comment.