release 3.15.0 (#783)

* fixed the link from hive to blog (#747) * Add banned video embeds support #732 (#745) * Support DTUBE (#131) (#751) * Fix TikTok embeds so they play properly (#721) (#750) * change cub coin ticker link #765 (#766) * ignore @ sign in the login modal #738 (#759) * add clear draft button #754 (#761) * fixed username redirect #757 (#758) * add support for mobile twitter embeds #762 (#763) * change the order of nav icons #753 (#768) * update package.json * hotfix-merge (#782) * fix draft feature bug #749 * hotfix logout button blocking ui #760 * add buzz button to the feed (ui fix) * add buzz button to the feed * fixed buzz button not showing Co-authored-by: Aashir Shaikh <[email protected]> Co-authored-by: Jhune Carlo Trogelio <[email protected]> Co-authored-by: Aashir Shaikh <[email protected]> Co-authored-by: Raymond Cuenen <[email protected]> Co-authored-by: Aashir Shaikh <[email protected]>
d-buzz · Jun 5, 2021 · f7a31b7 · f7a31b7
1 parent 3467e72
commit f7a31b7
Show file tree

Hide file tree

Showing 13 changed files with 216 additions and 54 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "d.buzz-client",
-  "version": "3.11.0",
+  "version": "3.15.0",
   "private": true,
   "dependencies": {
     "@hiveio/hive-js": "^0.8.13",

diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,12 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import routes from './routes'
 import { withRouter } from 'react-router'
 import { Init, AuthGuard, ThemeLoader } from 'components'
 import { renderRoutes } from 'react-router-config'
 import { LastLocationProvider } from 'react-router-last-location'
 import { createUseStyles } from 'react-jss'
 import { Helmet } from 'react-helmet'
+import { redirectToUserProfile } from 'services/helper'
 
 const useStyles = createUseStyles(theme => ({
   wrapper: {
@@ -24,6 +25,12 @@ const AppWrapper = ({ children }) => {
 }
 
 const App = () => {
+
+  useEffect(() => {
+    // redirect to user profile if link only contains @username
+    redirectToUserProfile()
+  }, [])
+
   return (
     <React.Fragment>
       <Helmet>

diff --git a/src/components/common/MarkdownViewer/index.js b/src/components/common/MarkdownViewer/index.js
@@ -145,6 +145,7 @@ const useStyles = createUseStyles(theme => ({
 const prepareTwitterEmbeds = (content) => {
   let body = content
   const mainTwitterRegex = /(?:https?:\/\/(?:(?:twitter\.com\/(.*?)\/status\/(.*))))/i
+  const mobileTwitterRegex = /(?:https?:\/\/(?:(?:mobile\.twitter\.com\/(.*?)\/status\/(.*))))/i
   const htmlReplacement = /<blockquote[^>]*?><p[^>]*?>(.*?)<\/p>.*?mdash; (.*)<a href="(https:\/\/twitter\.com\/.*?(.*?\/status\/(.*?))\?.*?)">(.*?)<\/a><\/blockquote>/i
 
   const links = textParser.getUrls(content)
@@ -173,6 +174,16 @@ const prepareTwitterEmbeds = (content) => {
           }
           body = body.replace(link, `~~~~~~.^.~~~:twitter:${id}:~~~~~~.^.~~~`)
         }
+        else if(link.match(mobileTwitterRegex)) {
+          match = link.match(mobileTwitterRegex)
+          id = match[2]
+          if(link.match(/(?:https?:\/\/(?:(?:mobile\.twitter\.com\/(.*?)\/status\/(.*)?=(.*))))/i)) {
+            match = link.match(/(?:https?:\/\/(?:(?:mobile\.twitter\.com\/(.*?)\/status\/(.*)?=(.*))))/i)
+            id = match[2]
+            id = id.slice(0, -2)
+          }
+          body = body.replace(link, `~~~~~~.^.~~~:twitter:${id}:~~~~~~.^.~~~`)
+        }
 
         if(match) {
           const id = match[2]
@@ -382,6 +393,35 @@ const prepareBitchuteEmbeds = (content) => {
   return body
 }
 
+const prepareBannedEmbeds = (content) => {
+  const bannedRegex = /(?:https?:\/\/(?:(?:banned\.video\/watch\?id=(.*))))/i
+
+  let body = content
+
+  const links = textParser.getUrls(content)
+
+  links.forEach((link) => {
+    try {
+      link = link.replace(/&amp;/g, '&')
+		  let match = ''
+		  let id = ''
+
+		  if(link.match(bannedRegex)){
+		    const data = link.split('?id=')
+        match = link.match(bannedRegex)
+        if (data[1]) {
+          id = data[1]
+        }
+      }
+
+      if(match){
+        body = body.replace(link, `~~~~~~.^.~~~:banned:${id}:~~~~~~.^.~~~`)
+      }
+    } catch(error) { }
+  })
+  return body
+}
+
 const prepareSoundCloudEmbeds = (content) => {
   const soundcloudRegex = /^https?:\/\/(soundcloud\.com|snd\.sc)\/(.*)$/
   let body = content
@@ -447,6 +487,7 @@ const prepareFacebookEmbeds = (content) => {
 
 const prepareTiktokEmbeds = (content) => {
   const tiktokRegex = /((http:\/\/(.*\.tiktok\.com\/.*|tiktok\.com\/.*))|(https:\/\/(.*\.tiktok\.com\/.*|tiktok\.com\/.*)))/g
+  const tiktokIdRegex = /[0-9]+/
 
   let body = content
   const links = textParser.getUrls(content)
@@ -458,10 +499,11 @@ const prepareTiktokEmbeds = (content) => {
 
     try {
       if(link.match(tiktokRegex)){
-        const data = link.split('/')
+        const url = new URL(link)
+        const data = url.pathname.split('/')
         match = link.match(tiktokRegex)
 
-        id = data[5]
+        id = data.reduce((a, v) => v.match(tiktokIdRegex) ? v : a)
       }
 
       if (!id) {
@@ -497,6 +539,26 @@ const prepareAppleEmbeds = (content) => {
   return body
 }
 
+const prepareDTubeEmbeds = (content) => {
+  const dtubeRegex = /^https:\/\/(emb\.)?d\.tube\/(.*)/
+  let body = content
+
+  const links = textParser.getUrls(content)
+
+  links.forEach((link) => {
+    link = link.replace(/&amp;/g, '&')
+
+    const match = link.match(dtubeRegex)
+
+    if (match) {
+      const data = link.split('/')
+      const id = `${data[4]}/${data[5]}`
+      body = body.replace(link, `~~~~~~.^.~~~:dtube:${id}:~~~~~~.^.~~~`)
+    }
+  })
+  return body
+}
+
 const getCoinTicker = (coin) => {
   const data = require('../../../files/coinGeckoData.json')
 
@@ -533,6 +595,10 @@ const render = (content, markdownClass, assetClass, scrollIndex, recomputeRowInd
     const splitBitchute = content.split(':')
     const url = `https://www.bitchute.com/embed/${splitBitchute[2]}`
     return <UrlVideoEmbed key={`${url}${scrollIndex}bitchute`} url={url} />
+  } else if(content.includes(':banned:')) {
+    const splitBanned = content.split(':')
+    const url = `https://api.banned.video/embed/${splitBanned[2]}`
+    return <UrlVideoEmbed key={`${url}${scrollIndex}banned`} url={url} />  
   } else if(content.includes(':soundcloud:')) {
     const splitSoundcloud = content.split(':')
     const url = `https://soundcloud.com/${splitSoundcloud[2]}`
@@ -563,22 +629,24 @@ const render = (content, markdownClass, assetClass, scrollIndex, recomputeRowInd
     }
   } else if (content.includes(':tiktok:')) {
     const splitTiktok = content.split(':')
-    const url = `https://www.tiktok.com/embed/v2/${splitTiktok[2]}?lang=en-US`
-
-    return (
-      <React.Fragment>
-        <div className={classes.tiktokWrapper}>
-          <iframe
-            title='Embedded Video'
-            src={url}
-            allowFullScreen={true}
-            frameBorder='0'
-            height='250'
-            width='100%'
-          ></iframe>
-        </div>
-      </React.Fragment>
-    )
+    if (splitTiktok[2]) {
+      const url = `https://www.tiktok.com/embed/v2/${splitTiktok[2]}?lang=en-US`
+
+      return (
+        <React.Fragment>
+          <div className={classes.tiktokWrapper}>
+            <iframe
+              title='Embedded Video'
+              src={url}
+              allowFullScreen={true}
+              frameBorder='0'
+              height='250'
+              width='100%'
+            ></iframe>
+          </div>
+        </React.Fragment>
+      )
+    }
   } else if (content.includes(':odysy:')) {
     const splitOdysy = content.split(':')
     const url = `https://odysee.com/$/embed/${splitOdysy[2]}`
@@ -601,6 +669,10 @@ const render = (content, markdownClass, assetClass, scrollIndex, recomputeRowInd
         </div>
       </React.Fragment>
     )
+  } else if (content.includes(':dtube:')) {
+    const splitDTube = content.split(':')
+    const url = `https://emb.d.tube/#!/${splitDTube[2]}`
+    return <UrlVideoEmbed key={`${url}${scrollIndex}dtube`} url={url} />
   } else {
     // render normally
     return <div
@@ -649,6 +721,8 @@ const MarkdownViewer = React.memo((props) => {
         content = prepareLbryEmbeds(content)
       } else if(link.includes('www.bitchute.com')) {
         content = prepareBitchuteEmbeds(content)
+      } else if(link.includes('banned.video')) {
+        content = prepareBannedEmbeds(content)
       } else if(link.includes('soundcloud.com')) {
         content = prepareSoundCloudEmbeds(content)
       } else if(link.includes('facebook.com')) {
@@ -659,6 +733,8 @@ const MarkdownViewer = React.memo((props) => {
         content = prepareOdyseeEmbeds(content)
       } else if(link.includes('music.apple.com')) {
         content = prepareAppleEmbeds(content)
+      } else if (link.includes('d.tube')) {
+        content = prepareDTubeEmbeds(content)
       }
     } catch(error) { }
   })

diff --git a/src/components/layout/GuardedAppFrame/index.js b/src/components/layout/GuardedAppFrame/index.js
@@ -10,7 +10,7 @@ import Row from 'react-bootstrap/Row'
 import Col from 'react-bootstrap/Col'
 import queryString from 'query-string'
 import { clearNotificationsRequest } from 'store/profile/actions'
-import { broadcastNotification } from 'store/interface/actions'
+import { broadcastNotification, setBuzzModalStatus } from 'store/interface/actions'
 import { searchRequest, clearSearchPosts } from 'store/posts/actions'
 import { ContainedButton } from 'components/elements'
 import { useLocation } from 'react-router-dom'
@@ -20,6 +20,9 @@ import { useLastLocation } from 'react-router-last-location'
 import { useWindowDimensions } from 'services/helper'
 import { pending } from 'redux-saga-thunk'
 import { SideBarLeft, SideBarRight, SearchField, NotificationFilter } from 'components'
+import BuzzFormModal from 'components/modals/BuzzFormModal'
+import { Fab } from '@material-ui/core'
+import BuzzIcon from 'components/elements/Icons/BuzzIcon'
 
 const useStyles = createUseStyles(theme => ({
   main: {
@@ -79,6 +82,16 @@ const useStyles = createUseStyles(theme => ({
   },
 }))
 
+const floatStyle = {
+  margin: 0,
+  top: 'auto',
+  bottom: 20,
+  left: 'auto',
+  position: 'fixed',
+  zIndex: 500,
+  backgroundColor: '#e61c34',
+}
+
 const GuardedAppFrame = (props) => {
   const {
     route,
@@ -104,6 +117,8 @@ const GuardedAppFrame = (props) => {
   const [minify, setMinify] = useState(false)
   const [hideSideBarRight, setHideSideBarRight] = useState(false)
   const { width } = useWindowDimensions()
+  const [open, setOpen] = useState(false)
+  const isBuzzIntent = pathname.match(/^\/intent\/buzz/)
 
   useEffect(() => {
     setSearch(query)
@@ -213,6 +228,22 @@ const GuardedAppFrame = (props) => {
       })
   }
 
+  const handleOpenBuzzModal = () => {
+    setOpen(true)
+  }
+
+  const onHide = () => {
+    setBuzzModalStatus(false)
+    setOpen(false)
+    if (isBuzzIntent) {
+      history.push('/')
+    }
+  }
+
+  const floatingButtonStyle = {
+    marginLeft: width > 1026 && 530, right: width < 1026 && 30,
+  }
+
   return (
     <React.Fragment>
       <Row style={{ padding: 0, margin: 0 }}>
@@ -276,6 +307,12 @@ const GuardedAppFrame = (props) => {
             <div className={classes.main}>
               <React.Fragment>
                 {renderRoutes(route.routes)}
+                {minify && (
+                  <Fab onClick={handleOpenBuzzModal} size="medium" color="secondary" aria-label="add" style={{...floatStyle, ...floatingButtonStyle}}>
+                    <BuzzIcon />
+                  </Fab>
+                )}
+                <BuzzFormModal show={open} onHide={onHide} />
               </React.Fragment>
             </div>
           </div>
@@ -301,6 +338,7 @@ const GuardedAppFrame = (props) => {
 const mapStateToProps = (state) => ({
   loading: pending(state, 'CLEAR_NOTIFICATIONS_REQUEST'),
   count: state.polling.get('count'),
+  buzzModalStatus: state.interfaces.get('buzzModalStatus'),
 })
 
 const mapDispatchToProps = (dispatch) => ({
@@ -309,6 +347,7 @@ const mapDispatchToProps = (dispatch) => ({
     clearSearchPosts,
     clearNotificationsRequest,
     broadcastNotification,
+    setBuzzModalStatus,
   }, dispatch),
 })
 

diff --git a/src/components/layout/MobileAppFrame/index.js b/src/components/layout/MobileAppFrame/index.js
@@ -304,20 +304,20 @@ const MobileAppFrame = (props) => {
       icon: <Badge badgeContent={count.unread || 0} color="secondary"><NotificationsIcon /></Badge>,
     },
     {
-      name: 'Wallet',
-      icon: <WalletIcon />,
-      path: `/@${username}/wallet`,
+      name: 'Display',
+      icon: <SunMoonIcon />,
+      onClick: showThemeModal,
+      type: 'action',
     },
     {
       name: 'Profile',
       path: `/@${username}/t/buzz?ref=nav`,
       icon: <ProfileIcon />,
     },
     {
-      name: 'Display',
-      icon: <SunMoonIcon />,
-      onClick: showThemeModal,
-      type: 'action',
+      name: 'Wallet',
+      icon: <WalletIcon />,
+      path: `/@${username}/wallet`,
     },
   ]
   const isActivePath = (path, current) => {