From 3591001ef18b0302fffdd55dfad2799bd25ef73f Mon Sep 17 00:00:00 2001 From: Vincent Date: Thu, 16 Jul 2020 18:14:08 +1000 Subject: [PATCH] audio component ui --- js/conversation_controller.js | 2 +- js/views/conversation_view.js | 5 +- package.json | 1 + stylesheets/_session_conversation.scss | 275 +++--------------- stylesheets/_theme_dark.scss | 2 +- stylesheets/manifest.scss | 4 + ts/components/conversation/Message.tsx | 30 +- .../SessionConversationManager.tsx | 5 +- .../conversation/SessionEmojiPanel.tsx | 2 - .../session/conversation/SessionRecording.tsx | 2 +- ts/session/constants.ts | 1 - webpack.config.js | 10 - yarn.lock | 44 +++ 13 files changed, 128 insertions(+), 255 deletions(-) delete mode 100644 webpack.config.js diff --git a/js/conversation_controller.js b/js/conversation_controller.js index baccd1f02..847cff220 100644 --- a/js/conversation_controller.js +++ b/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; }; diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index a35f031f7..10eae6816 100644 --- a/js/views/conversation_view.js +++ b/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'; } diff --git a/package.json b/package.json index b46b36af8..aa0acd0a6 100644 --- a/package.json +++ b/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" }, diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 335cc3094..c42f9c8e2 100644 --- a/stylesheets/_session_conversation.scss +++ b/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; - - &:focus:not(:focus-visible) { - outline: 0; - } - - svg { - vertical-align: initial; // overwrite Bootstrap default - } + padding: 0px; + background-color: transparent; + box-shadow: none; } -.rhap_current-time { +.rhap_total-time { display: none; } -.rhap_total-time{ - margin-left: 10px; +.rhap_current-time { + margin-right: 5px; } .rhap_play-pause-button { @@ -478,80 +469,15 @@ $rhap_font-family: inherit !default; display: none; } -.rhap_volume-container div[role="progressbar"] { - 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_volume-container div[role='progressbar'] { + display: none; } .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%; - 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); + background-color: #00f782; } .rhap_download-progress { @@ -585,16 +503,15 @@ $rhap_font-family: inherit !default; } .rhap_progress-indicator { - box-sizing: border-box; - position: absolute; - z-index: 3; - width: 20px; - height: 20px; - margin-left: -10px; - top: -8px; - background: $session-color-green; - border-radius: 50px; - box-shadow: rgba($rhap_theme-color, .5) 0 0 5px; + display: none; + // z-index: 3; + // width: 10px; + // height: 5px; + // margin-left: -5px; + // top: 0px; + // background: $session-color-green; + // box-shadow: none; + // 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 { - font-size: 26px; - width: 26px; - 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_play-pause-button { + width: unset; + height: unset; } -.rhap_volume-button { - display: flex; - align-items: center; - justify-content: center; +.rhap_controls-section { + flex: unset; + justify-content: flex-start; } .rhap_volume-button { - flex: 0 0 26px; font-size: 20px; - color: #FFFFFF; -} - -.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; - } + width: 20px; + height: 20px; + margin-right: 0px; } /* **************** */ /* END AUDIO PLAYER */ -/* **************** */ \ No newline at end of file +/* **************** */ diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index a3da53f06..595f69dec 100644 --- a/stylesheets/_theme_dark.scss +++ b/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; } diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index 14d3b07b5..4cb9ab39c 100644 --- a/stylesheets/manifest.scss +++ b/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'; diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index 3ba2d31c7..17e7089f2 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -430,15 +430,27 @@ export class Message extends React.PureComponent { */} , - pause: , - }} + src={firstAttachment.url} + layout="horizontal-reverse" + showSkipControls={false} + showJumpControls={false} + showDownloadProgress={false} + customIcons={{ + play: ( + + ), + pause: ( + + ), + }} /> ); diff --git a/ts/components/session/conversation/SessionConversationManager.tsx b/ts/components/session/conversation/SessionConversationManager.tsx index 19c70c3ab..b19a14b06 100644 --- a/ts/components/session/conversation/SessionConversationManager.tsx +++ b/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 diff --git a/ts/components/session/conversation/SessionEmojiPanel.tsx b/ts/components/session/conversation/SessionEmojiPanel.tsx index a04a064d7..067e001ef 100644 --- a/ts/components/session/conversation/SessionEmojiPanel.tsx +++ b/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 { diff --git a/ts/components/session/conversation/SessionRecording.tsx b/ts/components/session/conversation/SessionRecording.tsx index 37d9f5f10..b0c862b00 100644 --- a/ts/components/session/conversation/SessionRecording.tsx +++ b/ts/components/session/conversation/SessionRecording.tsx @@ -649,7 +649,7 @@ export class SessionRecording extends React.Component { // CANVAS CONTEXT const drawPlaybackCanvas = () => { const canvas = this.playbackCanvas.current; - if (!canvas){ + if (!canvas) { return; } canvas.height = height; diff --git a/ts/session/constants.ts b/ts/session/constants.ts index 7c992df05..75c14c998 100644 --- a/ts/session/constants.ts +++ b/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, diff --git a/webpack.config.js b/webpack.config.js deleted file mode 100644 index 510e934f2..000000000 --- a/webpack.config.js +++ /dev/null @@ -1,10 +0,0 @@ -module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: ['style-loader', 'css-loader'], - }, - ], - }, -}; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 1dab3d52e..b4fecca4d 100644 --- a/yarn.lock +++ b/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"