yetangitu/Oinktube
1
0
Fork 0
mirror of https://github.com/DanielnetoDotCom/YouPHPTube synced 2025-10-03 01:39:24 +02:00
Code Issues Releases Wiki Activity

Now you can choose light and dark theme

Browse source
This commit is contained in:
Daniel Neto 2024-04-12 14:08:49 -03:00
parent e6ad9780b0
commit 04b558f5f3
12 changed files with 303 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

102
admin/design_themes.php
View file

@ -1,19 +1,29 @@
<div class="row">
<?php
$savedTheme = $config->getTheme();
$savedTheme = $config->getThemes();
$delay = 0.2;
foreach (glob("{$global['systemRootPath']}view/css/custom/*.css") as $filename) {
//echo "$filename size " . filesize($filename) . "\n";
$file = basename($filename); // $file is set to "index.php"
$fileEx = basename($filename, ".css"); // $file is set to "index"
$themes = getThemesSeparated();
?>
<div class="col-xs-4 <?php echo getCSSAnimationClassAndStyle('animate__fadeInUp', 'themess', $delay); ?>">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<?php echo __('Dark is Default'); ?>
<div class="material-switch pull-right">
<input class="defaultTheme" data-toggle="toggle" type="checkbox" value="" id="defaultThemeDark" <?php echo ($savedTheme->defaultTheme == 'dark') ? "checked" : ""; ?>>
<label for="defaultThemeDark" class="label-primary"></label>
</div>
</div>
<div class="panel-body">
<?php
foreach ($themes['dark'] as $fileEx) {
?>
<div class="col-xs-6 <?php echo getCSSAnimationClassAndStyle('animate__fadeInUp', 'themess', $delay); ?>">
<div class="panel panel-default">
<div class="panel-heading">
<?php echo ucfirst($fileEx); ?>
<div class="material-switch pull-right">
<input class="themeSwitch" data-toggle="toggle" type="checkbox" value="<?php echo($fileEx); ?>" id="themeSwitch<?php echo($fileEx); ?>" <?php echo ($fileEx == $savedTheme) ? "checked" : ""; ?>>
<label for="themeSwitch<?php echo($fileEx); ?>" class="label-primary"></label>
<input class="themeSwitch isDarkTheme" data-toggle="toggle" type="checkbox" value="<?php echo ($fileEx); ?>" id="themeSwitch<?php echo ($fileEx); ?>" <?php echo ($fileEx == $savedTheme->dark) ? "checked" : ""; ?>>
<label for="themeSwitch<?php echo ($fileEx); ?>" class="label-success"></label>
</div>
</div>
<div class="panel-body">
@ -25,30 +35,80 @@
}
?>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<?php echo __('Light is Default'); ?>
<div class="material-switch pull-right">
<input class="defaultTheme" data-toggle="toggle" type="checkbox" value="" id="defaultThemeLight" <?php echo ($savedTheme->defaultTheme == 'light') ? "checked" : ""; ?>>
<label for="defaultThemeLight" class="label-primary"></label>
</div>
</div>
<div class="panel-body">
<?php
foreach ($themes['light'] as $fileEx) {
?>
<div class="col-xs-6 <?php echo getCSSAnimationClassAndStyle('animate__fadeInUp', 'themess', $delay); ?>">
<div class="panel panel-default">
<div class="panel-heading">
<?php echo ucfirst($fileEx); ?>
<div class="material-switch pull-right">
<input class="themeSwitch isLightTheme" data-toggle="toggle" type="checkbox" value="<?php echo ($fileEx); ?>" id="themeSwitch<?php echo ($fileEx); ?>" <?php echo ($fileEx == $savedTheme->light) ? "checked" : ""; ?>>
<label for="themeSwitch<?php echo ($fileEx); ?>" class="label-success"></label>
</div>
</div>
<div class="panel-body">
<img src="<?php echo $global['webSiteRootURL'], "view/css/custom/", $fileEx, ".png"; ?>" class="img-responsive">
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
</div>
</div>
<script>
function checkSwitch() {
var defaultSwitch = $('#defaultSwitch').is(":checked");
var netflixSwitch = $('#netflixSwitch').is(":checked");
var gallerySwitch = $('#gallerySwitch').is(":checked");
if (!defaultSwitch && !netflixSwitch && !gallerySwitch) {
$('#netflixSwitch').prop('checked', false);
$('#gallerySwitch').prop('checked', false);
$('#defaultSwitch').prop('checked', true);
function switchThemeDark(t) {
$('.themeSwitch.isDarkTheme').not(t).prop('checked', false);
saveTheme();
}
function switchThemeLight(t) {
$('.themeSwitch.isLightTheme').not(t).prop('checked', false);
saveTheme();
}
$(document).ready(function () {
$('.themeSwitch').change(function (e) {
function saveTheme() {
modal.showPleaseWait();
$('.themeSwitch').not(this).prop('checked', false);
$.ajax({
url: webSiteRootURL + 'admin/themeUpdate.json.php',
data: {"theme": $(this).val()},
data: {
"themeLight": $('.themeSwitch.isLightTheme:checked').val(),
"themeDark": $('.themeSwitch.isDarkTheme:checked').val(),
"defaultTheme": $('#defaultThemeDark').is(':checked')?'dark':'light',
},
type: 'post',
success: function(response) {
avideoResponse(response);
modal.hidePleaseWait();
}
});
}
$(document).ready(function() {
$('.themeSwitch.isDarkTheme').change(function(e) {
switchThemeDark(this);
});
$('.themeSwitch.isLightTheme').change(function(e) {
switchThemeLight(this);
});
$('.defaultTheme').change(function(e) {
$('.defaultTheme').not(this).prop('checked', false);
saveTheme();
});
});
</script>

16
admin/themeUpdate.json.php
View file

@ -6,10 +6,20 @@ if (!isset($global['systemRootPath'])) {
}
require_once $global['systemRootPath'] . 'objects/user.php';
if (!User::isAdmin()) {
die('{"error":"' . __("Permission denied") . '"}');
forbiddenPage('Admin Only');
}
$config = new AVideoConf();
$config->setTheme($_POST['theme']);
if(!empty($_POST['theme'])){
$config->setTheme($_POST['theme'], @$_REQUEST["defaultTheme"]);
}else if(!empty($_POST['themeLight'])){
$config->setThemes($_REQUEST["themeLight"], $_REQUEST["themeDark"], $_REQUEST["defaultTheme"]);
}
echo '{"status":"' . $config->save() . '"}';
$obj = new stdClass();
$obj->error = empty($config->save());
$config = new AVideoConf();
$obj->themes = $config->getThemes();
echo json_encode($obj);

2
install/checkConfiguration.php
View file

@ -5,7 +5,7 @@ if (file_exists("../videos/configuration.php")) {
}
$installationVersion = "14.2";
$installationVersion = "14.3";
require_once '../objects/functionsSecurity.php';

2
install/database.sql
View file

@ -324,7 +324,7 @@ CREATE TABLE IF NOT EXISTS `configurations` (
`allow_download` TINYINT(1) NULL DEFAULT 0,
`session_timeout` INT NULL DEFAULT 3600,
`autoplay` TINYINT(1) NULL,
`theme` VARCHAR(45) NULL DEFAULT 'default',
`theme` TEXT NULL DEFAULT 'default',
`smtp` TINYINT(1) NULL,
`smtpAuth` TINYINT(1) NULL,
`smtpSecure` VARCHAR(255) NULL COMMENT '\'ssl\'; // secure transfer enabled REQUIRED for Gmail',

77
objects/configuration.php
View file

@ -49,6 +49,8 @@ class AVideoConf extends ObjectYPT{
// version 4
protected $encoderURL;
const DARKTHEMES = array('cyborg','darkly','netflix','slate','superhero','solar');
public function __construct($video_resolution = "")
{
$this->load();
@ -417,9 +419,80 @@ class AVideoConf extends ObjectYPT{
return $this->theme;
}
public function setTheme($theme)
public function getThemes()
{
$this->theme = $theme;
$theme = json_encode(array('light'=>'default', 'dark'=>'netflix', 'defaultTheme'=>'light'));
if (empty($this->theme)) {
return json_decode($theme);
}
$json = json_decode($this->theme);
if (empty($json)) {
if(in_array($this->theme, AVideoConf::DARKTHEMES)){
$theme = json_encode(array('light'=>'default', 'dark'=>$this->theme, 'defaultTheme'=>'dark'));
}else{
$theme = json_encode(array('light'=>$this->theme, 'dark'=>'netflix', 'defaultTheme'=>'light'));
}
return json_decode($theme);
}
return $json;
}
public function getThemeLight()
{
$theme = $this->getThemes();
return $theme->light;
}
public function getThemeDark()
{
$theme = $this->getThemes();
return $theme->dark;
}
public function getDefaultTheme()
{
if($this->isDefaultThemeDark()){
return $this->getThemeDark();
}else{
return $this->getThemeLight();
}
}
public function getAlternativeTheme()
{
if(!$this->isDefaultThemeDark()){
return $this->getThemeDark();
}else{
return $this->getThemeLight();
}
}
public function isDefaultThemeDark()
{
$theme = $this->getThemes();
return $theme->defaultTheme == 'dark';
}
public function setTheme($theme, $setDefault=false)
{
$themes = $this->getThemes();
if(in_array($theme, AVideoConf::DARKTHEMES)){
$themes->dark = $theme;
if($setDefault){
$themes->defaultTheme = 'dark';
}
}else{
$themes->light = $theme;
if($setDefault){
$themes->defaultTheme = 'light';
}
}
$this->theme = json_encode($themes);
}
public function setThemes($lightTheme, $darkTheme, $defaultTheme)
{
$this->theme = json_encode(array('light'=>$lightTheme, 'dark'=>$darkTheme, 'defaultTheme'=>$defaultTheme));
}
public function getSmtp()

28
objects/functions.php
View file

@ -5001,6 +5001,27 @@ function getThemes()
return $_getThemes;
}
function getThemesSeparated()
{
global $_getThemes, $global;
if (isset($_getThemes)) {
return $_getThemes;
}
$_getThemesLight = [];
$_getThemesDark = [];
foreach (glob("{$global['systemRootPath']}view/css/custom/*.css") as $filename) {
$fileEx = basename($filename, ".css");
if(in_array($fileEx, AVideoConf::DARKTHEMES)){
$_getThemesDark[] = $fileEx;
}else{
$_getThemesLight[] = $fileEx;
}
}
return array('light'=>$_getThemesLight, 'dark'=>$_getThemesDark);
}
function getCurrentTheme()
{
global $config;
@ -5011,7 +5032,12 @@ function getCurrentTheme()
if (!empty($_COOKIE['customCSS'])) {
return $_COOKIE['customCSS'];
}
return $config->getTheme();
if (!empty($_COOKIE['themeMode'])) {
return $config->getAlternativeTheme();
}else{
return $config->getDefaultTheme();
}
}
function isWindows()

47
plugin/Layout/darkModeSwitch.php Normal file
View file

@ -0,0 +1,47 @@
<?php
$checked = '';
if (!empty($_COOKIE['themeMode'])) {
$checked = 'checked';
}
?>
<label for="themeMode" class="row-label singleLineMenu hideIfCompressed" style="padding: 5px;">
<?php
if($config->isDefaultThemeDark()){
echo '<i class="fa-solid fa-sun"></i> ';
echo __('Light Mode');
}else{
echo '<i class="fa-solid fa-moon"></i> ';
echo __('Dark Mode');
}
?>
<div class="material-switch">
<input type="checkbox" value="1" id="themeMode" <?php echo $checked; ?> onchange="toogleThemeMode();">
<label for="themeMode" class="label-success"></label>
</div>
</label>
<script>
function toogleThemeMode() {
var themeMode = Cookies.get('themeMode');
var isEmptythemeMode = empty(themeMode);
Cookies.set('themeMode', isEmptythemeMode ? 1 : 0, {
path: '/',
expires: 365
});
loadTheme();
}
function loadTheme() {
var themeMode = Cookies.get('themeMode');
var isEmptythemeMode = empty(themeMode);
var themeName = '<?php echo $config->getDefaultTheme(); ?>';
if (!isEmptythemeMode) {
themeName = '<?php echo $config->getAlternativeTheme(); ?>';
}
$('#themeMode').prop('checked', !isEmptythemeMode);
$('#customCSS').attr('href', webSiteRootURL + 'view/css/custom/' + themeName + '.css');
}
$(document).ready(function() {
loadTheme();
});
</script>

4
updatedb/updateDb.v14.3.sql Normal file
View file

@ -0,0 +1,4 @@
ALTER TABLE `configurations`
MODIFY COLUMN `theme` TEXT NULL DEFAULT 'default';
UPDATE configurations SET version = '14.3', modified = now() WHERE id = 1;

76
view/configurations_body.php
View file

@ -7,12 +7,6 @@ if (User::isAdmin()) {
<div class="panel-heading tabbable-line">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link " href="#tabTheme" data-toggle="tab">
<span class="fa fa-cog"></span>
<?php echo __("Themes"); ?>
</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#tabCompatibility" data-toggle="tab">
<span class="fa fa-cog"></span>
@ -41,76 +35,6 @@ if (User::isAdmin()) {
</div>
<div class="panel-body">
<div class="tab-content clearfix">
<div class="tab-pane" id="tabTheme">
<div class="panel panel-default">
<div class="panel-heading">
<h2><?php echo __("Themes"); ?></h2>
</div>
<div class="panel-body">
<h1 class="alert alert-warning">
<span class="fa fa-warning"></span>
<?php echo __("Do not forget to save after choose your theme"); ?>
</h1>
<div class="alert alert-info">
<span class="fa fa-info-circle"></span>
<?php echo __("We would like to thanks http://bootswatch.com/"); ?>
</div>
<div class="row">
<div class="col-xs-4">
<div class="panel panel-success">
<div class="panel-heading"><?php echo __('Customize Your site colors'); ?> <div class="pull-right"><?php echo getPluginSwitch('Customize'); ?></div>
</div>
<div class="panel-body">
<img src="<?php echo $global['webSiteRootURL'], "view/css/custom/customize.png"; ?>" class="img-responsive">
<?php
if (!AVideoPlugin::exists('Customize')) {
?>
<a href="https://youphp.tube/marketplace/" class="btn btn-success btn-radio btn-block btn-xs" id=""> <i class="fas fa-palette"></i> Purchase the Customize Plugin</a>
<?php
} else {
?>
<a href="<?php echo $global['webSiteRootURL']; ?>admin/?page=design_colors" class="btn btn-success btn-radio btn-block btn-xs" id=""> <i class="fas fa-palette"></i> Customize Colors</a>
<?php }
?>
</div>
</div>
</div>
<?php
$themes = getThemes();
$savedTheme = $config->getTheme();
foreach ($themes as $fileEx) {
if ($fileEx == $savedTheme) {
?>
<script>
$(document).ready(function() {
setTimeout(function() {
$("#btn<?php echo ($fileEx); ?>").trigger("click");
}, 1000);
});
</script>
<?php }
?>
<div class="col-xs-4">
<div class="panel panel-default">
<div class="panel-heading"><?php echo ucfirst($fileEx); ?></div>
<div class="panel-body">
<img src="<?php echo $global['webSiteRootURL'], "view/css/custom/", $fileEx, ".png"; ?>" class="img-responsive img-radio">
<button type="button" class="btn btn-default btn-radio btn-block btn-xs" id="btn<?php echo ($fileEx); ?>"><?php echo ucfirst($fileEx); ?></button>
<input type="checkbox" value="<?php echo ($fileEx); ?>" class="hidden left-item">
</div>
</div>
</div>
<?php }
?>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tabCompatibility">
<div class="alert alert-success">
<span class="fa fa-film"></span>

12
view/css/navbar.css
View file

@ -20,11 +20,11 @@
}
#menuBackButton,
#compressMenu{
.compressMenu{
display: none;
}
body.youtube #compressMenu,
body.youtube .compressMenu,
body.pwa #menuBackButton{
display: inline-block;
}
@ -39,17 +39,17 @@ body.youtube #buttonMenu{
border-bottom-left-radius: 0;
}
body.youtube #compressMenu .compress{
body.youtube .compressMenu .compress{
display: inline-block;
}
body.youtube #compressMenu .expand{
body.youtube .compressMenu .expand{
display: none;
}
body.youtube.compressedMenu #compressMenu .expand{
body.youtube.compressedMenu .compressMenu .expand{
display: inline-block;
}
body.youtube.compressedMenu #compressMenu .compress{
body.youtube.compressedMenu .compressMenu .compress{
display: none;
}

2
view/include/navbarMenuAndLogo.php
View file

@ -8,7 +8,7 @@
<?php
echo getHamburgerButton('buttonMenu', 'x', 'class="btn btn-default pull-left hamburger" data-toggle="tooltip" title="' . __("Main Menu") . '" data-placement="bottom"');
?>
<button type="button" id="compressMenu" class="btn btn-default" onclick="YPTSidebarCompressToggle();">
<button type="button" class="btn btn-default compressMenu" onclick="YPTSidebarCompressToggle();">
<i class="fa-solid fa-compress compress" data-toggle="tooltip" title="<?php echo __('Compress Menu'); ?>" data-placement="bottom"></i>
<i class="fa-solid fa-expand expand" data-toggle="tooltip" title="<?php echo __('Expand Menu'); ?>" data-placement="bottom"></i>
</button>

24
view/include/navbarSidebar.php
View file

@ -76,6 +76,16 @@ global $avideoLayout;
</li>
<?php
}
?>
<li>
<hr>
</li>
<li>
<?php
include $global['systemRootPath'] . 'plugin/Layout/darkModeSwitch.php';
?>
</li>
<?php
if (Video::videoMadeForKidsExists()) {
?>
<li>
@ -689,6 +699,20 @@ global $avideoLayout;
?>
</ul>
</div>
<!--
<div style="position: absolute; top: 55px; right:-19px;" onclick="YPTSidebarCompressToggle();">
<button class="btn btn-default btn-lg compressMenu" style="
padding: 6px 3px;
border-radius: 0 20px 20px 0;
border-left: none;
border-left-width: initial;
border-left-style: none;
">
<i class="fa-solid fa-chevron-right expand" data-toggle="tooltip" title="<?php echo __('Expand Menu'); ?>" data-placement="right"></i>
<i class="fa-solid fa-chevron-left compress" data-toggle="tooltip" title="<?php echo __('Compress Menu'); ?>" data-placement="right"></i>
</button>
</div>
-->
</div>
<script>
$(document).ready(function() {