Hata Düzeltmeleri, Yenilikler

.env.example

@@ -1,6 +1,7 @@
 REACT_APP_SITENAME=
 REACT_APP_SITEURL=
 REACT_APP_DISQUS_SHORTNAME=
+REACT_APP_HEADER_LOGO_TYPE=
 REACT_APP_DEV_API_URL=
 REACT_APP_GA_USER_ID=
 REACT_APP_FACEBOOK_LINK=

.gitignore

@@ -7,6 +7,7 @@
 .pnp.js
 /src/static/logo.png
 /src/static/fullLogo.png
+/src/static/fullLogo-dark.png
 /public/*.png
 /public/*.html
 /public/*.json

package.json

@@ -1,6 +1,6 @@
 {
   "name": "forfansubsfront",
-  "version": "2.0.0",
+  "version": "2.3.0",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.26",

public/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

src/components/ceviriler/components.js

@@ -47,8 +47,8 @@ const ContentLeft = styled(Grid)`
 `
 
 const ContentImage = styled(Box)`
-    max-width: calc(225px - ${props => props.spacingvalue}px);
-    width: calc(225px - ${props => props.spacingvalue}px);
+    max-width: calc(225px - ${props => props.spacingvalue + 'px'});
+    width: calc(225px - ${props => props.spacingvalue + 'px'});
 
     img {
         width: inherit;
@@ -100,15 +100,7 @@ const ContentTitleBadge = styled(Box)`
 const ContentRightAltTitle = styled(Typography)`
     display: flex;
     align-items: center;
-
-    :after {
-        content: "";
-        height: 2px;
-        flex: 1 1 auto;
-        margin-left: 14px;
-        opacity: .6;
-        background: ${props => props.aftercolor}
-    }
+    margin-bottom: 10px!important;
 `
 
 const ContentSynopsis = styled(Typography)`
@@ -164,8 +156,8 @@ const Content = styled.div`
         }
 
         ${ContentImage} {
-            max-width: calc(185px - ${props => props.spacingvalue}px);
-            width: calc(185px - ${props => props.spacingvalue}px);
+            max-width: 70%;
+            width: 70%;
         }
     }
 `

src/components/episode/components.js

@@ -163,7 +163,6 @@ const Page = styled(Grid)`
 `
 
 function EpisodeListParser(episodenumber, specialtype) {
-
     if (specialtype && specialtype !== "toplu") {
         return {
             title: `${specialtype.toUpperCase()} ${episodenumber}`,

src/components/header/header.js

@@ -25,8 +25,8 @@ import InfoIcon from '@material-ui/icons/Info'
 import BookIcon from '@material-ui/icons/Book'
 import AccountCircle from '@material-ui/icons/AccountCircle'
 
-import { indexPage, searchPage, faqPage, recPage, mosLink, adminPage } from '../../config/front-routes'
-import { fullLogo, fullLogoDark } from '../../config/theming/images'
+import { indexPage, searchPage, faqPage, recPage, adminPage } from '../../config/front-routes'
+import { fullLogo, fullLogoGif, fullLogoDark, fullLogoDarkGif } from '../../config/theming/images'
 
 const useStyles = makeStyles(theme => ({
     root: {
@@ -123,11 +123,6 @@ export default function MiniDrawer() {
         }
     ])
     const [menuItems2] = React.useState([
-        {
-            text: "Manga Oku",
-            link: mosLink,
-            icon: <BookIcon />
-        }
     ])
 
     function handleMenu(event) {
@@ -220,7 +215,12 @@ export default function MiniDrawer() {
                         <MenuIcon />
                     </IconButton>
                     <Link to={indexPage} className={classes.logoContainer}>
-                        <img title="Site logo" loading="lazy" className={classes.logo} src={usertheme === "dark" ? fullLogo : fullLogoDark} alt="Site Logo" />
+                        {
+                            process.env.REACT_APP_HEADER_LOGO_TYPE === "gif" && fullLogoGif !== null && fullLogoDarkGif !== null ?
+                                <img title="Site logo" loading="lazy" className={classes.logo} src={usertheme === "dark" ? fullLogoGif : fullLogoDarkGif} alt="Site Logo" />
+                                :
+                                <img title="Site logo" loading="lazy" className={classes.logo} src={usertheme === "dark" ? fullLogo : fullLogoDark} alt="Site Logo" />
+                        }
                     </Link>
                     <div>
                         {userInfo.success ?

src/components/index/featured.js

@@ -22,8 +22,8 @@ const FeaturedImage = styled(Box).attrs(props => props.slug ? ({
         background-size: cover
         background-position: center;
         transition: ${props => props.transition};
-        .slick-center & {
-            transform: scale(1.16);
+        .slick-current & {
+            transform: scale(1.16) translateX(6%);
             z-index: 3;
         }
     `
@@ -34,6 +34,7 @@ const FeaturedTitle = styled(Typography)`
 `
 
 const FeaturedPremiered = styled(Typography)`
+    font-weight: 200!important;
     color: white;
 `
 
@@ -47,8 +48,8 @@ const FeaturedDivInner = styled.div`
         ${FeaturedTitle} {
             text-shadow: ${shadows.text_shadows[0]};
         }
-        .slick-center & {
-            transform: scale(1.16);
+        .slick-current & {
+            transform: scale(1.16) translateX(6%);
             bottom: 0px;
             z-index: 4;
             transform-origin: center top;
@@ -58,7 +59,7 @@ const FeaturedDivInner = styled.div`
             opacity: 0;
             transition: ${props => props.transition};
             text-shadow: ${shadows.text_shadows[0]};
-            .slick-center & {
+            .slick-current & {
                 opacity: 1;
             }
         }
@@ -68,26 +69,26 @@ const FeaturedInfoDiv = styled.div`
         opacity: 0;
         max-height: 0;
         transition: ${props => props.transition};
-        .slick-center & {
+        .slick-current & {
             opacity: 1;
             max-height: 80px;
         }
     `
 
 const GenresUl = styled.ul`
         color: white;
-        padding: 5px 10px 0;
+        padding: 2px 10px 0;
         font-size: 0.875rem;
         display: flex;
         list-style: none;
         justify-content: center;
         flex-wrap: wrap;
         li {
             font-size: .6rem;
-            padding: 5px;
-            margin: 0 5px 5px;
+            font-weight: 200;
+            padding: 2px 5px;
+            margin: 0 3px 5px;
             background: ${props => props.bgcolor};
-            border-radius: ${borders[0]}
         }
     `
 
@@ -139,15 +140,15 @@ const FeaturedDiv = styled.div`
     
     @media(max-width:${props => props.theme.breakpoints.values.sm}px) {
         ${FeaturedDivInner} {
-            .slick-center & {
+            .slick-current & {
                 transform: scale(1);
                 bottom: 10px;
                 z-index: 4;
             }
         }
 
         ${FeaturedImage} {
-            .slick-center & {
+            .slick-current & {
                 transform: scale(1);
             }
         }
@@ -160,16 +161,16 @@ const FeaturedDiv = styled.div`
 
 export const FeaturedLoading = (key, active) => {
     return (
-        <FeaturedLoadingDiv key={key} className={active ? "slick-center" : ""}>
+        <FeaturedLoadingDiv key={key} className={active ? "slick-current" : ""}>
             <Box
                 position="relative"
                 display="flex"
                 justifyContent="center"
                 flexDirection="row"
-                boxShadow={2}
+                boxShadow={0}
                 my={2}
                 mx={0}
-                p={0}>
+                px={1}>
                 <FeaturedImage boxShadow={2} bgcolor="background.level2" />
                 <FeaturedDivInner>
                     <LoadingText />

src/components/index/latestanimanga.js

@@ -199,7 +199,7 @@ export default function LatestAniManga(props) {
                                             </ContentSynopsis>
                                         </Dotdotdot>
                                         <ContentReleaseTime variant="h6">
-                                            {Format(new Date(created_time)).toUpperCase()} - {created_by}
+                                            {Format(new Date(created_time)).toUpperCase()} - {created_by ? created_by : "Silinmiş Kullanıcı"}
                                         </ContentReleaseTime>
                                     </ContentAltInfo>
                                     {props.version === "bd"
@@ -254,7 +254,7 @@ export default function LatestAniManga(props) {
                                             </ContentSynopsis>
                                         </Dotdotdot>
                                         <ContentReleaseTime variant="h6">
-                                            {Format(new Date(created_time)).toUpperCase()} - {created_by}
+                                            {Format(new Date(created_time)).toUpperCase()} - {created_by ? created_by : "Silinmiş Kullanıcı"}
                                         </ContentReleaseTime>
                                     </ContentAltInfo>
                                 </ContentInfo>

src/components/index/latestepisode.js

@@ -138,7 +138,7 @@ export default function LatestEpisode(props) {
                             </Dotdotdot> */}
                             <Dotdotdot clamp={1}>
                                 <EpisodeReleaseTime variant="subtitle2">
-                                    {Format(new Date(props.created_time)).toUpperCase()} · {props.created_by}
+                                    {Format(new Date(props.created_time)).toUpperCase()} · {props.created_by ? props.created_by : "Silinmiş Kullanıcı"}
                                 </EpisodeReleaseTime>
                             </Dotdotdot>
                         </EpisodeInfo>

src/components/index/slick.js

@@ -27,17 +27,16 @@ export default function Slick(props) {
         case "featured":
             settings = {
                 className: "center",
-                centerMode: true,
                 autoplay: true,
                 lazyload: true,
                 autoplaySpeed: 4000,
                 infinite: true,
                 centerPadding: "0",
-                slidesToShow: 3,
+                slidesToShow: 4,
                 speed: 500,
                 responsive: [
                     {
-                        breakpoint: 1024,
+                        breakpoint: 1380,
                         settings: {
                             slidesToShow: 3,
                             slidesToScroll: 3,

src/components/toastify/toast.js

@@ -22,7 +22,7 @@ function Message(props) {
 }
 
 const reload = () => {
-    window.location.href=window.location.href
+    window.location.href = window.location.href
 }
 
 export function payload(container, type, message, autoClose, onClickFunction) {
@@ -46,10 +46,10 @@ export default function ToastNotification(payload) {
     }
     toast.dismiss()
 
-    if(onClickFunction) {
+    if (onClickFunction) {
         switch (onClickFunction) {
             case "reload":
-                onClickFunction = reload
+                onClickFunction = null
                 break;
             default:
                 onClickFunction = null

src/config/front-routes.js

@@ -10,6 +10,4 @@ const mangaPage = (slug) => `/ceviriler/manga/${slug}`
 const getAnimeWatchIndex = (slug) => `/ceviriler/anime/${slug}/izle`
 const episodePage = (slug, episodeSlug) => `/ceviriler/anime/${slug}/izle${episodeSlug ? `/${episodeSlug}` : ""}`
 
-const mosLink = "https://puzzmos.com/"
-
-export { indexPage, searchPage, faqPage, recPage, adminPage, animePage, getAnimeWatchIndex, mangaPage, episodePage, mosLink }
+export { indexPage, searchPage, faqPage, recPage, adminPage, animePage, getAnimeWatchIndex, mangaPage, episodePage }

src/config/theming/dark/index.js

@@ -77,6 +77,23 @@ const theme = {
                 backgroundColor: '#212121'
             }
         },
+        MuiFormLabel: {
+            root: {
+                '&$focused': {
+                    color: '#FFF',
+                }
+            },
+            focused: {}
+        },
+        MuiOutlinedInput: {
+            root: {
+                '&$focused $notchedOutline': {
+                    color: '#FFF',
+                    borderColor: '#FFF'
+                }
+            },
+            focused: {}
+        },
         MuiAppBar: {
             colorPrimary: {
                 backgroundColor: '#333',

src/config/theming/images.js

@@ -1,6 +1,3 @@
-import logo from '../../static/logo.png'
-import fullLogo from '../../static/fullLogo.png'
-import fullLogoDark from '../../static/fullLogo-dark.png'
 import fourOhFourGif from '../../static/404.gif'
 
 import anchorI from '../../static/anchor-i.png'
@@ -11,4 +8,34 @@ import paintbrushI from '../../static/paint-brush-i.png'
 import videoI from '../../static/video-i.png'
 import bluray from '../../static/bluraylogo.png'
 
-export { logo, fullLogo, fullLogoDark, fourOhFourGif, anchorI, bookI, calendarI, computerI, paintbrushI, videoI, bluray }
+// Değişken görselleri tanımla.
+var logo = null
+var fullLogo = null
+var fullLogoDark = null
+var fullLogoGif = null
+var fullLogoDarkGif = null
+
+// Tam logonun dosyasını dene. Varsa içeri al.
+try {
+    logo = require('../../static/logo.png');
+} catch (err) {
+    console.error('Tam logo bulunamadı.')
+}
+
+// Header logosunun dosyalarını dene. Varsa içeri al, birisi yoksa hata ver.
+try {
+    fullLogo = require('../../static/fullLogo.png');
+    fullLogoDark = require('../../static/fullLogo-dark.png');
+} catch (err) {
+    console.error('Header logosu bulunamadı.')
+}
+
+// GIF logosunun dosyalarını dene. Varsa içeri al, birisi yoksa hata ver ve header'da statik logoyu göster. (/components/header/header.js)
+try {
+    fullLogoGif = require('../../static/fullLogo.gif');
+    fullLogoDarkGif = require('../../static/fullLogo-dark.gif');
+} catch (err) {
+    console.warn('GIF logo bulunamadı.')
+}
+
+export { logo, fullLogo, fullLogoGif, fullLogoDark, fullLogoDarkGif, fourOhFourGif, anchorI, bookI, calendarI, computerI, paintbrushI, videoI, bluray }

src/config/theming/light/index.js

@@ -74,7 +74,6 @@ const theme = {
         }
     },
     overrides: {
-        // Style sheet name ⚛️
         MuiAppBar: {
             colorPrimary: {
                 backgroundColor: 'rgb(236,236,236)'