Merge pull request #29 from OrangeJedi/v0.5.3

v0.5.3
OrangeJedi · May 16, 2020 · 82cb188 · 82cb188
2 parents 8bcd811 + 57af36a
commit 82cb188
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 42 deletions.
diff --git a/app.js b/app.js
@@ -20,14 +20,17 @@ function createConfigWindow(argv) {
         height: 750,
         webPreferences: {
             nodeIntegration: true
-        }
+        },
+        resizable: false
     });
     win.loadFile('web/config.html');
     win.on('closed', function () {
         win = null;
     });
-    if (argv.includes("/dt")) {
-        win.webContents.openDevTools();
+    if(argv) {
+        if (argv.includes("/dt")) {
+            win.webContents.openDevTools();
+        }
     }
     screens.push(win);
 }
@@ -92,16 +95,19 @@ function createSSPWindow(argv) {
     win.on('closed', function () {
         win = null;
     });
-    if (argv.includes("/dt")) {
-        win.webContents.openDevTools();
+    if(argv) {
+        if (argv.includes("/dt")) {
+            win.webContents.openDevTools();
+        }
     }
     screens.push(win);
 }
 
+app.allowRendererProcessReuse = true
 app.whenReady().then(startUp);
 
 function startUp() {
-    if (!store.get("configured") || store.get("version") !== "v0.5.2") {
+    if (!store.get("configured") || store.get("version") !== "v0.5.3") {
         //make video cache directory
         if (!fs.existsSync(`${app.getPath('userData')}/videos/`)) {
             fs.mkdirSync(`${app.getPath('userData')}/videos/`);

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aerial",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Apple TV screen saver for Windows",
   "main": "app.js",
   "scripts": {

diff --git a/web/config.css b/web/config.css
@@ -66,6 +66,37 @@
     padding-top: .5%;
 }
 
+.imagePositionWithValue{
+    opacity: 0;
+    z-index: 1;
+}
+
+.imagePositionWithValue ~ label{
+    background-color: #87CEEB;
+    position: absolute;
+    top: 7px;
+    left: 7px;
+    height: 25px;
+    width: 25px;
+    border-radius: 1em;
+}
+
+.imagePositionWithValue ~ label:after {
+    content: "";
+    position: absolute;
+    display: none;
+    top: 25%;
+    left: 27%;
+    width: 50%;
+    height: 50%;
+    border-radius: 50%;
+    background: white;
+}
+
+.imagePositionWithValue:checked ~ label:after{
+    display: block;
+}
+
 .videoInfo {
     position: absolute;
     padding-top: 55%;

diff --git a/web/config.html b/web/config.html
@@ -121,7 +121,7 @@ <h4>Custom Videos</h4>
 
 </div>
 <div id="videoTab" class="tab" style="display: none">
-    <div class="w3-sidebar w3-light-grey w3-bar-block" id="videoList" style="width:34%">
+    <div class="w3-sidebar w3-light-grey w3-bar-block" id="videoList" style="width:34%; height: 84%">
     </div>
     <div id="videoCard" style="margin-left:34%">
         <div class="w3-container w3-blue">
@@ -137,40 +137,26 @@ <h4 id="videoName">Video Settings</h4>
 <div id="textTab" class="tab" style="display: none">
     <div class="w3-sidebar w3-light-grey w3-bar-block" style="width:20%">
         <div class="settingsListItem"><h3 class="w3-bar-item"><i class="fa fa-paragraph"></i> Text</h3></div>
-        <a onclick="selectTextSetting('textOptions')" id="textSettingsList-textOptions" class="w3-bar-item w3-button textSettingsListItem w3-deep-orange">Text Options</a>
-        <a onclick="selectTextSetting('position')" id="textSettingsList-position" class="w3-bar-item w3-button textSettingsListItem">Position</a>
+        <a onclick="selectTextSetting('position')" id="textSettingsList-position" class="w3-bar-item w3-button textSettingsListItem w3-deep-orange">Position</a>
+        <a onclick="selectTextSetting('textOptions')" id="textSettingsList-textOptions" class="w3-bar-item w3-button textSettingsListItem">Text Options</a>
     </div>
     <div id="textCard" style="margin-left:20%">
-        <div id="textOptionsTextSettings" class="textSettingsCard">
-            <div class="w3-container w3-blue">
-                <h4>Text Options</h4>
-            </div>
-            <div class="w3-display-container" style="padding: 2%">
-                <div class="autocomplete" style="width:300px;">
-                    <label>Font: </label><input id="textFont" type="text" onchange="updateSetting('textFont', 'autocomplete')"><i class="fa fa-exclamation-triangle" id="textFontError" style="display: none"></i>
-                </div>
-                <br>
-                <label>Font Size: </label><input class="w3-input" id="textSize" type="number" step=".25" style="width: 25%; display: inline; margin-top: 2%" onchange="updateSetting('textSize', 'number')">
-                <br>
-                <label>Color: </label><input class="w3-input" id="textColor" type="color" step=".25" style="width: 5%; display: inline; margin-top: 2%; padding: 0;" onchange="updateSetting('textColor', 'text')">
-            </div>
-        </div>
-        <div id="positionTextSettings" class="textSettingsCard" style="display: none">
+        <div id="positionTextSettings" class="textSettingsCard">
             <div class="w3-container w3-blue">
                 <h4>Position</h4>
             </div>
             <div class="w3-display-container" style="padding: 2%">
                 <div class="w3-display-container w3-display-topleft" style="width: 50%; margin-top: 2%; margin-left: 2%">
                     <img alt="An error has occurred" src="images/B8F204CE-6024-49AB-85F9-7CA2F6DCD226.jpeg" class="w3-round" style="width: 100%;"/>
-                    <div class="w3-display-topleft w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="topleft" onclick="positionSelect(this)"></div>
-                    <div class="w3-display-topright w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="topright" onclick="positionSelect(this)"></div>
-                    <div class="w3-display-bottomleft w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="bottomleft" onclick="positionSelect(this)"></div>
-                    <div class="w3-display-bottomright w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="bottomright" onclick="positionSelect(this)"></div>
-                    <div class="w3-display-left w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="left" onclick="positionSelect(this)"></div>
-                    <div class="w3-display-right w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="right" onclick="positionSelect(this)"></div>
-                    <div class="w3-display-middle w3-large imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="middle" onclick="positionSelect(this)"></div>
-                    <div class="w3-display-topmiddle w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="topmiddle" onclick="positionSelect(this)"></div>
-                    <div class="w3-display-bottommiddle w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="bottommiddle" onclick="positionSelect(this)"></div>
+                    <div class="w3-display-topleft w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="topleft" onclick="positionSelect(this)"><label></label></div>
+                    <div class="w3-display-topright w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="topright" onclick="positionSelect(this)"><label></label></div>
+                    <div class="w3-display-bottomleft w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="bottomleft" onclick="positionSelect(this)"><label></label></div>
+                    <div class="w3-display-bottomright w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="bottomright" onclick="positionSelect(this)"><label></label></div>
+                    <div class="w3-display-left w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="left" onclick="positionSelect(this)"><label></label></div>
+                    <div class="w3-display-right w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="right" onclick="positionSelect(this)"><label></label></div>
+                    <div class="w3-display-middle w3-large imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="middle" onclick="positionSelect(this)"><label></label></div>
+                    <div class="w3-display-topmiddle w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="topmiddle" onclick="positionSelect(this)"><label></label></div>
+                    <div class="w3-display-bottommiddle w3-container imagePositionRadio"><input class="w3-radio imagePosition" type="radio" name="imagePosition" value="bottommiddle" onclick="positionSelect(this)"><label></label></div>
                 </div>
                 <div class="w3-display-topright w3-container w3-right-align" style="width: 33%; margin-top: 2%; margin-right: 2%">
                     <h3 id="positionType" style="display: none">
@@ -184,7 +170,33 @@ <h3 id="positionType" style="display: none">
                     </h3>
                 </div>
             </div>
-            <div class="w3-container" style="margin-top: 27%" id="positionDetails"></div>
+            <div class="w3-container" style="margin-top: 27%">
+                <div class="w3-container" id="positionDetails"></div>
+                <div class="w3-container" id="textWidthContainer" style="display: none">
+                    <br>
+                    Max Width:
+                    <select id="textWidthSelect">
+                        <option value="33%">33%</option>
+                        <option value="50%">50%</option>
+                        <option value="66%">66%</option>
+                        <option value="100%">100%</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+        <div id="textOptionsTextSettings" class="textSettingsCard" style="display: none">
+            <div class="w3-container w3-blue">
+                <h4>Text Options</h4>
+            </div>
+            <div class="w3-display-container" style="padding: 2%">
+                <div class="autocomplete" style="width:300px;">
+                    <label>Font: </label><input id="textFont" type="text" onchange="updateSetting('textFont', 'autocomplete')"><i class="fa fa-exclamation-triangle" id="textFontError" style="display: none"></i>
+                </div>
+                <br>
+                <label>Font Size: </label><input class="w3-input" id="textSize" type="number" step=".25" style="width: 25%; display: inline; margin-top: 2%" onchange="updateSetting('textSize', 'number')">
+                <br>
+                <label>Color: </label><input class="w3-input" id="textColor" type="color" step=".25" style="width: 5%; display: inline; margin-top: 2%; padding: 0;" onchange="updateSetting('textColor', 'text')">
+            </div>
         </div>
     </div>
 </div>

diff --git a/web/config.js b/web/config.js
@@ -36,6 +36,7 @@ function displaySettings() {
     }
     displayPlaybackSettings();
     displayCustomVideos();
+    colorTextPositionRadio();
 }
 
 displaySettings();
@@ -135,7 +136,7 @@ function deleteCache() {
 }
 
 function selectCacheLocation() {
-    if(confirm("This will delete all videos in the current cache and move the cache location to the chosen folder.\nIf you want to keep your downloaded videos copy them to the new location before clicking ok.")) {
+    if (confirm("This will delete all videos in the current cache and move the cache location to the chosen folder.\nIf you want to keep your downloaded videos copy them to the new location before clicking ok.")) {
         console.log('hey');
         ipcRenderer.send('selectCacheLocation');
     }
@@ -231,11 +232,24 @@ function editCustomVideo(id) {
 
 //Text tab
 
+function colorTextPositionRadio() {
+    let displayTextSettings = store.get('displayText');
+    $('.imagePosition').each(function () {
+        if(displayTextSettings[this.value].type !== "none"){
+            $(this).addClass('imagePositionWithValue');
+        }else {
+            $(this).removeClass('imagePositionWithValue')
+        }
+    });
+}
+
 //handles selecting a radio button from the position image
 function positionSelect(position) {
     position = position.value;
     let displayTextSettings = store.get('displayText')[position];
     document.getElementById("positionTypeSelect").setAttribute('onchange', `updatePositionType('${position}')`);
+    document.getElementById("textWidthSelect").setAttribute('onchange', `updateTextSetting(this, '${position}', 'maxWidth')`);
+    $('#textWidthSelect').val(displayTextSettings.maxWidth ? displayTextSettings.maxWidth : "50%");
     $('#positionTypeSelect').val(displayTextSettings.type);
     $('#positionType').css('display', "");
     updatePositionType(position);
@@ -288,11 +302,14 @@ function updatePositionType(position) {
             });
         } else {
             $('#positionDetails').html(html);
+            $('#textWidthContainer').css('display', "");
         }
     } else {
         $('#positionDetails').html(html);
+        $('#textWidthContainer').css('display', "none");
     }
     store.set('displayText', displayTextSettings);
+    colorTextPositionRadio();
 }
 
 //Text settings are stored separate from other settings, so they require their own functions
@@ -371,7 +388,7 @@ function makeList() {
                       ${videos[i].name ? videos[i].name : videos[i].accessibilityLabel}
                       </a></span><br>`;
     }
-    videoList += "<br><br><br><br><br><br>";
+    videoList += "<br>";
     $('#videoList').html(videoList);
 }
 

diff --git a/web/screensaver.css b/web/screensaver.css
@@ -28,5 +28,4 @@ body {
 
 .textDisplayArea {
     padding: 2%;
-    width: 50%;
 }
diff --git a/web/screensaver.js b/web/screensaver.js
@@ -115,6 +115,7 @@ function newVideo() {
                 textArea.text(videoInfo[displayText[position].infoType]);
             }
         }
+        textArea.css('width', displayText[position].maxWidth ? displayText[position].maxWidth : "50%")
     }
 }