Merge branch '2023-12-10' of https://github.com/kaonasi-biwa/Floorp i…

…nto ESR115
Floorp-Projects · Dec 18, 2023 · f2f6a94 · f2f6a94
2 parents fe8dae0 + 126793e
commit f2f6a94
Show file tree

Hide file tree

Showing 10 changed files with 11,967 additions and 10,409 deletions.
diff --git a/browser/components/newtab/content-src/components/Background/Background.jsx b/browser/components/newtab/content-src/components/Background/Background.jsx
@@ -3,7 +3,7 @@ import React, { useState } from "react";
 const imgLength = 100;
 
 export function Background(props) {
-  
+
   if(props.className == "random_image"){
     let [imgSrc,setImgSrc] = useState({
       "url":`chrome://browser/skin/newtabbg-${Math.floor(Math.random() * imgLength)}.webp`
@@ -16,23 +16,23 @@ export function Background(props) {
     return <div id="background_back" className={props.className} >
     <div id="background" style={{"--background-url": `url(${imgSrc.url})`}} />
   </div>
-  } else if(props.className == "selected_folder" && props.imageList != undefined){
+  } else if(props.className == "selected_folder" && props.pref?.backgroundPaths){
+    const imageList = props.pref.backgroundPaths
     let [fileImgSrc,setFileImgSrc] = useState({
-      "url":props.imageList.urls.length != 0 ? props.imageList.urls[Math.floor(Math.random() * props.imageList.urls.length)] : ""
+      "url":imageList.urls.length != 0 ? imageList.urls[Math.floor(Math.random() * imageList.urls.length)] : ""
     })
-    if(props.imageList.urls.length != 0){
-      if(props.imageList.urls.indexOf(fileImgSrc.url) == -1 || props.pref["floorpBackgroundPathsVal_" + fileImgSrc.url]?.data === null){
-        fileImgSrc.url = props.imageList.urls.length != 0 ? props.imageList.urls[Math.floor(Math.random() * props.imageList.urls.length)] : ""
+    if(imageList.urls.length != 0){
+      if(imageList.urls.indexOf(fileImgSrc.url) == -1 || props.pref["floorpBackgroundPathsVal_" + fileImgSrc.url]?.data === null){
+        fileImgSrc.url = imageList.urls.length != 0 ? imageList.urls[Math.floor(Math.random() * imageList.urls.length)] : ""
         setFileImgSrc({
           "url":fileImgSrc.url
         })
-        if("blobData" in fileImgSrc) delete fileImgSrc.blobData
       }
       if("data" in fileImgSrc){
         return <div id="background_back" className={props.className} >
   <div id="background" style={{"--background-url": `url(${fileImgSrc.data})`}} />
 </div>
-      }else if(props.pref["floorpBackgroundPathsVal_" + fileImgSrc.url]?.data != undefined){
+      }else if(props.pref["floorpBackgroundPathsVal_" + fileImgSrc.url]?.data){
         setImgData(props.pref["floorpBackgroundPathsVal_" + fileImgSrc.url].data,fileImgSrc.url,props.pref["floorpBackgroundPathsVal_" + fileImgSrc.url].type,setFileImgSrc)
       }else{
         props.getImg(fileImgSrc.url)
@@ -45,6 +45,34 @@ export function Background(props) {
       setFileImgSrc({"url":""})
     }
 
+  } else if(props.className == "selected_image" && props.pref.oneImageData){
+    const imgData = props.pref.oneImageData
+    let [fileImgSrc,setFileImgSrc] = useState({
+      "url":imgData.url ?? ""
+    })
+    console.log(fileImgSrc)
+    if(imgData.url){
+      if(imgData.url != fileImgSrc.url){
+        fileImgSrc.url = imgData.url
+        setFileImgSrc({
+          "url":imgData.url
+        })
+      }
+      else if(fileImgSrc.data){
+        return <div id="background_back" className={props.className} >
+  <div id="background" style={{"--background-url": `url(${fileImgSrc.data ?? ""})`}} />
+</div>
+      }else if(imgData.data){
+        setImgData(imgData.data,imgData.url,imgData.extension,setFileImgSrc)
+      }
+
+      return <div id="background_back" className={props.className} >
+  <div id="background" style={{"--background-url": `url(${fileImgSrc.data})`}} />
+</div>
+    }else if(fileImgSrc.url != ""){
+      setFileImgSrc({"url":""})
+    }
+
   } 
   return <div id="background_back" className={props.className} >
   <div id="background" />

diff --git a/browser/components/newtab/content-src/components/Background/_Background.scss b/browser/components/newtab/content-src/components/Background/_Background.scss
@@ -10,20 +10,20 @@
     z-index: -1 !important;
     animation: fadeIn 3.7s ease 0s 1 normal !important;
   }
-  
+
   @keyframes fadeIn { 
     0% {opacity: 0.1 !important} 
     100% {opacity: 0.8 !important}
   }
 
-  .not_background,.not_background~#unsplash,.gradation~#unsplash,.selected_folder~#unsplash{
+  .not_background,:is(.not_background,.gradation,.selected_folder,.selected_image)~#unsplash{
     display: none !important;
   }
 
-  .random_image,.selected_folder{
+  .random_image,.selected_folder,.selected_image{
   background-color:rgb(0,0,0);
   }
-  .random_image > #background,.selected_folder > #background{
+  :is(.random_image,.selected_folder,.selected_image ) > #background{
     background-image: var(--background-url);
   opacity: 0.8 !important;
   }

diff --git a/browser/components/newtab/content-src/components/Base/Base.jsx b/browser/components/newtab/content-src/components/Base/Base.jsx
@@ -230,14 +230,17 @@ export class BaseContent extends React.PureComponent {
           case 3:
             Background_ClassName = "selected_folder"
             break;
+            case 4:
+              Background_ClassName = "selected_image"
+              break;
         default:
           Background_ClassName = "not_background"
           break;
       }
 
     return (
       <div className={prefs["floorp.newtab.backdrop.blur.disable"] ? "" : "floorp-backdrop-blur-enable"}>
-        <Background className={Background_ClassName} imageList={prefs["backgroundPaths"]} getImg={this.getImageSend.bind(this)} pref={prefs} />
+        <Background className={Background_ClassName}  getImg={this.getImageSend.bind(this)} pref={prefs} />
         <CustomizeMenu
           onClose={this.closeCustomizationMenu}
           onOpen={this.openCustomizationMenu}

diff --git a/browser/components/newtab/css/activity-stream-linux.css b/browser/components/newtab/css/activity-stream-linux.css
@@ -534,15 +534,15 @@ main.has-snippet {
     opacity: 0.8 !important;
   }
 }
-.not_background, .not_background ~ #unsplash, .gradation ~ #unsplash, .selected_folder ~ #unsplash {
+.not_background, :is(.not_background, .gradation, .selected_folder, .selected_image) ~ #unsplash {
   display: none !important;
 }
 
-.random_image, .selected_folder {
+.random_image, .selected_folder, .selected_image {
   background-color: black;
 }
 
-.random_image > #background, .selected_folder > #background {
+:is(.random_image, .selected_folder, .selected_image) > #background {
   background-image: var(--background-url);
   opacity: 0.8 !important;
 }

diff --git a/browser/components/newtab/css/activity-stream-mac.css b/browser/components/newtab/css/activity-stream-mac.css
@@ -538,15 +538,15 @@ main.has-snippet {
     opacity: 0.8 !important;
   }
 }
-.not_background, .not_background ~ #unsplash, .gradation ~ #unsplash, .selected_folder ~ #unsplash {
+.not_background, :is(.not_background, .gradation, .selected_folder, .selected_image) ~ #unsplash {
   display: none !important;
 }
 
-.random_image, .selected_folder {
+.random_image, .selected_folder, .selected_image {
   background-color: black;
 }
 
-.random_image > #background, .selected_folder > #background {
+:is(.random_image, .selected_folder, .selected_image) > #background {
   background-image: var(--background-url);
   opacity: 0.8 !important;
 }

diff --git a/browser/components/newtab/css/activity-stream-windows.css b/browser/components/newtab/css/activity-stream-windows.css
@@ -534,15 +534,15 @@ main.has-snippet {
     opacity: 0.8 !important;
   }
 }
-.not_background, .not_background ~ #unsplash, .gradation ~ #unsplash, .selected_folder ~ #unsplash {
+.not_background, :is(.not_background, .gradation, .selected_folder, .selected_image) ~ #unsplash {
   display: none !important;
 }
 
-.random_image, .selected_folder {
+.random_image, .selected_folder, .selected_image {
   background-color: black;
 }
 
-.random_image > #background, .selected_folder > #background {
+:is(.random_image, .selected_folder, .selected_image) > #background {
   background-image: var(--background-url);
   opacity: 0.8 !important;
 }