Setting up a Video Background Login Screen

Background

Recently I was inspired to switch over to Arch Linux after seeing this post by u/EmpressNoodle over at /r/unixporn.

During my Arch install, I decided to use SDDM as my display manager. One of it's features is the ability to use videos as the background of the login screen so I figured I'd give that a go.

Configuration

First, I had to decide on the base theme that I wanted to customize. My install came with elarun, maldives, and maya (all of which live in /usr/share/sddm/themes) so I used sddm-greeter --test-mode --theme /path/to/theme to preview them and see which one I liked best. I believe Arch defaults to breeze, though I'm not exactly sure where that theme lives and it didn't matter to me since I ended up picking the maldives theme to base my custom theme on.

To begin, I simply copied the maldives theme to my own custom theme directory so I would have the original to refer back to in case I screwed something up.

sudo cp -r /usr/share/sddm/themes/maldives /usr/share/sddm/themes/custom

At this point, I needed to edit the Main.qml file which handles how the layout looks. I used the guide here to help me get my bearings in terms of how to get it to use a video background: https://nixdaily.com/how-to/add-video-background-to-sddm-login-screen/

Here are the changes I made to the file. I'm not sure if those width and height changes had any effect at all but they didn't hurt.

➜  ~ diff /usr/share/sddm/themes/maldives/Main.qml /usr/share/sddm/themes/custom/Main.qml 
24a25
> import QtMultimedia 5.15
30,31c31,32
<     width: 640
<     height: 480
---
>     width: 1920
>     height: 1080
55,56c56,57
<     Background {
<         anchors.fill: parent
---
>     MediaPlayer {
>         id: videoPlayer
58,63c59,65
<         fillMode: Image.PreserveAspectCrop
<         onStatusChanged: {
<             if (status == Image.Error && source != config.defaultBackground) {
<                 source = config.defaultBackground
<             }
<         }
---
>         autoPlay: true
>     }
> 
>     VideoOutput {
>         source: videoPlayer
>         anchors.fill: parent
>         fillMode: VideoOutput.PreserveAspectCrop

As you can see, the video background file is being pulled from config.defaultBackground. That setting is found in theme.conf in the same directory as Main.qml. It's a simple file that looks like this:

[General]
background=background_video.mp4

Of course, you'll need to make sure that background_video.mp4 actually exists. I tried setting the path to a video located in my home directory but it didn't work. Not sure if that's because my home directory is on a separate encrypted partition, but the simple fix is just to save the video into the theme directory alongside the config files.

At this point you can start testing your theme with sddm-greeter --test-mode --theme /path/to/custom/theme

I needed to install a few other packages to get my video to play properly. Your mileage my vary.

sudo pacman -S gst-libav gstreamer-vaapi

Once you have it working, the last step to to tell sddm to use the them by creating a new file in /etc/sddm.conf.d/

I named mine custom_theme.conf. It looks like this:

[Theme]
Current=custom

Final Product

You can see a short demonstration of my new login screen in the video below. The background I'm using is a lightly edited version of another YouTube video you can find here: https://youtu.be/BHACKCNDMW8

The above video isn't actually a perfect representation of my login screen, but it's close enough. I'm actually just using ffmpeg to record my main display while I run sddm-greeter --test-mode with my customized theme.