Skip to content

Commit

Permalink
v0.2
Browse files Browse the repository at this point in the history
  • Loading branch information
rztprog authored May 12, 2024
1 parent abd5b36 commit 35bec31
Show file tree
Hide file tree
Showing 7 changed files with 336 additions and 24 deletions.
9 changes: 8 additions & 1 deletion _locales/en/messages.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,12 @@
"extensionName": {"message": "Broll Youtube Thumbnail"},
"extensionDescription": {"message": "Custom YouTube Thumbnail Editor"},

"menuItemDownloadThumbnail": {"message": "Download the thumbnail via broll.gabin.app"}
"menuItemDownloadThumbnail": {"message": "Download the thumbnail via broll.gabin.app"},

"cfg_settings_text": {"message": "Settings"},
"cfg_display_duration": {"message": "Display duration"},
"cfg_channel_logo": {"message": "Display channel logo"},
"cfg_channel_name": {"message": "Display channel name"},
"cfg_views": {"message": "Display views"},
"cfg_publication": {"message": "Display publication date"}
}
9 changes: 8 additions & 1 deletion _locales/fr/messages.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,12 @@
"extensionName": {"message": "Broll Vignette Youtube"},
"extensionDescription": {"message": "Éditeur de vignettes YouTube personnalisé"},

"menuItemDownloadThumbnail": {"message": "Télécharger la vignette via broll.gabin.app"}
"menuItemDownloadThumbnail": {"message": "Télécharger la vignette via broll.gabin.app"},

"cfg_settings_text": {"message": "Paramètres"},
"cfg_display_duration": {"message": "Afficher la durée"},
"cfg_channel_logo": {"message": "Afficher le logo de la chaîne"},
"cfg_channel_name": {"message": "Afficher le nom de la chaîne"},
"cfg_views": {"message": "Afficher les vues"},
"cfg_publication": {"message": "Afficher la date de publication"}
}
12 changes: 11 additions & 1 deletion manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"manifest_version": 2,
"name": "__MSG_extensionName__",
"description": "__MSG_extensionDescription__",
"version": "0.1",
"version": "0.2",
"default_locale": "en",
"author": "rztprog",

Expand All @@ -17,6 +17,7 @@
"contextMenus",
"clipboardWrite",
"tabs",
"storage",
"https://broll.gabin.app/"
],

Expand All @@ -29,5 +30,14 @@
"scripts": [
"src/broll.js"
]
},

"browser_action": {
"default_icon":{
"48": "icons/broll48.png",
"96": "icons/broll96.png"
},
"default_title": "Broll Youtube Thumbnail",
"default_popup": "./src/popup.html"
}
}
75 changes: 74 additions & 1 deletion src/broll.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,78 @@
'use strict';

let showDuration = true
let showChannelLogo = true
let showChannelTitle = true
let showViews = true
let showPublished = true

let fontSize = 1
let spacing = 1
let borderRadius = 1

chrome.storage.local.get(null, function (value) {
loadVariables(value);
})

chrome.storage.onChanged.addListener(function (changes) {
const updatedElement = Object.keys(changes)[0];
switch (updatedElement) {
case "showDuration":
showDuration = changes.showDuration.newValue;
// Si on est sur broll.gabin.app changer la checkbox
brollModifier(0);
break;
case "showChannelLogo":
showChannelLogo = changes.showChannelLogo.newValue;
brollModifier(1);
break;
case "showChannelTitle":
showChannelTitle = changes.showChannelTitle.newValue;
brollModifier(2);
break;
case "showViews":
showViews = changes.showViews.newValue;
brollModifier(3);
break;
case "showPublished":
showPublished = changes.showPublished.newValue;
brollModifier(4);
break;
}
})

const loadVariables = (value) => {
showDuration = value.showDuration === undefined ? showDuration : value.showDuration;
showChannelLogo = value.showChannelLogo === undefined ? showChannelLogo : value.showChannelLogo;
showChannelTitle = value.showChannelTitle === undefined ? showChannelTitle : value.showChannelTitle;
showViews = value.showViews === undefined ? showViews : value.showViews;
showPublished = value.showPublished === undefined ? showPublished : value.showPublished;

chrome.storage.local.set({
showDuration,
showChannelLogo,
showChannelTitle,
showViews,
showPublished
});
}

const brollModifier = (paramsOrder) => {
browser.tabs.query({}).then((tabs) => {
for (let tab of tabs) {
if (tab.url && tab.url.includes("broll.gabin.app")) {
browser.tabs.executeScript(tab.id, {
code: `document.querySelectorAll(".items-start button")[${paramsOrder}].click();`
}).then(() => {
console.log("Action executed in the tab");
}).catch((error) => {
console.error("Error executing action:", error);
});
}
}
});
}

browser.contextMenus.create({
id: "downloadThumbnail",
title: browser.i18n.getMessage("menuItemDownloadThumbnail"),
Expand All @@ -14,7 +87,7 @@ browser.contextMenus.onClicked.addListener((info, tab) => {
navigator.clipboard.writeText(videoUrl)
.then(() => {
browser.tabs.create({
url: `https://broll.gabin.app/?videoUrl=${videoUrl}&theme%5Bcard%5D%5BfontSize%5D=1&theme%5Bcard%5D%5Bforeground%5D=%230f0f0f&theme%5Bcard%5D%5Bbackground%5D=%23ffffff&theme%5Bcard%5D%5Bspacing%5D=1&theme%5Bcard%5D%5BborderRadius%5D=1&theme%5Bduration%5D%5Bforeground%5D=%23ffffff&theme%5Bduration%5D%5Bbackground%5D=%23000000cc&theme%5BprogressBar%5D%5Bforeground%5D=%23ff0000&theme%5BprogressBar%5D%5Bbackground%5D=%23c8c8c899&theme%5Boptions%5D%5BshowDuration%5D=true&theme%5Boptions%5D%5BshowViews%5D=true&theme%5Boptions%5D%5BshowPublishedAt%5D=true&theme%5Boptions%5D%5BshowChannelThumbnail%5D=true&theme%5Boptions%5D%5BshowChannelTitle%5D=true`
url: `https://broll.gabin.app/?videoUrl=${videoUrl}&theme%5Bcard%5D%5BfontSize%5D=${fontSize}&theme%5Bcard%5D%5Bforeground%5D=${'%230f0f0f'}&theme%5Bcard%5D%5Bbackground%5D=%23ffffff&theme%5Bcard%5D%5Bspacing%5D=${spacing}&theme%5Bcard%5D%5BborderRadius%5D=${borderRadius}&theme%5Bduration%5D%5Bforeground%5D=%23ffffff&theme%5Bduration%5D%5Bbackground%5D=%23000000cc&theme%5BprogressBar%5D%5Bforeground%5D=%23ff0000&theme%5BprogressBar%5D%5Bbackground%5D=%23c8c8c899&theme%5Boptions%5D%5BshowDuration%5D=${showDuration}&theme%5Boptions%5D%5BshowViews%5D=${showViews}&theme%5Boptions%5D%5BshowPublishedAt%5D=${showPublished}&theme%5Boptions%5D%5BshowChannelThumbnail%5D=${showChannelLogo}&theme%5Boptions%5D%5BshowChannelTitle%5D=${showChannelTitle}`
}).then((tab) => {
/* In Progress
Expand Down
109 changes: 108 additions & 1 deletion src/popup.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,113 @@
* {
margin: 0;
padding: 0;
box-sizing: borderbox;
box-sizing: borderbox;
font-family: 'Outfit', 'Tahoma', 'Helvetica', 'Arial', sans-serif;
}

body {
overflow: hidden;
background-color: #fff;
border-radius: 8px;
padding: 8px;
max-width: 18rem;
min-width: 16rem;
}

header {
display: flex;
flex-direction: column;
align-items: center;
}

a {
text-decoration: none;
color: black;
}

footer {
display: flex;
justify-content: space-between;
margin-top: 5px;
}

h3 {
color: grey;
font-size: 14px;
font-weight: 400;
}

.github:hover {
color: rgb(21, 45, 60);
}

.rating:hover {
color: rgb(235, 235, 0);
}

.rating:hover::before,
.github:hover::before{
position: absolute;
font-family: "Font Awesome 6 Free";
font-weight: bold;
font-size: 16px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.rating:hover::before{
content: "\f5c0";
}

.github:hover::before{
color: transparent;
content: "\f111";
}

.icon {
width: fit-content;
margin: -25px;
}

.labels {
display: flex;
flex-direction: column;
}

.setting{
user-select: none;
display: flex;
align-items: center;
}

.setting span{
margin-left: 6px;
margin-right: 6px;
}

.settings,
.features{
padding: 12px;
border-radius: 4px;
border: 1px solid #bbb;
transition: border 0.4s ease-in-out;
}

.settings:hover,
.features:hover{
border: 1px solid #ff0000;
transition: border 0.4s ease-in-out;
}

.extVersion{
font-family: Arial;
font-size: 10px;
}

.titlePopup {
font-size: 24px;
font-weight: bold;
}

.notAvailable{
cursor: not-allowed;
}
103 changes: 84 additions & 19 deletions src/popup.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,95 @@
<html>
<head>
<meta charset="utf-8">
<!-- <link href="popup.css" rel="stylesheet"> -->
<link href="popup.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>

<img class="icon" src="../icons/broll128.png" title="Broll Youtube Thumbnail icon">
<h2 id="titleName">Broll Youtube Thumbnail</h2>
<h3 id="titleDescription">Custom YouTube Thumbnail Editor</h3>
</header>

<!-- Mettre les différents paramètres de l'url dans broll.js avec un chrome.storage -->

-Durée
-Logo
-Nom
-Vues
-Date
-Progression

-Taille texte
-Espacements
-Arrondis


<!-- Panel -->
<fieldset class="settings">
<legend id="settings_text">
Settings
</legend>
<div class="labels">
<label class="setting" title="Display duration">
<input type="checkbox" id="displaydurationInput">
<span id="display_duration_text">
Display duration
</span>
</label>
<label class="setting" title="Display channel logo">
<input type="checkbox" id="displaychannellogoInput">
<span id="display_channel_logo_text">
Display channel logo
</span>
</label>
<label class="setting" title="Display channel name">
<input type="checkbox" id="displaychannelnameInput">
<span id="display_channel_name_text">
Display channel name
</span>
</label>
<label class="setting" title="Display views">
<input type="checkbox" id="displayviewsInput">
<span id="display_views_text">
Display views
</span>
</label>
<label class="setting" title="Display publication date">
<input type="checkbox" id="displaypublicationdateInput">
<span id="display_publication_date_text">
Display publication date
</span>
</label>
</div>
</fieldset>
<fieldset class="features">
<legend id="features_text">
Features
</legend>
<div class="labels">
<label class="setting notAvailable" title="Autodownload (Not yet available)">
<input type="checkbox" id="autodownloadInput" disabled>
<span id="autodownload_text">
Auto-download
</span>
</label>
</div>
<div class="labels">
<label class="setting notAvailable" title="Dontopen (Not yet available)">
<input type="checkbox" id="DontopenInput" disabled>
<span id="Dontopen_text">
Dont open broll.gabin.app
</span>
</label>
</div>
</fieldset>
<!--
-Taille texte
-Espacements
-Arrondis
-->
<footer>

<!-- Links -->
<span>
<a href="https://github.com/rztprog/broll-youtube-thumbnail" title="Help me to improve Broll Youtube Thumbnail" class="github">
<i class="fa-brands fa-github" title="Github"></i>
</a>
<a href="https://addons.mozilla.org/fr/firefox/addon/broll-youtube-thumbnail/reviews/" title="Leave me stars and feedback !" class="rating">
<i class="fa-solid fa-star-half-stroke" title="Rating"></i>
</a>
</span>
<!-- Version -->
<span>
<i class="fa-solid fa-code-compare"></i>
<span class="extVersion"></span>
</span>
</footer>
<!-- <script src="popup.js"></script> -->
<script src="popup.js"></script>
</body>
</html>
Loading

0 comments on commit 35bec31

Please sign in to comment.