reza added material ui voice compo

master
Reza_ashrafi 3 years ago
parent 96267b6b9b
commit 9244c105e7
  1. 3
      package.json
  2. BIN
      src/assets/voice/Siavash Ghomayshi - Yadegari.mp3
  3. 28
      src/views/QR/VoiceBox/Material-audio-player/index.js
  4. 10
      src/views/QR/VoiceBox/index.js
  5. 44
      src/views/QR/VoiceBox/index.scss
  6. 29
      yarn.lock

@ -19,8 +19,8 @@
"history": "^5.0.0", "history": "^5.0.0",
"jalali-moment": "^3.3.10", "jalali-moment": "^3.3.10",
"mapir-react-component": "^1.8.1", "mapir-react-component": "^1.8.1",
"material-ui-audio-player": "https://github.com/RezaAshrafi77/material-ui-audio-player.git",
"prettier": "^2.3.1", "prettier": "^2.3.1",
"prop-types": "^15.7.2",
"react": "^17.0.2", "react": "^17.0.2",
"react-audio-player": "^0.17.0", "react-audio-player": "^0.17.0",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
@ -31,6 +31,7 @@
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"react-sortable-hoc": "^2.0.0", "react-sortable-hoc": "^2.0.0",
"react-soundplayer": "^1.0.5",
"react-swipeable-views": "^0.14.0", "react-swipeable-views": "^0.14.0",
"react-toastify": "^7.0.4", "react-toastify": "^7.0.4",
"redux": "^4.1.0", "redux": "^4.1.0",

@ -0,0 +1,28 @@
import { createMuiTheme, ThemeProvider } from "@material-ui/core";
import AudioPlayer from "material-ui-audio-player";
const muiTheme = createMuiTheme({});
const src = [
"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",
];
export default function MaterialAudioPlayer(props) {
return (
<ThemeProvider theme={muiTheme}>
<AudioPlayer
elevation={1}
width="100%"
variation="default"
spacing={3}
// download={true}
autoplay={false}
order="standart"
preload="auto"
loop={false}
src={src}
/>
</ThemeProvider>
);
}

@ -1,7 +1,9 @@
import React from "react"; import React from "react";
import MaterialAudioPlayer from './Material-audio-player/index';
import "./index.scss"; import "./index.scss";
export default function VoiceBox(props) { export default function VoiceBox(props) {
return ( return (
<> <>
@ -14,7 +16,7 @@ export default function VoiceBox(props) {
<span></span> <span></span>
{props.data.title} {props.data.title}
</h2> </h2>
<div></div> <MaterialAudioPlayer />
</div> </div>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
@ -23,7 +25,9 @@ export default function VoiceBox(props) {
<span></span> <span></span>
{props.data.title} {props.data.title}
</h2> </h2>
<div></div>
<MaterialAudioPlayer />
</div> </div>
) : null} ) : null}
</> </>

@ -16,20 +16,48 @@
margin-left: 5px; margin-left: 5px;
} }
} }
div{ .MuiSvgIcon-root{
width: 100%; color: #37D386 !important;
height: 40px; font-size: 50px !important;
background-color: #02733C; }
.MuiSlider-root{
color: #37D386;
} }
} }
.MuiPaper-elevation1{
box-shadow: none !important;
}
.MuiGrid-container{
width: 20px !important;
flex-wrap: nowrap !important;
flex-direction: row-reverse;
background-color: rgba(255,255,255,0) !important;
padding: 0px !important;
}
.MuiGrid-item{
display: flex !important;
flex-direction: row !important;
padding: 0px !important;
margin-right: 5px !important;
p{
color: #02A255 !important;
}
}
.voice-box{ .voice-box{
width: 100%; width: 100%;
max-width: 400px; max-width: 700px;
border-radius: 10px; border-radius: 10px;
background-color: #8dfac541; background-color: #8dfac541;
padding: 10px 10px; padding: 10px 10px;
margin: 15px auto; margin: 15px auto;
.MuiSvgIcon-root{
color: #37D386 !important;
font-size: 50px !important;
}
.MuiSlider-root{
color: #37D386;
}
h2{ h2{
font-family: numeralLight; font-family: numeralLight;
color: #02733C; color: #02733C;
@ -42,8 +70,8 @@
} }
} }
div{ div{
width: 100%; // width: 100%;
height: 40px; // height: 40px;
background-color: #02733C; // background-color: #02733C;
} }
} }

@ -3631,7 +3631,7 @@ class-utils@^0.3.5:
isobject "^3.0.0" isobject "^3.0.0"
static-extend "^0.1.1" static-extend "^0.1.1"
classnames@^2.2.6: classnames@^2.2.5, classnames@^2.2.6:
version "2.3.1" version "2.3.1"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA== integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
@ -5969,6 +5969,11 @@ hmac-drbg@^1.0.1:
minimalistic-assert "^1.0.0" minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1" minimalistic-crypto-utils "^1.0.1"
hoist-non-react-statics@^2.3.1:
version "2.5.5"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
version "3.3.2" version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@ -7751,6 +7756,12 @@ mapir-react-component@^1.8.1:
react-mapbox-gl "^4.6.0" react-mapbox-gl "^4.6.0"
react-mapbox-gl-draw "^2.0.3" react-mapbox-gl-draw "^2.0.3"
"material-ui-audio-player@https://github.com/RezaAshrafi77/material-ui-audio-player.git":
version "1.6.6"
resolved "https://github.com/RezaAshrafi77/material-ui-audio-player.git#2b14d5358156644e8a5995250a3396dee9043e06"
dependencies:
classnames "^2.2.6"
md5.js@^1.3.4: md5.js@^1.3.4:
version "1.3.5" version "1.3.5"
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f" resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@ -9996,6 +10007,17 @@ react-sortable-hoc@^2.0.0:
invariant "^2.2.4" invariant "^2.2.4"
prop-types "^15.5.7" prop-types "^15.5.7"
react-soundplayer@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/react-soundplayer/-/react-soundplayer-1.0.5.tgz#5152ca6824c938cdafdeb16a05be20db7bba6afb"
integrity sha512-g4OjyDehFtSK2nPueuS7phwo/ppLYvZcWdGv6Ah3mcJPouOlHbYaFKt6kT3kuce4IiFUN8Ns7tGCbaeWgecCKg==
dependencies:
classnames "^2.2.5"
hoist-non-react-statics "^2.3.1"
object-assign "^4.1.1"
prop-types "^15.6.0"
soundcloud-audio "^1.3.1"
react-swipeable-views-core@^0.14.0: react-swipeable-views-core@^0.14.0:
version "0.14.0" version "0.14.0"
resolved "https://registry.yarnpkg.com/react-swipeable-views-core/-/react-swipeable-views-core-0.14.0.tgz#6ac443a7cc7bc5ea022fbd549292bb5fff361cce" resolved "https://registry.yarnpkg.com/react-swipeable-views-core/-/react-swipeable-views-core-0.14.0.tgz#6ac443a7cc7bc5ea022fbd549292bb5fff361cce"
@ -10917,6 +10939,11 @@ sort-keys@^1.0.0:
dependencies: dependencies:
is-plain-obj "^1.0.0" is-plain-obj "^1.0.0"
soundcloud-audio@^1.3.1:
version "1.4.0"
resolved "https://registry.yarnpkg.com/soundcloud-audio/-/soundcloud-audio-1.4.0.tgz#2d9ceeaa8a3c63d814e18c4c2602fe3be9a99655"
integrity sha512-2kHyTfu+KNOLZuRKynaeTmj846deC1WbiDTu7rkd1/93lk9FxtgbGkNQSIy5H4gxZD9EEeTdXhkE7uiMwEXuEQ==
source-list-map@^2.0.0: source-list-map@^2.0.0:
version "2.0.1" version "2.0.1"
resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34" resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"

Loading…
Cancel
Save