ErikrafT Drop
v1.11.4
diff --git a/public/scripts/ui-main.js b/public/scripts/ui-main.js
index 1af7c37..e9d835f 100644
--- a/public/scripts/ui-main.js
+++ b/public/scripts/ui-main.js
@@ -199,20 +199,69 @@ class FooterUI {
this.$footer = $$('footer');
this.$displayName = $('display-name');
this.$discoveryWrapper = $$('footer .discovery-wrapper');
+ this.$profilePhotoInput = $('profile-photo-upload');
+ this.$deviceAvatarsContainer = $('device-avatars-container');
this.$displayName.addEventListener('keydown', e => this._onKeyDownDisplayName(e));
this.$displayName.addEventListener('focus', e => this._onFocusDisplayName(e));
this.$displayName.addEventListener('blur', e => this._onBlurDisplayName(e));
+ if (this.$profilePhotoInput) {
+ this.$profilePhotoInput.addEventListener('change', e => this._onProfilePhotoChange(e));
+ }
+
Events.on('display-name', e => this._onDisplayName(e.detail.displayName));
Events.on('self-display-name-changed', e => this._insertDisplayName(e.detail));
Events.on('evaluate-footer-badges', _ => this._evaluateFooterBadges());
+
+ // Listen for profile photo updates from other devices
+ Events.on('profile-photo-updated', e => this._onProfilePhotoUpdated(e.detail));
}
async showLoading() {
this.$displayName.setAttribute('placeholder', this.$displayName.dataset.placeholder);
}
+ _onProfilePhotoChange(event) {
+ const file = event.target.files[0];
+ if (!file) return;
+
+ const reader = new FileReader();
+ reader.onload = () => {
+ const base64Image = reader.result;
+ // Emit the base64 image via socket or event
+ Events.fire('broadcast-send', { type: 'profile-photo-updated', detail: base64Image });
+ // Update local UI
+ this._updateLocalProfilePhoto(base64Image);
+ };
+ reader.readAsDataURL(file);
+ }
+
+ _updateLocalProfilePhoto(base64Image) {
+ if (!this.$deviceAvatarsContainer) return;
+
+ let localAvatar = this.$deviceAvatarsContainer.querySelector('.device-avatar.local');
+ if (!localAvatar) {
+ localAvatar = document.createElement('div');
+ localAvatar.classList.add('device-avatar', 'local');
+ this.$deviceAvatarsContainer.appendChild(localAvatar);
+ }
+ localAvatar.style.backgroundImage = `url(${base64Image})`;
+ }
+
+ _onProfilePhotoUpdated(base64Image) {
+ if (!this.$deviceAvatarsContainer) return;
+
+ // For simplicity, update or add a generic avatar for other devices
+ let otherAvatar = this.$deviceAvatarsContainer.querySelector('.device-avatar.remote');
+ if (!otherAvatar) {
+ otherAvatar = document.createElement('div');
+ otherAvatar.classList.add('device-avatar', 'remote');
+ this.$deviceAvatarsContainer.appendChild(otherAvatar);
+ }
+ otherAvatar.style.backgroundImage = `url(${base64Image})`;
+ }
+
async fadeIn() {
this.$footer.classList.remove('opacity-0');
}
diff --git a/public/styles/styles-main.css b/public/styles/styles-main.css
index 5f3f75a..0d692ee 100644
--- a/public/styles/styles-main.css
+++ b/public/styles/styles-main.css
@@ -261,362 +261,6 @@ body.dark-theme .logo-drop {
color: #fff;
}
-@font-face {
- font-family: 'ErikrafT-Icons';
- src: url('fonts/ErikrafT-Icons.eot?krj6');
- src: url('fonts/ErikrafT-Icons.eot?krj6#iefix') format('embedded-opentype'),
- url('fonts/ErikrafT-Icons.ttf?krj6') format('truetype'),
- url('fonts/ErikrafT-Icons.woff?krj6') format('woff'),
- url('fonts/ErikrafT-Icons.svg?krj6#ErikrafT-Icons') format('svg');
- font-weight: normal;
- font-style: normal;
- font-display: block;
-}
-
-i {
- /* use !important to prevent issues with browser extensions that change fonts */
- font-family: 'ErikrafT-Icons' !important;
- speak: never;
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-transform: none;
- line-height: 1;
-
- /* Better Font Rendering =========== */
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-xiaomi .path1:before {
- content: "\e900";
- color: rgb(255, 105, 0);
-}
-.icon-xiaomi .path2:before {
- content: "\e901";
- margin-left: -1em;
- color: rgb(255, 255, 255);
-}
-.icon-google .path1:before {
- content: "\e902";
- color: rgb(66, 133, 244);
-}
-.icon-google .path2:before {
- content: "\e903";
- margin-left: -1em;
- color: rgb(52, 168, 83);
-}
-.icon-google .path3:before {
- content: "\e904";
- margin-left: -1em;
- color: rgb(251, 188, 5);
-}
-.icon-google .path4:before {
- content: "\e905";
- margin-left: -1em;
- color: rgb(235, 67, 53);
-}
-.icon-microsoft .path1:before {
- content: "\e906";
- color: rgb(243, 83, 37);
-}
-.icon-microsoft .path2:before {
- content: "\e907";
- margin-left: -1em;
- color: rgb(129, 188, 6);
-}
-.icon-microsoft .path3:before {
- content: "\e908";
- margin-left: -1em;
- color: rgb(5, 166, 240);
-}
-.icon-microsoft .path4:before {
- content: "\e909";
- margin-left: -1em;
- color: rgb(255, 186, 8);
-}
-.icon-limewire .path1:before {
- content: "\e90a";
- color: rgb(0, 147, 75);
-}
-.icon-limewire .path2:before {
- content: "\e90b";
- margin-left: -1em;
- color: rgb(34, 213, 17);
-}
-.icon-limewire .path3:before {
- content: "\e90c";
- margin-left: -1em;
- color: rgb(190, 240, 0);
-}
-.icon-limewire .path4:before {
- content: "\e90d";
- margin-left: -1em;
- color: rgb(0, 147, 75);
-}
-.icon-limewire .path5:before {
- content: "\e90e";
- margin-left: -1em;
- color: rgb(34, 213, 17);
-}
-.icon-limewire .path6:before {
- content: "\e90f";
- margin-left: -1em;
- color: rgb(190, 240, 0);
-}
-.icon-limewire .path7:before {
- content: "\e910";
- margin-left: -1em;
- color: rgb(0, 147, 75);
-}
-.icon-limewire .path8:before {
- content: "\e911";
- margin-left: -1em;
- color: rgb(34, 213, 17);
-}
-.icon-limewire .path9:before {
- content: "\e912";
- margin-left: -1em;
- color: rgb(190, 240, 0);
-}
-.icon-limewire .path10:before {
- content: "\e913";
- margin-left: -1em;
- color: rgb(0, 147, 75);
-}
-.icon-limewire .path11:before {
- content: "\e914";
- margin-left: -1em;
- color: rgb(34, 213, 17);
-}
-.icon-limewire .path12:before {
- content: "\e915";
- margin-left: -1em;
- color: rgb(190, 240, 0);
-}
-.icon-limewire .path13:before {
- content: "\e916";
- margin-left: -1em;
- color: rgb(0, 147, 75);
-}
-.icon-limewire .path14:before {
- content: "\e917";
- margin-left: -1em;
- color: rgb(34, 213, 17);
-}
-.icon-limewire .path15:before {
- content: "\e918";
- margin-left: -1em;
- color: rgb(190, 240, 0);
-}
-.icon-limewire .path16:before {
- content: "\e919";
- margin-left: -1em;
- color: rgb(0, 147, 75);
-}
-.icon-limewire .path17:before {
- content: "\e91a";
- margin-left: -1em;
- color: rgb(34, 213, 17);
-}
-.icon-limewire .path18:before {
- content: "\e91b";
- margin-left: -1em;
- color: rgb(190, 240, 0);
-}
-.icon-limewire .path19:before {
- content: "\e91c";
- margin-left: -1em;
- color: rgb(0, 147, 75);
-}
-.icon-limewire .path20:before {
- content: "\e91d";
- margin-left: -1em;
- color: rgb(34, 213, 17);
-}
-.icon-limewire .path21:before {
- content: "\e91e";
- margin-left: -1em;
- color: rgb(190, 240, 0);
-}
-.icon-limewire .path22:before {
- content: "\e91f";
- margin-left: -1em;
- color: rgb(0, 147, 75);
-}
-.icon-limewire .path23:before {
- content: "\e920";
- margin-left: -1em;
- color: rgb(34, 213, 17);
-}
-.icon-limewire .path24:before {
- content: "\e921";
- margin-left: -1em;
- color: rgb(190, 240, 0);
-}
-.icon-html .path1:before {
- content: "\e922";
- color: rgb(228, 77, 38);
-}
-.icon-html .path2:before {
- content: "\e923";
- margin-left: -1em;
- color: rgb(241, 101, 41);
-}
-.icon-html .path3:before {
- content: "\e924";
- margin-left: -1em;
- color: rgb(235, 235, 235);
-}
-.icon-html .path4:before {
- content: "\e925";
- margin-left: -1em;
- color: rgb(255, 255, 255);
-}
-.icon-css .path1:before {
- content: "\e926";
- color: rgb(21, 114, 182);
-}
-.icon-css .path2:before {
- content: "\e927";
- margin-left: -1em;
- color: rgb(51, 169, 220);
-}
-.icon-css .path3:before {
- content: "\e928";
- margin-left: -1em;
- color: rgb(255, 255, 255);
-}
-.icon-css .path4:before {
- content: "\e929";
- margin-left: -1em;
- color: rgb(235, 235, 235);
-}
-.icon-css .path5:before {
- content: "\e92a";
- margin-left: -1em;
- color: rgb(255, 255, 255);
-}
-.icon-css .path6:before {
- content: "\e92b";
- margin-left: -1em;
- color: rgb(235, 235, 235);
-}
-.icon-js .path1:before {
- content: "\e92c";
- color: rgb(247, 223, 30);
-}
-.icon-js .path2:before {
- content: "\e92d";
- margin-left: -1em;
- color: rgb(0, 0, 0);
-}
-.icon-typescript .path1:before {
- content: "\e92e";
- color: rgb(49, 120, 198);
-}
-.icon-typescript .path2:before {
- content: "\e92f";
- margin-left: -1em;
- color: rgb(255, 255, 255);
-}
-.icon-php .path1:before {
- content: "\e930";
- color: rgb(0, 0, 0);
-}
-.icon-php .path2:before {
- content: "\e931";
- margin-left: -1em;
- color: rgb(119, 123, 179);
-}
-.icon-php .path3:before {
- content: "\e932";
- margin-left: -1em;
- color: rgb(0, 0, 0);
-}
-.icon-php .path4:before {
- content: "\e933";
- margin-left: -1em;
- color: rgb(255, 255, 255);
-}
-.icon-php .path5:before {
- content: "\e934";
- margin-left: -1em;
- color: rgb(0, 0, 0);
-}
-.icon-php .path6:before {
- content: "\e935";
- margin-left: -1em;
- color: rgb(255, 255, 255);
-}
-.icon-php .path7:before {
- content: "\e936";
- margin-left: -1em;
- color: rgb(0, 0, 0);
-}
-.icon-php .path8:before {
- content: "\e937";
- margin-left: -1em;
- color: rgb(255, 255, 255);
-}
-.icon-trash:before {
- content: "\e938";
- color: #f23f42;
-}
-.icon-alert .path1:before {
- content: "\e939";
- color: rgb(253, 214, 99);
-}
-.icon-alert .path2:before {
- content: "\e93a";
- margin-left: -1em;
- color: rgb(32, 33, 36);
-}
-.icon-google-mic .path1:before {
- content: "\e93b";
- color: rgb(66, 133, 244);
-}
-.icon-google-mic .path2:before {
- content: "\e93c";
- margin-left: -1em;
- color: rgb(52, 168, 83);
-}
-.icon-google-mic .path3:before {
- content: "\e93d";
- margin-left: -1em;
- color: rgb(251, 188, 4);
-}
-.icon-google-mic .path4:before {
- content: "\e93e";
- margin-left: -1em;
- color: rgb(234, 67, 53);
-}
-.icon-google-lens .path1:before {
- content: "\e93f";
- color: rgb(52, 168, 83);
-}
-.icon-google-lens .path2:before {
- content: "\e940";
- margin-left: -1em;
- color: rgb(66, 133, 244);
-}
-.icon-google-lens .path3:before {
- content: "\e941";
- margin-left: -1em;
- color: rgb(234, 67, 53);
-}
-.icon-google-lens .path4:before {
- content: "\e942";
- margin-left: -1em;
- color: rgb(251, 188, 4);
-}
-.icon-google-lens .path5:before {
- content: "\e943";
- margin-left: -1em;
- color: rgb(66, 133, 244);
-}
-
-
@font-face {
font-family: "Open Sans";
src: url('../fonts/OpenSans/static/OpenSans-Medium.ttf') format('truetype');
@@ -1486,3 +1130,79 @@ See note here: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select */
user-select: text;
}
+/* Styles for device avatars container */
+#device-avatars-container {
+ display: flex;
+ gap: 8px;
+ margin-top: 8px;
+ flex-wrap: wrap;
+}
+
+/* Device avatar style */
+.device-avatar {
+ width: 64px;
+ height: 64px;
+ border-radius: 50%;
+ background-color: #ccc;
+ background-size: cover;
+ background-position: center;
+ position: relative;
+ border: 2px solid transparent;
+ box-sizing: border-box;
+}
+
+/* Highlight local device avatar */
+.device-avatar.local {
+ border-color: #007bff; /* blue highlight */
+ box-shadow: 0 0 8px #007bff88;
+}
+
+/* Overlay device icon on avatar */
+.device-avatar::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 24px;
+ height: 24px;
+ background-image: url('../images/icon-pc-blue.png'); /* example icon path */
+ background-size: contain;
+ background-repeat: no-repeat;
+ border-radius: 50%;
+ border: 2px solid white;
+ box-sizing: border-box;
+ background-color: #007bff;
+}
+
+/* Different overlay for remote devices */
+.device-avatar.remote::after {
+ background-color: #6c757d; /* gray overlay for remote */
+ background-image: url('../images/icon-pc-gray.png'); /* example icon path */
+}
+
+/* Hide the default file input */
+#profile-photo-upload {
+ display: none;
+}
+
+/* Style for the upload button */
+#profile-photo-upload-button {
+ display: inline-block;
+ margin-top: 8px;
+ padding: 6px 12px;
+ background-color: #007bff;
+ color: white;
+ font-size: 14px;
+ border-radius: 4px;
+ cursor: pointer;
+ -webkit-user-select: none;
+ user-select: none;
+ text-align: center;
+ width: fit-content;
+ border: none;
+ transition: background-color 0.3s ease;
+}
+
+#profile-photo-upload-button:hover {
+ background-color: #0056b3;
+}
\ No newline at end of file