Progress on little important things

removing .mov for now until we can figure out solution with videojs, added model to track username changes, got chat creation flow down, progress on bookmark collections, albums, filtering blocks/mutes from group, explore, collection timelines

app/javascript/gabsocial/components/hashtag_item.js

@@ -1,63 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Sparklines, SparklinesCurve } from 'react-sparklines'
-import { FormattedMessage } from 'react-intl'
-import ImmutablePropTypes from 'react-immutable-proptypes'
-import ImmutablePureComponent from 'react-immutable-pure-component'
-import { NavLink } from 'react-router-dom'
-import Button from './button'
-import Block from './block'
-import Text from './text'
-
-class HashtagItem extends ImmutablePureComponent {
-
-  render() {
-    const { hashtag, isCompact } = this.props
-
-    if (!hashtag) return
-
-    const count = hashtag.get('history').map((block) => {
-      return parseInt(block.get('uses'))
-    }).reduce((a, c) => a + c)
-
-    return (
-      <Block>
-        <div className={[_s.d, _s.w100PC].join(' ')}>
-          <div className={[_s.d, _s.noUnderline, _s.px15, _s.py5].join(' ')}>
-            <div className={[_s.d, _s.flexRow, _s.aiCenter].join(' ')}>
-              <div>
-                <Text color='brand' size='medium' weight='bold' className={[_s.py2, _s.lineHeight15].join(' ')}>
-                  #{hashtag.get('name')}
-                </Text>
-              </div>
-            </div>
-            {
-              !isCompact &&
-              <Text color='secondary' size='small' className={_s.py2}>
-                <FormattedMessage id='number_of_gabs' defaultMessage='{count} Gabs' values={{
-                  count,
-                }} />
-              </Text>
-            }
-          </div>
-
-          <Sparklines
-            width={50}
-            height={28}
-            data={hashtag.get('history').reverse().map((day) => day.get('uses')).toArray()}
-          >
-            <SparklinesCurve style={{ fill: 'none' }} />
-          </Sparklines>
-        </div>
-      </Block>
-    )
-  }
-
-}
-
-HashtagItem.propTypes = {
-  hashtag: ImmutablePropTypes.map.isRequired,
-  isCompact: PropTypes.bool,
-}
-
-export default HashtagItem

app/javascript/gabsocial/components/media_item.js

@@ -49,6 +49,8 @@ class MediaItem extends ImmutablePureComponent {
     if (!attachment) return
 
     const hash = attachment.get('blurhash')
+    if (!hash) return
+
     const pixels = decode(hash, 160, 160)
 
     if (pixels && this.canvas) {
@@ -103,7 +105,7 @@ class MediaItem extends ImmutablePureComponent {
     const statusUrl = `/${account.getIn(['acct'])}/posts/${status.get('id')}`
 
     const isSmallRatio = aspectRatio < 1
-    const isSquare = aspectRatio === 1
+    const isSquare = aspectRatio === 1 || isSmall
     const containerClasses = CX({
       d: 1,
       px5: 1,

app/javascript/gabsocial/components/navigation_bar/chat_navigation_bar_xs.js

@@ -33,12 +33,9 @@ class ChatNavigationBar extends React.PureComponent {
     const otherAccounts = chatConversation ? chatConversation.get('other_accounts') : null
     const nameHTML = !!otherAccounts ? otherAccounts.get(0).get('display_name_html') : ''
 
-    // : todo :
-    // fix padding on mobile device
-
     return (
-      <div className={[_s.d, _s.z4, _s.h53PX, _s.w100PC].join(' ')}>
-        <div className={[_s.d, _s.h53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+      <div className={[_s.d, _s.z4, _s.minH53PX, _s.w100PC].join(' ')}>
+        <div className={[_s.d, _s.minH53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
 
           <div className={[_s.d, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w100PC].join(' ')}>
 

app/javascript/gabsocial/components/navigation_bar/compose_navigation_bar_xs.js

@@ -34,9 +34,9 @@ class ComposeNavigationBar extends React.PureComponent {
     })
 
     return (
-      <div className={[_s.d, _s.z4, _s.h53PX, _s.w100PC].join(' ')}>
-        <div className={[_s.d, _s.h53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
-
+      <div className={[_s.d, _s.z4, _s.minH53PX, _s.w100PC].join(' ')}>
+        <div className={[_s.d, _s.minH53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+        
           <div className={innerClasses}>
 
             <BackButton

app/javascript/gabsocial/components/panel/media_gallery_panel.js

@@ -57,7 +57,7 @@ class MediaGalleryPanel extends ImmutablePureComponent {
         headerButtonTitle={!!account ? intl.formatMessage(messages.show_all) : undefined}
         headerButtonTo={!!account ? `/${account.get('acct')}/albums` : undefined}
       > 
-        <div className={[_s.d, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.flexWrap, _s.aiCenter, _s.jcCenter].join(' ')}>
           {
             !!account && attachments.size > 0 &&
             attachments.slice(0, 16).map((attachment, i) => (

app/javascript/gabsocial/components/poll.js

@@ -108,6 +108,7 @@ class Poll extends ImmutablePureComponent {
       aiCenter: !showResults,
     })
 
+    // : todo : fix widths and truncate for large poll options
     return (
       <li className={listItemClasses} key={option.get('title')}>
         {

app/javascript/gabsocial/components/profile_header.js

@@ -16,6 +16,7 @@ import {
   addShortcut,
   removeShortcut,
 } from '../actions/shortcuts'
+import { createChatConversation } from '../actions/chat_conversations'
 import { openModal } from '../actions/modal'
 import { openPopover } from '../actions/popover'
 import { me } from '../initial_state'
@@ -32,6 +33,10 @@ import ProfileHeaderXSPlaceholder from './placeholder/profile_header_xs_placehol
 
 class ProfileHeader extends ImmutablePureComponent {
 
+  static contextTypes = {
+		router: PropTypes.object
+  }
+  
   state = {
     stickied: false,
   }
@@ -71,6 +76,15 @@ class ProfileHeader extends ImmutablePureComponent {
     }
   }
 
+  handleOnCreateChatConversation = () => {
+    const { account } = this.props
+    const accountId = !!account ? account.get('id') : null
+    
+    if (!accountId) return
+
+    this.props.onCreateChatConversation(accountId, this.context.router.history)
+  }
+
   setOpenMoreNodeRef = (n) => {
     this.openMoreNode = n
   }
@@ -226,10 +240,8 @@ class ProfileHeader extends ImmutablePureComponent {
                             iconClassName={_s.inheritFill}
                             color='brand'
                             backgroundColor='none'
-                            // : TODO :
                             className={[_s.jcCenter, _s.aiCenter, _s.mr10, _s.px10].join(' ')}
-                            onClick={this.handleOpenMore}
-                            buttonRef={this.setOpenMoreNodeRef}
+                            onClick={this.handleOnCreateChatConversation}
                           />
                         </div>
                         <div className={[_s.d, _s.flexRow, _s.h40PX].join(' ')}>
@@ -373,10 +385,8 @@ class ProfileHeader extends ImmutablePureComponent {
                               iconClassName={_s.inheritFill}
                               color='brand'
                               backgroundColor='none'
-                              // : TODO :
                               className={[_s.jcCenter, _s.aiCenter, _s.mr10, _s.px10].join(' ')}
-                              onClick={this.handleOpenMore}
-                              buttonRef={this.setOpenMoreNodeRef}
+                              onClick={this.handleOnCreateChatConversation}
                             />
                           </div>
                         }
@@ -435,6 +445,9 @@ const mapDispatchToProps = (dispatch) => ({
   onRemoveShortcut(accountId) {
     dispatch(removeShortcut(null, 'account', accountId))
   },
+  onCreateChatConversation(accountId, routerHistory) {
+    dispatch(createChatConversation(accountId, routerHistory))
+  },
 });
 
 ProfileHeader.propTypes = {

app/javascript/gabsocial/components/status_check_box.js

@@ -34,6 +34,7 @@ class StatusCheckBox extends ImmutablePureComponent {
                 src={video.get('url')}
                 alt={video.get('description')}
                 aspectRatio={video.getIn(['meta', 'small', 'aspect'])}
+                fileContentType={video.get('file_content_type')}
                 width={239}
                 height={110}
                 inline

app/javascript/gabsocial/components/status_media.js

@@ -67,6 +67,7 @@ class StatusMedia extends ImmutablePureComponent {
                 src={video.get('url')}
                 alt={video.get('description')}
                 aspectRatio={video.getIn(['meta', 'small', 'aspect'])}
+                fileContentType={video.get('file_content_type')}
                 sensitive={status.get('sensitive')}
                 height={110}
                 width={width}

app/javascript/gabsocial/components/video.js

@@ -31,7 +31,10 @@ class Video extends ImmutablePureComponent {
   }
 
   componentDidMount() {
-    videoJsOptions.sources = [{ src: this.props.src }]
+    videoJsOptions.sources = [{
+      src: this.props.src,
+      type: this.props.fileContentType,
+    }]
     this.videoPlayer = videojs(this.video, videoJsOptions)
   }
 
@@ -193,6 +196,7 @@ Video.propTypes = {
   blurhash: PropTypes.string,
   aspectRatio: PropTypes.number,
   meta: ImmutablePropTypes.map,
+  fileContentType: PropTypes.string,
 }
 
 export default injectIntl(Video)