audio component ui

js/conversation_controller.js

@@ -62,7 +62,7 @@
   window.getConversationByKey = key => {
     // Key is pubkey or public chat name
     const conversation =
-      conversations.models.filter(conv => conv.id === key)[0] || null;
+      conversations.models.find(conv => conv.id === key);
 
     return conversation;
   };

js/views/conversation_view.js

@@ -1930,7 +1930,10 @@
         toastOptions.title = i18n('youLeftTheGroup');
         toastOptions.id = 'youLeftTheGroup';
       }
-      if (message.length > window.libsession.Constants.CONVERSATION.MAX_MESSAGE_BODY_LENGTH) {
+      if (
+        message.length >
+        window.libsession.Constants.CONVERSATION.MAX_MESSAGE_BODY_LENGTH
+      ) {
         toastOptions.title = i18n('messageBodyTooLong');
         toastOptions.id = 'messageBodyTooLong';
       }

package.json

@@ -122,6 +122,7 @@
     "tar": "4.4.8",
     "tmp": "0.0.33",
     "to-arraybuffer": "1.0.1",
+    "typings-for-css-modules-loader": "^1.7.0",
     "underscore": "1.9.0",
     "uuid": "3.3.2"
   },

stylesheets/_session_conversation.scss

@@ -176,7 +176,7 @@ $composition-container-height: 60px;
   letter-spacing: 0.03em;
   margin-top: 3px;
   margin-bottom: 3px;
-    
+
   .react-contextmenu-wrapper {
     display: flex;
     align-items: start;
@@ -415,57 +415,48 @@ $composition-container-height: 60px;
   }
 }
 
-
+// box-sizing: border-box;
-
+//     position: absolute;
-
+//     z-index: 3;
-
+//     width: 4px;
-
+//     height: 5px;
-
+//     margin-left: 0px;
-
+//     top: 0px;
-
+//     background: #00f782;
-
+//     border-radius: 50px;
-
-
-
-
 
 /* ************ */
 /* AUDIO PLAYER */
 /* ************ */
 $rhap_theme-color: #212121 !default;
-$rhap_background-color: rgba(0,0,0,0) !default;
+$rhap_background-color: rgba(0, 0, 0, 0) !default;
 $rhap_bar-color: #232323 !default;
-$rhap_time-color: #DDDDDD !default;
+$rhap_time-color: #dddddd !default;
 $rhap_font-family: inherit !default;
 
-.rhap_container, .rhap_container button, .rhap_progress-container {
+.rhap_container,
+.rhap_container button,
+.rhap_progress-container {
   outline: none;
 }
 
+.rhap_progress-container {
+  margin: 0 0 0 calc(10px + 1%);
+}
+
 .rhap_container {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  line-height: 1;
-  font-family: $rhap_font-family;
   min-width: 220px;
-  padding: 10px 0px;
+  padding: 0px;
-
+  background-color: transparent;
-  &:focus:not(:focus-visible) {
+  box-shadow: none;
-    outline: 0;
-  }
-
-  svg {
-    vertical-align: initial; // overwrite Bootstrap default
-  }
 }
 
-.rhap_current-time {
+.rhap_total-time {
   display: none;
 }
 
-.rhap_total-time{
+.rhap_current-time {
-  margin-left: 10px;
+  margin-right: 5px;
 }
 
 .rhap_play-pause-button {
@@ -478,80 +469,15 @@ $rhap_font-family: inherit !default;
   display: none;
 }
 
-.rhap_volume-container div[role="progressbar"] {
+.rhap_volume-container div[role='progressbar'] {
-   display: none;
+  display: none;
-}
-
-.rhap_header {
-  margin-bottom: 10px;
-}
-
-.rhap_footer {
-  margin-top: 5px;
-}
-
-.rhap_main {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-}
-
-.rhap_stacked {
-  .rhap_controls-section {
-    margin-top: 8px;
-  }
-}
-
-.rhap_horizontal {
-  flex-direction: row;
-
-  .rhap_controls-section {
-    margin-left: 8px;
-  }
-}
-
-.rhap_horizontal-reverse {
-  flex-direction: row-reverse;
-
-  .rhap_controls-section {
-    margin-right: 8px;
-  }
-}
-
-.rhap_stacked-reverse {
-  flex-direction: column-reverse;
-
-  .rhap_controls-section {
-    margin-bottom: 8px;
-  }
-}
-
-.rhap_progress-section {
-  display: flex;
-  flex: 3 1 auto;
-  align-items: center;
-}
-
-.rhap_progress-container {
-  display: flex;
-  align-items: center;
-  height: 20px;
-  flex: 1 0 auto;
-  align-self: center;
-  margin: 0 calc(10px + 1%);
-  cursor: pointer;
-  -webkit-user-select: none; 
-
-  &:focus:not(:focus-visible) {
-    outline: 0;
-  }
 }
 
 .rhap_time {
   color: $rhap_time-color;
   font-size: 12px;
   user-select: none;
-  -webkit-user-select: none; 
+  -webkit-user-select: none;
 }
 
 .rhap_progress-bar {
@@ -565,15 +491,7 @@ $rhap_font-family: inherit !default;
 }
 
 .rhap_progress-filled {
-  height: 100%;
+  background-color: #00f782;
-  position: absolute;
-  z-index: 2;
-  background-color: $rhap_theme-color;
-  border-radius: 2px;
-}
-
-.rhap_progress-bar-show-download {
-  background-color: rgba($rhap_bar-color, 0.5);
 }
 
 .rhap_download-progress {
@@ -585,16 +503,15 @@ $rhap_font-family: inherit !default;
 }
 
 .rhap_progress-indicator {
-  box-sizing: border-box;
+  display: none;
-  position: absolute;
+  // z-index: 3;
-  z-index: 3;
+  // width: 10px;
-  width: 20px;
+  // height: 5px;
-  height: 20px;
+  // margin-left: -5px;
-  margin-left: -10px;
+  // top: 0px;
-  top: -8px;
+  // background: $session-color-green;
-  background: $session-color-green;
+  // box-shadow: none;
-  border-radius: 50px;
+  // box-shadow: rgba($rhap_theme-color, .5) 0 0 5px;
-  box-shadow: rgba($rhap_theme-color, .5) 0 0 5px;
 }
 
 .rhap_controls-section {
@@ -604,122 +521,26 @@ $rhap_font-family: inherit !default;
 }
 
 .rhap_additional-controls {
-  // display: flex;
   display: none;
-  flex: 1 0 auto;
-  align-items: center;
 }
 
-.rhap_repeat-button {
+.rhap_play-pause-button {
-  font-size: 26px;
+  width: unset;
-  width: 26px;
+  height: unset;
-  height: 26px;
-  color: $rhap_theme-color;
-  margin-right: 6px;
-}
-
-.rhap_main-controls {
-  flex: 0 1 auto;
-  display: flex;
-  align-items: center;
-}
-
-.rhap_main-controls-button {
-  margin: 0 3px;
-  color: $rhap_theme-color;
-  font-size: 35px;
-  width: 25px;
-  display: flex;
-  justify-content: start;
-}
-
-.rhap_volume-controls {
-  display: flex;
-  flex: 1 0 auto;
-  align-items: center;
 }
 
-.rhap_volume-button { 
+.rhap_controls-section {
-  display: flex;
+  flex: unset;
-  align-items: center;
+  justify-content: flex-start;
-  justify-content: center;
 }
 
 .rhap_volume-button {
-  flex: 0 0 26px;
   font-size: 20px;
-  color: #FFFFFF;
+  width: 20px;
-}
+  height: 20px;
-
+  margin-right: 0px;
-.rhap_volume-container {
-  display: flex;
-  align-items: center;
-  flex: 0 1 100px;
-  -webkit-user-select: none; 
-}
-
-.rhap_volume-bar-area {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 14px;
-  cursor: pointer;
-
-  &:focus:not(:focus-visible) {
-    outline: 0;
-  }
-}
-
-.rhap_volume-bar {
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  height: 4px;
-  background: $rhap_bar-color;
-  border-radius: 2px;
-}
-
-.rhap_volume-indicator {
-  box-sizing: border-box;
-  position: absolute;
-  width: 12px;
-  height: 12px;
-  margin-left: -6px;
-  left: 0;
-  top: -4px;
-  background: $rhap_theme-color;
-  opacity: 0.9;
-  border-radius: 50px;
-  box-shadow: rgba($rhap_theme-color, .5) 0 0 3px;
-  cursor: pointer;
-
-  &:hover {
-    opacity: .9;
-  }
-}
-
-/* Utils */
-.rhap_button-clear {
-  background-color: transparent;
-  border: none;
-  padding: 0;
-  overflow: hidden;
-  cursor: pointer;
-
-  &:hover {
-    opacity: .9;
-    transition-duration: .2s;
-  }
-
-  &:active {
-    opacity: .95;
-  }
-
-  &:focus:not(:focus-visible) {
-    outline: 0;
-  }
 }
 
 /* **************** */
 /* END AUDIO PLAYER */
-/* **************** */
+/* **************** */

stylesheets/_theme_dark.scss

@@ -1646,7 +1646,7 @@ body.dark-theme {
 
   .react-contextmenu-item.react-contextmenu-submenu
     > .react-contextmenu-item:after {
-    content: "⯈";
+    content: '⯈';
     color: $color-dark-05;
   }
 

stylesheets/manifest.scss

@@ -1,3 +1,7 @@
+// Modules
+@import 'node_modules/emoji-mart/css/emoji-mart.css';
+@import 'node_modules/react-h5-audio-player/lib/styles.css';
+
 // Global Settings, Variables, and Mixins
 @import 'session_constants';
 @import 'variables';

ts/components/conversation/Message.tsx

@@ -430,15 +430,27 @@ export class Message extends React.PureComponent<Props, State> {
             <source src={firstAttachment.url} />
           </audio> */}
           <H5AudioPlayer
-              src={firstAttachment.url}
+            src={firstAttachment.url}
-              layout="horizontal-reverse"
+            layout="horizontal-reverse"
-              showSkipControls={false}
+            showSkipControls={false}
-              showJumpControls={false}
+            showJumpControls={false}
-              showDownloadProgress={false}
+            showDownloadProgress={false}
-              customIcons={{
+            customIcons={{
-                play: <SessionIcon iconType={SessionIconType.Play} iconSize={SessionIconSize.Small}/>,
+              play: (
-                pause: <SessionIcon iconType={SessionIconType.Pause} iconSize={SessionIconSize.Small}/>,
+                <SessionIcon
-              }}
+                  iconType={SessionIconType.Play}
+                  iconSize={SessionIconSize.Small}
+                  iconColor="#868686"
+                />
+              ),
+              pause: (
+                <SessionIcon
+                  iconType={SessionIconType.Pause}
+                  iconSize={SessionIconSize.Small}
+                  iconColor="#868686"
+                />
+              ),
+            }}
           />
         </div>
       );

ts/components/session/conversation/SessionConversationManager.tsx

@@ -14,7 +14,7 @@ export async function getMessages(
   unreadCount: number,
   onGotMessages?: any,
   numMessages?: number,
-  fetchInterval = Constants.CONVERSATION.MESSAGE_FETCH_INTERVAL,
+  fetchInterval = Constants.CONVERSATION.MESSAGE_FETCH_INTERVAL
 ) {
   const timestamp = getTimestamp();
 
@@ -34,7 +34,8 @@ export async function getMessages(
   }
 
   let msgCount =
-    numMessages || Constants.CONVERSATION.DEFAULT_MESSAGE_FETCH_COUNT + unreadCount;
+    numMessages ||
+    Constants.CONVERSATION.DEFAULT_MESSAGE_FETCH_COUNT + unreadCount;
   msgCount =
     msgCount > Constants.CONVERSATION.MAX_MESSAGE_FETCH_COUNT
       ? Constants.CONVERSATION.MAX_MESSAGE_FETCH_COUNT

ts/components/session/conversation/SessionEmojiPanel.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import classNames from 'classnames';
-
-import 'emoji-mart/css/emoji-mart.css'
 import { Picker } from 'emoji-mart';
 
 interface Props {

ts/components/session/conversation/SessionRecording.tsx

@@ -649,7 +649,7 @@ export class SessionRecording extends React.Component<Props, State> {
       // CANVAS CONTEXT
       const drawPlaybackCanvas = () => {
         const canvas = this.playbackCanvas.current;
-        if (!canvas){
+        if (!canvas) {
           return;
         }
         canvas.height = height;

ts/session/constants.ts

@@ -12,7 +12,6 @@ export const TTL_DEFAULT = {
   REGULAR_MESSAGE: NumberUtils.timeAsMs(2, 'days'),
 };
 
-
 // User Interface
 export const CONVERSATION = {
   MAX_MESSAGE_BODY_LENGTH: 2000,

webpack.config.js

@@ -1,10 +0,0 @@
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/i,
-        use: ['style-loader', 'css-loader'],
-      },
-    ],
-  },
-};

yarn.lock

@@ -1237,6 +1237,11 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+big.js@^3.1.3:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
+  integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==
+
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -2139,6 +2144,11 @@ colors@~1.1.2:
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
   integrity sha1-FopHAXVran9RoSzgyXv6KMCE7WM=
 
+colour@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/colour/-/colour-0.7.1.tgz#9cb169917ec5d12c0736d3e8685746df1cadf778"
+  integrity sha1-nLFpkX7F0SwHNtPoaFdG3xyt93g=
+
 combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.5, combined-stream@~1.0.6:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -3262,6 +3272,11 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
+emojis-list@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
+
 emojis-list@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
@@ -4489,6 +4504,11 @@ got@^9.6.0:
     to-readable-stream "^1.0.0"
     url-parse-lax "^3.0.0"
 
+graceful-fs@4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.4.tgz#ef089d2880f033b011823ce5c8fae798da775dbd"
+  integrity sha1-7widKIDwM7ARgjzlyPrnmNp3Xb0=
+
 graceful-fs@^4.1.0, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
@@ -5741,6 +5761,11 @@ json5@0.4.0:
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.4.0.tgz#054352e4c4c80c86c0923877d449de176a732c8d"
   integrity sha1-BUNS5MTIDIbAkjh31EneF2pzLI0=
 
+json5@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+  integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
+
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -6025,6 +6050,16 @@ loader-runner@^2.3.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
   integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
 
+loader-utils@0.2.16:
+  version "0.2.16"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d"
+  integrity sha1-8IYyBm7YKCg13/iN+1JwR2Wt7m0=
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.0.1"
+
 loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
@@ -10506,6 +10541,15 @@ typescript@3.7.4:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.4.tgz#1743a5ec5fef6a1fa9f3e4708e33c81c73876c19"
   integrity sha512-A25xv5XCtarLwXpcDNZzCGvW2D1S3/bACratYBx2sax8PefsFhlYmkQicKHvpYflFS8if4zne5zT5kpJ7pzuvw==
 
+typings-for-css-modules-loader@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/typings-for-css-modules-loader/-/typings-for-css-modules-loader-1.7.0.tgz#a9b5c5a0e19b719d616edfc72855ab47dedd00ae"
+  integrity sha512-Mp7zDrcUmbUKl3JTLamTsMX+lntMotEm5I05j2RHB5EHb0WL1dAXlynpdlGR5Ye/QTvtL5w+RGB2jP32YoUpZw==
+  dependencies:
+    colour "0.7.1"
+    graceful-fs "4.1.4"
+    loader-utils "0.2.16"
+
 uc.micro@^1.0.1:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"