Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

First version of allowing a video to play on the background of the lo… #1

Open
wants to merge 3 commits into
base: stable
Choose a base branch
from
Open

First version of allowing a video to play on the background of the lo… #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6a7a59a
First version of allowing a video to play on the background of the lo…
wsg-media Jun 28, 2023
16f3e1d
changed form field type
wsg-media Jun 28, 2023
86f1189
Removed need for using an interceptor and added additional help infor…
wsg-media Jun 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 17 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,4 +85,20 @@ With the main navigation moved to the top of the page, this frees up the side of

Set an array of menu items ([defined as per the main menus](https://docs.preside.org/devguides/adminMenuItems.html)) into `prc.adminSidebarItems`, and the menu will be rendered in the sidebar. These menus can be nested several levels deep, and will auto-expand when clicked. Note that the parent of children will not itself be a link; it just acts as a title and open/close trigger for the child menu.

If displaying a sidebar menu, you may optionally specify a header panel by setting rendered HTML into `prc.adminSidebarHeader`. This might contain basic information about a record, for instance.
If displaying a sidebar menu, you may optionally specify a header panel by setting rendered HTML into `prc.adminSidebarHeader`. This might contain basic information about a record, for instance.

## Login

You can replace the background image with a video, by speciying it in the Admin login security within the system settings. The URL should be the embed link of the video, but it is recommended to add additional parameters to ensure the video autoruns and repeats.

e.g. using a Youtube video

```
https://www.youtube.com/embed/-cAjp7fiVvA?controls=0&autoplay=1&mute=1&loop=1
```

and for a Vimeo video add

```
?background=1&autoplay=1&loop=1&byline=0&title=0
```
25 changes: 25 additions & 0 deletions assets/css/admin/altadmintheme/login/loginscreens.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,38 @@ html.presidecms {
background-size : var( --login-bg-size ) !important;

.login-layout {

.vimeo-wrapper {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See comments in the view on naming of this class

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
overflow: hidden;

iframe {
width: 100vw;
height: 56.25vw;
min-height: 100vh;
min-width: 177.77vh;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is all locked to the video being 16:9 ratio.

Woiuld recommend trying the aspect-ratio CSS property: https://caniuse.com/mdn-css_properties_aspect-ratio

So, lose the width and height, have min-width and min-height as 100vw and 100vh, and then set the aspect ratio directly in the HTML of the iframe, so it could be pulled from a setting alongside the video URL.

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}

.login-container {
width : var( --login-container-width );

.admin-locale-picker-container > a {
color : var( --login-locale-font-color) !important;
}



.login-box {
background : var( --login-box-color );
border : var( --login-box-border );
Expand Down
10 changes: 10 additions & 0 deletions forms/system-config/admin-login-security.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>

<form i18nBaseUri="system-config.admin-login-security:" >
<tab id="display" sortorder="30">
<fieldset id="background" sortorder="10">
<field sortorder="10" name="video_background" control="textinput" required="false" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe set this as a url input?

</fieldset>
</tab>

</form>
8 changes: 8 additions & 0 deletions handlers/admin/Login.cfc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
component {

public string function backgroundVideo( event, rc, prc, args={} ) {
var bgVideo = getSystemSetting( "admin-login-security", "video_background" );

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should put in a check here, rather than in the view, to see if the bgVideo is defined, and if not just return an empty string.

return renderView( view="/admin/general/adminLoginContent", args={ bgVideo = bgVideo } );
}
}
6 changes: 6 additions & 0 deletions i18n/system-config/admin-login-security.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
tab.display.title=Display
tab.display.iconClass=fa-tv
field.video_background.title=Video background embed uri
field.video_background.help=We recommend adding autoplay and loop onto the end of the embed URL e.g. ?autoplay=1&mute=1&loop=1


1 change: 1 addition & 0 deletions interceptors/AltAdminThemeInterceptors.cfc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,5 @@ component extends="coldbox.system.Interceptor" {
}
}
}

}
1 change: 1 addition & 0 deletions layouts/adminLogin.cfm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
</head>

<body class="login-layout #layoutClass# preside-theme">
#renderViewlet( event='admin.login.backgroundVideo' )#
<div class="main-container">
<div class="main-content">
<div class="row">
Expand Down
11 changes: 11 additions & 0 deletions views/admin/general/adminLoginContent.cfm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<cfscript>
args.bgVideo = args.bgVideo ?: "";
</cfscript>

<cfif args.bgVideo.len()>
<div class="vimeo-wrapper">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

vimeo-wrapper is a bit specific, if it could also be a YouTube video. Maybe something more generic like login-video-wrapper

<cfoutput>
<iframe src="#args.bgVideo#" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</cfoutput>
</div>
</cfif>