UniFandora - mini slideshow (gambar, GIF, video)

Saya ingin memperkenalkan aplikasi slideshow sederhana yang saya buat karena saya membutuhkannya.
Saat rehat sebentar sambil minum kopi di hari kerja, saya suka menonton GIF IU di salah satu sudut monitor.
Setelah mengganti komputer utama saya ke Mac dan tidak menemukan aplikasi yang pas, saya akhirnya membuat versi sederhana dengan bantuan GPT.

Berikut gambaran fitur-fiturnya.

• Fitur slideshow
• Menampilkan gambar (termasuk GIF), memutar video
• Bisa menonton video sampai selesai terlepas dari waktu slideshow
• Menyesuaikan tinggi jendela sesuai rasio gambar
• Menampilkan waktu
• Pembaruan otomatis

Saya unggah ini barangkali ada yang punya selera mirip dengan saya.
Awalnya saya mengembangkan dengan Swift, lalu sekalian terpikir untuk membuatnya cross-platform.
Saya sempat mempertimbangkan Flutter dan Electron, tetapi karena tidak mempertimbangkan mobile, saya memutuskan memakai Electron.

Saat mengembangkan kali ini, ada beberapa hal baru yang saya pelajari, jadi saya bagikan juga sedikit catatannya.
github : https://github.com/enarche-ahn/unifandora-release

Pembaruan otomatis

Ini pertama kalinya saya memakai Electron.
Saya sudah lama penasaran karena pernah mendengar bahwa Visual Code dibuat dengan Electron,
dan setelah benar-benar mencobanya, saya langsung jatuh hati.
Terutama, saya kaget karena pembaruan otomatis bisa dihubungkan dengan sangat mudah.

Menampilkan log ke shell

Biasanya, saat mencetak pesan log untuk debugging di renderer, saya hanya bisa memeriksanya di mode pengembang browser.
Karena penasaran, saya bertanya ke GPT, dan langsung diberi solusi yang pas!
Metodenya ternyata jauh lebih sederhana dan efisien daripada yang saya kira, sampai rasanya merinding.
(Mungkin juga karena saya sudah lama hanya mengembangkan backend, jadi saya memang kurang tahu ^^;)
Jika ditambahkan seperti di bawah ini, console.log() yang dicetak di [renderer.js] akan tampil dengan baik di shell.

[main.js]  
// Log messages received from renderer  
ipcMain.on('renderer-log', (event, message) => {  
  console.log('Renderer Log:', message);  
});  
  
  
[preload.js]  
contextBridge.exposeInMainWorld('electronAPI', {  
  sendLog: (message) => ipcRenderer.send('renderer-log', message)  
});  
  
[renderer.js]  
// Override console.log to forward log messages to the main process.  
(function() {  
  const originalConsoleLog = console.log;  
  console.log = function(...args) {  
    if (window.electronAPI && typeof window.electronAPI.sendLog === 'function') {  
      window.electronAPI.sendLog(args.join(' '));  
    }  
    originalConsoleLog.apply(console, args);  
  };  
})();  
  
window.addEventListener('DOMContentLoaded', () => {  
  ...  
  console.log('Slideshow started...');  
 });  

[enarche]

Binary saat ini hanya diunggah untuk versi Windows.
Versi macOS masih belum ada karena saya harus mendaftar ulang ke Apple Developer Program ^^;;;
Untuk sementara, yang membutuhkan silakan unduh source code lalu build sendiri untuk digunakan~