Skip to content

Commit eb68ace

Browse files
jay-bman725jay-bman725
committed
Added better UI optimizations for other platforms
1 parent 94d417e commit eb68ace

9 files changed

Lines changed: 192 additions & 43 deletions

File tree

‎changelog.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,32 @@
11
# Changelog
22
**All dates are in YYYY/MM/DD (Year-Month-Day)**
33

4+
## [1.5.1] - 2025-01-02
5+
6+
### Added
7+
- **Platform-Specific UI Optimization**: Enhanced interface for Windows and Linux users
8+
- Implemented platform detection system to identify user's operating system
9+
- Added conditional title bar visibility - title bar now hidden on Windows and Linux for cleaner interface
10+
- Maintained macOS title bar visibility for platform consistency
11+
- Dynamic container padding adjustment based on platform (52px for macOS, 20px for Windows/Linux)
12+
13+
- **Modern Scrollbar System**: Replaced outdated Windows 7-era scrollbars with modern custom styling
14+
- Implemented comprehensive CSS custom scrollbar system using webkit-scrollbar properties
15+
- Added gradient scrollbar thumbs with smooth hover and active state transitions
16+
- Cross-browser compatibility with Firefox scrollbar-width and scrollbar-color support
17+
- Responsive scrollbar sizing (12px main, 8px thin variants)
18+
- Enhanced smooth scrolling behavior throughout the application
19+
20+
### Technical
21+
- **Platform Detection**: Added IPC communication between main and renderer processes
22+
- New 'get-platform' IPC handler in main.js returning process.platform
23+
- Extended preload.js electronAPI with getPlatform() method
24+
- Implemented setupPlatformDetection() and handleTitleBarVisibility() in app.js
25+
- **CSS Architecture**: Enhanced styling system with new CSS variables for scrollbars
26+
- Light and dark theme scrollbar color variables
27+
- Targeted scrollbar application to specific elements (srt-preview, modal-content, etc.)
28+
- Improved theme preview CSS variable system for better color management
29+
430
## [1.5.0] - 2025-06-07
531

632
### Added

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "autocaption",
3-
"version": "1.5.0",
3+
"version": "1.5.1",
44
"description": "Automatic caption generation app using OpenAI Whisper",
55
"main": "src/main.js",
66
"scripts": {

‎src/app.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ class AutoCaptionApp {
1515
this.initializeEventListeners();
1616
this.setupApiKeyLoadListener();
1717
this.setupThemeSystem();
18+
this.setupPlatformDetection();
1819
this.loadSettings();
1920
this.checkOnboardingStatus();
2021
}
@@ -77,6 +78,36 @@ class AutoCaptionApp {
7778
this.detectAndApplyInitialTheme();
7879
}
7980

81+
async setupPlatformDetection() {
82+
try {
83+
const result = await window.electronAPI.getPlatform();
84+
if (result.success) {
85+
console.log('[DEBUG] Platform detected:', result.platform);
86+
this.handleTitleBarVisibility(result.platform);
87+
}
88+
} catch (error) {
89+
console.error('Error detecting platform:', error);
90+
}
91+
}
92+
93+
handleTitleBarVisibility(platform) {
94+
const titleBar = document.querySelector('.title-bar');
95+
const container = document.querySelector('.container');
96+
97+
// Show title bar only on macOS (darwin), hide on Windows (win32) and Linux
98+
if (platform === 'darwin') {
99+
console.log('[DEBUG] macOS detected - showing title bar');
100+
titleBar.style.display = 'flex';
101+
// Keep existing padding for macOS (title bar visible)
102+
container.style.paddingTop = '52px';
103+
} else {
104+
console.log('[DEBUG] Non-macOS platform detected - hiding title bar');
105+
titleBar.style.display = 'none';
106+
// Reduce padding since title bar is hidden
107+
container.style.paddingTop = '20px';
108+
}
109+
}
110+
80111
async detectAndApplyInitialTheme() {
81112
try {
82113
const result = await window.electronAPI.getSystemTheme();

‎src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -291,7 +291,7 @@ <h3>🔄 Updates</h3>
291291
<div class="setting-group">
292292
<h3>ℹ️ About</h3>
293293
<div class="setting-item">
294-
<p><strong>Version:</strong> 1.5.0</p>
294+
<p><strong>Version:</strong> 1.5.1</p>
295295
<p><strong>Made with ❤️ by Jay</strong></p>
296296
<p>Using OpenAI Whisper for AI-powered transcription</p>
297297
</div>

‎src/main.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ let openai;
107107
let updateCheckInterval;
108108

109109
// Current app version
110-
const CURRENT_VERSION = '1.5.0';
110+
const CURRENT_VERSION = '1.5.1';
111111
const UPDATE_CHECK_URL = 'https://raw.githubusercontent.com/jay-bman725/AutoCaption/refs/heads/main/version';
112112
const CHANGELOG_URL = 'https://raw.githubusercontent.com/jay-bman725/AutoCaption/refs/heads/main/changelog.md';
113113

@@ -816,6 +816,19 @@ nativeTheme.on('updated', () => {
816816
}
817817
});
818818

819+
// Platform detection
820+
ipcMain.handle('get-platform', async () => {
821+
try {
822+
return {
823+
success: true,
824+
platform: process.platform
825+
};
826+
} catch (error) {
827+
logger.error('Error getting platform:', error);
828+
return { success: false, error: error.message };
829+
}
830+
});
831+
819832
// Onboarding IPC handlers
820833
ipcMain.handle('get-onboarding-status', async () => {
821834
try {

‎src/preload.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ contextBridge.exposeInMainWorld('electronAPI', {
1717
// Theme management
1818
getSystemTheme: () => ipcRenderer.invoke('get-system-theme'),
1919

20+
// Platform detection
21+
getPlatform: () => ipcRenderer.invoke('get-platform'),
22+
2023
// Update checking
2124
checkForUpdates: () => ipcRenderer.invoke('check-for-updates'),
2225

‎src/styles.css‎

Lines changed: 113 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -83,18 +83,22 @@
8383
--changelog-h2-bg: linear-gradient(135deg, #f0f4ff 0%, #ede9fe 100%);
8484
--btn-danger-color: #ef4444;
8585
--btn-danger-bg: transparent;
86-
--btn-danger-hover-bg: #ef4444;
87-
--theme-preview-light-bg: #ffffff;
86+
--btn-danger-hover-bg: #ef4444; --theme-preview-light-bg: #f8fafc;
8887
--theme-preview-dark-bg: #1a202c;
89-
--theme-preview-sidebar-light: #f7fafc;
88+
--theme-preview-sidebar-light: #e2e8f0;
9089
--theme-preview-sidebar-dark: #2d3748;
91-
--theme-preview-line-light: #e2e8f0;
92-
--theme-preview-line-dark: #4a5568;
93-
--gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
90+
--theme-preview-line-light: #cbd5e1;
91+
--theme-preview-line-dark: #4a5568;--gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
9492
--gradient-primary-hover: linear-gradient(135deg, #5855eb, #7c3aed);
9593
--gradient-secondary: linear-gradient(135deg, var(--button-primary-bg) 0%, #8b5cf6 100%);
9694
--gradient-secondary-hover: linear-gradient(135deg, var(--button-primary-hover) 0%, #7c3aed 100%);
9795
--divider-gradient: linear-gradient(90deg, transparent, #e5e7eb, transparent);
96+
97+
/* Modern Scrollbar Colors */
98+
--scrollbar-track-bg: rgba(241, 245, 249, 0.8);
99+
--scrollbar-thumb-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
100+
--scrollbar-thumb-hover-bg: linear-gradient(135deg, #5855eb, #7c3aed);
101+
--scrollbar-thumb-active-bg: linear-gradient(135deg, #4f46e5, #6d28d9);
98102
}
99103

100104
[data-theme="dark"] {
@@ -181,18 +185,22 @@
181185
--changelog-h2-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.15) 100%);
182186
--btn-danger-color: #f87171;
183187
--btn-danger-bg: transparent;
184-
--btn-danger-hover-bg: #ef4444;
185-
--theme-preview-light-bg: #f1f5f9;
188+
--btn-danger-hover-bg: #ef4444; --theme-preview-light-bg: #f1f5f9;
186189
--theme-preview-dark-bg: #0f172a;
187-
--theme-preview-sidebar-light: #e2e8f0;
190+
--theme-preview-sidebar-light: #cbd5e1;
188191
--theme-preview-sidebar-dark: #1e293b;
189-
--theme-preview-line-light: #cbd5e1;
190-
--theme-preview-line-dark: #64748b;
191-
--gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
192+
--theme-preview-line-light: #94a3b8;
193+
--theme-preview-line-dark: #64748b;--gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);
192194
--gradient-primary-hover: linear-gradient(135deg, #5855eb, #7c3aed);
193195
--gradient-secondary: linear-gradient(135deg, var(--button-primary-bg) 0%, #8b5cf6 100%);
194196
--gradient-secondary-hover: linear-gradient(135deg, var(--button-primary-hover) 0%, #7c3aed 100%);
195197
--divider-gradient: linear-gradient(90deg, transparent, #475569, transparent);
198+
199+
/* Modern Scrollbar Colors - Dark Theme */
200+
--scrollbar-track-bg: rgba(30, 41, 59, 0.6);
201+
--scrollbar-thumb-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
202+
--scrollbar-thumb-hover-bg: linear-gradient(135deg, #5855eb, #7c3aed);
203+
--scrollbar-thumb-active-bg: linear-gradient(135deg, #4f46e5, #6d28d9);
196204
}
197205

198206
[data-theme="dark"] .settings-section {
@@ -206,6 +214,10 @@
206214
box-sizing: border-box;
207215
}
208216

217+
html {
218+
scroll-behavior: smooth;
219+
}
220+
209221
body {
210222
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
211223
background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-middle) 50%, var(--bg-gradient-end) 100%);
@@ -697,18 +709,94 @@ input[type="password"]::placeholder {
697709
height: 24px;
698710
}
699711

712+
/* Modern Custom Scrollbars */
713+
::-webkit-scrollbar {
714+
width: 12px;
715+
height: 12px;
716+
}
717+
700718
::-webkit-scrollbar-track {
701-
background: rgba(255, 255, 255, 0.1);
702-
border-radius: 4px;
719+
background: var(--scrollbar-track-bg);
720+
border-radius: 8px;
721+
margin: 4px;
703722
}
704723

705724
::-webkit-scrollbar-thumb {
706-
background: var(--gradient-primary);
707-
border-radius: 4px;
725+
background: var(--scrollbar-thumb-bg);
726+
border-radius: 8px;
727+
border: 2px solid var(--scrollbar-track-bg);
728+
transition: all 0.3s ease;
708729
}
709730

710731
::-webkit-scrollbar-thumb:hover {
711-
background: var(--gradient-primary-hover);
732+
background: var(--scrollbar-thumb-hover-bg);
733+
border: 2px solid var(--scrollbar-track-bg);
734+
transform: scale(1.05);
735+
}
736+
737+
::-webkit-scrollbar-thumb:active {
738+
background: var(--scrollbar-thumb-active-bg);
739+
}
740+
741+
::-webkit-scrollbar-corner {
742+
background: var(--scrollbar-track-bg);
743+
}
744+
745+
/* Thin scrollbars for smaller containers */
746+
.thin-scrollbar::-webkit-scrollbar {
747+
width: 8px;
748+
height: 8px;
749+
}
750+
751+
.thin-scrollbar::-webkit-scrollbar-track {
752+
background: var(--scrollbar-track-bg);
753+
border-radius: 6px;
754+
margin: 2px;
755+
}
756+
757+
.thin-scrollbar::-webkit-scrollbar-thumb {
758+
background: var(--scrollbar-thumb-bg);
759+
border-radius: 6px;
760+
border: 1px solid var(--scrollbar-track-bg);
761+
}
762+
763+
.thin-scrollbar::-webkit-scrollbar-thumb:hover {
764+
background: var(--scrollbar-thumb-hover-bg);
765+
}
766+
767+
/* Apply thin scrollbars to specific elements */
768+
.srt-preview, .modal-content, .onboarding-step {
769+
scrollbar-width: thin;
770+
scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
771+
}
772+
773+
.srt-preview::-webkit-scrollbar,
774+
.modal-content::-webkit-scrollbar,
775+
.onboarding-step::-webkit-scrollbar {
776+
width: 8px;
777+
height: 8px;
778+
}
779+
780+
.srt-preview::-webkit-scrollbar-track,
781+
.modal-content::-webkit-scrollbar-track,
782+
.onboarding-step::-webkit-scrollbar-track {
783+
background: var(--scrollbar-track-bg);
784+
border-radius: 6px;
785+
margin: 2px;
786+
}
787+
788+
.srt-preview::-webkit-scrollbar-thumb,
789+
.modal-content::-webkit-scrollbar-thumb,
790+
.onboarding-step::-webkit-scrollbar-thumb {
791+
background: var(--scrollbar-thumb-bg);
792+
border-radius: 6px;
793+
border: 1px solid var(--scrollbar-track-bg);
794+
}
795+
796+
.srt-preview::-webkit-scrollbar-thumb:hover,
797+
.modal-content::-webkit-scrollbar-thumb:hover,
798+
.onboarding-step::-webkit-scrollbar-thumb:hover {
799+
background: var(--scrollbar-thumb-hover-bg);
712800
}
713801

714802
/* Enhanced focus styles for accessibility */
@@ -1163,22 +1251,10 @@ footer {
11631251
padding: 0;
11641252
}
11651253

1166-
.changelog-container::-webkit-scrollbar {
1167-
width: 8px;
1168-
}
1169-
1170-
.changelog-container::-webkit-scrollbar-track {
1171-
background: rgba(0, 0, 0, 0.05);
1172-
border-radius: 4px;
1173-
}
1174-
1175-
.changelog-container::-webkit-scrollbar-thumb {
1176-
background: var(--gradient-primary);
1177-
border-radius: 4px;
1178-
}
1179-
1180-
.changelog-container::-webkit-scrollbar-thumb:hover {
1181-
background: var(--gradient-primary-hover);
1254+
/* Apply thin scrollbar to changelog container */
1255+
.changelog-container {
1256+
scrollbar-width: thin;
1257+
scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
11821258
}
11831259

11841260
#changelog-content {
@@ -1650,19 +1726,19 @@ footer {
16501726

16511727
.theme-preview-header {
16521728
height: 20px;
1653-
background: #f5f5f5;
1729+
background: #e2e8f0;
16541730
display: flex;
16551731
align-items: center;
16561732
gap: 4px;
16571733
padding: 0 8px;
16581734
}
16591735

16601736
.theme-preview-header.light {
1661-
background: #f8f9fa;
1737+
background: #e2e8f0;
16621738
}
16631739

16641740
.theme-preview-header.dark {
1665-
background: #2d3748;
1741+
background: #374151;
16661742
}
16671743

16681744
.theme-preview-dot {
@@ -1675,7 +1751,7 @@ footer {
16751751
.theme-preview-body {
16761752
height: 60px;
16771753
display: flex;
1678-
background: #ffffff;
1754+
background: #f1f5f9;
16791755
}
16801756

16811757
.theme-preview-body.light {

‎version‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
1.5.0
1+
1.5.1

0 commit comments

Comments
 (0)